:root {
	--bg: #fafafa;
	--bg-soft: #f5f5f4;
	--surface: #ffffff;
	--text: #111111;
	--muted: #666666;
	--accent: #00b86b;
	--accent-green: #00b86b;
	--accent-soft: #00c16a;
	--line: #e5e7eb;
	--line-bright: rgba(0, 184, 107, 0.25);
	
	--selection-bg: rgba(0, 184, 107, 0.12);
	--accent-bg: rgba(0, 184, 107, 0.05);
	--grid-line: rgba(17, 17, 17, 0.025);
	--terminal-bg: rgba(255, 255, 255, 0.65);
	--terminal-header-bg: rgba(255, 255, 255, 0.4);
	--terminal-border: rgba(17, 17, 17, 0.06);
	--inset-shadow: rgba(255, 255, 255, 0.9);
	--shadow-color: rgba(0, 0, 0, 0.04);
	--shadow-hover-color: rgba(0, 0, 0, 0.06);

	--max-width: 1400px;
	--nav-height: 72px;
	--nav-height-mobile: 60px;
	--radius: 12px;
	--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-serif: "Space Grotesk", "Inter", sans-serif;
	--font-mono: "JetBrains Mono", monospace;
}

html[data-theme="dark"] {
	--bg: #0f1115;
	--bg-soft: #1d2330; /* Secondary Surface */
	--surface: #161a22; /* Surface */
	--text: #f5f7fa;
	--muted: #9aa4b2;
	--accent: #00cf76; /* Accent Green (slightly brighter) */
	--accent-green: #00cf76;
	--accent-soft: #10b981;
	--line: #2b3240; /* Border */
	--line-bright: rgba(0, 207, 118, 0.25);
	
	--selection-bg: rgba(0, 207, 118, 0.15);
	--accent-bg: rgba(0, 207, 118, 0.08);
	--grid-line: rgba(255, 255, 255, 0.015);
	--terminal-bg: #111827;
	--terminal-header-bg: #1f2937;
	--terminal-border: #2b3240;
	--inset-shadow: rgba(255, 255, 255, 0.05);
	--shadow-color: rgba(0, 0, 0, 0.3);
	--shadow-hover-color: rgba(0, 0, 0, 0.4);
}

/* Smooth transitions for theme switching */
body,
.site-header,
.mobile-nav,
.terminal-window,
.terminal-header,
.terminal-body,
.site-footer {
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--nav-height); /* prevent anchor links hiding under sticky header */
}

body {
	min-width: 320px;
	margin: 0;
	background-color: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.6;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	
	/* Layout container */
	display: flex;
	flex-direction: column;
	min-height: 100dvh; /* ensure body always fills the viewport */
}

/* Atmospheric background grid pattern, almost invisible */
body::before {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	content: "";
	background-image:
		linear-gradient(var(--grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 95%);
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 95%);
}

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

button, a {
	-webkit-tap-highlight-color: transparent;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

::selection {
	background: var(--selection-bg);
	color: var(--text);
}

/* Skip link */
.skip-link {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 50;
	padding: 0.6rem 1rem;
	border-radius: 6px;
	background: var(--text);
	color: var(--bg);
	font-weight: 500;
	font-size: 0.88rem;
	transform: translateY(-160%);
	border: 1px solid var(--line);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.skip-link:focus {
	transform: translateY(0);
}

.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;
}

/* Site Header */
.site-header {
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: var(--bg); /* fully opaque — prevents content bleed-through when scrolling */
	border-bottom: 1px solid var(--line);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--nav-height);
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 24px;
}

.brand {
	font-family: var(--font-serif);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 4px;
}

.brand-dot {
	color: var(--accent);
	font-size: 0.8rem;
	margin-left: 3px;
	text-shadow: none;
}

.brand:hover {
	opacity: 0.8;
}

.desktop-nav {
	display: flex;
	align-items: center;
	gap: 32px;
}

