/*
 * Skeleton — каркас itarasov: hero + navbar (итерация 0).
 * Базовые переменные: цвет, шрифт — меняйте здесь для экспериментов по всему сайту.
 */

/* ==================================================
   Базовые переменные (цвет, шрифт)
   Меняйте здесь — подставятся во все блоки (герой, плашки, меню, заглушки).
   ================================================== */
:root {
	/* Яркий акцент: только кнопки (и по запросу — другие вызывающие элементы) */
	--color-primary: #845bfc;
	--color-primary-hover: #7043e8;
	/* Пастельный оттенок от primary: блок под фото, обводка плашек, круг иконки, линия-разделитель, акценты меню и ссылок */
	--color-primary-pastel: #c9b8fd;
	/* Единый цвет основного текста */
	--color-dark: #333;
	--color-text: var(--color-dark);

	/* Высота фиксированного меню: должна совпадать с реальной высотой навбара. Меньше — hero залезает под меню. */
	--navbar-height: 90px;

	/* Шрифт по умолчанию (в классах задаётся только размер) */
	--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Цвет текста: основной (через --color-dark) и приглушённый */
	--color-text-muted: #555;

	/* Типографика карточек и секций (единая шкала с главной страницы) */
	--font-size-section-title: 28px;
	--font-size-card-title: 18px;
	--font-size-card-body: 15px;
	--line-height-card-body: 1.5;
}

/* Global */
html {
	overflow-x: hidden;
	width: 100%;
	/* При переходе по якорю разделитель секции прилипает к низу меню */
	scroll-padding-top: var(--navbar-height);
}
body {
	margin: 0;
	padding: 0;
	color: var(--color-text);
	background: #fff;
	font-family: var(--font-family-base);
}
section { position: relative; }
a { color: var(--color-text); text-decoration: none; }
a:hover { text-decoration: none; }
ul, li { list-style: none; margin: 0; padding: 0; }

/* Список с буллитами «—» (перенесено с itarasov_local.ru) */
.list-dash {
	list-style: none;
	padding-left: 0;
	text-align: left;
}
.list-dash li {
	position: relative;
	padding-left: 1.2em;
}
.list-dash li::before {
	content: "•";
	position: absolute;
	left: 0;
}
.list-numbered {
	list-style-type: decimal;
	padding-left: 1.5em;
}
.list-numbered li {
	list-style: inherit;
}

.section-padding {
	padding-top: 50px;
	padding-bottom: 50px;
}

/* ==================================================
   Hero (section-hero / section-banner)
   ================================================== */
#section-hero {
	position: relative;
	scroll-margin-top: var(--navbar-height);
	box-sizing: border-box;
	/* Не меньше высоты экрана под меню, чтобы hero занимал один экран; без 100vh — не было бы пустоты 102px внизу */
	min-height: calc(100vh - var(--navbar-height));
	--hero-roles-gap: 20px;
}

.hero-block {
	position: relative;
	min-height: 420px;
	overflow: hidden;
}

.hero-bg {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: #2b2933;
	clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
	z-index: 0;
}

.hero-row {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	min-height: 420px;
	padding: 40px 0 80px;
}

.hero-photo-wrap {
	flex: 0 0 auto;
	margin-right: 40px;
}

