:root {
	--bg: #0f172a;
	--card: #111c35;
	--accent: #3b82f6;
	--text: #f8fafc;
	--muted: #94a3b8;
	--border: rgba(255, 255, 255, .08);
	--social-bg: rgba(255, 255, 255, .04);
	--social-border: rgba(255, 255, 255, .08);
	--toggle-bg: rgba(255, 255, 255, .05);
	--toggle-border: rgba(255, 255, 255, .08);
}

html.theme-dark {
	color-scheme: dark;
	--bg: #0f172a;
	--card: #111c35;
	--accent: #3b82f6;
	--text: #f8fafc;
	--muted: #94a3b8;
	--border: rgba(255,255,255,.08);
	--social-bg: rgba(255,255,255,.04);
	--social-border: rgba(255,255,255,.08);
	--toggle-bg: rgba(255,255,255,.05);
	--toggle-border: rgba(255,255,255,.08);
}

html.theme-light {
	color-scheme: light;
	--bg: #f8fafc;
	--card: #ffffff;
	--accent: #2563eb;
	--text: #0f172a;
	--muted: #64748b;
	--border: rgba(15,23,42,.08);
	--social-bg: rgba(15,23,42,.04);
	--social-border: rgba(15,23,42,.08);
	--toggle-bg: rgba(15,23,42,.04);
	--toggle-border: rgba(15,23,42,.08);
}

@media (prefers-color-scheme: light) {
	:root {
		--bg: #f8fafc;
		--card: #ffffff;
		--accent: #2563eb;
		--text: #0f172a;
		--muted: #64748b;
		--border: rgba(15, 23, 42, .08);
		--social-bg: rgba(15, 23, 42, .04);
		--social-border: rgba(15, 23, 42, .08);
		--toggle-bg: rgba(15, 23, 42, .04);
		--toggle-border: rgba(15, 23, 42, .08);
	}

	body::before {
		background: rgba(59, 130, 246, .12);
	}

	body::after {
		background: rgba(59, 130, 246, .08);
	}

	.photo-wrapper {
		box-shadow:
			0 20px 50px rgba(59, 130, 246, .15),
			0 0 0 1px rgba(15, 23, 42, .05);
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}

html,
body {
	width: 100%;
	min-height: 100vh
}

body {
	font-family: 'Inter', sans-serif;
	background-color: var(--bg);
	color: var(--text);
	transition: background-color .3s ease, color .3s ease;
	overflow-x: hidden;
	position: relative
}

body::before,
body::after {
	content: "";
	position: fixed;
	border-radius: 50%;
	filter: blur(120px);
	z-index: -1
}

body::before {
	width: 350px;
	height: 350px;
	background: rgba(59, 130, 246, .18);
	top: -120px;
	left: -120px
}

body::after {
	width: 450px;
	height: 450px;
	background: rgba(59, 130, 246, .08);
	right: -180px;
	bottom: -180px
}

.container {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px
}

.card {
	width: 100%;
	max-width: 1300px;
	min-height: 700px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--card);
	backdrop-filter: blur(12px);
	border: 1px solid var(--border);
	border-radius: 32px;
	overflow: hidden;
	transition: background-color .3s ease, border-color .3s ease;
	box-shadow:
		0 25px 50px rgba(0, 0, 0, .35),
		0 0 0 1px rgba(255, 255, 255, .03)
}

.card.small {
	display: flex;
	justify-content: center;
	flex-direction: column;
	min-height: auto;
	gap: 40px;
	padding: 40px;
	align-content: center;
	text-align: center
}

.card.small .btn {
	margin: 0 auto
}

.left {
	padding: 48px 60px;
	display: flex;
	flex-direction: column;
	animation: fadeLeft 1s ease
}

.content {
	margin: auto 0
}

.name {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
	margin-bottom: 18px
}

.role {
	color: var(--accent);
	font-size: clamp(1.15rem, 1.9vw, 1.6rem);
	font-weight: 600;
	margin-bottom: 24px
}

.description {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--muted);
	font-size: 1.1rem;
	line-height: 1.8;
	max-width: 520px;
	margin-bottom: 40px
}