.desktop-nav a {
	color: var(--muted);
	font-size: 0.88rem;
	font-weight: 500;
	position: relative;
}

.desktop-nav a:hover {
	color: var(--text);
}

.desktop-nav a[aria-current="page"] {
	color: var(--accent);
}

/* Theme Toggle Button */
.theme-toggle {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	outline: none;
	padding: 0;
}

.theme-toggle:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.desktop-nav .theme-toggle {
	width: 36px;
	height: 36px;
	border-radius: 8px;
}

.desktop-nav .theme-toggle:hover {
	color: var(--text);
	background-color: var(--bg-soft);
}

.mobile-nav,
.mobile-menu-toggle {
	display: none !important;
}

/* Main content */
#main {
	flex: 1; /* grow to fill remaining viewport height */
	display: flex;
	flex-direction: column;
	/*
	 * justify-content: space-between pushes the social section to the bottom
	 * of #main, so extra viewport space (on tall screens) distributes
	 * BETWEEN hero and social — not between social and footer.
	 * This keeps icons → footer at exactly the explicit margin-bottom value.
	 */
	justify-content: space-between;
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 24px;
}

/* Hero Section */
.hero {
	width: 100%;
	padding: 0;
	margin-top: 140px; /* Desktop baseline: Navbar ↓ 140px ↓ Hero */
}

.hero-shell {
	width: 100%;
}

/* Two-column layout grid: 55% left, 45% right */
.hero-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 56px;
	align-items: center;
}

.hero-left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

.hero-headline {
	font-family: var(--font-serif);
	font-size: clamp(2.2rem, 4.5vw, 3.4rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--text);
	margin: 0 0 24px 0; /* Headline ↓ 24px ↓ Description */
}

.hero-description {
	font-size: clamp(0.95rem, 1.8vw, 1.1rem);
	line-height: 1.6;
	color: var(--muted);
	margin: 0 0 32px 0; /* Description ↓ 32px ↓ CTA */
	max-width: 520px; /* Limit width to 520px for 2-3 lines */
	text-align: left;
}

/* CTA */
.cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--text);
	color: var(--bg);
	font-size: 0.88rem;
	font-weight: 500;
	padding: 10px 20px;
	border-radius: 6px;
	border: 1px solid var(--text);
	box-shadow: 0 2px 8px rgba(17, 17, 17, 0.04);
	cursor: pointer;
}

.cta-button:hover {
	background: var(--bg);
	color: var(--accent);
	border-color: var(--accent);
	box-shadow: 0 4px 16px rgba(0, 184, 107, 0.08);
	transform: translateY(-1px);
}

/* Right Column - Terminal container */
.hero-right {
	display: flex;
	justify-content: center;
	width: 100%;
}