.hero-photo {
	max-height: 320px;
	width: auto;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.hero-content {
	flex: 1 1 320px;
	max-width: 480px;
	color: #fff;
}

.hero-name {
	font-size: 36px;
	line-height: 1.2;
	font-weight: 700;
	color: #fff;
	margin: 0 0 8px 0;
}

.hero-sep {
	font-family: var(--font-family-base);
	font-size: 14px;
	color: var(--color-text);
	display: inline-block;
	margin: 0 0 8px 0;
}

.hero-role {
	font-family: var(--font-family-base);
	font-size: 22px;
	line-height: 1.3;
	color: var(--color-text);
	margin: 0 0 12px 0;
	font-weight: 600;
}

.hero-tagline {
	font-family: var(--font-family-base);
	font-size: 16px;
	color: var(--color-text);
	margin: 0 0 24px 0;
}

.hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.btn-hero {
	display: inline-block;
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	border-radius: 4px;
	transition: background 0.2s, color 0.2s;
}

.btn-hero-outline {
	background: transparent;
	border: 2px solid #fff;
	color: #fff;
	text-decoration: none;
}

.btn-hero-outline:hover,
.btn-hero-outline:focus {
	background: #fff;
	color: #2b2933;
	text-decoration: none;
}

/* ==================================================
   Navbar (section-menu)
   ================================================== */
.section-menu {
	position: fixed;
	top: 0; left: 0; right: 0;
	width: 100%;
	z-index: 9999;
}

body {
	overflow: hidden;
}

/* Контент прокручивается в отдельном блоке под меню, не заходит под него */
#page-scroll {
	position: fixed;
	top: var(--navbar-height);
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.navbar-default {
	background: #fff;
	border: 0;
	border-radius: 0;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.navbar-default .navbar-nav > li > a {
	text-transform: uppercase;
	font-weight: 700;
	padding: 30px 20px;
	font-size: 16px;
	color: var(--color-text);
	line-height: 30px;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
	color: var(--color-primary-pastel);
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
	color: var(--color-primary-pastel);
	background: transparent;
}

.main-nav {
	width: 100%;
	margin: 0 auto;
}

.navbar-brand img {
	max-height: 60px;
	width: auto;
}

.navbar-brand_text {
	display: none;
}

/* Меню: кнопка CTA и выпадающий список (дизайн index.php) */
.nav-cta {
	margin-left: 8px;
}

.btn-nav-cta {
	background: var(--color-primary) !important;
	color: #fff !important;
	border: none !important;
	padding: 10px 20px !important;
	border-radius: 7px;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 1.4;
	margin-top: 18px;
	transition: background 0.2s;
}

@media (max-width: 767px) {
	.navbar-default .navbar-nav .dropdown-menu {
		background: #f9f9f9;
		border: none;
	}
}

.btn-nav-cta:hover,
.btn-nav-cta:focus {
	background: var(--color-primary-hover) !important;
	color: #fff !important;
}

.navbar-default .navbar-nav > li.dropdown > a .caret {
	border-top-color: var(--color-text);
	border-bottom-color: var(--color-text);
}

.navbar-default .navbar-nav > li.dropdown.open > a .caret {
	border-top-color: var(--color-primary-pastel);
	border-bottom-color: var(--color-primary-pastel);
}

.navbar-default .navbar-nav > li.dropdown.open > a,
.navbar-default .navbar-nav > li.dropdown.open > a:hover,
.navbar-default .navbar-nav > li.dropdown.open > a:focus {
	background: transparent;
	color: var(--color-primary-pastel);
}

.navbar-default .navbar-nav .dropdown-menu {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 4px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.navbar-default .navbar-nav .dropdown-menu li a {
	color: var(--color-text);
	padding: 12px 20px;
}

.navbar-default .navbar-nav .dropdown-menu li a:hover,
.navbar-default .navbar-nav .dropdown-menu li a:focus {
	background: #f8f8f8;
	color: var(--color-primary-pastel);
}

@media (max-width: 767px) {
	.nav-cta { margin-left: 0; margin-top: 10px; }
	.btn-nav-cta { margin-top: 0; display: inline-block; }
}

/* ==================================================
   Hero светлый (целевой макет: блок = размер фото, смещение 20px)
   ================================================== */
/* Отступ сверху: именно от фиолетового фона (меню → верх .hero-shape).
   Зазор задаётся --hero-menu-gap; padding и margin дублируют отступ, чтобы он точно применился. */
.hero-section-light {
	--hero-shape-offset: 24px;
	--hero-menu-gap: 20px;
	--hero-col-gap: 30px;
	background: #fff;
	padding-top: calc(var(--hero-menu-gap) + var(--hero-shape-offset));
	padding-bottom: 23px;
}

.hero-row-light {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hero-col-gap);
	min-height: 0;
	padding: 0;
	margin-left: 0;
	margin-right: 0;
}

/* Левая колонка: прижата влево, без отступа; по ширине изображения + фон (shape) слева от фото */
.hero-col-image {
	flex: 0 0 auto;
	position: relative;
	margin-top: var(--hero-menu-gap);
	padding-left: 0;
	max-width: 100%;
}

/* Обёртка по размеру фото; фиолетовый блок того же размера, смещён вверх и влево */
.hero-shape-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	margin: 0;
}

.hero-shape {
	position: absolute;
	top: calc(-1 * var(--hero-shape-offset));
	left: calc(-1 * var(--hero-shape-offset));
	width: 100%;
	height: 100%;
	background: var(--color-primary-pastel);
	border-radius: 10px;
	z-index: 0;
}

.hero-image {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	object-fit: cover;
	object-position: 50% 0;
	border-radius: 10px;
	border: 1px solid #e8e8e8;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	background: #fafafa;
}

/* Правая колонка: вся оставшаяся ширина после отступа */
.hero-col-content {
	flex: 1 1 0;
	min-width: 0;
	padding-left: 0;
}

.hero-heading {
	font-family: var(--font-family-base);
	font-size: 28px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 20px;
	text-transform: none;
}

.hero-text {
	font-family: var(--font-family-base);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text-muted);
	margin: 0 0 24px;
}

