*,
	*::before,
	*::after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	/* ═══════════════════════════════
       PALETTE VARIABLES — dark base
    ═══════════════════════════════ */
	:root {
		/* Dark base */
		--bg: #0a0a0f;
		--bg2: #111118;
		--bg3: #1a1a24;
		--border: rgba(255, 255, 255, 0.07);
		--text: #e2e8f0;
		--muted: #94a3b8;
		--card: rgba(255, 255, 255, 0.03);
		--card-hover: rgba(255, 255, 255, 0.06);
		--nav-bg: rgba(10, 10, 15, 0.88);
		/* Purple (default palette) */
		--accent: #6c63ff;
		--accent2: #a78bfa;
		--accent3: #38bdf8;
		--glow: rgba(108, 99, 255, 0.18);
	}

	/* ── Palettes (dark) ── */
	:root.p-ocean {
		--accent: #0ea5e9;
		--accent2: #22d3ee;
		--accent3: #67e8f9;
		--glow: rgba(14, 165, 233, 0.18);
	}

	:root.p-emerald {
		--accent: #10b981;
		--accent2: #34d399;
		--accent3: #6ee7b7;
		--glow: rgba(16, 185, 129, 0.18);
	}

	:root.p-rose {
		--accent: #f43f5e;
		--accent2: #fb7185;
		--accent3: #fda4af;
		--glow: rgba(244, 63, 94, 0.18);
	}

	:root.p-amber {
		--accent: #f59e0b;
		--accent2: #fbbf24;
		--accent3: #fde68a;
		--glow: rgba(245, 158, 11, 0.18);
	}

	/* ── Light mode ── */
	html.light {
		--bg: #f4f4fa;
		--bg2: #ebebf5;
		--bg3: #e0e0f0;
		--border: rgba(0, 0, 0, 0.09);
		--text: #18181f;
		--muted: #52526e;
		--card: rgba(0, 0, 0, 0.03);
		--card-hover: rgba(0, 0, 0, 0.06);
		--nav-bg: rgba(244, 244, 250, 0.9);
	}

	/* Light palette overrides */
	html.light {
		--accent: #5b52e8;
		--accent2: #7c5cbf;
		--accent3: #0284c7;
		--glow: rgba(91, 82, 232,0.22);
	}

	html.light.p-ocean {
		--accent: #0284c7;
		--accent2: #0369a1;
		--accent3: #0ea5e9;
		--glow: rgba(2, 132, 199,0.22);
	}

	html.light.p-emerald {
		--accent: #059669;
		--accent2: #047857;
		--accent3: #10b981;
		--glow: rgba(5, 150, 105,0.22);
	}

	html.light.p-rose {
		--accent: #e11d48;
		--accent2: #be123c;
		--accent3: #f43f5e;
		--glow: rgba(225, 29, 72,0.22);
	}

	html.light.p-amber {
		--accent: #d97706;
		--accent2: #b45309;
		--accent3: #f59e0b;
		--glow: rgba(217, 119, 6,0.22);
	}

	html {
		scroll-behavior: smooth;
	}

	body {
		font-family: 'Inter', sans-serif;
		background: var(--bg);
		color: var(--text);
		line-height: 1.6;
		overflow-x: hidden;
		transition: background 0.3s, color 0.3s;
	}

	/* ═══════════════════════════════
       ANIMATED BACKGROUND SYSTEM
    ═══════════════════════════════ */

	/* Canvas — circuit node network */
	#bg-canvas {
		position: fixed;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		opacity: 0.65;
		transition: opacity 0.6s ease;
	}
	html.light #bg-canvas { opacity: 0.2; }

	/* Aurora blobs */
	.bg-aura {
		position: fixed;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		overflow: hidden;
	}
	.bg-aura-blob {
		position: absolute;
		border-radius: 50%;
		background: radial-gradient(circle, var(--glow) 0%, transparent 68%);
		will-change: transform;
		transition: background 0.6s ease;
	}
	/* Top-left blob */
	.bg-aura-blob--1 {
		width: 70vw; height: 70vw;
		top: -25vw; left: -15vw;
		animation: aura-drift-1 18s ease-in-out infinite;
	}
	/* Bottom-right blob */
	.bg-aura-blob--2 {
		width: 55vw; height: 55vw;
		bottom: -18vw; right: -12vw;
		background: radial-gradient(circle, var(--glow) 0%, transparent 65%);
		animation: aura-drift-2 22s ease-in-out infinite;
	}
	/* Centre accent blob */
	.bg-aura-blob--3 {
		width: 40vw; height: 40vw;
		top: 35%; left: 50%;
		transform: translateX(-50%);
		opacity: 0.5;
		background: radial-gradient(circle, var(--glow) 0%, transparent 60%);
		animation: aura-drift-3 26s ease-in-out infinite;
	}

	@keyframes aura-drift-1 {
		0%, 100% { transform: translate(0, 0)          scale(1);    opacity: 1;   }
		33%       { transform: translate(4vw, 6vw)      scale(1.08); opacity: 0.8; }
		66%       { transform: translate(-3vw, 3vw)     scale(0.94); opacity: 1;   }
	}
	@keyframes aura-drift-2 {
		0%, 100% { transform: translate(0, 0)          scale(1);    opacity: 1;   }
		40%       { transform: translate(-5vw, -4vw)    scale(1.12); opacity: 0.7; }
		70%       { transform: translate(3vw, -6vw)     scale(0.92); opacity: 0.9; }
	}
	@keyframes aura-drift-3 {
		0%, 100% { transform: translateX(-50%) scale(1);    opacity: 0.5; }
		50%       { transform: translateX(-50%) scale(1.2); opacity: 0.25; }
	}

	/* Light mode — softer blobs */
	html.light .bg-aura-blob--1,
	html.light .bg-aura-blob--2 { opacity: 0.55; }
	html.light .bg-aura-blob--3 { opacity: 0.25; }

	body::before {
		content: '';
		position: fixed;
		inset: 0;
		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
		pointer-events: none;
		z-index: 0;
	}

	/* ═══════════════════════════════
       HERO TERMINAL NAME
    ═══════════════════════════════ */
	@keyframes blink {

		0%,
		100% {
			opacity: 1
		}

		50% {
			opacity: 0
		}
	}

	.hero-name {
		font-family: 'Fira Code', monospace !important;
		letter-spacing: 0 !important;
	}

	.term-prompt {
		-webkit-text-fill-color: var(--accent);
		color: var(--accent);
	}

	.term-cursor {
		-webkit-text-fill-color: var(--accent2);
		color: var(--accent2);
		animation: blink 0.75s step-end infinite;
		font-weight: 400;
	}

	/* ═══════════════════════════════
       NAV
    ═══════════════════════════════ */
	nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		padding: 0.85rem 1.5rem;
		display: flex;
		align-items: center;
		gap: 1rem;
		backdrop-filter: blur(20px);
		background: var(--nav-bg);
		border-bottom: 1px solid var(--border);
		transition: background 0.3s;
	}

	.nav-logo {
		font-family: 'Fira Code', monospace;
		font-size: 1rem;
		color: var(--accent2);
		letter-spacing: 0.05em;
		flex-shrink: 0;
	}

	.nav-logo span {
		color: var(--accent3);
	}

	.nav-links {
		display: flex;
		gap: 1.5rem;
		list-style: none;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.nav-links a {
		font-size: 0.8rem;
		font-weight: 500;
		color: var(--muted);
		text-decoration: none;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		transition: color 0.2s;
	}

	.nav-links a:hover {
		color: var(--accent2);
	}

	/* palette picker */
	.palette-picker {
		display: flex;
		align-items: center;
		gap: 6px;
		flex-shrink: 0;
	}

	.palette-btn {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		border: 2px solid transparent;
		cursor: pointer;
		transition: all 0.2s;
		outline: none;
		padding: 0;
	}

	.palette-btn:hover,
	.palette-btn.active {
		border-color: var(--text);
		transform: scale(1.25);
	}

	/* theme toggle */
	.theme-toggle {
		background: var(--card);
		border: 1px solid var(--border);
		color: var(--text);
		border-radius: 8px;
		width: 34px;
		height: 34px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		font-size: 0.95rem;
		transition: all 0.2s;
		flex-shrink: 0;
	}

	.theme-toggle:hover {
		background: var(--card-hover);
		border-color: var(--accent2);
	}

	#lang-select {
		background: var(--card);
		border: 1px solid var(--border);
		color: var(--text);
		border-radius: 8px;
		height: 34px;
		padding: 0 0.4rem;
		font-size: 0.8rem;
		cursor: pointer;
		transition: all 0.2s;
		flex-shrink: 0;
		font-family: 'Inter', sans-serif;
	}

	#lang-select:hover {
		border-color: var(--accent2);
	}

	#lang-select:focus {
		outline: none;
		border-color: var(--accent);
	}

	.nav-controls {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		margin-left: auto;
		flex-shrink: 0;
	}

	.nav-toggle {
		display: none;
		background: none;
		border: none;
		color: var(--text);
		font-size: 1.4rem;
		cursor: pointer;
		flex-shrink: 0;
	}

	/* ═══════════════════════════════
       HERO
    ═══════════════════════════════ */
	#hero {
		min-height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 7rem 2rem 4rem;
		position: relative;
		overflow: hidden;
	}

	.hero-glow {
		position: absolute;
		width: 600px;
		height: 600px;
		background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		pointer-events: none;
		transition: background 0.4s;
	}

	.hero-glow-2 {
		position: absolute;
		width: 400px;
		height: 400px;
		background: radial-gradient(circle, rgba(56, 189, 248, 0.07) 0%, transparent 70%);
		top: 20%;
		right: 10%;
		pointer-events: none;
	}

	.hero-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		position: relative;
		z-index: 1;
		max-width: 820px;
		width: 100%;
	}

	/* avatar */
	.hero-avatar-wrap {
		position: relative;
		width: 130px;
		height: 130px;
		margin-bottom: 1.75rem;
		flex-shrink: 0;
	}

	.hero-avatar {
		width: 130px;
		height: 130px;
		border-radius: 50%;
		object-fit: cover;
		object-position: center top;
		display: block;
		box-shadow:
			0 0 0 3px var(--bg),
			0 0 0 5px var(--accent),
			0 0 30px var(--glow);
		transition: box-shadow 0.4s;
	}

	.hero-avatar-ring {
		position: absolute;
		inset: -10px;
		border-radius: 50%;
		border: 2px dashed rgba(167, 139, 250, 0.4);
		animation: spin 18s linear infinite;
		pointer-events: none;
	}

	@keyframes spin {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(360deg)
		}
	}

	@keyframes pulse {

		0%,
		100% {
			opacity: 1;
			transform: scale(1)
		}

		50% {
			opacity: .6;
			transform: scale(1.3)
		}
	}

	/* badge */
	.hero-badge {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.4rem 1rem;
		border-radius: 999px;
		border: 1px solid var(--border);
		background: var(--card);
		font-size: 0.8rem;
		color: var(--muted);
		margin-bottom: 1.5rem;
		font-family: 'Fira Code', monospace;
	}

	.hero-badge-dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: #22c55e;
		box-shadow: 0 0 8px #22c55e;
		animation: pulse 2s infinite;
	}

	.hero-name {
		font-size: clamp(2.5rem, 7vw, 4rem);
		font-weight: 800;
		letter-spacing: -0.03em;
		line-height: 1.2;
		background: linear-gradient(135deg, var(--text) 0%, var(--accent2) 50%, var(--accent3) 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		margin-bottom: 1rem;
		padding-bottom: 0.05em;
	}

	.hero-title {
		font-size: clamp(1rem, 2.5vw, 1.25rem);
		color: var(--muted);
		font-weight: 400;
		margin-bottom: 1.5rem;
	}

	#rotating-title,
	#rotating-title-footer {
		display: inline-block;
		transition: opacity 0.6s ease;
	}

	#rotating-title.fade-out,
	#rotating-title-footer.fade-out {
		opacity: 0;
	}

	#rotating-title.fade-in,
	#rotating-title-footer.fade-in {
		opacity: 1;
	}

	.hero-title strong {
		color: var(--accent2);
		font-weight: 600;
	}

	.hero-certs {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.4rem;
		margin-bottom: 2rem;
	}

	.cert-pill {
		font-family: 'Fira Code', monospace;
		font-size: 0.7rem;
		padding: 0.25rem 0.75rem;
		border-radius: 999px;
		background: rgba(108, 99, 255, 0.12);
		border: 1px solid rgba(108, 99, 255, 0.3);
		color: var(--accent2);
	}

	.hero-desc {
		font-size: 1rem;
		color: var(--muted);
		max-width: 620px;
		margin: 0 auto 2.5rem;
		line-height: 1.85;
		text-align: justify;
	}

	.hero-stats {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 2rem 3rem;
		margin-bottom: 3rem;
	}

	.stat {
		text-align: center;
	}

	.stat-num {
		font-size: 2rem;
		font-weight: 800;
		background: linear-gradient(135deg, var(--accent2), var(--accent3));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		transition: background 0.4s;
	}

	.stat-label {
		font-size: 0.72rem;
		color: var(--muted);
		text-transform: uppercase;
		letter-spacing: 0.1em;
	}

	.hero-btns {
		display: flex;
		gap: 1rem;
		justify-content: center;
		flex-wrap: wrap;
	}

	.btn {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.75rem 1.75rem;
		border-radius: 8px;
		font-size: 0.9rem;
		font-weight: 600;
		text-decoration: none;
		transition: all 0.2s;
		cursor: pointer;
		border: none;
		font-family: 'Inter', sans-serif;
	}

	.btn-primary {
		background: linear-gradient(135deg, var(--accent), var(--accent2));
		color: #fff;
		box-shadow: 0 0 25px var(--glow);
	}

	.btn-primary:hover {
		transform: translateY(-2px);
		box-shadow: 0 0 40px var(--glow);
	}

	.btn-outline {
		background: transparent;
		color: var(--text);
		border: 1px solid var(--border);
	}

	.btn-outline:hover {
		background: var(--card-hover);
		border-color: var(--accent2);
		color: var(--accent2);
		transform: translateY(-2px);
	}

	/* ═══════════════════════════════
       SECTIONS
    ═══════════════════════════════ */
	section {
		padding: 6rem 2rem;
		max-width: 1100px;
		margin: 0 auto;
	}

	.section-header {
		margin-bottom: 3rem;
	}

	.section-label {
		font-family: 'Fira Code', monospace;
		font-size: 0.78rem;
		color: var(--accent3);
		letter-spacing: 0.15em;
		text-transform: uppercase;
		margin-bottom: 0.5rem;
		transition: color 0.3s;
	}

	.section-title {
		font-size: clamp(1.8rem, 4vw, 2.5rem);
		font-weight: 800;
		letter-spacing: -0.02em;
	}

	.section-divider {
		height: 1px;
		background: linear-gradient(to right, transparent, var(--border), transparent);
		margin: 0 2rem;
	}

	/* ═══════════════════════════════
       CLIENTS STRIP
    ═══════════════════════════════ */
	#clients {
		padding: 4rem 2rem;
		text-align: center;
	}

	.clients-label {
		font-family: 'Fira Code', monospace;
		font-size: 0.72rem;
		color: var(--muted);
		letter-spacing: 0.2em;
		text-transform: uppercase;
		margin-bottom: 2rem;
	}

	/* ── Clients carousel ── */
	.clients-carousel {
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
		mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
	}

	.clients-track {
		display: flex;
		align-items: center;
		gap: 3rem;
		width: max-content;
		animation: clients-scroll 35s linear infinite;
	}

	@keyframes clients-scroll {
		from {
			transform: translateX(0);
		}

		to {
			transform: translateX(-50%);
		}
	}

	.clients-track .slide {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.clients-track .slide img {
		height: 38px;
		width: auto;
		max-width: 140px;
		object-fit: contain;
		filter: grayscale(1) opacity(0.65);
		transition: filter 0.3s;
	}

	html.light .clients-track .slide img {
		filter: grayscale(1) opacity(1) brightness(0.3);
	}

	/* ═══════════════════════════════
       EXPERIENCE TIMELINE
    ═══════════════════════════════ */
	.timeline {
		position: relative;
		padding-left: 2rem;
	}

	.timeline::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 1px;
		background: linear-gradient(to bottom, transparent, var(--accent), var(--accent3), transparent);
		transition: background 0.4s;
	}

	.timeline-item {
		position: relative;
		margin-bottom: 2.5rem;
		padding: 1.5rem;
		border-radius: 12px;
		background: var(--card);
		border: 1px solid var(--border);
		transition: all 0.3s;
	}

	.timeline-item:hover {
		background: var(--card-hover);
		border-color: var(--accent);
		transform: translateX(4px);
		box-shadow: 0 0 30px var(--glow);
	}

	.timeline-item::before {
		content: '';
		position: absolute;
		left: -2.5rem;
		top: 1.75rem;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: var(--accent);
		border: 2px solid var(--bg);
		box-shadow: 0 0 10px var(--accent);
		transition: background 0.4s, box-shadow 0.4s;
	}

	.timeline-company {
		font-size: 0.78rem;
		font-weight: 600;
		color: var(--accent3);
		text-transform: uppercase;
		letter-spacing: 0.1em;
		margin-bottom: 0.2rem;
	}

	.timeline-role {
		font-size: 1.15rem;
		font-weight: 700;
		margin-bottom: 0.2rem;
	}

	.timeline-period {
		font-size: 0.78rem;
		color: var(--muted);
		font-family: 'Fira Code', monospace;
		margin-bottom: 1rem;
	}

	.timeline-bullets {
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 0.45rem;
	}

	.timeline-bullets li {
		font-size: 0.88rem;
		color: var(--muted);
		padding-left: 1rem;
		position: relative;
		line-height: 1.6;
	}

	.timeline-bullets li::before {
		content: '▸';
		position: absolute;
		left: 0;
		color: var(--accent2);
	}

	/* ═══════════════════════════════
       SKILLS
    ═══════════════════════════════ */
	.skills-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
		gap: 1.25rem;
	}

	.skill-card {
		padding: 1.5rem;
		border-radius: 12px;
		background: var(--card);
		border: 1px solid var(--border);
		transition: all 0.3s;
	}

	.skill-card:hover {
		background: var(--card-hover);
		border-color: var(--accent);
		box-shadow: 0 0 25px var(--glow);
	}

	.skill-card-icon {
		font-size: 1.4rem;
		margin-bottom: 0.65rem;
	}

	.skill-card-title {
		font-size: 0.82rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		color: var(--accent2);
		margin-bottom: 0.75rem;
		transition: color 0.3s;
	}

	.skill-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 0.35rem;
	}

	.skill-tag {
		font-size: 0.73rem;
		padding: 0.2rem 0.55rem;
		border-radius: 4px;
		background: rgba(255, 255, 255, 0.04);
		border: 1px solid var(--border);
		color: var(--muted);
		transition: all 0.2s;
	}

	html.light .skill-tag {
		background: rgba(0, 0, 0, 0.04);
	}

	.skill-tag:hover {
		background: var(--glow);
		border-color: var(--accent);
		color: var(--accent2);
	}

	/* ═══════════════════════════════
       EDUCATION
    ═══════════════════════════════ */
	.edu-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 1.25rem;
	}

	.edu-card {
		padding: 1.5rem;
		border-radius: 12px;
		background: var(--card);
		border: 1px solid var(--border);
		transition: all 0.3s;
	}

	.edu-card:hover {
		background: var(--card-hover);
		border-color: var(--accent3);
		box-shadow: 0 0 25px var(--glow);
	}

	.edu-degree {
		font-size: 1rem;
		font-weight: 700;
		margin-bottom: 0.25rem;
	}

	.edu-school {
		font-size: 0.83rem;
		color: var(--accent3);
		font-weight: 600;
		margin-bottom: 0.25rem;
		transition: color 0.3s;
	}

	.edu-period {
		font-size: 0.78rem;
		color: var(--muted);
		font-family: 'Fira Code', monospace;
	}

	/* ═══════════════════════════════
       CERTIFICATIONS
    ═══════════════════════════════ */
	.certs-featured {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 1rem;
		margin-bottom: 2rem;
	}

	.cert-featured-card {
		padding: 1.25rem;
		border-radius: 12px;
		background: linear-gradient(135deg, var(--glow), transparent);
		border: 1px solid var(--accent);
		transition: all 0.3s;
	}

	.cert-featured-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 10px 35px var(--glow);
	}

	.cert-featured-icon {
		font-size: 1.5rem;
		margin-bottom: 0.5rem;
	}

	.cert-featured-name {
		font-size: 0.93rem;
		font-weight: 700;
		margin-bottom: 0.2rem;
	}

	.cert-featured-issuer {
		font-size: 0.78rem;
		color: var(--accent3);
		transition: color 0.3s;
	}

	.certs-list {
		display: flex;
		flex-wrap: wrap;
		gap: 0.45rem;
	}

	.cert-tag {
		font-size: 0.76rem;
		padding: 0.28rem 0.7rem;
		border-radius: 6px;
		background: var(--card);
		border: 1px solid var(--border);
		color: var(--muted);
		transition: all 0.2s;
	}

	.cert-tag:hover {
		background: var(--card-hover);
		color: var(--text);
	}

	/* ═══════════════════════════════
       LANGUAGES
    ═══════════════════════════════ */
	.lang-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
	}

	.lang-card {
		padding: 1rem 1.5rem;
		border-radius: 10px;
		background: var(--card);
		border: 1px solid var(--border);
		text-align: center;
		min-width: 120px;
		transition: all 0.25s;
	}

	.lang-card:hover {
		border-color: var(--accent2);
		background: var(--card-hover);
	}

	.lang-flag {
		font-size: 1.5rem;
		margin-bottom: 0.25rem;
	}

	.lang-name {
		font-size: 0.88rem;
		font-weight: 600;
	}

	.lang-level {
		font-size: 0.73rem;
		color: var(--muted);
	}

	/* language bar */
	.lang-bar-wrap {
		margin-top: 0.4rem;
		height: 3px;
		border-radius: 2px;
		background: var(--border);
		overflow: hidden;
	}

	.lang-bar {
		height: 100%;
		border-radius: 2px;
		background: linear-gradient(90deg, var(--accent), var(--accent3));
		transition: background 0.4s;
	}

	/* ═══════════════════════════════
       CONTACT
    ═══════════════════════════════ */
	#contact {
		text-align: center;
	}

	.contact-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1rem;
		margin-top: 2rem;
	}

	.contact-card {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 1rem 1.5rem;
		border-radius: 10px;
		background: var(--card);
		border: 1px solid var(--border);
		text-decoration: none;
		color: var(--text);
		transition: all 0.3s;
	}

	.contact-card:hover {
		background: var(--card-hover);
		border-color: var(--accent2);
		color: var(--accent2);
		transform: translateY(-3px);
		box-shadow: 0 10px 30px var(--glow);
	}

	.contact-icon {
		font-size: 1.2rem;
	}

	.contact-label {
		font-size: 0.82rem;
		color: var(--muted);
	}

	.contact-value {
		font-size: 0.88rem;
		font-weight: 600;
	}

	/* Contact form */
	.contact-form-wrap {
		max-width: 560px;
		margin: 2rem auto 0;
		background: var(--card);
		border: 1px solid var(--border);
		border-radius: 16px;
		padding: 2rem 2.5rem;
		text-align: left;
	}

	.contact-form-wrap .form-row {
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
		margin-bottom: 1.25rem;
	}

	.contact-form-wrap label {
		font-size: 0.8rem;
		font-weight: 600;
		color: var(--muted);
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.contact-form-wrap input,
	.contact-form-wrap textarea {
		background: var(--bg);
		border: 1px solid var(--border);
		border-radius: 8px;
		color: var(--text);
		font-family: inherit;
		font-size: 0.92rem;
		padding: 0.65rem 0.9rem;
		transition: border-color 0.2s, box-shadow 0.2s;
		outline: none;
		width: 100%;
		box-sizing: border-box;
		resize: vertical;
	}

	.contact-form-wrap input:focus,
	.contact-form-wrap textarea:focus {
		border-color: var(--accent2);
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 18%, transparent);
	}

	.contact-form-wrap textarea {
		min-height: 120px;
	}

	.contact-form-turnstile {
		display: flex;
		justify-content: center;
		margin: 1.25rem 0 1.5rem;
	}

	.contact-form-wrap .btn-submit {
		width: 100%;
		padding: 0.75rem;
		background: linear-gradient(135deg, var(--accent), var(--accent2));
		color: #fff;
		border: none;
		border-radius: 8px;
		font-size: 0.95rem;
		font-weight: 600;
		cursor: pointer;
		transition: opacity 0.2s, transform 0.2s;
	}

	.contact-form-wrap .btn-submit:disabled {
		opacity: 0.45;
		cursor: not-allowed;
	}

	.contact-form-wrap .btn-submit:not(:disabled):hover {
		opacity: 0.88;
		transform: translateY(-1px);
	}

	.contact-form-status {
		margin-top: 1rem;
		padding: 0.75rem 1rem;
		border-radius: 8px;
		font-size: 0.88rem;
		text-align: center;
		display: none;
	}

	.contact-form-status.success {
		display: block;
		background: color-mix(in srgb, #22c55e 15%, transparent);
		border: 1px solid #22c55e;
		color: #22c55e;
	}

	.contact-form-status.error {
		display: block;
		background: color-mix(in srgb, #ef4444 15%, transparent);
		border: 1px solid #ef4444;
		color: #ef4444;
	}

	/* Social cards below form */
	.contact-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1rem;
		margin-top: 1.5rem;
	}

	/* ═══════════════════════════════
       FOOTER
    ═══════════════════════════════ */
	footer {
		text-align: center;
		padding: 2rem;
		border-top: 1px solid var(--border);
		color: var(--muted);
		font-size: 0.78rem;
		font-family: 'Fira Code', monospace;
	}

	/* ═══════════════════════════════
       SCROLL REVEAL
    ═══════════════════════════════ */
	.reveal {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.6s ease, transform 0.6s ease;
	}

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

	/* ═══════════════════════════════
       RESPONSIVE
    ═══════════════════════════════ */
	@media (max-width: 768px) {
		.nav-links {
			display: none;
		}

		.nav-toggle {
			display: block;
		}

		.palette-picker {
			gap: 4px;
		}

		.palette-btn {
			width: 15px;
			height: 15px;
		}

		.hero-stats {
			gap: 1.5rem;
		}

		.hero-btns {
			flex-direction: column;
			align-items: center;
		}

		section {
			padding: 4rem 1.25rem;
		}
	}

/* ═══════════════════════════════
   ANIMATED BACKGROUND
═══════════════════════════════ */
.bg-aura {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

#bg-canvas {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.7;
	transition: opacity 0.6s ease;
}

html.light #bg-canvas {
	opacity: 0.75;
}

