:root {
	--brand: #2563eb;
	--brand-dark: #1d4ed8;
	--accent: #f59e0b;
	--tech: #2563eb;
	--ai: #7c3aed;
	--apps: #0f766e;
	--howto: #ea580c;
	--trending: #e11d48;
	--ink: #0f172a;
	--canvas: #f8fafc;
	--shadow: 0 10px 30px rgba(15, 23, 42, 0.09);
}

body {
	background: linear-gradient(180deg, #ffffff 0, #f8fafc 520px, #ffffff 1000px);
}

.site-header {
	border-bottom: 3px solid transparent;
	background:
		linear-gradient(rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.97)) padding-box,
		linear-gradient(90deg, var(--tech), var(--ai), var(--apps), var(--howto), var(--trending)) border-box;
}

.site-title {
	color: var(--brand-dark);
	letter-spacing: -0.02em;
}

.primary-navigation a {
	position: relative;
}

.primary-navigation a::after {
	position: absolute;
	right: 0;
	bottom: -8px;
	left: 0;
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--tech), var(--ai));
	content: "";
	transform: scaleX(0);
	transition: transform 0.2s ease;
}

.primary-navigation a:hover::after,
.primary-navigation .current-menu-item > a::after {
	transform: scaleX(1);
}

.search-row button,
.button {
	background: linear-gradient(135deg, var(--tech), var(--ai));
	box-shadow: 0 7px 18px rgba(37, 99, 235, 0.2);
}

.hero-story {
	position: relative;
	border: 0;
	background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 54%, #fff7ed 100%);
	box-shadow: var(--shadow);
}

.hero-story::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2;
	height: 5px;
	background: linear-gradient(90deg, var(--tech), var(--ai), var(--apps), var(--howto), var(--trending));
	content: "";
}

.hero-media,
.image-placeholder {
	background: linear-gradient(135deg, #dbeafe 0%, #ede9fe 38%, #ccfbf1 68%, #ffedd5 100%);
}

.hero-content .post-category {
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--trending);
	color: #ffffff;
}

.home-section {
	--section-color: var(--brand);
	--section-soft: #eff6ff;
}

.section-tech,
.section-latest {
	--section-color: var(--tech);
	--section-soft: #eff6ff;
}

.section-ai {
	--section-color: var(--ai);
	--section-soft: #f5f3ff;
}

.section-apps {
	--section-color: var(--apps);
	--section-soft: #f0fdfa;
}

.section-howto {
	--section-color: var(--howto);
	--section-soft: #fff7ed;
}

.section-trending {
	--section-color: var(--trending);
	--section-soft: #fff1f2;
}

.home-section .section-heading {
	border-bottom-color: var(--section-color);
}

.home-section .section-heading h2 {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--section-color);
}

.home-section .section-heading h2::before {
	width: 10px;
	height: 28px;
	border-radius: 999px;
	background: var(--section-color);
	content: "";
}

.home-section .section-heading > a {
	color: var(--section-color);
}

.home-section .post-card {
	overflow: hidden;
	border: 1px solid #dbeafe;
	border: 1px solid color-mix(in srgb, var(--section-color) 18%, #e2e8f0);
	border-top: 4px solid var(--section-color);
	border-radius: var(--radius);
	background: linear-gradient(180deg, #ffffff 0%, var(--section-soft) 100%);
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-section .post-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.11);
}

.home-section .card-image {
	border-radius: 0;
}

.home-section .card-content {
	padding: 15px 16px 18px;
}

.home-section .post-category {
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--section-color);
	color: #ffffff;
}

.pagination .current {
	background: linear-gradient(135deg, var(--tech), var(--ai));
	border-color: transparent;
}

.article-content h2 {
	padding-left: 14px;
	border-left: 5px solid var(--brand);
}

.widget,
.author-box,
.ttp-toc {
	border: 1px solid #dbeafe;
	background: linear-gradient(145deg, #f8fafc, #eff6ff);
}

.site-footer {
	position: relative;
	background: linear-gradient(135deg, #0f172a 0%, #172554 55%, #2e1065 100%);
}

.site-footer::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--tech), var(--ai), var(--apps), var(--howto), var(--trending));
	content: "";
}

@media (max-width: 768px) {
	.primary-navigation a::after {
		display: none;
	}

	.home-section .post-card {
		border-top-width: 3px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-section .post-card,
	.primary-navigation a::after {
		transition: none;
	}
}