:root {
	color-scheme: dark;
	--text: #f2f6fb;
	--muted: #9ea9b8;
	--line: rgba(255, 255, 255, 0.11);
	--accent: #86e9cf;
	--accent-2: #58b9ff;
	--radius: 22px;
	--gap: 12px;
}

* {
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	height: 100%;
}

body {
	margin: 0;
	overflow: hidden;
	overflow-x: hidden;
	font-family: "Manrope", sans-serif;
	background:
		radial-gradient(circle at 8% 2%, rgba(88, 185, 255, 0.22), transparent 34%),
		radial-gradient(
			circle at 95% 100%,
			rgba(134, 233, 207, 0.18),
			transparent 30%
		),
		linear-gradient(170deg, #0d131b 0%, #070a11 100%);
	color: var(--text);
}

a {
	color: inherit;
	text-decoration: none;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--accent-2);
	outline-offset: 2px;
	border-radius: 8px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.page-shell {
	width: 100%;
	height: 100dvh;
	padding: 14px;
	position: relative;
}

.lang-switcher {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	gap: 6px;
	z-index: 100;
}

.lang-btn {
	padding: 6px 12px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.05);
	color: var(--text);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease;
}

.lang-btn:hover {
	border-color: var(--accent);
	background: rgba(255, 255, 255, 0.08);
}

.lang-btn.is-active {
	border-color: var(--accent);
	background: rgba(134, 233, 207, 0.15);
	color: var(--accent);
}

.layout {
	width: min(1320px, 100%);
	height: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-rows: 38% 1fr;
	gap: var(--gap);
}

.top-row {
	display: grid;
	grid-template-columns: 65fr 35fr;
	gap: var(--gap);
	min-height: 0;
}

.lower-grid {
	min-height: 0;
	display: grid;
	grid-template-columns: 30fr 70fr;
	grid-template-rows: 40% 1fr;
	gap: var(--gap);
}

.card {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: linear-gradient(
		180deg,
		rgba(22, 28, 38, 0.92),
		rgba(12, 16, 24, 0.95)
	);
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
	animation: rise-in 0.8s ease both;
}

.top-row .card:nth-child(1) {
	animation-delay: 0.1s;
}

.top-row .card:nth-child(2) {
	animation-delay: 0.2s;
}

.lower-grid .card:nth-child(1) {
	animation-delay: 0.3s;
}

.lower-grid .card:nth-child(2) {
	animation-delay: 0.4s;
}

.lower-grid .card:nth-child(3) {
	animation-delay: 0.5s;
}

.card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		130deg,
		rgba(255, 255, 255, 0.08),
		transparent 34%
	);
	pointer-events: none;
}

.card-label {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	letter-spacing: 0.09em;
	font-weight: 700;
	text-transform: uppercase;
}

.hero-card {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr;
	padding: 14px;
	position: relative;
	overflow: hidden;
}

.hero-card .card-label {
	grid-column: 1 / -1;
	z-index: 2;
}

.hero-card::after {
	content: "";
	position: absolute;
	right: -10%;
	top: -20%;
	width: 60%;
	height: 140%;
	background: radial-gradient(
		circle,
		rgba(134, 233, 207, 0.12) 0%,
		transparent 70%
	);
	pointer-events: none;
	z-index: 0;
}

.hero-card::before {
	content: "";
	position: absolute;
	left: -5%;
	bottom: -15%;
	width: 50%;
	height: 100%;
	background: radial-gradient(
		circle,
		rgba(88, 185, 255, 0.08) 0%,
		transparent 60%
	);
	pointer-events: none;
	z-index: 0;
}

.hero-card__content {
	position: relative;
	grid-column: 1 / -1;
	grid-row: 2 / -1;
	display: grid;
	gap: 14px;
	align-content: center;
	padding: 0;
	left: 0;
	bottom: 0;
	max-width: 100%;
	z-index: 1;
}

.hero-card h1 {
	margin: 0;
	font-size: clamp(2rem, 3.2vw, 3.2rem);
	line-height: 1.08;
	letter-spacing: -0.04em;
	color: var(--text);
}