.logo {
	display: block;
	width: 25px;
	height: 25px;
	flex-shrink: 0;
	background-image: url(../img/logo_m.svg);
	background-repeat: no-repeat;
	background-size: contain;
	transition: var(--transition)
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--accent);
	color: white;
	text-decoration: none;
	padding: 16px 34px;
	border-radius: 14px;
	font-weight: 600;
	transition: all .35s ease;
	width: fit-content;
	position: relative;
	overflow: hidden
}

.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		120deg,
		transparent,
		rgba(255,255,255,.25),
		transparent
	);
	transform: translateX(-100%)
}

.btn:hover::before {
	transform: translateX(100%);
	transition: .8s
}

.btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 30px rgba(59, 130, 246, .35)
}

.btn:active {
	transform: translateY(0)
}

.footer {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 20px;
	padding-top: 40px
}

.contacts {
	color: var(--muted);
	font-size: .92rem;
	line-height: 1.8
}

.socials {
	display: flex;
	gap: 14px
}

.socials a {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background-color: var(--social-bg);
	border: 1px solid var(--social-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text);
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: center;
	transition: all .3s ease
}

.socials a:hover {
	background-color: var(--accent);
	transform: translateY(-4px)
}

.socials .max,
.socials .max:hover,
html.theme-light .socials .max:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 720'%3E%3Cpath d='M350.4,9.6C141.8,20.5,4.1,184.1,12.8,390.4c3.8,90.3,40.1,168,48.7,253.7,2.2,22.2-4.2,49.6,21.4,59.3,31.5,11.9,79.8-8.1,106.2-26.4,9-6.1,17.6-13.2,24.2-22,27.3,18.1,53.2,35.6,85.7,43.4,143.1,34.3,299.9-44.2,369.6-170.3C799.6,291.2,622.5-4.6,350.4,9.6h0ZM269.4,504c-11.3,8.8-22.2,20.8-34.7,27.7-18.1,9.7-23.7-.4-30.5-16.4-21.4-50.9-24-137.6-11.5-190.9,16.8-72.5,72.9-136.3,150-143.1,78-6.9,150.4,32.7,183.1,104.2,72.4,159.1-112.9,316.2-256.4,218.6h0Z' fill='%23f8fafc'/%3E%3C/svg%3E%0A")
}

html.theme-light .socials .max {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 720'%3E%3Cpath d='M350.4,9.6C141.8,20.5,4.1,184.1,12.8,390.4c3.8,90.3,40.1,168,48.7,253.7,2.2,22.2-4.2,49.6,21.4,59.3,31.5,11.9,79.8-8.1,106.2-26.4,9-6.1,17.6-13.2,24.2-22,27.3,18.1,53.2,35.6,85.7,43.4,143.1,34.3,299.9-44.2,369.6-170.3C799.6,291.2,622.5-4.6,350.4,9.6h0ZM269.4,504c-11.3,8.8-22.2,20.8-34.7,27.7-18.1,9.7-23.7-.4-30.5-16.4-21.4-50.9-24-137.6-11.5-190.9,16.8-72.5,72.9-136.3,150-143.1,78-6.9,150.4,32.7,183.1,104.2,72.4,159.1-112.9,316.2-256.4,218.6h0Z' fill='%230f172a'/%3E%3C/svg%3E%0A")
}

.socials .telegram,
.socials .telegram:hover,
html.theme-light .socials .telegram:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' id='telegram'%3E%3Cpath d='M16.114 9.291c.552-.552 1.1-1.84-1.2-.276a395.806 395.806 0 0 1-6.489 4.372 2.7 2.7 0 0 1-2.117.046c-1.38-.414-2.991-.966-2.991-.966s-1.1-.691.783-1.427c0 0 7.961-3.267 10.722-4.418 1.058-.46 4.647-1.932 4.647-1.932s1.657-.645 1.519.92c-.046.644-.414 2.9-.782 5.338-.553 3.451-1.151 7.225-1.151 7.225s-.092 1.058-.874 1.242a3.787 3.787 0 0 1-2.3-.828c-.184-.138-3.451-2.209-4.648-3.221a.872.872 0 0 1 .046-1.473 169.31 169.31 0 0 0 4.835-4.602Z' fill='%23f8fafc'/%3E%3C/svg%3E")
}

