:root {
	--bg: #040202; /* deep near-black */
	--surface: #090506;
	--muted: #b9a9a9;
	--text: #e9e6e6;
	--accent: #ff2d2d; /* neon red */
	--accent-2: #ff6b6b; /* softer red */
	--border: rgba(255,45,45,0.08);
	--glass: rgba(255,45,45,0.03);
	--glow: rgba(255,45,45,0.12);
	--radius: 10px;
	--max-width: 1100px;
	--fw-heading: 700;
	--fw-body: 400;
}

/* Box model */
*, *::before, *::after { box-sizing: border-box; }

/* Reset + base */
html, body { min-height: 100%; }
body {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background:
		radial-gradient(900px 400px at 10% 12%, rgba(255,45,45,0.03), transparent),
		linear-gradient(180deg, rgba(255,45,45,0.01), transparent),
		var(--bg);
	color: var(--text);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
	font-weight: var(--fw-body);
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
}

main { flex: 1; }

/* Layout helpers */
.container {
	width: 100%;
	max-width: var(--max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

.stack { display: flex; flex-direction: column; gap: 1rem; }
.center { display:flex; align-items:center; justify-content:center; }

/* Header / Nav */
.site-header {
	background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
	border-bottom: 1px solid var(--border);
	backdrop-filter: blur(6px);
}
.site-nav {
	display:flex;
	align-items:center;
	gap:1rem;
	padding:1rem 0;
}
.brand {
	font-weight: var(--fw-heading);
	color: var(--accent);
	font-size: 1.1rem;
	letter-spacing: -0.01em;
	text-shadow: 0 0 10px var(--glow);
}
.nav-links { margin-left: auto; display:flex; gap:0.75rem; }
.nav-links a {
	color: var(--muted);
	text-decoration: none;
	padding: 0.45rem 0.6rem;
	border-radius: 8px;
}
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.015); box-shadow: 0 4px 18px rgba(255,45,45,0.035); }

/* Hero */
.hero {
	padding: 4rem 0 2rem;
}
.hero h1 {
	margin: 0 0 0.5rem 0;
	font-size: clamp(1.6rem, 4vw, 3.2rem);
	line-height: 1.05;
	font-weight: 800;
	color: var(--text);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
	text-shadow: 0 1px 0 rgba(0,0,0,0.6), 0 0 12px rgba(255,45,45,0.06);
}
.hero p { color: var(--muted); margin: 0 0 1.25rem 0; max-width: 60ch; }

/* Languages */
.languages-section {
	padding: 1rem 0 1.5rem;
}
.languages-section h2 {
	margin: 0 0 0.35rem;
	font-size: 1.3rem;
	color: var(--text);
}
.certifications-section {
	padding-top: 0.5rem;
}
.language-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 1rem;
}
.language-card {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1rem;
	background: linear-gradient(180deg, rgba(255,45,45,0.015), rgba(0,0,0,0.18));
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 8px 30px rgba(0,0,0,0.55);
}
.language-card h3 {
	margin: 0 0 0.2rem;
	font-size: 1rem;
	color: var(--text);
}
.language-card p {
	margin: 0;
	color: var(--muted);
	font-size: 0.92rem;
}
.lang-icon {
	font-size: 1.4rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background: rgba(255,45,45,0.08);
	border: 1px solid rgba(255,45,45,0.12);
}

/* Cards */
.card {
	background: linear-gradient(180deg, rgba(255,45,45,0.01), rgba(0,0,0,0.12));
	border: 1px solid var(--border);
	padding: 1rem;
	border-radius: var(--radius);
	box-shadow: 0 8px 30px rgba(0,0,0,0.7);
	transition: transform 180ms ease, box-shadow 180ms ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,0.75), 0 0 24px rgba(255,45,45,0.03); }