.hero-card p {
	margin: 0;
	color: #d7dfe9;
	line-height: 1.5;
	font-size: clamp(0.95rem, 1.15vw, 1.1rem);
	max-width: 560px;
}

.stack-card {
	padding: 14px;
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 8px;
}

.stack-list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	grid-auto-rows: minmax(0, 1fr);
	gap: 8px;
}

.stack-item {
	min-height: 54px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-weight: 800;
	font-size: 0.69rem;
	line-height: 1;
	letter-spacing: 0.01em;
	transition:
		transform 0.25s ease,
		border-color 0.25s ease;
	animation: float-soft 5s ease-in-out infinite;
	user-select: none;
	pointer-events: none;
}

.stack-item:hover {
	transform: translateY(-4px);
	border-color: var(--accent);
}

.stack-item:nth-child(2) {
	animation-delay: 0.8s;
}

.stack-item:nth-child(3) {
	animation-delay: 1.6s;
}

.stack-icon {
	width: 21px;
	height: 21px;
	display: block;
	object-fit: contain;
}

.stack-item--html {
	color: #ff7d50;
	border-color: rgba(255, 125, 80, 0.32);
	background: linear-gradient(
		180deg,
		rgba(244, 114, 45, 0.34),
		rgba(255, 255, 255, 0.04)
	);
}

.stack-item--css {
	color: #69a9ff;
	border-color: rgba(105, 169, 255, 0.32);
	background: linear-gradient(
		180deg,
		rgba(105, 169, 255, 0.28),
		rgba(255, 255, 255, 0.04)
	);
}

.stack-item--js {
	color: #f7dd58;
	border-color: rgba(247, 221, 88, 0.32);
	background: linear-gradient(
		180deg,
		rgba(247, 221, 88, 0.28),
		rgba(255, 255, 255, 0.04)
	);
}

.stack-item--ts {
	color: #5aa7ff;
	border-color: rgba(90, 167, 255, 0.32);
	background: linear-gradient(
		180deg,
		rgba(90, 167, 255, 0.28),
		rgba(255, 255, 255, 0.04)
	);
}

.stack-item--react {
	color: #72d9ff;
	border-color: rgba(114, 217, 255, 0.32);
	background: linear-gradient(
		180deg,
		rgba(114, 217, 255, 0.28),
		rgba(255, 255, 255, 0.04)
	);
}

.stack-item--tailwind {
	color: #6ee7ff;
	border-color: rgba(110, 231, 255, 0.32);
	background: linear-gradient(
		180deg,
		rgba(110, 231, 255, 0.28),
		rgba(255, 255, 255, 0.04)
	);
}

.stack-item--node {
	color: #92d35e;
	border-color: rgba(146, 211, 94, 0.32);
	background: linear-gradient(
		180deg,
		rgba(146, 211, 94, 0.28),
		rgba(255, 255, 255, 0.04)
	);
}

.stack-item--git {
	color: #ff8a6b;
	border-color: rgba(255, 138, 107, 0.32);
	background: linear-gradient(
		180deg,
		rgba(255, 138, 107, 0.28),
		rgba(255, 255, 255, 0.04)
	);
}

.stack-item--figma {
	color: #ff7bb5;
	border-color: rgba(255, 123, 181, 0.32);
	background: linear-gradient(
		180deg,
		rgba(255, 123, 181, 0.28),
		rgba(255, 255, 255, 0.04)
	);
}

.stack-item--vite {
	color: #c9a7ff;
	border-color: rgba(201, 167, 255, 0.32);
	background: linear-gradient(
		180deg,
		rgba(201, 167, 255, 0.28),
		rgba(255, 255, 255, 0.04)
	);
}

.social-card {
	padding: 14px;
	display: grid;
	grid-template-rows: auto 1fr;
	align-content: stretch;
	gap: 10px;
}

.social-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 8px;
	min-height: 100%;
	align-content: stretch;
}