html.theme-light .socials .telegram {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' id='telegram'%3E%3Cpath d='M16.114 9.291c.552-.552 1.1-1.84-1.2-.276a395.806 395.806 0 0 1-6.489 4.372 2.7 2.7 0 0 1-2.117.046c-1.38-.414-2.991-.966-2.991-.966s-1.1-.691.783-1.427c0 0 7.961-3.267 10.722-4.418 1.058-.46 4.647-1.932 4.647-1.932s1.657-.645 1.519.92c-.046.644-.414 2.9-.782 5.338-.553 3.451-1.151 7.225-1.151 7.225s-.092 1.058-.874 1.242a3.787 3.787 0 0 1-2.3-.828c-.184-.138-3.451-2.209-4.648-3.221a.872.872 0 0 1 .046-1.473 169.31 169.31 0 0 0 4.835-4.602Z' fill='%230f172a'/%3E%3C/svg%3E")
}

.right {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px;
	position: relative;
	animation: fadeRight 1s ease
}

.theme-toggle {
	position: absolute;
	top: 40px;
	right: 40px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 1px solid var(--toggle-border);
	background: var(--toggle-bg);
	color: var(--text);
	cursor: pointer;
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .3s ease;
	backdrop-filter: blur(10px)
}

.theme-toggle:hover {
	transform: scale(1.08) rotate(180deg);
	border-color: var(--accent);
	box-shadow: 0 0 20px rgba(59, 130, 246, .25)
}

.theme-toggle span {
	display: block;
	width: 2rem;
	height: 2rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M256 467.5l-48.38-71.64c-3-4.376-8-7.002-13.25-7.002c-1 0-2 .125-3 .3751L106.6 405.6l16.38-84.77c1.25-6.377-1.375-12.75-6.75-16.38L44.62 256.1l71.62-48.39c5.25-3.626 8-10 6.75-16.38L106.6 106.5l84.75 16.38C197.6 124 204.1 121.4 207.8 116.2L256 44.64L280.1 81.54c5.257 7.766 15.99 9.178 23.21 3.195l.329-.2721C310.8 79.32 312 70.25 307.5 63.55L269.2 7.002C266.2 2.626 261.3 0 256 0C250.8 0 245.8 2.626 242.8 7.002L187 89.4l-97.75-18.75c-5.125-1-10.51 .616-14.26 4.367S69.62 84.15 70.62 89.27l18.75 97.77L7 242.8C2.625 245.8 0 250.8 0 256c0 5.251 2.625 10.28 7 13.28l82.38 55.76l-18.88 97.77c-1 5.126 .8437 10.36 4.469 14.11c3.75 3.751 9.156 5.519 14.28 4.519l97.63-18.88l55.88 82.4C245.8 509.4 250.7 512 255.9 512c5.375 0 10.33-2.626 13.21-7.002l38.08-56.36c4.605-6.816 3.143-15.94-3.215-21.16c-7.141-5.878-18.07-4.397-23.24 3.274L256 467.5zM241.1 170.1l.2634-.6427c5.026-12.21-6.691-24.86-19.3-20.94C205.5 154.5 189.1 163.6 176.8 176.8C139 214.7 133.2 270.8 162.2 320.1C169.5 332.3 179.8 342.5 192 349.8c10.08 5.947 20.46 10.39 30.93 13.39c12.41 3.557 23.5-9.272 18.53-21.19l-.2609-.6277c-1.823-4.404-5.382-7.879-9.958-9.207c-7.413-2.152-15.13-5.358-22.1-10c-7.5-4.376-14-10.88-18.37-18.38C164 259.8 178.8 220.2 199.5 199.4c8.045-7.939 19.03-15.14 32.1-19.32C235.1 178.7 239.4 175.2 241.1 170.1zM448 64.02c-106 0-191.1 85.97-191.1 191.1c0 106 85.99 192 191.1 192c105.1 0 192-86.01 192-192C640 149.1 553.1 64.02 448 64.02zM448 416.1c-88.25 0-159.1-71.81-159.1-160.1S359.8 96.02 448 96.02s160 71.77 160 160S536.3 416.1 448 416.1z' fill='%23f8fafc'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 2rem;
	background-position: center;
	transition: all .3s ease
}

