/* ============================================================
	   DESIGN SYSTEM — CSS Variables
	   ============================================================ */
	:root {
		/* Color palette */
		--c-bg:           #f8f9fb;
		--c-surface:      #ffffff;
		--c-surface-alt:  #f1f4f9;
		--c-text:         #111827;
		--c-text-muted:   #6b7280;
		--c-accent:       #2563eb;
		--c-accent-hover: #1d4ed8;
		--c-accent-light: #eff6ff;
		--c-border:       #e5e7eb;
		--c-tag-bg:       #eff6ff;
		--c-tag-text:     #1d4ed8;

		/* Spacing scale (4-base) */
		--sp-1:  4px;
		--sp-2:  8px;
		--sp-3:  12px;
		--sp-4:  16px;
		--sp-6:  24px;
		--sp-8:  32px;
		--sp-12: 48px;
		--sp-16: 64px;
		--sp-20: 80px;

		/* Layout */
		--container-max: 1140px;
		--radius-card:   20px;
		--radius-sm:     10px;
		--radius-chip:   100px;

		/* Shadows */
		--shadow-card:       0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
		--shadow-card-hover: 0 4px 12px rgba(0,0,0,.10), 0 16px 40px rgba(0,0,0,.10);
		--shadow-modal:      0 24px 80px rgba(0,0,0,.18);

		/* Typography */
		--font-body:   'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
		--font-size-base: 17px;
		--line-height-base: 1.6;
	}

	/* ============================================================
	   BASE RESET & TYPOGRAPHY
	   ============================================================ */
	*, *::before, *::after { box-sizing: border-box; }

	html {
		scroll-behavior: smooth;
		font-size: var(--font-size-base);
	}

	body {
		font-family: var(--font-body) !important;
		font-size: var(--font-size-base);
		line-height: var(--line-height-base);
		color: var(--c-text);
		background: var(--c-bg);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	/* ============================================================
	   SKIP LINK (Accessibility)
	   ============================================================ */
	.n-skip-link {
		position: absolute;
		top: -100%;
		left: 16px;
		background: var(--c-accent);
		color: #fff;
		padding: 10px 20px;
		border-radius: 0 0 10px 10px;
		font-weight: 600;
		font-family: var(--font-body);
		z-index: 10000;
		text-decoration: none;
		transition: top 0.2s;
		font-size: 14px;
	}
	.n-skip-link:focus {
		top: 0;
		outline: 3px solid #fff;
		outline-offset: 2px;
	}

	/* ============================================================
	   LAYOUT UTILITIES
	   ============================================================ */
	.n-container {
		max-width: var(--container-max);
		margin: 0 auto;
		padding: 0 var(--sp-6);
		width: 100%;
	}

	.n-section {
		padding: var(--sp-20) 0;
	}

	.n-section-alt {
		background: var(--c-surface-alt);
	}

	.n-section-label {
		display: inline-block;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--c-accent);
		margin-bottom: var(--sp-2);
	}

	.n-section-title {
		font-size: clamp(1.6rem, 3vw, 2.2rem);
		font-weight: 800;
		color: var(--c-text);
		margin: 0 0 var(--sp-3);
		line-height: 1.2;
	}

	.n-section-subtitle {
		font-size: 1rem;
		color: var(--c-text-muted);
		max-width: 540px;
		margin: 0;
	}

	.n-section-header {
		margin-bottom: var(--sp-8);
	}

	/* ============================================================
	   CARD COMPONENT
	   ============================================================ */
	.n-card {
		background: var(--c-surface);
		border-radius: var(--radius-card);
		padding: var(--sp-8);
		box-shadow: var(--shadow-card);
		border: 1px solid var(--c-border);
		transition: transform 0.22s ease, box-shadow 0.22s ease;
	}

	@media (prefers-reduced-motion: no-preference) {
		.n-card-hover:hover {
			transform: translateY(-3px);
			box-shadow: var(--shadow-card-hover);
		}
	}

	/* ============================================================
	   CHIP / TAG COMPONENT
	   ============================================================ */
	.n-chip {
		display: inline-flex;
		align-items: center;
		padding: 4px 12px;
		background: var(--c-tag-bg);
		color: var(--c-tag-text);
		border-radius: var(--radius-chip);
		font-size: 13px;
		font-weight: 500;
		line-height: 1.4;
		font-family: var(--font-body);
	}

	.n-chip-neutral {
		background: var(--c-surface-alt);
		color: var(--c-text-muted);
	}

	.n-chips-row {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-2);
	}

	/* ============================================================
	   BUTTON COMPONENTS
	   ============================================================ */
	.n-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 11px 24px;
		border-radius: var(--radius-sm);
		font-size: 15px;
		font-weight: 600;
		font-family: var(--font-body);
		text-decoration: none;
		cursor: pointer;
		border: 2px solid transparent;
		line-height: 1;
		/* Override legacy button CSS that sets height/transform/letter-spacing via rem */
		height: auto;
		text-transform: none;
		letter-spacing: 0;
		transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
	}

	.n-btn:focus-visible {
		outline: 3px solid var(--c-accent);
		outline-offset: 3px;
	}

	.n-btn-primary {
		background: var(--c-accent);
		color: #fff;
		border-color: var(--c-accent);
	}
	.n-btn-primary:hover {
		background: var(--c-accent-hover);
		border-color: var(--c-accent-hover);
		transform: translateY(-1px);
		box-shadow: 0 4px 14px rgba(37,99,235,.35);
		color: #fff;
	}

	.n-btn-ghost {
		background: transparent;
		color: var(--c-accent);
		border-color: var(--c-accent);
	}
	.n-btn-ghost:hover {
		background: var(--c-accent);
		color: #fff;
		transform: translateY(-1px);
	}

	.n-btn-icon {
		padding: 9px 18px;
		font-size: 14px;
	}

	/* ============================================================
	   DIVIDER
	   ============================================================ */
	.n-divider {
		border: none;
		border-top: 1px solid var(--c-border);
		margin: var(--sp-8) 0;
	}

	/* ============================================================
	   FOCUS VISIBLE (global override)
	   ============================================================ */
	:focus-visible {
		outline: 3px solid var(--c-accent);
		outline-offset: 2px;
	}

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

	/* ============================================================
	   STICKY NAVIGATION
	   ============================================================ */
	.n-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 900;
		height: 64px;
		min-height: 64px; /* override legacy header { min-height: 66px } */
		display: flex;
		align-items: center;
		background: rgba(248, 249, 251, 0.92);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-bottom: 1px solid transparent;
		transition: border-color 0.2s, box-shadow 0.2s;
	}
	.n-nav.scrolled {
		border-bottom-color: var(--c-border);
		box-shadow: 0 2px 20px rgba(0,0,0,.07);
	}
	.n-nav-inner{
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
	}
	/* Logo */
	.n-nav-logo {
		font-size: 19px;
		font-weight: 800;
		color: var(--c-text);
		text-decoration: none;
		letter-spacing: -0.04em;
		flex-shrink: 0;
		transition: color 0.15s;
		font-family: var(--font-body);
	}
	.n-nav-logo:hover { color: var(--c-accent); }
	/* Actions pushed to the far right */
	/* Links — desktop: fixed-centered in the header bar */
	.n-nav-links {
		display: flex;
		align-items: center;
		gap: 6px;
		list-style: none;
		padding: 0;
		margin: 0;
	}
	@media (min-width: 821px) {
		.n-nav-links {
			position: fixed;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			height: 64px;
			z-index: 900;
		}
	}
	/* Override legacy ul li { padding-left: .4rem } bleed */
	.n-nav-links li { margin: 0; padding: 0; }
	.n-nav-link {
		font-size: 14px;
		font-weight: 500;
		color: var(--c-text-muted);
		text-decoration: none;
		padding: 8px 13px;
		border-radius: 8px;
		transition: color 0.15s, background 0.15s;
		display: block;
		font-family: var(--font-body);
		justify-content: center;
	}
	.n-nav-link:hover {
		color: var(--c-text);
		background: var(--c-surface-alt);
	}
	.n-nav-link.active {
		color: var(--c-accent);
		background: var(--c-accent-light);
		font-weight: 600;
	}
	/* Actions */
	.n-nav-actions{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: var(--sp-3);
		flex-shrink: 0;
		margin-left: auto;
	}
	/* Hamburger */
	.n-hamburger {
		display: none;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 36px;
		height: 36px;
		background: transparent;
		border: none;
		cursor: pointer;
		padding: 6px;
		border-radius: 8px;
		flex-shrink: 0;
	}
	.n-hamburger:hover { background: var(--c-surface-alt); }
	.n-hamburger span {
		display: block;
		height: 2px;
		background: var(--c-text);
		border-radius: 2px;
		transition: transform 0.25s, opacity 0.25s;
		transform-origin: center;
	}
	.n-hamburger[aria-expanded="true"] span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	.n-hamburger[aria-expanded="true"] span:nth-child(2) {
		opacity: 0;
		transform: scaleX(0);
	}
	.n-hamburger[aria-expanded="true"] span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
	/* Body offset so content isn't hidden under fixed nav */
	body { padding-top: 64px; }

	/* Mobile slide-over */
	@media (max-width: 820px) {
		.n-nav-links {
			position: fixed;
			top: 64px;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 899;
			background: var(--c-surface);
			flex-direction: column;
			align-items: flex-start;
			padding: var(--sp-6) var(--sp-6) var(--sp-12);
			gap: var(--sp-1);
			transform: translateX(100%);
			transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
			overflow-y: auto;
			border-top: 1px solid var(--c-border);
			margin: 0;
		}
		.n-nav-links.open { transform: translateX(0); }
		.n-nav-links li { width: 100%; }
		.n-nav-link {
			font-size: 18px;
			padding: 13px 16px;
			width: 100%;
			border-radius: 12px;
		}
		.n-hamburger { display: flex; }
		.n-nav-actions .n-btn { display: none; }
	}

	/* Invisible scroll anchors */
	.n-anchor {
		display: block;
		position: relative;
		top: -80px;
		visibility: hidden;
		pointer-events: none;
	}

	/* ============================================================
	   HERO SECTION
	   ============================================================ */

	/* Kill legacy intro styles */
	#intro {
		background: var(--c-bg) !important;
		min-height: 60vh !important;
		padding: 64px 0 7px !important; /* top clears fixed nav, bottom breathes */
		animation: none !important;
		text-align: left !important;
		scroll-margin-top: 80px;
	}

	.n-hero {
		min-height: calc(100vh - 64px);
		display: flex;
		align-items: center;
		padding: var(--sp-16) 0;
		position: relative;
		overflow: hidden;
		background: var(--c-bg);
	}

	/* Soft radial glows in background */
	.n-hero::before {
		content: '';
		position: absolute;
		top: -15%;
		right: -8%;
		width: 680px;
		height: 680px;
		background: radial-gradient(circle, rgba(37,99,235,0.08) 0%, transparent 68%);
		pointer-events: none;
		z-index: 0;
	}
	.n-hero::after {
		content: '';
		position: absolute;
		bottom: -10%;
		left: -6%;
		width: 480px;
		height: 480px;
		background: radial-gradient(circle, rgba(37,99,235,0.05) 0%, transparent 68%);
		pointer-events: none;
		z-index: 0;
	}

	.n-hero-inner {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: var(--sp-16);
		align-items: center;
		position: relative;
		z-index: 1;
	}

	/* --- Left: text --- */
	.n-hero-greeting {
		display: block;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--c-accent);
		margin-bottom: var(--sp-3);
		font-family: var(--font-body);
	}
	/* Typewriter cursor */
	.n-cursor {
		display: inline-block;
		color: var(--c-accent);
		font-weight: 300;
		animation: n-blink 0.75s step-end infinite;
		margin-left: 2px;
	}
	.n-cursor-done {
		opacity: 0;
		transition: opacity 0.6s;
	}
	@keyframes n-blink {
		0%, 100% { opacity: 1; }
		50%       { opacity: 0; }
	}

	.n-hero-name {
		font-size: clamp(2.4rem, 5.5vw, 3.8rem);
		font-weight: 800;
		color: var(--c-text);
		line-height: 1.08;
		letter-spacing: -0.03em;
		margin: 0 0 var(--sp-3);
		font-family: var(--font-body);
	}
	.n-hero-role {
		font-size: clamp(1.05rem, 2vw, 1.25rem);
		font-weight: 500;
		color: var(--c-text-muted);
		margin: 0 0 var(--sp-4);
		font-family: var(--font-body);
	}
	.n-hero-bio {
		font-size: 1rem;
		color: var(--c-text-muted);
		max-width: 490px;
		margin: 0 0 var(--sp-6);
		line-height: 1.7;
		font-family: var(--font-body);
	}
	.n-hero-chips {
		margin-bottom: var(--sp-8);
	}
	.n-hero-ctas {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-3);
		margin-bottom: var(--sp-8);
	}

	/* Social icon row */
	.n-hero-social {
		display: flex;
		align-items: center;
		gap: var(--sp-3);
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.n-hero-social a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--c-surface);
		border: 1px solid var(--c-border);
		box-shadow: var(--shadow-card);
		color: var(--c-text-muted);
		font-size: 17px;
		text-decoration: none;
		transition: color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
	}
	.n-hero-social a:hover {
		color: var(--c-accent);
		border-color: var(--c-accent);
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(37,99,235,.18);
	}

	/* --- Right: profile image --- */
	.n-hero-img-wrap {
		position: relative;
		flex-shrink: 0;
	}
	.n-hero-img {
		width: 300px;
		height: 300px;
		border-radius: 28px;
		object-fit: cover;
		object-position: top center;
		border: 4px solid var(--c-surface);
		box-shadow: var(--shadow-card-hover), 0 0 0 1px var(--c-border);
		display: block;
	}

	/* "Currently at" floating badge */
	.n-hero-badge {
		position: absolute;
		bottom: -14px;
		left: -22px;
		background: var(--c-surface);
		border: 1px solid var(--c-border);
		border-radius: 14px;
		padding: 10px 16px;
		box-shadow: var(--shadow-card);
		display: flex;
		align-items: center;
		gap: 9px;
		font-size: 13px;
		font-weight: 600;
		color: var(--c-text);
		white-space: nowrap;
		font-family: var(--font-body);
	}
	.n-hero-badge-dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #22c55e;
		flex-shrink: 0;
		box-shadow: 0 0 0 3px rgba(34,197,94,.22);
	}

	/* --- Responsive --- */
	@media (max-width: 860px) {
		.n-hero-inner {
			grid-template-columns: 1fr;
			gap: var(--sp-10, 40px);
			text-align: center;
		}
		.n-hero-img-wrap {
			order: -1;
			margin: 0 auto;
		}
		.n-hero-img {
			width: 220px;
			height: 220px;
		}
		.n-hero-badge {
			bottom: -12px;
			left: 50%;
			transform: translateX(-50%);
		}
		.n-hero-bio  { max-width: 100%; }
		.n-hero-chips,
		.n-hero-ctas,
		.n-hero-social { justify-content: center; }
	}
	@media (max-width: 480px) {
		.n-hero { padding: var(--sp-12) 0; }
		.n-hero-img { width: 180px; height: 180px; }
		.n-hero-ctas { flex-direction: column; }
		.n-hero-ctas .n-btn { justify-content: center; width: 100%; }
	}

	/* ============================================================
	   ABOUT SECTION
	   ============================================================ */

	/* Suppress legacy styles on this section */
	#about { padding: 0 !important; background: var(--c-bg) !important; }

	.n-about-grid {
		display: grid;
		grid-template-columns: 1fr 320px;
		gap: var(--sp-12);
		align-items: start;
	}
	.n-about-lead {
		font-size: 1.08rem;
		line-height: 1.75;
		color: var(--c-text);
		margin: 0 0 var(--sp-4);
	}
	.n-about-p {
		color: var(--c-text-muted);
		line-height: 1.7;
		margin: 0 0 var(--sp-8);
	}
	.n-about-cta-row {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-3);
	}

	/* Quick-facts card */
	.n-facts-list {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.n-fact-row {
		display: flex;
		flex-direction: column;
		gap: 3px;
		padding: 13px 0;
		border-bottom: 1px solid var(--c-border);
	}
	.n-fact-row:first-child { padding-top: 0; }
	.n-fact-row:last-child  { border-bottom: none; padding-bottom: 0; }
	.n-fact-label {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--c-text-muted);
	}
	.n-fact-value {
		font-size: 14px;
		font-weight: 500;
		color: var(--c-text);
		line-height: 1.5;
	}
	.n-fact-value a {
		color: var(--c-accent);
		text-decoration: none;
	}
	.n-fact-value a:hover { text-decoration: underline; }

	@media (max-width: 860px) {
		.n-about-grid { grid-template-columns: 1fr; }
	}

	/* ============================================================
	   SKILLS SECTION
	   ============================================================ */

	/* Suppress legacy styles */
	#skills { padding: 0 !important; background: var(--c-bg) !important; }

	.n-skills-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: var(--sp-4);
	}
	.n-skills-cat {
		padding: var(--sp-6);
	}
	.n-skills-cat-title {
		font-size: 14px;
		font-weight: 700;
		color: var(--c-text);
		margin: 0 0 var(--sp-4);
		display: flex;
		align-items: center;
		gap: var(--sp-2);
		font-family: var(--font-body);
		letter-spacing: 0;
	}
	.n-skills-cat-title i {
		color: var(--c-accent);
		font-size: 14px;
		width: 18px;
		text-align: center;
	}

	/* ============================================================
	   EXPERIENCE SECTION — TIMELINE
	   ============================================================ */

	section#experience { background: var(--c-surface-alt) !important; padding: 0 !important; }

	.n-timeline {
		display: flex;
		flex-direction: column;
	}
	.n-tl-item {
		display: grid;
		grid-template-columns: 48px 1fr;
		gap: 0 var(--sp-6);
		padding-bottom: var(--sp-8);
	}
	.n-tl-item:last-child { padding-bottom: 0; }

	/* Left: dot + connector */
	.n-tl-aside {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.n-tl-dot {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: var(--c-accent);
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		flex-shrink: 0;
		box-shadow: 0 0 0 5px var(--c-accent-light);
		position: relative;
		z-index: 1;
	}
	.n-tl-line {
		width: 2px;
		background: linear-gradient(to bottom, var(--c-accent) 0%, var(--c-border) 100%);
		flex: 1;
		margin-top: var(--sp-2);
		min-height: var(--sp-8);
		border-radius: 2px;
	}
	.n-tl-item:last-child .n-tl-line { display: none; }

	/* Right: date label + card */
	.n-tl-body { min-width: 0; }
	.n-tl-date {
		display: inline-block;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.06em;
		color: var(--c-accent);
		background: var(--c-accent-light);
		padding: 3px 11px;
		border-radius: 100px;
		margin-bottom: var(--sp-3);
		font-family: var(--font-body);
	}
	.n-tl-card {
		padding: var(--sp-6);
	}
	.n-tl-title {
		font-size: 1.1rem;
		font-weight: 700;
		color: var(--c-text);
		margin: 0 0 var(--sp-1);
		line-height: 1.3;
		font-family: var(--font-body);
	}
	.n-tl-company {
		font-size: 14px;
		font-weight: 600;
		color: var(--c-text-muted);
		margin: 0 0 var(--sp-4);
		padding-bottom: var(--sp-4);
		border-bottom: 1px solid var(--c-border);
		font-family: var(--font-body);
	}
	.n-tl-bullets {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.n-tl-bullets p {
		margin: 0 !important;
		font-size: 14.5px;
		line-height: 1.68;
		color: var(--c-text);
	}
	/* Tech stack line — same text, different treatment */
	p.n-tl-tech {
		font-size: 13px !important;
		color: var(--c-text-muted) !important;
		background: var(--c-surface-alt);
		border-radius: 10px;
		border-left: 3px solid var(--c-border);
		padding: 10px 14px !important;
		margin-top: var(--sp-2) !important;
		line-height: 1.6 !important;
	}

	@media (max-width: 600px) {
		.n-tl-item { grid-template-columns: 36px 1fr; gap: 0 var(--sp-3); }
		.n-tl-dot  { width: 36px; height: 36px; font-size: 12px; box-shadow: 0 0 0 4px var(--c-accent-light); }
	}

	/* ============================================================
	   EDUCATION SECTION
	   ============================================================ */

	section#education { padding: 0 !important; background: var(--c-surface-alt) !important; }

	.n-edu-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
		gap: var(--sp-6);
	}
	.n-edu-card {
		display: flex;
		gap: var(--sp-5);
		align-items: flex-start;
		padding: var(--sp-6);
	}
	.n-edu-icon {
		width: 48px;
		height: 48px;
		border-radius: 14px;
		background: var(--c-accent-light);
		color: var(--c-accent);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		flex-shrink: 0;
	}
	.n-edu-body { min-width: 0; }
	.n-edu-detail {
		font-size: 13.5px;
		line-height: 1.7;
		color: var(--c-text-muted);
		margin: var(--sp-3) 0 0;
	}
	.n-edu-detail a { color: var(--c-accent); font-size: inherit; }
	.n-edu-detail a:hover { text-decoration: underline; }
	.n-edu-detail a strong { font-size: 12.5px; font-weight: 500; }

	@media (max-width: 600px) {
		.n-edu-grid { grid-template-columns: 1fr; }
		.n-edu-card { flex-direction: column; gap: var(--sp-3); }
	}

	/* ============================================================
	   PROJECTS SECTION
	   ============================================================ */

	#portfolio { padding: 0 !important; background: var(--c-bg) !important; }

	.n-proj-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: var(--sp-6);
	}
	.n-proj-card {
		padding: 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	.n-proj-img-wrap {
		aspect-ratio: 16/9;
		overflow: hidden;
		background: var(--c-surface-alt);
	}
	.n-proj-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transition: transform 0.4s ease;
	}
	@media (prefers-reduced-motion: no-preference) {
		.n-proj-card:hover .n-proj-img { transform: scale(1.05); }
	}
	.n-proj-info {
		padding: var(--sp-5);
		display: flex;
		flex-direction: column;
		gap: var(--sp-2);
		flex: 1;
	}
	.n-proj-title {
		font-size: 1rem;
		font-weight: 700;
		color: var(--c-text);
		margin: 0;
		font-family: var(--font-body);
		line-height: 1.3;
	}
	.n-proj-tech {
		font-size: 12px;
		align-self: flex-start;
	}
	.n-proj-actions {
		display: flex;
		gap: var(--sp-2);
		flex-wrap: wrap;
		margin-top: auto;
		padding-top: var(--sp-4);
	}

	/* ============================================================
	   PROJECT MODAL / BOTTOM SHEET
	   ============================================================ */

	.n-modal-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.52);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		z-index: 2000;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--sp-6);
		opacity: 0;
		transition: opacity 0.25s ease;
	}
	.n-modal-overlay.n-modal-visible { opacity: 1; }
	.n-modal-overlay[hidden] { display: none !important; }

	.n-modal-box {
		background: var(--c-surface);
		border-radius: var(--radius-card);
		max-width: 620px;
		width: 100%;
		max-height: 88vh;
		overflow-y: auto;
		box-shadow: var(--shadow-modal);
		transform: translateY(16px) scale(0.98);
		transition: transform 0.25s ease;
		position: relative;
		overscroll-behavior: contain;
	}
	.n-modal-overlay.n-modal-visible .n-modal-box {
		transform: translateY(0) scale(1);
	}
	.n-modal-img {
		width: 100%;
		aspect-ratio: 16/9;
		object-fit: cover;
		display: block;
		border-radius: var(--radius-card) var(--radius-card) 0 0;
	}
	.n-modal-body {
		padding: var(--sp-6);
		position: relative;
	}
	.n-modal-close {
		position: absolute;
		top: var(--sp-4);
		right: var(--sp-4);
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: var(--c-surface-alt);
		border: 1px solid var(--c-border);
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: var(--c-text-muted);
		transition: background 0.15s, color 0.15s;
		flex-shrink: 0;
	}
	.n-modal-close:hover { background: var(--c-border); color: var(--c-text); }
	.n-modal-title {
		font-size: 1.25rem;
		font-weight: 700;
		color: var(--c-text);
		margin: 0 40px var(--sp-1) 0;
		font-family: var(--font-body);
	}
	.n-modal-tech-badge {
		display: inline-block;
		font-size: 12px;
		font-weight: 600;
		color: var(--c-text-muted);
		margin: 0 0 var(--sp-5);
	}
	.n-modal-desc {
		font-size: 14.5px;
		line-height: 1.72;
		color: var(--c-text);
		margin: 0 0 var(--sp-6);
	}
	.n-modal-desc p { margin: 0; }
	.n-modal-actions {
		display: flex;
		gap: var(--sp-3);
		flex-wrap: wrap;
	}

	/* Mobile: bottom sheet */
	@media (max-width: 640px) {
		.n-modal-overlay {
			align-items: flex-end;
			padding: 0;
		}
		.n-modal-box {
			border-radius: 24px 24px 0 0;
			max-height: 88vh;
			transform: translateY(100%);
		}
		.n-modal-overlay.n-modal-visible .n-modal-box {
			transform: translateY(0);
		}
	}

	/* ============================================================
	   STATS SECTION
	   ============================================================ */

	#stats { padding: 0 !important; background: var(--c-surface-alt) !important; }

	.n-stats-header { text-align: center; }
	.n-stats-header .n-section-title { margin: 0 auto var(--sp-8); }

	.n-stats-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-4);
	}
	.n-stat-card {
		text-align: center;
		padding: var(--sp-6);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--sp-2);
	}
	.n-stat-icon {
		width: 48px;
		height: 48px;
		border-radius: 14px;
		background: var(--c-accent-light);
		color: var(--c-accent);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		margin-bottom: var(--sp-1);
	}
	.n-stat-number {
		font-size: 2rem;
		font-weight: 800;
		color: var(--c-text);
		line-height: 1;
		font-family: var(--font-body);
	}
	.n-stat-label {
		font-size: 13px;
		color: var(--c-text-muted);
		font-weight: 500;
		margin: 0;
		line-height: 1.4;
	}

	@media (max-width: 700px) {
		.n-stats-grid { grid-template-columns: repeat(2, 1fr); }
	}
	@media (max-width: 400px) {
		.n-stats-grid { grid-template-columns: 1fr; }
	}

	/* ============================================================
	   CONTACT SECTION
	   ============================================================ */

	#contact { padding: 0 !important; background: var(--c-bg) !important; }

	/* CTA gradient card */
	.n-contact-cta {
		text-align: center;
		max-width: 660px;
		margin: 0 auto var(--sp-12);
		padding: var(--sp-12) var(--sp-8);
		background: linear-gradient(135deg, var(--c-accent) 0%, #1e40af 100%);
		border-radius: var(--radius-card);
		box-shadow: 0 8px 32px rgba(37,99,235,.30);
	}
	.n-contact-heading {
		font-size: clamp(2rem, 4vw, 2.8rem);
		font-weight: 800;
		color: #fff;
		margin: 0 0 var(--sp-3);
		font-family: var(--font-body);
		line-height: 1.1;
	}
	.n-contact-sub {
		font-size: 1rem;
		color: rgba(255,255,255,0.85);
		margin: 0 0 var(--sp-8);
		line-height: 1.6;
	}
	.n-contact-btns {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-3);
		justify-content: center;
	}
	/* White solid button (on blue bg) */
	.n-btn-white {
		background: #fff;
		color: var(--c-accent);
		border-color: #fff;
	}
	.n-btn-white:hover {
		background: rgba(255,255,255,.88);
		border-color: rgba(255,255,255,.88);
		color: var(--c-accent-hover);
		transform: translateY(-1px);
	}
	/* White ghost button (on blue bg) */
	.n-btn-outline-white {
		background: transparent;
		color: #fff;
		border-color: rgba(255,255,255,.55);
	}
	.n-btn-outline-white:hover {
		background: rgba(255,255,255,.12);
		border-color: #fff;
		color: #fff;
		transform: translateY(-1px);
	}

	/* Details row */
	.n-contact-details {
		display: flex;
		justify-content: center;
		gap: var(--sp-4);
		max-width: 820px;
		margin: 0 auto;
	}
	.n-contact-details .n-contact-item {
		width: 260px;
		flex-shrink: 0;
	}
	.n-contact-item {
		text-align: center;
		padding: var(--sp-6);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--sp-2);
	}
	.n-contact-item-icon {
		width: 48px;
		height: 48px;
		border-radius: 14px;
		background: var(--c-accent-light);
		color: var(--c-accent);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
	}
	.n-contact-item-label {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--c-text-muted);
	}
	.n-contact-item-value {
		font-size: 14px;
		font-weight: 600;
		color: var(--c-text);
	}
	.n-contact-item-value a {
		color: var(--c-accent);
		text-decoration: none;
	}
	.n-contact-item-value a:hover { text-decoration: underline; }

	/* Copy button */
	.n-copy-btn {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 13px;
		font-weight: 600;
		color: var(--c-accent);
		background: var(--c-accent-light);
		border: 1px solid transparent;
		border-radius: 8px;
		padding: 7px 14px;
		cursor: pointer;
		font-family: var(--font-body);
		transition: background 0.15s, color 0.15s;
	}
	.n-copy-btn:hover { background: #dbeafe; }
	.n-copy-btn.n-copied { color: #16a34a; background: #dcfce7; }

	@media (max-width: 640px) {
		.n-contact-details .n-contact-item { width: 100%; }
		.n-contact-cta { padding: var(--sp-12) var(--sp-6); }
	}

	/* ============================================================
	   FOOTER
	   ============================================================ */

	footer.n-footer {
		background: var(--c-text) !important;
		padding: var(--sp-8) 0 !important;
		color: rgba(255,255,255,0.55);
	}
	.n-footer-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sp-6);
		flex-wrap: wrap;
		padding-bottom: var(--sp-6);
		border-bottom: 1px solid rgba(255,255,255,0.1);
		margin-bottom: var(--sp-4);
	}
	.n-footer-brand {
		display: flex;
		flex-direction: column;
		gap: 3px;
	}
	.n-footer-name {
		font-size: 16px;
		font-weight: 700;
		color: #fff;
		text-decoration: none;
		font-family: var(--font-body);
		letter-spacing: -0.02em;
		transition: color 0.15s;
	}
	.n-footer-name:hover { color: var(--c-accent); }
	.n-footer-tagline {
		font-size: 12px;
		color: rgba(255,255,255,0.4);
		font-family: var(--font-body);
	}
	.n-footer-nav {
		display: flex;
		gap: var(--sp-3);
		flex-wrap: wrap;
		justify-content: center;
	}
	.n-footer-nav a {
		font-size: 13px;
		font-weight: 500;
		color: rgba(255,255,255,0.55);
		text-decoration: none;
		padding: 4px 8px;
		border-radius: 6px;
		transition: color 0.15s, background 0.15s;
		font-family: var(--font-body);
	}
	.n-footer-nav a:hover { color: #fff; background: rgba(255,255,255,0.08); }
	.n-footer-right {
		display: flex;
		align-items: center;
		gap: var(--sp-3);
	}
	.n-footer-social {
		display: flex;
		gap: var(--sp-2);
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.n-footer-social a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background: rgba(255,255,255,0.08);
		color: rgba(255,255,255,0.6);
		font-size: 15px;
		text-decoration: none;
		transition: background 0.15s, color 0.15s;
	}
	.n-footer-social a:hover { background: var(--c-accent); color: #fff; }
	.n-back-top {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 10px;
		background: var(--c-accent);
		color: #fff;
		text-decoration: none;
		font-size: 14px;
		flex-shrink: 0;
		transition: background 0.15s, color 0.15s, transform 0.15s;
	}
	.n-back-top:hover { background: var(--c-accent-hover); color: #fff; transform: translateY(-3px); }
	.n-footer-bottom {
		font-size: 12px;
		color: rgba(255,255,255,0.35);
		text-align: center;
		font-family: var(--font-body);
	}

	@media (max-width: 680px) {
		.n-footer-inner { flex-direction: column; align-items: center; text-align: center; gap: var(--sp-5); }
		.n-footer-brand { align-items: center; }
		.n-footer-nav { justify-content: center; }
	}

	/* ============================================================
	   SCROLL REVEAL
	   ============================================================ */

	.n-reveal {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity 0.55s ease, transform 0.55s ease;
	}
	.n-reveal.n-revealed {
		opacity: 1;
		transform: none;
	}
	.n-reveal[data-delay="1"] { transition-delay: 0.08s; }
	.n-reveal[data-delay="2"] { transition-delay: 0.16s; }
	.n-reveal[data-delay="3"] { transition-delay: 0.24s; }
	.n-reveal[data-delay="4"] { transition-delay: 0.32s; }
	.n-reveal[data-delay="5"] { transition-delay: 0.40s; }

	@media (prefers-reduced-motion: reduce) {
		.n-reveal {
			opacity: 1 !important;
			transform: none !important;
			transition: none !important;
		}
	}

	/* ============================================================
	   FINAL PADDING FIX
	   Earlier ID overrides used padding:0!important to suppress
	   legacy CSS. This later rule wins (same specificity, later
	   position) and restores correct section spacing.
	   ============================================================ */

	#about,
	#skills,
	#stats,
	#contact,
	#portfolio,
	section#experience,
	section#education {
		padding: var(--sp-20) 0 !important;
	}

	/* ============================================================
	   POLISH — suppress lingering legacy UI
	   ============================================================ */

	/* Hide old preloader if main.js doesn't remove it quickly */
	#preloader { z-index: 800 !important; }

	/* Ensure body bg is correct */
	body { background: var(--c-bg) !important; }

	/* Smooth scroll (also set in html rule above, belt-and-braces) */
	html { scroll-behavior: smooth; }

	/* Legacy go-top hidden (replaced in new footer) */
	#go-top { display: none !important; }

	/* ============================================================
	   LEGACY RESUME FLIP CARD (kept intact)
	   ============================================================ */
	.resume-flip-card {
		display: inline-block;
		width: 220px;
		height: 54px;
		perspective: 1000px;
		cursor: pointer;
		vertical-align: middle;
	}
	.resume-flip-card-inner {
		position: relative;
		width: 100%;
		height: 100%;
		transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
		transform-style: preserve-3d;
	}
	.resume-flip-card:hover .resume-flip-card-inner,
	.resume-flip-card.flipped .resume-flip-card-inner {
		transform: rotateY(180deg);
	}
	.resume-flip-card-front,
	.resume-flip-card-back {
		position: absolute;
		width: 100%;
		height: 100%;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 3px;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		font-family: inherit;
	}
	.resume-flip-card-front {
		background: transparent;
		border: 3px solid #11ABB0;
		color: #11ABB0;
		gap: 8px;
	}
	.resume-flip-card-back {
		background: #0077B5;
		border: 3px solid #0077B5;
		color: #fff;
		transform: rotateY(180deg);
	}
	.resume-flip-card-back a {
		color: #fff;
		text-decoration: none;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}
	.resume-flip-card-back a:hover {
		color: #fff;
		text-decoration: none;
	}

	/* ============================================================
	   OVERRIDE GUARD
	   Force new component styles to beat legacy CSS specificity.
	   Legacy main.css uses element/rem selectors that bleed through
	   when the html font-size base changes from 10px → 17px.
	   ============================================================ */

	/* Card */
	.n-card {
		background: var(--c-surface) !important;
		border-radius: var(--radius-card) !important;
		box-shadow: var(--shadow-card) !important;
		border: 1px solid var(--c-border) !important;
	}

	/* Grids */
	.n-proj-grid {
		display: grid !important;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
		gap: var(--sp-6) !important;
	}
	.n-skills-grid {
		display: grid !important;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
		gap: var(--sp-4) !important;
	}
	.n-stats-grid {
		display: grid !important;
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
		gap: var(--sp-4) !important;
	}

	/* Chips — beat any span/inline resets */
	.n-chip {
		display: inline-flex !important;
		align-items: center !important;
		padding: 4px 12px !important;
		background: var(--c-tag-bg) !important;
		color: var(--c-tag-text) !important;
		border-radius: var(--radius-chip) !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		line-height: 1.4 !important;
	}
	.n-chip-neutral {
		background: var(--c-surface-alt) !important;
		color: var(--c-text-muted) !important;
	}

	/* Buttons — beat legacy button { height:5.4rem; text-transform:uppercase; letter-spacing:.3rem } */
	.n-btn {
		display: inline-flex !important;
		align-items: center !important;
		height: auto !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
		line-height: 1 !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		font-family: var(--font-body) !important;
		border-radius: var(--radius-sm) !important;
		cursor: pointer !important;
		text-decoration: none !important;
		white-space: normal !important;
	}
	.n-btn-icon { padding: 9px 18px !important; font-size: 14px !important; }
	.n-btn-primary {
		background: var(--c-accent) !important;
		color: #fff !important;
		border: 2px solid var(--c-accent) !important;
	}
	.n-btn-primary:hover {
		background: var(--c-accent-hover) !important;
		border-color: var(--c-accent-hover) !important;
		color: #fff !important;
	}
	.n-btn-ghost {
		background: transparent !important;
		color: var(--c-accent) !important;
		border: 2px solid var(--c-accent) !important;
	}
	.n-btn-ghost:hover {
		background: var(--c-accent) !important;
		color: #fff !important;
		border-color: var(--c-accent) !important;
	}

	/* Fix a:visited { color: #000 } specificity (0,1,1) beating class (0,1,0) */
	a.n-btn:visited              { color: inherit; }
	a.n-btn-primary:visited      { color: #fff !important; }
	a.n-btn-ghost:visited        { color: var(--c-accent) !important; }
	a.n-btn-outline-white:visited { color: #fff !important; }
	a.n-btn-white:visited        { color: var(--c-accent) !important; }
	a.n-nav-link:visited         { color: var(--c-text-muted) !important; }
	a.n-nav-link.active:visited  { color: var(--c-accent) !important; }

	/* Project card image */
	.n-proj-img-wrap {
		aspect-ratio: 16/9 !important;
		overflow: hidden !important;
		background: var(--c-surface-alt) !important;
		display: block !important;
	}
	.n-proj-img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		display: block !important;
	}
	.n-proj-title {
		font-size: 1rem !important;
		font-weight: 700 !important;
		color: var(--c-text) !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
	}
	.n-proj-info {
		padding: var(--sp-5, 20px) !important;
		display: flex !important;
		flex-direction: column !important;
		gap: var(--sp-2) !important;
		flex: 1 !important;
	}
	.n-proj-actions {
		display: flex !important;
		gap: var(--sp-2) !important;
		flex-wrap: wrap !important;
		margin-top: auto !important;
		padding-top: var(--sp-4) !important;
	}
	.n-proj-actions .n-btn { flex: 1; justify-content: center; }