.social-list li {
	min-width: 0;
	min-height: 0;
}

.social-link {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-height: 52px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.05),
		rgba(255, 255, 255, 0.02)
	);
	transition:
		transform 0.25s ease,
		border-color 0.25s ease,
		box-shadow 0.25s ease,
		background-color 0.25s ease;
	animation: pulse-icon 6.6s ease-in-out infinite;
}

.social-list li:nth-child(2) a {
	animation-delay: 0.2s;
}

.social-list li:nth-child(3) a {
	animation-delay: 0.4s;
}

.social-list li:nth-child(4) a {
	animation-delay: 0.6s;
}

.social-list li:nth-child(5) a {
	animation-delay: 0.8s;
}

.social-list li:nth-child(6) a {
	animation-delay: 1s;
}

.social-link:hover {
	transform: translateY(-3px) scale(1.04);
	box-shadow: 0 0 0 2px rgba(88, 185, 255, 0.12);
}

.social-link--github:hover {
	border-color: #8b949e;
	background: rgba(139, 148, 158, 0.12);
}

.social-link--linkedin:hover {
	border-color: #0a66c2;
	background: rgba(10, 102, 194, 0.14);
}

.social-link--facebook:hover {
	border-color: #1877f2;
	background: rgba(24, 119, 242, 0.14);
}

.social-link--instagram:hover {
	border-color: #e4405f;
	background: rgba(228, 64, 95, 0.14);
}

.social-link--telegram:hover {
	border-color: #2aabee;
	background: rgba(42, 171, 238, 0.14);
}

.social-link--whatsapp:hover {
	border-color: #25d366;
	background: rgba(37, 211, 102, 0.14);
}

.social-icon {
	width: 22px;
	height: 22px;
	display: block;
}

.about-card {
	padding: 14px;
	display: grid;
	align-content: start;
	gap: 9px;
}

.about-card p {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--muted);
}

.projects-card {
	grid-column: 2;
	grid-row: 1 / span 2;
	padding: 14px;
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 10px;
}

.projects-card__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.carousel-controls {
	display: flex;
	gap: 8px;
}

.carousel-btn {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.05);
	color: var(--text);
	cursor: pointer;
	font-size: 1.2rem;
	line-height: 1;
	transition:
		transform 0.2s ease,
		border-color 0.2s ease;
}

.carousel-btn:hover {
	transform: translateY(-2px);
	border-color: var(--accent-2);
}

.carousel {
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.03);
	cursor: grab;
}

.carousel:active {
	cursor: grabbing;
}

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

.carousel__track.dragging {
	transition: none;
}

.slide {
	min-width: 100%;
	display: grid;
	grid-template-rows: 1fr auto;
}

.slide__media {
	min-height: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.project-preview-link {
	display: block;
	width: 100%;
	height: 100%;
}

.project-preview-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.project-preview-link:hover .project-preview-image {
	transform: scale(1.03);
}

.slide__body {
	padding: 10px 12px;
	display: grid;
	gap: 6px;
}

.slide__body h3 {
	margin: 0;
	font-size: 1rem;
}

.project-title-link {
	border-bottom: 1px solid transparent;
	transition:
		color 0.2s ease,
		border-color 0.2s ease;
}

.project-title-link:hover {
	color: var(--accent);
	border-color: currentColor;
}

.slide__body p {
	margin: 0;
	color: var(--muted);
	font-size: 0.87rem;
}

.project-link {
	width: fit-content;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--accent);
	border-bottom: 1px solid transparent;
	transition:
		color 0.2s ease,
		border-color 0.2s ease;
}

.project-link:hover {
	color: #baf5e5;
	border-color: currentColor;
}

.slide--one .slide__media {
	background: linear-gradient(
		130deg,
		rgba(18, 18, 23, 0.94),
		rgba(55, 62, 78, 0.9)
	);
}

.slide--two .slide__media {
	background: linear-gradient(
		130deg,
		rgba(40, 45, 53, 0.94),
		rgba(78, 69, 56, 0.9)
	);
}