html.theme-light .theme-toggle span {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M256 467.5l-48.38-71.64c-3-4.376-8-7.002-13.25-7.002c-1 0-2 .125-3 .3751L106.6 405.6l16.38-84.77c1.25-6.377-1.375-12.75-6.75-16.38L44.62 256.1l71.62-48.39c5.25-3.626 8-10 6.75-16.38L106.6 106.5l84.75 16.38C197.6 124 204.1 121.4 207.8 116.2L256 44.64L280.1 81.54c5.257 7.766 15.99 9.178 23.21 3.195l.329-.2721C310.8 79.32 312 70.25 307.5 63.55L269.2 7.002C266.2 2.626 261.3 0 256 0C250.8 0 245.8 2.626 242.8 7.002L187 89.4l-97.75-18.75c-5.125-1-10.51 .616-14.26 4.367S69.62 84.15 70.62 89.27l18.75 97.77L7 242.8C2.625 245.8 0 250.8 0 256c0 5.251 2.625 10.28 7 13.28l82.38 55.76l-18.88 97.77c-1 5.126 .8437 10.36 4.469 14.11c3.75 3.751 9.156 5.519 14.28 4.519l97.63-18.88l55.88 82.4C245.8 509.4 250.7 512 255.9 512c5.375 0 10.33-2.626 13.21-7.002l38.08-56.36c4.605-6.816 3.143-15.94-3.215-21.16c-7.141-5.878-18.07-4.397-23.24 3.274L256 467.5zM241.1 170.1l.2634-.6427c5.026-12.21-6.691-24.86-19.3-20.94C205.5 154.5 189.1 163.6 176.8 176.8C139 214.7 133.2 270.8 162.2 320.1C169.5 332.3 179.8 342.5 192 349.8c10.08 5.947 20.46 10.39 30.93 13.39c12.41 3.557 23.5-9.272 18.53-21.19l-.2609-.6277c-1.823-4.404-5.382-7.879-9.958-9.207c-7.413-2.152-15.13-5.358-22.1-10c-7.5-4.376-14-10.88-18.37-18.38C164 259.8 178.8 220.2 199.5 199.4c8.045-7.939 19.03-15.14 32.1-19.32C235.1 178.7 239.4 175.2 241.1 170.1zM448 64.02c-106 0-191.1 85.97-191.1 191.1c0 106 85.99 192 191.1 192c105.1 0 192-86.01 192-192C640 149.1 553.1 64.02 448 64.02zM448 416.1c-88.25 0-159.1-71.81-159.1-160.1S359.8 96.02 448 96.02s160 71.77 160 160S536.3 416.1 448 416.1z' fill='%230f172a'/%3E%3C/svg%3E")
}

.photo-wrapper {
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: linear-gradient(
		145deg,
		rgba(59,130,246,.25),
		rgba(255,255,255,.05)
	);
	padding: 10px;
	box-shadow: 0 0 50px rgba(59, 130, 246, .25);
	animation: float 6s ease-in-out infinite
}

.photo-placeholder {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-image: url('../img/me.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center
}

.role,
.description,
.contacts,
.theme-toggle,
.btn,
.photo-wrapper {
	transition: all.3s ease
}

@keyframes fadeLeft {
	from {
		opacity: 0;
		transform: translateX(-40px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeRight {
	from {
		opacity: 0;
		transform: translateX(40px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes float {
	0%,100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-12px);
	}
}

@media (max-width: 992px) {
	.card {
		grid-template-columns: 1fr
	}

	.right {
		order: -1;
		min-height: 420px
	}

	.photo-wrapper {
		width: 280px;
		height: 280px
	}
}

@media (max-width: 768px) {
	.container {
		padding: 20px;
	}

	.left {
		padding: 32px 24px;
	}

	.right {
		padding: 30px 20px;
		min-height: 320px
	}

	.theme-toggle {
		top: 30px;
		right: 20px
	}

	.footer {
		flex-direction: column;
		align-items: flex-start
	}

	.photo-wrapper {
		width: 230px;
		height: 230px
	}

	.photo-placeholder svg {
		width: 100px;
		height: 100px
	}
}