.hero-link {
	color: var(--color-primary-pastel);
	text-decoration: none;
}

.hero-link:hover {
	text-decoration: underline;
}

.btn-hero-primary {
	display: inline-block;
	background: var(--color-primary);
	color: #fff;
	border: none;
	padding: 16px 31px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 7px;
	text-decoration: none;
	transition: background 0.2s;
	margin-top: 10px;
}

.btn-hero-primary:hover,
.btn-hero-primary:focus {
	background: var(--color-primary-hover);
	color: #fff;
	text-decoration: none;
}

.hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin: 10px 30px 0 30px;
	/* max-width: 520px; */

}
.hero-buttons .btn-hero-primary,
.hero-buttons .btn-hero-outline {
	margin-top: 0;
	margin-left: 0;
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
	box-sizing: border-box;
}
.btn-hero-outline {
	display: inline-block;
	background: #fff;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
	padding: 14px 29px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 7px;
	text-decoration: none;
	transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.btn-hero-outline:hover,
.btn-hero-outline:focus {
	background: var(--color-primary-pastel);
	color: var(--color-primary-hover);
	border-color: var(--color-primary);
	text-decoration: none;
}

/* Подзаголовок «для кого консультации» — высота не меньше .hero-role (22px) */
/* Плашки «опыт» в стиле иконка + длительность + описание */
.hero-experience-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin: 40px 0 0;
	padding: 0;
}
.hero-experience-plate {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--font-family-base);
	background: #f8f8f8;
	border-radius: 12px;
	padding: 16px 20px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.hero-experience-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--color-primary-pastel);
	color: #fff;
}
.hero-experience-icon svg {
	width: 26px;
	height: 26px;
}
.hero-experience-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}
.hero-experience-value {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
}
.hero-experience-desc {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--color-text-muted);
}

.hero-subheading {
	font-family: var(--font-family-base);
	font-size: 22px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--color-text);
	text-align: center;
	margin: 30px 0 50px;
	padding: 0;
}

/* Блок из 4 плашек-ролей: левый край как у всего контента (одна линия по сайту) */
#section-hero .hero-roles-row {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
}
#section-hero .hero-roles-row > [class*="col-"] {
	flex: 1 1 0;
	min-width: 0;
	max-width: none;
}

.hero-role-card {
	background: #f5f5f5;
	border-radius: 16px;
	border-top: 4px solid var(--color-primary-pastel);
	padding: 50px 20px 24px;
	margin-left: calc(var(--hero-roles-gap, 20px) / 2);
	margin-right: calc(var(--hero-roles-gap, 20px) / 2);
	margin-bottom: 24px;
	text-align: center;
	position: relative;
	min-height: 220px;
	box-sizing: border-box;
}

.hero-role-icon-wrap {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
}

.hero-role-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-primary-pastel);
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	overflow: hidden;
}

.hero-role-icon img,
.hero-role-icon svg {
	width: 28px;
	height: 28px;
	object-fit: contain;
	display: block;
}
.hero-role-icon svg {
	flex-shrink: 0;
}

.hero-role-name {
	font-family: var(--font-family-base);
	font-size: 18px;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 12px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.hero-role-desc {
	font-family: var(--font-family-base);
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-text-muted);
	margin: 0;
}

@media (max-width: 991px) {
	.hero-col-image {
		flex: 0 0 100%;
		margin-bottom: 30px;
		padding-left: 0;
	}
	.hero-col-content {
		flex: 0 0 100%;
		padding-left: 0;
		text-align: center;
	}
	.hero-shape-wrap {
		margin-left: auto;
		margin-right: auto;
	}
	.hero-image {
		max-width: 360px;
		margin: 0 auto;
	}
	/* На планшете/мобиле ряд карточек — на всю ширину, выравнивание по фиолетовому блоку не нужно */
	#section-hero .hero-roles-row {
		width: 100%;
		margin-left: 0;
		flex-wrap: wrap;
	}
	#section-hero .hero-roles-row > [class*="col-"] {
		flex: 0 0 auto;
		min-width: 0;
		max-width: none;
	}
}

@media (max-width: 767px) {
	.hero-section-light {
		--hero-menu-gap: 40px;
		padding-bottom: 40px;
	}
	.hero-heading {
		font-size: 22px;
	}
	.hero-image {
		max-width: 300px;
		margin: 0 auto;
	}
	.hero-subheading {
		font-size: 22px;
		margin: 36px 0 24px;
	}
	.hero-role-card {
		padding-top: 44px;
		min-height: 200px;
	}
}

/* ==================================================
   Секция «Навыки» (перенесено с itarasov_local.ru)
   ================================================== */