.slide--three .slide__media {
	background: linear-gradient(
		130deg,
		rgba(16, 45, 40, 0.94),
		rgba(43, 83, 65, 0.9)
	);
}

.carousel-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.dot {
	width: 9px;
	height: 9px;
	border-radius: 999px;
	border: 0;
	padding: 0;
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition:
		transform 0.2s ease,
		background-color 0.2s ease;
}

.dot:hover {
	transform: scale(1.15);
}

.dot.is-active {
	background: var(--accent);
}

@keyframes rise-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes gradient-shift {
	0% {
		background-position: 0% 40%;
	}
	50% {
		background-position: 100% 60%;
	}
	100% {
		background-position: 0% 40%;
	}
}

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

@keyframes pulse-icon {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(88, 185, 255, 0.035);
		transform: translateY(0);
		filter: brightness(1);
	}
	45% {
		box-shadow: 0 0 0 2px rgba(88, 185, 255, 0.09);
		transform: translateY(-1px);
		filter: brightness(1.05);
	}
	55% {
		box-shadow: 0 0 0 1px rgba(88, 185, 255, 0.07);
		transform: translateY(-1px);
		filter: brightness(1.04);
	}
}

@media (max-width: 1100px) {
	body {
		overflow: auto;
	}

	.page-shell {
		height: auto;
		min-height: 100dvh;
		padding: 12px;
	}

	.layout {
		height: auto;
		grid-template-rows: auto auto;
		gap: 10px;
	}

	.top-row {
		grid-template-columns: 1fr;
	}

	.hero-card {
		min-height: 260px;
	}

	.lower-grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
	}

	.projects-card {
		grid-column: 1;
		grid-row: auto;
		min-height: 360px;
	}

	.social-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: repeat(2, minmax(0, 1fr));
	}

	.stack-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 820px) {
	.page-shell {
		padding: 10px;
	}

	.lang-switcher {
		position: static;
		justify-content: flex-end;
		margin-bottom: 10px;
	}

	.layout {
		gap: 10px;
	}

	.hero-card {
		min-height: 220px;
	}

	.hero-card h1 {
		font-size: clamp(1.65rem, 7vw, 2.2rem);
	}

	.hero-card p {
		font-size: 0.95rem;
		max-width: 100%;
	}

	.stack-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.stack-item {
		min-height: 64px;
		font-size: 0.68rem;
	}

	.projects-card {
		min-height: 400px;
	}

	.slide__media {
		min-height: 210px;
	}
}

@media (max-width: 560px) {
	:root {
		--radius: 18px;
		--gap: 10px;
	}

	.page-shell {
		padding: 8px;
	}

	.lang-btn {
		padding: 6px 10px;
		font-size: 0.68rem;
	}

	.card,
	.hero-card,
	.stack-card,
	.social-card,
	.about-card,
	.projects-card {
		padding: 11px;
	}

	.hero-card {
		min-height: 200px;
	}

	.hero-card h1 {
		font-size: clamp(1.45rem, 8vw, 1.95rem);
		line-height: 1.1;
	}

	.hero-card p,
	.about-card p,
	.slide__body p {
		font-size: 0.84rem;
		line-height: 1.45;
	}

	.card-label {
		font-size: 11px;
	}

	.stack-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 7px;
	}

	.stack-item {
		min-height: 62px;
	}

	.social-list {
		gap: 7px;
	}

	.social-link {
		min-height: 46px;
	}

	.projects-card {
		min-height: 365px;
	}

	.projects-card__head {
		align-items: center;
	}

	.carousel-btn {
		width: 30px;
		height: 30px;
		border-radius: 9px;
		font-size: 1rem;
	}

	.slide__media {
		min-height: 180px;
	}

	.slide__body {
		padding: 9px 10px;
		gap: 5px;
	}

	.slide__body h3 {
		font-size: 0.92rem;
	}

	.project-link {
		font-size: 0.76rem;
	}

	.dot {
		width: 8px;
		height: 8px;
	}
}