.bg-aura-blob {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle, var(--glow) 0%, transparent 68%);
	will-change: transform;
}

.bg-aura-blob--1 {
	width: 70vw;
	height: 70vw;
	top: -25vw;
	left: -15vw;
	animation: aura-drift-1 18s ease-in-out infinite;
}

.bg-aura-blob--2 {
	width: 55vw;
	height: 55vw;
	bottom: -18vw;
	right: -12vw;
	animation: aura-drift-2 22s ease-in-out infinite;
}

.bg-aura-blob--3 {
	width: 40vw;
	height: 40vw;
	top: 35%;
	left: 50%;
	opacity: 0.5;
	animation: aura-drift-3 26s ease-in-out infinite;
}

html.light .bg-aura-blob--1,
html.light .bg-aura-blob--2 {
	opacity: 0.75;
}

html.light .bg-aura-blob--3 {
	opacity: 0.45;
}

@keyframes aura-drift-1 {
	0%   { transform: translate(0, 0) scale(1); }
	33%  { transform: translate(6vw, 8vw) scale(1.08); }
	66%  { transform: translate(-4vw, 5vw) scale(0.95); }
	100% { transform: translate(0, 0) scale(1); }
}

@keyframes aura-drift-2 {
	0%   { transform: translate(0, 0) scale(1); }
	40%  { transform: translate(-8vw, -6vw) scale(1.1); }
	70%  { transform: translate(5vw, -3vw) scale(0.92); }
	100% { transform: translate(0, 0) scale(1); }
}

@keyframes aura-drift-3 {
	0%   { transform: translate(-50%, -50%) scale(1); }
	50%  { transform: translate(-50%, -50%) scale(1.15) rotate(20deg); }
	100% { transform: translate(-50%, -50%) scale(1); }
}

/* ── Certifications: linked tags + view-more ── */
.cert-tag {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s, border-color 0.2s;
}
.cert-tag:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.cert-issuer {
  opacity: 0.6;
  font-size: 0.78em;
}
.certs-extra {
  display: none;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}
.cert-view-more {
  margin-top: 1.25rem;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 0.5rem 1.5rem;
  border-radius: 2rem;
  cursor: pointer;
  font-family: 'Fira Code', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  transition: background 0.2s, color 0.2s;
}
.cert-view-more:hover {
  background: var(--accent);
  color: #fff;
}

/* cert-featured-card as <a> link */
.cert-featured-card {
	text-decoration: none;
	color: inherit;
	display: block;
	cursor: pointer;
}