/* Линия-разделитель на стыке секций: по ширине секции, основной цвет, тень (кроме hero) */
/* [id^="section-"]:not(#section-hero)::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--color-primary-pastel);
	box-shadow: 0 2px 6px rgba(201, 184, 253, 0.4);
	pointer-events: none;
} */

#section-skills {
	/* background-color: #f9f9f9; 
	padding-top: 20px; */
	--skills-block-1-height: 480px;
	--skills-block-2-height: 200px;
	--skills-block-3-height: 200px;
	--skills-block-4-height: 200px;
	--skills-block-5-height: 530px;
	--skills-block-6-height: 100px;
	--skills-block-7-height: 160px;
	--skills-block-8-height: 160px;
}
#section-skills .skills-grid {
	display: flex;
	flex-wrap: wrap;
	margin-left: -15px;
	margin-right: -15px;
}
#section-skills .skills-grid .col-md-6 {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding-left: 15px;
	padding-right: 15px;
}
#section-skills .skills-block {
	padding: 25px 25px 30px;
	margin-bottom: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(202 186 253);
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	width: 100%;
}
/* Заголовок секции: прижат влево, вертикальная черта основного цвета слева (единая шкала с hero) */
.heading-title {
	position: relative;
	text-align: left;
	padding-left: 14px;
	margin: 0 0 24px;
	font-family: var(--font-family-base);
	font-size: var(--font-size-section-title);
	font-weight: 700;
	line-height: 1.35;
	color: var(--color-text);
}
.heading-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	bottom: 0.15em;
	width: 4px;
	background: var(--color-primary-pastel);
	border-radius: 2px;
}
#section-skills .skills-block h3 {
	font-family: var(--font-family-base);
	font-size: var(--font-size-card-title);
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--color-text);
	margin: 0 0 12px;
}
#section-skills .skills-block ul {
	list-style: none;
	padding: 0;
	/* margin: 0 0 20px 0; */
}
#section-skills .skills-block ul li {
	position: relative;
	padding-left: 15px;
	margin-bottom: 8px;
	font-family: var(--font-family-base);
	font-size: var(--font-size-card-body);
	line-height: var(--line-height-card-body);
	font-weight: 400;
	color: var(--color-text-muted);
}
#section-skills .skills-block ul li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--color-text-muted);
	font-weight: bold;
}
#section-skills .skills-block-img {
	text-align: center;
	margin-top: auto;
	/* padding-top: 15px; */
	min-height: 80px;
}
#section-skills .skills-block-img img {
	max-width: 100%;
	height: auto;
	max-height: 250px;
	object-fit: contain;
	filter: grayscale(100%) contrast(1.1);
}
#section-skills .skills-block-img.empty {
	display: none;
}

#section-skills .skills-block-1 { /*background-color: #FDF4F3 !important; */ min-height: var(--skills-block-1-height); }
#section-skills .skills-block-2 { /*background-color: #F1FAE7 !important; */ min-height: var(--skills-block-2-height); }
#section-skills .skills-block-3 { /*background-color: #FFFCEF !important; */ min-height: var(--skills-block-3-height); }
#section-skills .skills-block-4 { /*background-color: #FCF9F3 !important; */ min-height: var(--skills-block-4-height); }
#section-skills .skills-block-5 { /*background-color: #F6F3FB !important; */ min-height: var(--skills-block-5-height); }
#section-skills .skills-block-6 { /*background-color: #F3F8FB !important; */ min-height: var(--skills-block-6-height); }
#section-skills .skills-block-7 { /*background-color: #FEF8F6 !important; */ min-height: var(--skills-block-7-height); }

/* ==================================================
   section-education (фон и картинка — из itarasov, типографика — глобальная)
   ================================================== */
#section-education {
	background-color: transparent;
}
#section-education .education-content {
	align-items: flex-start;
}
#section-education .education-text {
	color: var(--color-text);
}
#section-education .education-block {
	margin-bottom: 35px;
}
#section-education .education-block:last-child {
	margin-bottom: 0;
}
#section-education .education-block h3 {
	font-family: var(--font-family-base);
	font-size: var(--font-size-card-title);
	line-height: 1.35;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 8px;
}
#section-education .education-block p {
	font-family: var(--font-family-base);
	font-size: var(--font-size-card-body);
	line-height: var(--line-height-card-body);
	font-weight: 400;
	color: var(--color-text-muted);
	margin: 0;
	padding-left: 20px;
}
#section-education .education-image-col {
	display: flex;
	align-items: flex-start;
	justify-content: stretch;
	/* Поднять блок с картинкой на уровень заголовка «Образование» (высота заголовка + margin 24px ≈ 62px) */
	margin-top: -62px;
}
#section-education .education-image-wrap {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	/* background: var(--color-primary-pastel); */
	box-shadow: 0 2px 10px rgba(202 186 253);
	border-radius: 12px;
	padding: 24px;
	box-sizing: border-box;
}
#section-education .education-image-wrap img {
	width: 100%;
	height: auto;
	max-height: 320px;
	object-fit: contain;
}

