:root {
  --bg: #E5E7EB;
  --fg: #111;
  --panel: #111;
  --accent: #5D0FA4;
  --accentBg: #E5E7EB;
  --bgImgAccent: url(img/BgRightSectionLight.png);
}
[data-theme="dark"] {
  --bg: #111;
  --fg: #E5E7EB;
  --panel: #111;
  --themeMagin: 2px 45px 2px 2px;
  --bgImgRight: url(img/BgRightSection.png);
  --bgImgLeft: url(img/LeftSectionBg.png);
  --footerBG: url(img/Footer.png);
}
[data-theme="light"] {
  --bg: #E5E7EB;
  --fg: #111;
  --panel: #E5E7EB;
  --themeMagin: 2px 2px 2px 45px;
  --bgImgRight: url(img/BgRightSectionLight.png);
  --bgImgLeft: url(img/LeftSectionBgLight.png);
  --footerBG: url(img/FooterLight.png);
}

html {
  scroll-behavior: smooth;
}

img {
  -webkit-user-drag: none;  /* Safari/Chrome */
  user-select: none;        /* запрет выделения */
  pointer-events: auto;     /* при необходимости оставить кликабельность */
}

h1{
	margin: 0;
	padding: 0;
}

body {
	background-color: var(--panel);
  max-width: 100%;
  margin: 0 auto;
}

header nav {
  background: url(img/NavPanel.png), var(--bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 101px;
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  padding-top: 32px;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 110px,
    0% 100%
  );
  color: var(--fg);
  position: relative;
  z-index: 1;
}

header .logoIcon {
  max-width: 84px;
  max-height: 69px;
}

header .logoIcon img
{
  max-width: 84px;
  max-height: 69px;
}

header .menu {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 0;
  padding: 0;
}

header .menu .menuItem {
  display: block;
  margin: 0 31px 0;
  text-decoration: none;
  color: var(--fg);
  font-size: 32px;
  font-family: sans-serif;
}

header .menuItem li {
  list-style-type: none;
}

header .theme {
  width: 92px;
  height: 48px;
  border-radius: 24px;
  background-color: #5D0FA4;
}

header .theme .darkButton {
  display: block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: var(--bg);
  color: var(--fg);
  margin: var(--themeMagin);
  transition: 0.5s;
}

header .languageButton {
  display: block;
  width: 85px;
  height: 49px;
  clip-path: polygon(
    3px 1px,
    85px 0px,
    85px 41px,
    0px 49px
  );
  text-decoration: none;
  font-family: sans-serif;
  font-weight: semibold;
  text-align: center;
  line-height: 49px;
  font-size: 32px;
}

/* ===== ХЕДЕР ===== */
header {
  position: relative;
  overflow: hidden;
  height: 879px;
}

/* Фон вынесен в псевдоэлемент */
header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(270deg, transparent 10%, var(--bg) 40%),
    url("img/Avatar.jpg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover, auto 100%;
  background-attachment: scroll;
  z-index: -1; /* фон ниже всех */
}

/* ===== ПАРТИКЛЫ ===== */
#bgParticles {
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 100%;
  z-index: 1; /* под навигацией, над фоном */
  pointer-events: none;
}


/* ===== КОНТЕНТ ===== */
header nav,
header .logoIcon,
header .menu,
header .languageButton {
  position: relative;
  z-index: 2; /* контент выше частиц */
}



