:root {
	--ink: #0f172a;
	--muted: #4b5563;
	--line: rgba(15, 23, 42, 0.12);
	--page-bg: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	--nav-bg: rgba(248, 250, 252, 0.86);
	--nav-border: rgba(15, 23, 42, 0.06);
	--panel-bg: rgba(255, 255, 255, 0.9);
	--card-bg: #ffffff;
	--section-blue: linear-gradient(180deg, rgba(37, 99, 235, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
	--section-cyan: linear-gradient(180deg, rgba(8, 145, 178, 0.09) 0%, rgba(255, 255, 255, 0) 100%);
	--section-indigo: linear-gradient(180deg, rgba(79, 70, 229, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
	--section-green: linear-gradient(180deg, rgba(16, 185, 129, 0.09) 0%, rgba(255, 255, 255, 0) 100%);
	--section-amber: linear-gradient(180deg, rgba(245, 158, 11, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
	--section-rose: linear-gradient(180deg, rgba(244, 63, 94, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
}

[data-bs-theme="dark"] {
	--ink: #e5e7eb;
	--muted: #a8b3c7;
	--line: rgba(148, 163, 184, 0.22);
	--page-bg: linear-gradient(180deg, #020617 0%, #0f172a 100%);
	--nav-bg: rgba(2, 6, 23, 0.88);
	--nav-border: rgba(148, 163, 184, 0.16);
	--panel-bg: rgba(15, 23, 42, 0.86);
	--card-bg: rgba(15, 23, 42, 0.92);
	--section-blue: linear-gradient(180deg, rgba(37, 99, 235, 0.22) 0%, rgba(2, 6, 23, 0) 100%);
	--section-cyan: linear-gradient(180deg, rgba(8, 145, 178, 0.24) 0%, rgba(2, 6, 23, 0) 100%);
	--section-indigo: linear-gradient(180deg, rgba(79, 70, 229, 0.24) 0%, rgba(2, 6, 23, 0) 100%);
	--section-green: linear-gradient(180deg, rgba(16, 185, 129, 0.2) 0%, rgba(2, 6, 23, 0) 100%);
	--section-amber: linear-gradient(180deg, rgba(245, 158, 11, 0.2) 0%, rgba(2, 6, 23, 0) 100%);
	--section-rose: linear-gradient(180deg, rgba(244, 63, 94, 0.22) 0%, rgba(2, 6, 23, 0) 100%);
}

html {
	scroll-behavior: smooth;
}

body {
	color: var(--ink);
	background: var(--page-bg);
}

.navbar {
	backdrop-filter: blur(10px);
	background: var(--nav-bg) !important;
	border-bottom: 1px solid var(--nav-border);
}

.site-footer {
	background: var(--card-bg) !important;
	border-color: var(--line) !important;
	color: var(--ink);
}

.site-footer a {
	color: inherit;
}

section {
	padding: 4.5rem 0;
	scroll-margin-top: 88px;
}

.section-soft-blue {
	background: var(--section-blue);
}

.section-soft-cyan {
	background: var(--section-cyan);
}

.section-soft-indigo {
	background: var(--section-indigo);
}

.section-soft-green {
	background: var(--section-green);
}

.section-soft-amber {
	background: var(--section-amber);
}

.section-soft-rose {
	background: var(--section-rose);
}

.lead,
	.text-muted-custom {
	color: var(--muted);
}

.hero-title {
	font-size: clamp(2.2rem, 5vw, 4rem);
	letter-spacing: -0.03em;
}

.eyebrow {
	display: inline-block;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	background: rgba(37, 99, 235, 0.1);
	color: #1d4ed8;
}

.panel-glass {
	background: var(--panel-bg);
	border: 1px solid var(--line);
	border-radius: 1rem;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
}

.card,
.list-group-item,
.blockquote {
	background-color: var(--card-bg) !important;
	border-color: var(--line) !important;
	color: var(--ink);
}

[data-bs-theme="dark"] .btn-outline-dark {
	--bs-btn-color: #e5e7eb;
	--bs-btn-border-color: rgba(229, 231, 235, 0.72);
	--bs-btn-hover-color: #020617;
	--bs-btn-hover-bg: #e5e7eb;
	--bs-btn-hover-border-color: #e5e7eb;
}

[data-bs-theme="dark"] .btn-dark {
	--bs-btn-bg: #e5e7eb;
	--bs-btn-border-color: #e5e7eb;
	--bs-btn-color: #020617;
	--bs-btn-hover-bg: #cbd5e1;
	--bs-btn-hover-border-color: #cbd5e1;
	--bs-btn-hover-color: #020617;
}

[data-bs-theme="dark"] .btn-light,
[data-bs-theme="dark"] .text-bg-light {
	background-color: rgba(15, 23, 42, 0.92) !important;
	color: #e5e7eb !important;
	border-color: var(--line) !important;
}

.rounded-pill {
	padding: 6px 20px;
}

.photo-card,
.app-photo,
.profile-photo-square,
.profile-photo-landscape {
	border: 1px solid var(--line);
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.photo-card {
	overflow: hidden;
	border-radius: 0.9rem;
}

.photo-card img,
.app-photo {
	width: 100%;
	height: 230px;
	object-fit: cover;
	display: block;
}

.profile-photo-square {
	width: 110px;
	height: 110px;
	object-fit: cover;
	border-radius: 1rem;
}

.profile-photo-landscape {
	width: 100%;
	height: 240px;
	object-fit: cover;
	border-radius: 1rem;
}

.badge-soft {
	background: #eef2ff;
	color: #3730a3;
	border: 1px solid #c7d2fe;
}

[data-bs-theme="dark"] .badge-soft {
	background: rgba(79, 70, 229, 0.26);
	color: #c7d2fe;
	border-color: rgba(199, 210, 254, 0.32);
}

@media (max-width: 991.98px) {

	.photo-card img,
	.app-photo,
	.profile-photo-landscape {
		height: 210px;
	}
}