/* ==================================================
   section-experience (лесенка: фон и картинки — itarasov, типографика — глобальная)
   ================================================== */
#section-experience {
	background-color: #fff;
}
#section-experience .experience-timeline {
	position: relative;
	--exp-right-margin: 0px;
	--exp-offset: 150px;
	--exp-gap: 25px;
	--exp-block-width: 600px;
}
#section-experience .experience-block {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin-bottom: var(--exp-gap);
	width: var(--exp-block-width);
	max-width: 100%;
	margin-left: auto;
	position: relative;
	z-index: 1;
}
#section-experience .experience-block:nth-child(3) { margin-right: calc(0 * var(--exp-offset) + var(--exp-right-margin)); }
#section-experience .experience-block:nth-child(4) { margin-right: calc(1 * var(--exp-offset) + var(--exp-right-margin)); }
#section-experience .experience-block:nth-child(5) { margin-right: calc(2 * var(--exp-offset) + var(--exp-right-margin)); }
#section-experience .experience-block:nth-child(6) { margin-right: calc(3 * var(--exp-offset) + var(--exp-right-margin)); }
#section-experience .experience-block:nth-child(7) { margin-right: calc(4 * var(--exp-offset) + var(--exp-right-margin)); }
#section-experience .exp-period {
	display: block;
	font-family: var(--font-family-base);
	font-size: var(--font-size-card-title);
	font-weight: 700;
	color: var(--color-text);
	text-align: left;
	margin: 0 0 8px 0;
	text-transform: none;
}
#section-experience .exp-card {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	flex: 1;
	min-width: 0;
	padding: 20px 25px;
	border-radius: 8px;
	border-left-width: 4px;
	border-left-style: solid;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
#section-experience .exp-logo-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 120px;
	min-height: 60px;
	margin-right: 20px;
}
#section-experience .exp-logo-wrap.empty {
	display: none;
}
#section-experience .exp-logo {
	display: block;
	max-height: 50px;
	max-width: 100px;
	object-fit: contain;
}
#section-experience .exp-text {
	flex: 1;
	min-width: 0;
}
#section-experience .exp-border-orange { border-left-color: #e67e22; }
#section-experience .exp-border-blue { border-left-color: #34495e; }
#section-experience .exp-border-red { border-left-color: #c0392b; }
#section-experience .exp-border-lightblue { border-left-color: #bae3ff; }
#section-experience .exp-border-green { border-left-color: #27ae60; }
#section-experience .exp-company {
	font-family: var(--font-family-base);
	font-size: var(--font-size-card-title);
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 4px 0;
	text-transform: none;
	line-height: 1.4;
}
#section-experience .exp-role,
#section-experience .exp-roles .exp-role {
	font-family: var(--font-family-base);
	font-size: var(--font-size-card-body);
	line-height: var(--line-height-card-body);
	font-weight: 400;
	color: var(--color-text-muted);
	margin: 0 0 4px 0;
}
#section-experience .exp-roles .exp-role:last-child {
	margin-bottom: 0;
}
#section-experience .experience-img {
	position: absolute;
	z-index: 0;
	pointer-events: none;
}
#section-experience .experience-img.empty {
	display: none;
}
#section-experience .experience-img img {
	max-width: 200px;
	height: auto;
	opacity: 0.9;
}
#section-experience .experience-img-top {
	top: 80px;
	left: 20px;
}
#section-experience .experience-img-bottom {
	bottom: 60px;
	right: 20px;
}

/* ==================================================
   section-portfolio (фон и блоки — itarasov, типографика — глобальная)
   ================================================== */
