/* === SECTION HEADER === */
#engineering .section-header {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 48px;
}

#engineering .section-subtitle {
	font-size: var(--text-lg);
	color: #a0aec0;
	line-height: var(--leading-relaxed);
	margin: 16px 0 0;
	max-width: 680px; 
}


/* === CATEGORY FILTERS === */
.tech-categories {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 40px;
}

.category-btn {
	padding: 10px 20px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	color: #94a3b8;
	font-size: var(--text-sm, 0.875rem);
	font-weight: 600;
	letter-spacing: var(--tracking-wide, 0.02em);
	cursor: pointer;
	transition: all 0.25s ease;
}

	.category-btn:hover,
	.category-btn.active {
		background: rgba(91, 124, 255, 0.15);
		border-color: #5b7cff;
		color: white;
	}

/* === TECH GRID === */
.tech-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

/* === TECH CARD === */
.tech-card {
	background: linear-gradient(135deg, rgba(17, 22, 42, 0.8) 0%, rgba(26, 31, 58, 0.8) 100%);
	padding: 28px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

	.tech-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 2px;
		background: linear-gradient(90deg, transparent, rgba(91, 124, 255, 0.5), transparent);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.tech-card:hover {
		transform: translateY(-6px);
		border-color: rgba(91, 124, 255, 0.3);
		box-shadow: 0 12px 40px rgba(91, 124, 255, 0.15);
	}

		.tech-card:hover::before {
			opacity: 1;
		}

/* === TECH ICON === */
.tech-icon {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	flex-shrink: 0;
}

	.tech-icon svg {
		width: 28px;
		height: 28px;
	}

.icon-text {
	font-size: var(--text-lg, 1.25rem);
	font-weight: 700;
	color: white;
}

/* Brand-specific icon styles */
.tech-icon.dotnet {
	background: linear-gradient(135deg, #512bd4 0%, #7b5fd9 100%);
	box-shadow: 0 6px 20px rgba(81, 43, 212, 0.3);
}

.tech-icon.csharp {
	background: linear-gradient(135deg, #68217a 0%, #9b4f96 100%);
	box-shadow: 0 6px 20px rgba(104, 33, 122, 0.3);
}

.tech-icon.python {
	background: linear-gradient(135deg, #3776ab 0%, #ffd43b 100%);
	box-shadow: 0 6px 20px rgba(55, 118, 171, 0.3);
}

.tech-icon.fastapi {
	background: linear-gradient(135deg, #009688 0%, #00bcd4 100%);
	box-shadow: 0 6px 20px rgba(0, 150, 136, 0.3);
}

.tech-icon.pytorch {
	background: linear-gradient(135deg, #ee4c2c 0%, #ff6f4d 100%);
	box-shadow: 0 6px 20px rgba(238, 76, 44, 0.3);
}

.tech-icon.postgresql {
	background: linear-gradient(135deg, #336791 0%, #4a8fc9 100%);
	box-shadow: 0 6px 20px rgba(51, 103, 145, 0.3);
}

.tech-icon.vector {
	background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
	box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3);
}

.tech-icon.docker {
	background: linear-gradient(135deg, #2496ed 0%, #0db7ed 100%);
	box-shadow: 0 6px 20px rgba(36, 150, 237, 0.3);
}

.tech-icon.redis {
	background: linear-gradient(135deg, #dc382d 0%, #ff554a 100%);
	box-shadow: 0 6px 20px rgba(220, 56, 45, 0.3);
}

.tech-icon.sklearn {
	background: linear-gradient(135deg, #f7931e 0%, #ffaa4d 100%);
	box-shadow: 0 6px 20px rgba(247, 147, 30, 0.3);
}

.tech-icon.local-llm {
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
	box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
}

.tech-icon.rag {
	background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
	box-shadow: 0 6px 20px rgba(6, 182, 212, 0.3);
}

/* === CARD CONTENT === */
.tech-card h4 {
	font-size: var(--text-base, 1rem);
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 10px;
	line-height: var(--leading-tight, 1.2);
	letter-spacing: var(--tracking-tight, -0.02em);
}

.tech-card p {
	font-size: var(--text-base, 1rem);
	color: #94a3b8;
	line-height: var(--leading-relaxed, 1.5);
	margin: 0 0 16px;
	flex: 1;
}

/* === TECH TAG === */
.tech-tag {
	display: inline-block;
	padding: 6px 14px;
	background: rgba(91, 124, 255, 0.15);
	border: 1px solid rgba(91, 124, 255, 0.3);
	border-radius: 8px;
	font-size: var(--text-sm, 0.875rem);
	font-weight: 600;
	color: #5b7cff;
	align-self: flex-start;
}

/* === FILTER ANIMATION === */
.tech-card.filtered {
	display: none;
}

.tech-card.animate-in {
	animation: fadeInUp 0.4s ease forwards;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
	:root {
		--font-base: 17px;
	}
}

@media (max-width: 768px) {
	:root {
		--font-base: 16px;
	}

	#engineering .section-header {
		margin-bottom: 40px;
	}

	.tech-categories {
		gap: 8px;
		margin-bottom: 32px;
	}

	.category-btn {
		padding: 8px 16px;
		font-size: var(--text-sm, 0.875rem);
	}

	.tech-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.tech-card {
		padding: 24px;
	}

	.tech-icon {
		width: 48px;
		height: 48px;
	}

	.tech-card h4 {
		font-size: var(--text-base, 1rem);
	}

	.tech-card p {
		font-size: var(--text-base, 1rem);
	}
}

@media (max-width: 480px) {
	:root {
		--font-base: 15px;
	}

	#engineering .section-header {
		margin-bottom: 32px;
	}

	#engineering .section-subtitle {
		font-size: var(--text-base, 1rem);
	}

	.tech-categories {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 8px;
		scrollbar-width: none;
	}

		.tech-categories::-webkit-scrollbar {
			display: none;
		}

	.category-btn {
		flex-shrink: 0;
		font-size: var(--text-sm, 0.875rem);
	}

	.tech-card {
		padding: 20px;
	}

	.tech-icon {
		width: 44px;
		height: 44px;
	}

	.tech-card h4 {
		font-size: var(--text-base, 1rem);
	}

	.tech-card p {
		font-size: var(--text-base, 1rem);
	}

	.tech-tag {
		font-size: var(--text-xs, 0.75rem);
		padding: 4px 12px;
	}
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
	.tech-card,
	.category-btn,
	.tech-card::before {
		transition: none !important;
		animation: none !important;
	}
}
/* 480px - 600px: перенос строк */
@media (min-width: 360px) and (max-width: 600px) {
	.tech-categories {
		flex-wrap: wrap;
		overflow-x: visible;
	}
}

/* < 360px: горизонтальный скролл */
@media (max-width: 360px) {
	.tech-categories {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

		.tech-categories::-webkit-scrollbar {
			display: none;
		}
}