.terminal-window {
	width: 100%;
	max-width: 580px; /* Desktop: 560-620px width range */
	min-height: 340px; /* Desktop: 320-360px height range */
	display: flex;
	flex-direction: column;
	background: var(--terminal-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--terminal-border);
	border-radius: var(--radius);
	box-shadow: 
		0 40px 80px var(--shadow-color), 
		0 2px 6px rgba(0, 0, 0, 0.01),
		inset 0 1px 0 var(--inset-shadow);
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.terminal-window:hover {
	transform: translateY(-4px);
	box-shadow: 
		0 48px 96px var(--shadow-hover-color), 
		0 4px 12px rgba(0, 0, 0, 0.01),
		inset 0 1px 0 var(--inset-shadow);
}

.terminal-header {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	padding: 0 16px;
	border-bottom: 1px solid var(--terminal-border);
	background: var(--terminal-header-bg);
	flex-shrink: 0;
}

.terminal-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.terminal-dot.red { background: #ff5f57; }
.terminal-dot.yellow { background: #ffbd2e; }
.terminal-dot.green { background: #28c840; }

.terminal-body {
	padding: 32px;
	font-family: var(--font-mono);
	font-size: 0.95rem;
	line-height: 1.6;
	text-align: left;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.terminal-line {
	margin: 0;
	white-space: pre-wrap;
	word-break: break-all;
	color: var(--text);
	position: relative;
	min-height: 1.9em;
}

.terminal-line + .terminal-line {
	margin-top: 4px;
}

.prompt-user {
	color: var(--accent);
	font-weight: 500;
}

.prompt-separator {
	color: var(--muted);
}

.prompt-dir {
	color: #2563eb;
	font-weight: 500;
}

.prompt-symbol {
	color: var(--muted);
}

/* Typing cursor */
.terminal-line::after {
	content: "_";
	color: var(--accent);
	font-weight: bold;
	opacity: 0;
	display: inline-block;
	margin-left: 2px;
	vertical-align: baseline;
}

.terminal-line.is-active::after {
	opacity: 1;
	animation: cursor-blink 1s steps(2, start) infinite;
}

.terminal-line.is-idle::after {
	opacity: 1;
	animation: cursor-blink 1s steps(2, start) infinite;
}

@keyframes cursor-blink {
	50% { opacity: 0; }
}

/* Social Section & Eyebrow Heading */
.social-section {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin-top: 0;
	margin-bottom: 0;
}

.social-heading {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	color: var(--accent-green);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	text-align: center;
	margin-top: 0;
	margin-bottom: 20px;
}

.social-icons-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 28px;
	margin: 0;
	margin-bottom: 0;
	width: 100%;
}

.social-icons-row a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
	padding: 8px;
	border-radius: 8px;
}

.social-icons-row a:hover {
	color: var(--accent);
}

.social-icons-row a svg {
	width: 22px;
	height: 22px;
	transition: stroke 0.25s ease, color 0.25s ease;
}

/* Site Footer */
.site-footer {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 16px 24px 24px 24px;
	border-top: 1px solid var(--line);
}

.footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.72rem;
	color: var(--muted);
	font-weight: 400;
	width: 100%;
}

.footer-inner a {
	color: var(--muted);
	font-weight: 400;
}

.footer-inner a:hover {
	color: var(--text);
}

.footer-inner p {
	margin: 0;
	font-weight: 400;
}

.status-line {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--accent);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 400;
}

/* Reveal transition classes */
.reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Desktop Spacing Refinements (>= 1024px) */
@media (min-width: 1024px) {
	.hero {
		margin-bottom: 120px; /* Hero ↓ 120px ↓ LET'S CONNECT */
	}

	.social-section {
		margin-top: 0;
		margin-bottom: 0;
	}

	.social-icons-row {
		margin-bottom: 80px; /* Icons ↓ 80px ↓ Footer */
	}
}

/* ----------------------------------------------------
   RESPONSIVE DESIGN / MEDIA QUERIES
   ---------------------------------------------------- */
@media (max-width: 1024px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 48px;
		text-align: center;
	}

	.hero-left {
		align-items: center;
		text-align: center;
	}

	.hero-description {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}


}

@media (max-width: 1023px) and (min-width: 768px) {
	.hero {
		margin-top: 240px;    /* Navbar ↓ 240px ↓ Hero */
		margin-bottom: 100px; /* Hero ↓ 100px ↓ LET'S CONNECT */
	}

	.social-section {
		margin-top: 0;
		margin-bottom: 0;
	}

	.social-icons-row {
		margin-bottom: 70px; /* Icons ↓ 70px ↓ Footer */
	}

	.terminal-container {
		margin-top: 44px;
	}
}