#section-portfolio {
	/* background-color: #f5f5f5; */
	--portfolio-block-1-height: 300px;
	--portfolio-block-2-height: 360px;
	--portfolio-block-3-height: 200px;
	--portfolio-block-4-height: 240px;
	--portfolio-block-5-height: 600px;
	--portfolio-block-6-height: 275px;
	--portfolio-block-7-height: 192px;
	--portfolio-block-8-height: 200px;
}
#section-portfolio .portfolio-grid {
	display: flex;
	flex-wrap: wrap;
	margin-left: -15px;
	margin-right: -15px;
}
#section-portfolio .portfolio-grid .col-md-6 {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding-left: 15px;
	padding-right: 15px;
}
#section-portfolio .portfolio-block {
	padding: 25px 25px 30px;
	margin-bottom: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(202 186 253);
	display: flex;
	flex-direction: column;
	align-self: stretch;
	width: 100%;
	min-height: 260px;
}
#section-portfolio .portfolio-block h3 {
	font-family: var(--font-family-base);
	font-size: var(--font-size-card-title);
	line-height: 1.35;
	font-weight: 700;
	text-transform: none;
	color: var(--color-text);
	margin: 0 0 12px;
}
#section-portfolio .portfolio-list,
#section-portfolio .portfolio-block p.portfolio-list {
	font-family: var(--font-family-base);
	font-size: var(--font-size-card-body);
	line-height: var(--line-height-card-body);
	font-weight: 400;
	color: var(--color-text-muted);
	margin: 0 0 8px;
}
#section-portfolio .portfolio-list {
	/* padding-left: 20px; */
	margin-bottom: 12px;
}

/* Список ul/ol с классом portfolio-list — такое же оформление буллетов, как в .skills-block */
#section-portfolio ul.portfolio-list,
#section-portfolio ol.portfolio-list {
	list-style: none;
	padding: 0;
	margin: 0 0 12px 0;
}
#section-portfolio .portfolio-list li {
	position: relative;
	padding-left: 15px;
	margin-bottom: 8px;
	font-family: var(--font-family-base);
	font-size: var(--font-size-card-body);
	line-height: var(--line-height-card-body);
	font-weight: 400;
	color: var(--color-text-muted);
}
#section-portfolio .portfolio-list li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--color-text-muted);
	font-weight: bold;
}

/* Вложенный ul внутри блока (если появятся в разметке) */
#section-portfolio .portfolio-list ul {
	list-style: none;
	padding: 0;
	margin-bottom: 6px;
}
#section-portfolio .portfolio-list ul li {
	position: relative;
	padding-left: 15px;
	margin-bottom: 8px;
	font-family: var(--font-family-base);
	font-size: var(--font-size-card-body);
	line-height: var(--line-height-card-body);
	font-weight: 400;
	color: var(--color-text-muted);
}
#section-portfolio .portfolio-list ul li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--color-text-muted);
	font-weight: bold;
}

/* #section-portfolio .portfolio-list li {
	margin-bottom: 6px;
} */
.portfolio-link {
	color: var(--color-primary-pastel);
}

#section-portfolio .portfolio-block-img-bottom .portfolio-img-wrap {
	text-align: center;
	margin-top: 15px;
	padding-top: 15px;
}
#section-portfolio .portfolio-block-img-bottom .portfolio-img-wrap img {
	max-width: 100%;
	height: auto;
	max-height: 300px;
	object-fit: contain;
	filter: grayscale(100%) contrast(1.1);
}
#section-portfolio .portfolio-block-img-bottom .portfolio-img-wrap.empty {
	display: none;
}
#section-portfolio .portfolio-block-1 { /*background-color: #ffdede !important; border: 1px solid #eee; */ min-height: var(--portfolio-block-1-height); }
#section-portfolio .portfolio-block-2 { /*background-color: #ecffd7 !important; border: 1px solid #eee; */ min-height: var(--portfolio-block-2-height); }
#section-portfolio .portfolio-block-3 { /*background-color: #F3F8FB !important; border: 1px solid #eee; */ min-height: var(--portfolio-block-3-height); }
#section-portfolio .portfolio-block-4 { /*background-color: #def4ff !important; border: 1px solid #eee; */ min-height: var(--portfolio-block-4-height); }
#section-portfolio .portfolio-block-5 { /*background-color: #cfffce !important; border: 1px solid #eee; */ min-height: var(--portfolio-block-5-height); }
#section-portfolio .portfolio-block-6 { /*background-color: #FEF8F6 !important; border: 1px solid #eee; */ min-height: var(--portfolio-block-6-height); }
#section-portfolio .portfolio-block-7 { /*background-color: #FEF8F6 !important; border: 1px solid #eee; */ min-height: var(--portfolio-block-7-height); }
#section-portfolio .portfolio-block-8 { /*background-color: #FEF8F6 !important; border: 1px solid #eee; */ min-height: var(--portfolio-block-8-height); }

/* ==================================================
   section-service (форма и блок — оформление как hero-role-card)
   ================================================== */
/* Две колонки без отступов по краям, разделение только по центру (как в портфолио); высота колонок одинаковая */
#section-service .service-two-cols {
	display: flex;
	flex-wrap: wrap;
	margin-left: -15px;
	margin-right: -15px;
	align-items: stretch;
}
#section-service .service-two-cols .consultation-form-col {
	flex: 0 0 calc(50% - 7.5px);
	max-width: calc(50% - 7.5px);
	padding-left: 0;
	padding-right: 15px;
	box-sizing: border-box;
	float: none;
	margin: 0;
}
#section-service .service-two-cols .service-plaques-col {
	flex: 0 0 calc(50% - 7.5px);
	max-width: calc(50% - 7.5px);
	padding-left: 15px;
	padding-right: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