.heroName
{
	color: var(--fg, #E5E7EB);
	font-family: sans-serif;
	font-size: 64px;
	font-style: normal;
	font-weight: 800;
	line-height: normal;
	margin: 0;
	padding: 0;
}

header .content
{
	margin: 200px 0 0 80px;
	margin-top: 200px;
	padding: 0;
}

.subName
{
	color: var(--fg, #E5E7EB);
	font-family: sans-serif;
	font-size: 48px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	margin: 24px 0 0;
	padding: 0;
}

.heroBrief
{
	color: var(--fg, #E5E7EB);
	font-family: sans-serif;
	font-size: 28px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	max-width: 55%;
	margin: 15px 0 0;
	padding: 0;
}

.skill
{
	width: 628px;
	height: 179px;
  	margin: 16px 12px;
	z-index: 0;
}

.skill:hover
{
	z-index: 4;
	transition: 0.3s;
}

.polygonBorder {
	width: 100%;
	height: 100%;
  clip-path: polygon(18px 6px, 
				  	calc(100% - 84px) 0, 
				  	100% 100%, 
				  	0 calc(100% - 10px));
  background: var(--fg);
  position: relative;
	transition: .25s;
}

.skill:hover .polygonBorder
{
	clip-path: polygon(20px 0, 
				  	calc(100% - 20px) 0, 
				  	100% 100%, 
				  	0 100%);
	transition: .25s;
}

.polygon
{
	width: 100%;
	height: 100%;
  	clip-path: polygon(22px 10px, 
  						calc(100% - 88px) 4px, 
  						calc(100% - 7px) calc(100% - 4px), 
  						4px calc(100% - 14px));
  	background: var(--accent);
  	position: relative;
	transition: .25s;
	overflow: hidden;
}

.skill:hover .polygon
{
	clip-path: polygon(24px 4px, 
  						calc(100% - 24px) 4px, 
  						calc(100% - 4px) calc(100% - 4px), 
  						4px calc(100% - 4px));
	transition: .25s;
}

.skill:hover img
{
	transition: .5s;
	left: 1000px;
}

.polygon h1
{
	padding: 0 0 0 30px;
	margin: 0;
	display: flex;
  	align-items: center;    /* по вертикали */
  	height: 179px;          /* высота блока */
  	text-align: left;
	color: var(--fg, #E5E7EB);
	font-family: sans-serif;
	font-size: 48px;
	font-style: normal;
	font-weight: 500;
	max-width: 398px;
}

section
{
	max-width: 100%;
	margin: 0 auto;
}

.polygon img
{
	display: block;
	position: absolute;
	left: 423px;
	top:60px;
	transition: .25s;
}

.skills
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.skillDescription {
	z-index: 4;
 	max-height: 0;
 	overflow: hidden;
 	opacity: 0;
 	transform: translateY(-10px);
 	transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.4s ease, clip-path 0.25s ease;
 	background-color: var(--fg);
 	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  	transition: 0.3f;
}

.skill:hover .skillDescription 
{
	z-index: 4;
  	max-height: 500px; /* достаточно большое значение, чтобы влез любой текст */
  	opacity: 1;
  	transform: translateY(0);
 	clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 10px 90%);
}

.skillDescription ul
{
	margin: 0;
	padding: 10px 25px 40px 50px;
}

.skillDescription ul li
{
	margin: 0;
	padding: 0;
	color: var(--bg, #111);
	font-family: sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.sectionHeader
{
	color: var(--fg, #E5E7EB);
	font-family: sans-serif;
	font-size: 64px;
	text-align: center;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	padding-top: 100px;
}

.left
{
	background-image: var(--bgImgLeft);
	background-repeat: no-repeat;
	background-size: auto 100%;
}

.right
{
	background-image: var(--bgImgRight);
	background-repeat: repeat-y;
  	background-position: right top;
}

.accent-button {
  background-color: #5D0FA4;
  color: #E5E7EB;
  display: block;
  text-decoration: none;
  font-family: sans-serif;
  font-weight: semibold;
  text-align: center;
}

.accent-button-big {
	width: 433px;
	height: 159px;
	margin: 0 auto;
 	background-color: #5D0FA4;
 	color: #5D0FA4;
 	display: block;
 	clip-path: polygon(53px 15px, calc(100% - 16px) 0, 100% calc(100% - 21px), 0 100%);
 	text-decoration: none;
 	font-family: sans-serif;
 	font-weight: semibold;
 	text-align: center;
 	position: relative;
 	line-height: 159px;
 	transition: 0.3s;
}

.accent-button-big:hover 
{
	clip-path: polygon(16px 0, calc(100% - 53px) 15px, 100% 100%, 0 calc(100% - 21px));
	transition: 0.3s;
}

.accent-button-big:hover::before
{
	clip-path: polygon(29px 26px, calc(100% - 63px) 26px, calc(100% - 40px) calc(100% - 21px), 29px calc(100% - 37px));
	transition: 0.3s;
}

.accent-button-big::before
{
	content: ""; 
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--accentBg);
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	transition: 0.3s;
	clip-path: polygon(63px 26px, calc(100% - 29px) 26px, calc(100% - 29px) calc(100% - 37px), 40px calc(100% - 21px));
}

.accent-button-big span
{
	color: var(--accent, #5D0FA4);
	font-family: sans-serif;
	font-size: 32px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	z-index: 4;
	position: relative;
}

.projects
{
	max-width: 1062px;
	margin: 0 auto;
}

.projects .project
{
	min-height: 647px;
	overflow: hidden;
	position: relative;
}

.projects .project .carousel
{
	background-color: var(--fg);
	height: 509px;
	width: 100%;
	clip-path: polygon(0 21px, 100% 0, 100% 100%, 0 100%);
	position: relative;
	display: flex;
	flex-wrap: nowrap;
}

.projects .project .carousel::before
{
	content: ""; 
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--bg);
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	clip-path: polygon(3px 24px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px));
}

.projects .project .carousel iframe,
.projects .project .carousel img
{
	display: block;
	z-index: 4;
	position: relative;
	height: 100%;
	max-width: 1062px;
}

.carousel__track {
  display: flex;
  transition: transform 0.36s ease;
  height: 100%;
}

.carousel__slide {
  flex: 0 0 100%;
  height: 100%;
}


.projects .project .description
{
	position: relative;
	margin-top: -80px;
	height: 205px;
	width: 1062px;
	background-color: var(--fg);
	clip-path: polygon(0 18px, 20% 25%, 44% 0, 74% 24%, 100% 12%, 100% 100%, 0 100%);
}

.projects .project .descriptionB
{
	position: relative;
	margin-top: -80px;
	height: 245px;
	width: 1062px;
	background-color: var(--fg);
	clip-path: polygon(0 18px, 20% 25%, 44% 0, 74% 24%, 100% 12%, 100% 100%, 0 100%);
}

.projects .project .description::before
{
	content: "";
	position: absolute;
	z-index: 0;
	top:0;
	left: 0px;
	height: 205px;
	width: 100%;
	background-color: #FFC508;
	clip-path: polygon(3px 21px, 
					   calc(20% + 1px) calc(25% + 3px), 
					   44% 3px,
					   calc(74% - 1px) calc(24% + 3px), 
					   calc(100% - 3px) calc(12% + 3px), 
					   calc(100% - 3px) calc(100% - 3px), 
					   3px calc(100% - 3px));
}

.projects .project .descriptionB::before
{
	content: "";
	position: absolute;
	z-index: 0;
	top:0;
	left: 0px;
	height: 245px;
	width: 100%;
	background-color: #FFC508;
	clip-path: polygon(3px 21px, 
					   calc(20% + 1px) calc(25% + 3px), 
					   44% 3px,
					   calc(74% - 1px) calc(24% + 3px), 
					   calc(100% - 3px) calc(12% + 3px), 
					   calc(100% - 3px) calc(100% - 3px), 
					   3px calc(100% - 3px));
}

.projects .project .description h2,
.projects .project .description p,
.projects .project .description a,
.projects .project .description .links,
.projects .project .description img
{
	position: relative;
	z-index: 3;
}

.projects .project .description h2
{
	padding-top: 32px;
	margin: 0 auto;
	color: var(--, #111);
	text-align: center;
	font-family: sans-serif;
	font-size: 32px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}

.projects .project .description p
{
	color: var(--, #111);
	text-align: center;
	font-family: sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	max-width: 848px;
	margin: 0 auto;
	padding: 10px 0 0;
}

.projects .project .description .links
{
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	margin-top: 10px;
}

.projects .project .description a
{
	display: block;
	width: 32px;
	height: 32px;
	margin: 0 16px;
}

.projects .project .description a img
{
	display: block;
	width: 100%;
	height: 100%;
}

/* контейнер */
.projects .project .carousel {
  position: relative;
  overflow: hidden;
  height: 509px; /* как у тебя */
  background: var(--fg);
}

/* лента */
.carousel__track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 360ms ease;
  touch-action: pan-y; 
}

.carousel__slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.carousel__slide img,
.carousel__slide iframe {
  width: 100%;
  height: 100%;
  object-fit: cover; /* или contain, если хочешь вписывать */
  display: block;
  border: 0;
}

/* портретные кадры */
.carousel__slide.is-portrait img {
  width: auto;
  height: 100%;
  object-fit: contain;
}

.projects .project .carousel { display: block; }

.expirience
{
	background-repeat: repeat-y;
	background-size: 70% auto;
}

.companiesList::before
{
	content: "";
	display: block;
	position: absolute;
	top: 156px;
	z-index: -1;
	width:100%;
	height: 1861px;
	background-image: url(img/Route.png);
	background-repeat: no-repeat;
	background-position: center;
}

.companiesList 
{
	position: relative;
	margin-top: 48px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.companiesList .company
{
	width: 628px;
	height: 356px;
	overflow: hidden;
	margin: 0 12px 180px;
	position: relative;
}
.companiesList .company
{
	width: 628px;
	height: 356px;
	overflow: hidden;
	margin: 0 12px 180px;
	position: relative;
}

.companiesList .companyB
{
	width: 628px;
	height: 406px;
	overflow: hidden;
	margin: 0 12px 130px;
	position: relative;
}

.companiesList .content
{
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: var(--accent);
	position: relative;
	clip-path: polygon(18px 78px,
					   calc(100% - 84px) 68px,
					   100% 100%,
					   0 calc(100% - 17px));
}

.companiesList .companyB:nth-child(2n)
{
	margin-top: 98px;
}

.companiesList .company:nth-child(2n)
{
	margin-top: 148px;
	margin-bottom: 32px;
}

.companiesList .content::before
{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	background-color: var(--fg);
	clip-path: polygon(21px 81px, 
		calc(100% - 87px) 71px, 
		calc(100% - 4px) calc(100% - 3px), 
		3px calc(100% - 20px));
}

.companiesList .content *
{
	position: relative;
	z-index: 4;
	margin-left: 48px;
}

.company .header
{
	position: absolute;
	left: 48px;
	top: 0;
	z-index: 6;
	width: 532px;
	margin-left: 48px;
	display: flex;
}

.company .header img
{
	width: 124px;
	height: 124px;
}

.company .header .companyName
{
	display: block;
	width: 378px;
	height: 81px;
	margin-left: -30px;
	margin-top: 32px;
	background-color: var(--accent);
	text-align: center;
	line-height: 81px;
	color: var(--fg, #E5E7EB);
	font-family: sans-serif;
	font-size: 40px;
	font-style: normal;
	font-weight: 600;
	clip-path: polygon(0 8px, calc(100% - 25px) 0, 100% calc(100% - 10px), 0 100%);
}

.company .content h3
{
	margin: 139px 0 12px 48px;
	padding: 0;
	color: var(--bg, #111);
	font-family: sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}

.company .content h5
{
	color: var(--bg, #111);
	font-family: sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	padding: 0;
	margin: 0;
	margin-left: 48px;
}

.company .content p
{
	margin: 20px 35px 0 48px;
	padding: 0;
	margin-top: 12px;
	color: var(--bg, #111);
	font-family: sans-serif;
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
}

.cv .docs
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 48px;
}

.cv .docs .doc 
{
	position: relative;
  width: 100%;                     /* адаптивная ширина */
  max-width: 708px;                /* опционально */
  aspect-ratio: 0.702;
  margin: 0 50px;
  padding: 0;
  clip-path: polygon(22px 39px, 100% 0, 100% calc(100% - 24px), 0 100%);
  background: var(--accent) var(--bgImgAccent);
}

.cv .docs .doc .mask
{
	width: calc(100% - 79px);
	height: calc(100% - 108px);
	padding: 54px 25px 54px 54px;
}

.cv .docs .docHeader h1
{
	margin: 0;
	padding: 0;
	text-align: center;
	color: var(--fg);
	font-family: sans-serif;
	font-size: 48px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}

.cv
{
	background-repeat: no-repeat;
	background-position: center right;
}

.cv .docs .doc .mask img
{
	width: 100%;
	height: 100%;
}

.cv .docs .docHeader .download
{
	margin-top: 24px;
}

footer
{
	background-image: var(--footerBG);
	min-height: 448px;
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 100%;
	margin-top: 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

footer div
{
	margin: 0 34px 0;
	padding: 128px 0 0;
}

footer .social
{
	max-width: 500px;
}

footer h1
{
	margin: 0;
	padding: 0;
	max-height: 59px;
	color: var(--fg);
	font-family: sans-serif;
	font-size: 48px;
	font-style: normal;
	font-weight: 600;
	line-height: 59px;
	text-transform: uppercase;
}

footer .social ul
{
	list-style: none;
	margin: 32px 0;
	padding: 0;
	color: var(--fg);
	display: flex;
	flex-wrap: wrap;
}

footer .social ul li
{
	margin: 0;
	padding: 0;
	margin-right: 32px;
}

footer .social a
{
	color: var(--fg);
	display: block;
	width: 60px;
	height: 60px;
	font-size: 50px;
	line-height: 60px;
	text-decoration: none;
}

footer .social h2
{
	display: flex;
}

footer .social h2 a
{
	display: flex;
	font-size: 32px;
	line-height: 32px;
}

footer .social h2 i
{
	margin-right: 6px;
}

footer .links ul
{
	list-style: none;
	margin: 32px 0;
	padding: 0;
	color: var(--fg);
}

footer .links ul li
{
	margin: 0;
	padding: 0;
	margin-right: 32px;
}

footer .links a
{
	display: block;
	color: var(--fg);
	font-family: sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	text-decoration: none;
	margin-bottom: 24px;
}

footer .logo img
{
	width: 314px;
}