/* Mobile Spacing & Height Fix (<768px) */
@media (max-width: 767px) {
	body::before {
		background-size: 48px 48px;
	}

	.navbar {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: var(--nav-height-mobile);
		padding: 0;
		position: relative; /* keeps dropdown anchored to navbar bottom */
	}

	html {
		scroll-padding-top: var(--nav-height-mobile);
	}

	/* On mobile, hero is very tall and overflows #main on small screens.
	 * Reset to flex-start so content flows top-to-bottom without
	 * justify-content: space-between forcing a negative/broken gap. */
	#main {
		justify-content: flex-start;
	}

	.desktop-nav {
		display: none !important;
	}

	.mobile-menu-toggle {
		display: flex !important;
		align-items: center;
		justify-content: center;
		background: none;
		border: none;
		padding: 8px;
		cursor: pointer;
		color: var(--muted);
		border-radius: 8px;
		transition: all 0.15s ease;
	}

	.mobile-menu-toggle:hover {
		color: var(--text);
		background: var(--bg-soft);
	}

	.menu-icon {
		width: 20px;
		height: 20px;
		stroke-width: 2.2;
	}

	.mobile-nav {
		display: none !important;
		position: absolute;
		top: calc(100% + 4px);
		right: 0;
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: 12px; /* 12px border radius */
		box-shadow: 
			0 12px 28px rgba(0, 0, 0, 0.06),
			0 4px 12px rgba(0, 0, 0, 0.02);
		padding: 6px;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		min-width: 180px; /* min-width: 180px */
		z-index: 100;
		transform-origin: top right;
	}

	.mobile-nav.is-open {
		display: flex !important;
		animation: menu-slide-in 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	}

	.mobile-nav a {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 44px; /* min-height: 44px touch target */
		padding: 0 16px;
		font-size: 0.88rem;
		font-weight: 500;
		color: var(--muted);
		border-radius: 8px;
		box-sizing: border-box;
		transition: all 0.15s ease;
	}

	.mobile-nav a:hover {
		background: var(--bg-soft);
		color: var(--text);
	}

	.mobile-nav a[aria-current="page"] {
		color: var(--accent);
		background: rgba(0, 184, 107, 0.05);
	}

	.mobile-nav .theme-toggle {
		width: 100%;
		min-height: 44px;
		padding: 0 16px;
		font-size: 0.88rem;
		font-weight: 500;
		border-radius: 8px;
		justify-content: flex-start;
		box-sizing: border-box;
		color: var(--muted);
	}

	.mobile-nav .theme-toggle:hover {
		background: var(--bg-soft);
		color: var(--text);
	}

	@keyframes menu-slide-in {
		from {
			opacity: 0;
			transform: scale(0.96) translateY(-4px);
		}
		to {
			opacity: 1;
			transform: scale(1) translateY(0);
		}
	}

	.hero {
		margin-top: 40px;    /* Mobile: Navbar ↓ 40px ↓ Hero */
		margin-bottom: 0;
	}

	.hero-headline {
		font-size: 2.2rem;
		line-height: 1.15;
	}

	.hero-description {
		max-width: 320px; /* Mobile: max-width: 320px */
		line-height: 1.7; /* Mobile: line-height: 1.7 */
	}

	.terminal-container {
		margin-top: 40px; /* CTA -> 40px -> Terminal */
	}

	.terminal-window {
		min-height: 210px; /* Fit terminal lines snugly (reduced by ~38%) */
		height: auto;
	}

	.terminal-body {
		padding: 20px 24px; /* Reduced vertical spacing to fit content closely */
		font-size: 0.8rem;
	}

	.terminal-line {
		min-height: auto; /* Content-based height */
	}

	.social-section {
		margin-top: 50px;    /* Hero ↓ 50px ↓ LET'S CONNECT */
		margin-bottom: 0;
	}

	.social-heading {
		margin-bottom: 16px; /* Mobile: LET'S CONNECT ↓ 16px ↓ Icons */
	}

	.social-icons-row {
		gap: 24px;
		/* Icons ↓ 40–56px ↓ Footer on mobile */
		margin-bottom: clamp(40px, 5vh, 56px);
	}

	.social-icons-row a svg {
		width: 19px;
		height: 19px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.reveal {
		opacity: 1;
		transform: none;
	}
}