@media (max-width: 991px) {
	#section-service .service-two-cols .consultation-form-col,
	#section-service .service-two-cols .service-plaques-col {
		flex: 0 0 100%;
		max-width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* Плашка услуги — оформление как hero-role-card + иконка консультации; по высоте колонка плашек = форме, плашки делят высоту поровну */
#section-service .service-plaques-col .service-plaque {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
.service-plaque {
	background: #f5f5f5;
	border-radius: 16px;
	border-top: 4px solid var(--color-primary-pastel);
	padding: 50px 20px 24px;
	margin-bottom: 0;
	text-align: center;
	position: relative;
	box-sizing: border-box;
	box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
#section-service .service-two-cols .service-plaques-col {
	align-items: stretch;
}
.service-plaque:last-child {
	margin-bottom: 0;
}
.service-plaque-icon-wrap {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
}
.service-plaque-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-primary-pastel);
	color: #fff;
	font-size: 20px;
	overflow: hidden;
}
.service-plaque-icon svg {
	width: 28px;
	height: 28px;
	object-fit: contain;
	display: block;
	flex-shrink: 0;
}
.service-plaque-title {
	font-family: var(--font-family-base);
	font-size: var(--font-size-card-title);
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--color-text);
	margin: 20px 0 40px;
}
.service-plaque-body {
	background: transparent;
	padding: 0;
	text-align: left;
}
.service-plaque-body .list-dash {
	font-family: var(--font-family-base);
	font-size: var(--font-size-card-body);
	line-height: var(--line-height-card-body);
	color: var(--color-text-muted);
	margin: 0;
	padding-left: 1.2em;
	list-style: none;
}
.service-plaque-body .list-dash li {
	position: relative;
	padding-left: 0;
	margin-bottom: 8px;
}
.service-plaque-body .list-dash li:last-child {
	margin-bottom: 0;
}
.service-plaque-body .list-dash li::before {
	content: "•";
	position: absolute;
	left: -1.2em;
	color: var(--color-primary-pastel);
}
#section-service .service-subtitle {
	font-family: var(--font-family-base);
	font-size: var(--font-size-card-title);
	font-weight: 700;
	color: var(--color-text);
	margin: 24px 0 12px;
}
#section-service .service-subtitle:first-of-type {
	margin-top: 0;
}
#section-service .list-dash,
#section-service .list-numbered {
	font-size: var(--font-size-card-body);
	line-height: var(--line-height-card-body);
	color: var(--color-text-muted);
	margin-bottom: 16px;
}
#section-service .row + .row {
	margin-top: 3.5rem;
}
.consultation-form-block {
	border: 2px solid var(--color-primary-pastel);
	border-radius: 12px;
	box-shadow: 0 6px 24px rgba(132, 91, 252, 0.18);
	padding: 18px 30px 18px;
	background: #fff;
}
.consultation-form-block .pricing-title {
	text-align: center;
	margin-bottom: 0;
}
.consultation-form-block .pricing-title h3 {
	text-align: center;
	font-family: var(--font-family-base);
	font-size: var(--font-size-section-title);
	font-weight: 700;
	color: var(--color-text);
	margin: 0;
}
.consultation-form-block .consultation-callouts {
	margin: 10px 0 12px;
	padding: 8px 0;
}
.consultation-form-block .consultation-free {
	font-family: var(--font-family-base);
	font-size: var(--font-size-section-title);
	font-weight: 700;
	color: var(--color-primary);
	margin: 0;
}
.consultation-form-block .consultation-price {
	font-family: var(--font-family-base);
	font-size: var(--font-size-card-title);
	font-weight: 600;
	color: var(--color-text-muted);
	margin: 0;
}
.consultation-form-block .consultation-form .input-group,
.consultation-form-block .consultation-form .form-group,
.consultation-form-block .consultation-form .checkbox {
	margin-bottom: 14px;
}
.consultation-form-block .consultation-form .input-group .input-group-addon,
.consultation-form-block .consultation-form .form-control,
.consultation-form-block .consultation-form .form-group .control-label,
.consultation-form-block .consultation-form .checkbox label {
	font-size: var(--font-size-card-body);
	line-height: 1.45;
}
.consultation-form-block .consultation-form .form-control {
	height: auto;
	min-height: 44px;
}
.consultation-form-block .consultation-form .input-group-addon {
	min-width: 44px;
	padding: 10px 14px;
}
.consultation-form-block .consultation-form #consultation_submit {
	display: block;
	margin: 20px auto 0;
	min-width: 220px;
	padding: 16px 31px;
	text-align: center;
	box-sizing: border-box;
}
.consultation-form-block .consultation-form #consultation_submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.consultation-form-block .consultation-form .input-group.has-error .form-control {
	border-color: #a94442;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.consultation-form-block .consultation-form .input-group.has-success .form-control {
	border-color: #3c763d;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.section-btn {
	background: var(--color-primary);
	border: 0;
	color: #fff;
	padding: 12px 24px;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
}
.section-btn:hover,
.section-btn:focus {
	background: var(--color-primary-hover);
	color: #fff;
}