.course-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	margin: 2rem 0 3rem;
}
.course-nav {
	position: sticky;
	top: 1rem;
}
.course-nav h2 {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
	color: var(--text);
}
.course-nav-links {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.course-group {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.course-nav-link {
	width: 100%;
	text-align: left;
	padding: 0.75rem 0.85rem;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: rgba(255,255,255,0.02);
	color: var(--muted);
	cursor: pointer;
	transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
}
.course-nav-link:hover, .course-nav-link.active {
	background: rgba(255,45,45,0.08);
	color: var(--text);
	border-color: rgba(255,45,45,0.2);
}
.course-nav-link.child-link {
	margin-left: 0.7rem;
	padding: 0.6rem 0.75rem;
	font-size: 0.92rem;
}
.course-submodules {
	display: none;
	flex-direction: column;
	gap: 0.4rem;
	margin-left: 0.25rem;
}
.course-group.open .course-submodules {
	display: flex;
}
.course-arrow {
	transition: transform 180ms ease;
	color: var(--accent);
}
.course-group.open .course-arrow {
	transform: rotate(90deg);
}
.course-content {
	min-height: 320px;
}
.course-panel {
	display: none;
}
.course-panel.active {
	display: block;
}
.course-panel h2 {
	margin-top: 0;
	color: var(--text);
}
.course-panel p, .course-panel li {
	color: var(--muted);
}
.course-panel ul {
	padding-left: 1.1rem;
}

.grid { display:grid; gap:1rem; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

/* Buttons */
.btn {
	display:inline-flex;
	align-items:center;
	gap:0.6rem;
	padding: 0.55rem 0.9rem;
	border-radius: 9px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
}
.btn-primary {
	background: linear-gradient(180deg, var(--accent), var(--accent-2));
	color: #100101;
	border-color: rgba(255,45,45,0.06);
	box-shadow: 0 6px 22px rgba(255,45,45,0.06);
}
.btn-ghost {
	background: transparent;
	color: var(--muted);
	border-color: var(--border);
}
.btn:focus { outline: 3px solid rgba(255,45,45,0.12); }

/* Forms */
input, textarea, select {
	width:100%;
	padding:0.6rem 0.75rem;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: rgba(255,255,255,0.01);
	color: var(--text);
}
label { color: var(--muted); font-size: 0.95rem; }

/* Code / Pre */
pre, code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
	background: #060202;
	color: #ffb6b6;
	padding: 0.4rem 0.6rem;
	border-radius: 6px;
	font-size: 0.92rem;
}
pre { overflow:auto; padding:1rem; }

/* Terminal / hacker flair */
.terminal {
	background: #020202;
	border: 1px solid rgba(255,45,45,0.06);
	color: #ff7b7b;
	padding: 1rem;
	border-radius: 8px;
	font-family: ui-monospace, monospace;
	box-shadow: inset 0 -6px 40px rgba(255,45,45,0.02);
}
.terminal .caret { display:inline-block; width:8px; height:1.05em; background:var(--accent); margin-left:6px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
pre { overflow:auto; padding:1rem; }

/* Tables */
table { width:100%; border-collapse: collapse; }
th, td { padding:0.6rem; text-align:left; border-bottom: 1px solid rgba(255,255,255,0.03); }
th { color: var(--muted); font-weight: 600; }

/* Footer */
.site-footer {
	padding: 2rem 0;
	color: var(--muted);
	border-top: 1px solid var(--border);
}

/* Utilities */
.muted { color: var(--muted); }
.uppercase { text-transform: uppercase; letter-spacing: 0.08em; }
.pill { display:inline-block; padding:0.25rem 0.6rem; background: rgba(255,255,255,0.02); border-radius:999px; color:var(--muted); font-weight:600; }
.avatar { width:36px; height:36px; border-radius:50%; overflow:hidden; display:inline-block; border:1px solid var(--border); }

/* Accessibility helpers */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Responsive */
@media (max-width: 800px) {
	.grid-cols-2 { grid-template-columns: 1fr; }
	.nav-links { display:none; }
	.hero { padding: 2.5rem 0 1.25rem; }
	.language-grid { grid-template-columns: 1fr; }
	.course-layout { grid-template-columns: 1fr; }
	.course-nav { position: static; }
}

/* Small touches */
a { color: var(--accent); text-shadow: 0 0 8px var(--glow); }
a:hover { text-decoration: underline; filter: drop-shadow(0 2px 8px rgba(255,45,45,0.08)); }

/* Light preference fallback */
@media (prefers-color-scheme: light) {
	:root { --bg: #0b0b0b; }
}