:root {
	--brand: #0d6efd;
	--ink: #0b1320;
	--soft: #f6f8fb;
}
body {
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto,
		'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
	color: var(--ink);
}
.navbar {
	backdrop-filter: saturate(180%) blur(8px);
	background: rgba(255, 255, 255, 0.8) !important;
}
.hero {
	background: radial-gradient(
			1200px 500px at 70% -20%,
			#e9f2ff 0,
			transparent 60%
		),
		linear-gradient(180deg, #ffffff, #f9fbff);
}
.shadow-soft {
	box-shadow: 0 10px 25px rgba(13, 110, 253, 0.08);
}
.badge-skill {
	background: #eef3ff;
	color: #0d3b8e;
	border: 1px solid #dbe7ff;
}
.timeline {
	position: relative;
}
.timeline::before {
	content: '';
	position: absolute;
	left: 8px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: #dfe6f5;
}
.timeline-item {
	position: relative;
	padding-left: 2.25rem;
	margin-bottom: 1.25rem;
}
.timeline-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.35rem;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--brand);
	box-shadow: 0 0 0 4px #e9f2ff;
}
.project-card img {
	aspect-ratio: 16/9;
	object-fit: cover;
}
.avatar {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	object-fit: cover;
}
.section-title {
	font-weight: 800;
	letter-spacing: 0.3px;
}
.link-muted {
	color: #64748b;
}
footer {
	background: #0b1320;
	color: #b8c1d6;
}
.btn-soft {
	background: #eef6ff;
	border-color: #d7e9ff;
}
.btn-soft:hover {
	background: #e2f0ff;
}
/* Bigger, responsive circle avatar */
.avatar {
	width: clamp(300px, 14vw, 300px);
	height: clamp(300px, 14vw, 300px);
}

.hiddenlink {
	text-decoration: none;
	color: inherit;
}

/* Smaller, responsive circle avatar */
@media (max-width: 768px) {
	.avatar {
		width: 75%;
		height: 75%;
	}

	#badge {
		display: flex;
		justify-content: center;
		text-align: left;
		width: 100%;
	}
}