/* ==================================================
   section-reviews (фон и карточки — itarasov, типографика — глобальная)
   ================================================== */
#section-reviews {
	background-color: #f5f5f5;
}
#section-reviews .reviews-carousel .item {
	padding: 10px 5px;
}
.review-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.06);
	padding: 24px 22px 20px;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.review-quote-mark {
	font-size: 40px;
	line-height: 1;
	color: var(--color-primary-pastel);
	margin-bottom: 8px;
}
.review-text {
	font-family: var(--font-family-base);
	font-size: var(--font-size-card-body);
	line-height: 1.6;
	color: var(--color-text-muted);
	font-weight: 400;
	margin: 0 0 18px 0;
}
.review-author {
	margin-top: auto;
	display: flex;
	align-items: center;
}
.review-author-avatar {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 14px;
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px rgba(202 186 253);
}
.review-author-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.review-author-meta {
	min-width: 0;
}
.review-author-name {
	font-family: var(--font-family-base);
	font-size: var(--font-size-card-title);
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 4px 0;
}
.review-author-role {
	font-family: var(--font-family-base);
	font-size: var(--font-size-card-body);
	color: var(--color-text-muted);
	margin: 0;
}
.reviews-carousel .owl-dots {
	margin-top: 18px;
	text-align: center;
}
.reviews-carousel .owl-dot span {
	width: 10px;
	height: 10px;
	margin: 3px;
	background: #d0d0d0;
	display: block;
	border-radius: 50%;
	transition: all 0.3s ease;
}
.reviews-carousel .owl-dot.active span {
	background: var(--color-primary-pastel);
	transform: scale(1.1);
}

/* ==================================================
   section-contact (контакты: заголовок слева, блоки и кнопка справа)
   ================================================== */
#section-contact {
	position: relative;
	background-color: #EBF2F6;
	overflow: hidden;
}
.contact-bg-image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 45%;
	max-width: 520px;
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;
	pointer-events: none;
	opacity: 0.12;
}
/* Фоновую картинку справа задать так: .contact-bg-image { background-image: url('Images/contact-bg.png'); } */
#section-contact .contact-row {
	align-items: center;
	position: relative;
	z-index: 1;
}
#section-contact .contact-heading-col {
	padding-right: 30px;
}
#section-contact .contact-heading {
	margin: 0;
}
#section-contact .contact-content-col {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 420px;
}
.contact-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
	max-width: 420px;
	margin: 0;
	padding: 0;
	align-items: stretch;
}
.contact-buttons .btn {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}
.contact-block {
	border-radius: 10px;
	padding: 16px 20px;
	border-left: 4px solid;
	background: rgba(255,255,255,0.6);
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.contact-block-label {
	font-family: var(--font-family-base);
	font-size: var(--font-size-card-title);
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 6px;
}
.contact-block-value {
	font-family: var(--font-family-base);
	font-size: var(--font-size-card-body);
	line-height: 1.45;
	color: var(--color-text);
	margin: 0;
}
.contact-block-value a {
	color: var(--color-primary-pastel);
	text-decoration: none;
}
.contact-block-value a:hover {
	text-decoration: underline;
}
.contact-block-email {
	border-left-color: var(--color-primary-pastel); /* #e67e22; */
}
.contact-block-social {
	border-left-color: var(--color-primary-pastel); /* #3498db; */
}
#section-contact .contact-download-btn {
	align-self: flex-start;
	margin-top: 8px;
}

/* ==================================================
   section-footer (темнее, чем section-contact)
   ================================================== */
#section-footer {
	background-color: #b8c9d4;
	padding-top: 24px;
	padding-bottom: 24px;
}
#section-footer .footer-copyright {
	font-family: var(--font-family-base);
	font-size: var(--font-size-card-body);
	color: var(--color-text);
	margin: 0;
}

/* Stub sections */
.section-stub {
	min-height: 120px;
	padding-top: 60px;
	padding-bottom: 60px;
}

.section-stub .heading-title {
	font-size: var(--font-size-section-title);
	margin: 0 0 20px;
}