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

:root {
	--bg: #080a0e;
	--bg2: #0d1117;
	--bg3: #131820;
	--bg4: #1a2030;
	--border: #1e2736;
	--border2: #263040;
	--border3: #2e3a50;
	--text: #c9d4e8;
	--text2: #7a8ba8;
	--text3: #4a5870;
	--accent: #00ff88;
	--accent2: #4d9fff;
	--accent3: #f0a500;
	--accent4: #b06cff;
}

html {
	scroll-behavior: smooth
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	line-height: 1.65;
	overflow-x: hidden
}

body::after {
	content: '';
	position: fixed;
	inset: 0;
	background-image: linear-gradient(rgba(0, 255, 136, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 136, 0.015) 1px, transparent 1px);
	background-size: 60px 60px;
	pointer-events: none;
	z-index: 0
}

/* NAV */
nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 40px;
	height: 56px;
	background: rgba(8, 10, 14, 0.92);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--border)
}

.logo {
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	color: var(--accent);
	text-decoration: none
}

.blink {
	animation: blink 1.2s step-end infinite
}

@keyframes blink {

	0%,
	100% {
		opacity: 1
	}

	50% {
		opacity: 0
	}
}

.nav-right {
	display: flex;
	align-items: center;
	gap: 16px
}

.nav-links a {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--text3);
	text-decoration: none;
	letter-spacing: 0.08em;
	transition: color 0.2s;
	padding: 0 8px
}

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

.print-btn {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: #080a0e;
	background: var(--accent);
	border: none;
	padding: 7px 14px;
	border-radius: 4px;
	cursor: pointer;
	letter-spacing: 0.04em;
	transition: opacity 0.2s
}

.print-btn:hover {
	opacity: 0.85
}

/* LAYOUT */
main {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
	padding: 80px 40px 80px
}

/* HEADER */
.cv-header {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 32px;
	align-items: start;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 40px
}

.cv-photo-wrap {
	position: relative;
	flex-shrink: 0
}

.cv-photo {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--border2);
	display: block;
	transition: border-color 0.3s
}

.cv-photo:hover {
	border-color: var(--accent)
}

.cv-photo-ring {
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 1px solid rgba(0, 255, 136, 0.2);
	animation: spin-ring 8s linear infinite
}

@keyframes spin-ring {
	to {
		transform: rotate(360deg)
	}
}

.cv-photo-dot {
	position: absolute;
	bottom: 6px;
	right: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--accent);
	border: 2px solid var(--bg);
	animation: pulse 2s ease infinite
}

.cv-name {
	font-size: clamp(28px, 4vw, 50px);
	font-weight: 300;
	letter-spacing: -0.02em;
	color: var(--text);
	line-height: 1.1;
	margin-bottom: 6px
}

.cv-name span {
	color: var(--accent)
}

.cv-role {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	color: var(--accent2);
	letter-spacing: 0.06em;
	margin-bottom: 16px
}

.cv-tagline {
	font-size: 14px;
	color: var(--text2);
	max-width: 420px;
	line-height: 1.7;
	font-weight: 300
}

.cv-contacts {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-end
}

.cv-contact-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--text2);
	text-decoration: none;
	transition: color 0.2s
}

.cv-contact-item:hover {
	color: var(--accent)
}

.cv-contact-item svg {
	width: 13px;
	height: 13px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0
}

.cv-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	color: var(--accent);
	background: rgba(0, 255, 136, 0.06);
	border: 1px solid rgba(0, 255, 136, 0.2);
	padding: 4px 10px;
	border-radius: 3px;
	margin-top: 12px
}

.sdot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--accent);
	animation: pulse 2s ease infinite
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1
	}

	50% {
		opacity: 0.3
	}
}

/* SECTION */
.cv-section {
	margin-bottom: 44px
}

.cv-sec-title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	color: var(--text3);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-bottom: 24px
}

.cv-sec-title::before {
	content: attr(data-num);
	color: var(--accent)
}

.cv-sec-title::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--border)
}

/* SKILLS GRID */
.skills-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px
}

.skill-group {
	background: var(--bg2);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 16px
}

.skill-group-title {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	color: var(--text3);
	letter-spacing: 0.1em;
	margin-bottom: 12px
}

.skill-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px
}

.stag {
	padding: 3px 9px;
	border-radius: 3px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	border: 1px solid
}

.stag-n {
	color: #4d9fff;
	border-color: #1a2d45;
	background: rgba(77, 159, 255, 0.05)
}

.stag-p {
	color: #b06cff;
	border-color: #2a1a45;
	background: rgba(176, 108, 255, 0.05)
}

.stag-a {
	color: #f0a500;
	border-color: #3a2800;
	background: rgba(240, 165, 0, 0.05)
}

.stag-g {
	color: #00ff88;
	border-color: #003322;
	background: rgba(0, 255, 136, 0.05)
}

/* EXPERIENCE / EDUCATION ITEMS */
.cv-item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px;
	padding: 20px;
	background: var(--bg2);
	border: 1px solid var(--border);
	border-radius: 4px;
	margin-bottom: 10px;
	position: relative;
	overflow: hidden;
	transition: border-color 0.2s
}

.cv-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--accent);
	opacity: 0;
	transition: opacity 0.2s
}

.cv-item:hover {
	border-color: var(--border2)
}

.cv-item:hover::before {
	opacity: 1
}

.cv-item-left {}

.cv-item-title {
	font-size: 15px;
	font-weight: 500;
	color: var(--text);
	margin-bottom: 4px
}

.cv-item-org {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--accent2);
	margin-bottom: 8px
}

.cv-item-desc {
	font-size: 13px;
	color: var(--text2);
	line-height: 1.65;
	font-weight: 300
}

.cv-item-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 10px
}

.cv-item-right {
	text-align: right;
	flex-shrink: 0
}

.cv-item-date {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	color: var(--text3);
	white-space: nowrap
}

.cv-item-status {
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px;
	padding: 2px 7px;
	border-radius: 2px;
	margin-top: 4px;
	display: inline-block
}

.status-active {
	color: var(--accent);
	background: rgba(0, 255, 136, 0.08);
	border: 1px solid rgba(0, 255, 136, 0.2)
}

.status-done {
	color: var(--text3);
	background: var(--bg3);
	border: 1px solid var(--border)
}

/* PROJECTS */
.projects-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px
}

.pcard {
	background: var(--bg2);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 18px;
	position: relative;
	overflow: hidden;
	transition: border-color 0.2s
}

.pcard:hover {
	border-color: var(--border2)
}

.pcard-num {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	color: var(--text3);
	margin-bottom: 10px
}

.pcard-title {
	font-size: 14px;
	font-weight: 500;
	color: var(--text);
	margin-bottom: 6px;
	line-height: 1.3
}

.pcard-desc {
	font-size: 12px;
	color: var(--text2);
	line-height: 1.6;
	font-weight: 300;
	margin-bottom: 10px
}

.pcard-link {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	color: var(--accent2);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px
}

.pcard-link:hover {
	color: var(--accent)
}

.ptag {
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px;
	padding: 2px 7px;
	border-radius: 2px;
	border: 1px solid
}

/* CERTIFICATIONS */
.cert-list {
	display: flex;
	flex-direction: column;
	gap: 8px
}

.cert-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	background: var(--bg2);
	border: 1px solid var(--border);
	border-radius: 4px
}

.cert-left {
	display: flex;
	align-items: center;
	gap: 12px
}

.cert-icon {
	width: 32px;
	height: 32px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	font-weight: 500
}

.cert-name {
	font-size: 13px;
	font-weight: 500;
	color: var(--text);
	margin-bottom: 2px
}

.cert-org {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	color: var(--text3)
}

.cert-badge {
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px;
	padding: 3px 8px;
	border-radius: 2px
}

.badge-progress {
	color: var(--accent3);
	background: rgba(240, 165, 0, 0.08);
	border: 1px solid rgba(240, 165, 0, 0.2)
}

.badge-target {
	color: var(--accent2);
	background: rgba(77, 159, 255, 0.08);
	border: 1px solid rgba(77, 159, 255, 0.2)
}

.badge-done {
	color: var(--accent);
	background: rgba(0, 255, 136, 0.08);
	border: 1px solid rgba(0, 255, 136, 0.2)
}


/* CSS */
.button-85 {
	padding: 0.6em 2em;
	border: none;
	outline: none;
	color: rgb(255, 255, 255);
	background: #111;
	cursor: pointer;
	position: relative;
	z-index: 0;
	border-radius: 10px;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

.button-85:before {
	content: "";
	background: linear-gradient(45deg,
			#ff0000,
			#ff7300,
			#fffb00,
			#48ff00,
			#00ffd5,
			#002bff,
			#7a00ff,
			#ff00c8,
			#ff0000);
	position: absolute;
	top: -2px;
	left: -2px;
	background-size: 400%;
	z-index: -1;
	filter: blur(5px);
	-webkit-filter: blur(5px);
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	animation: glowing-button-85 20s linear infinite;
	transition: opacity 0.3s ease-in-out;
	border-radius: 10px;
}

@keyframes glowing-button-85 {
	0% {
		background-position: 0 0;
	}

	50% {
		background-position: 400% 0;
	}

	100% {
		background-position: 0 0;
	}
}

.button-85:after {
	z-index: -1;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: #222;
	left: 0;
	top: 0;
	border-radius: 10px;
}

/* TERMINAL ABOUT */
.terminal-card {
	background: var(--bg2);
	border: 1px solid var(--border);
	border-radius: 6px;
	overflow: hidden
}

.terminal-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	background: var(--bg3);
	border-bottom: 1px solid var(--border)
}

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

.td1 {
	background: #ff5f57
}

.td2 {
	background: #ffbd2e
}

.td3 {
	background: #28ca41
}

.terminal-title {
	flex: 1;
	text-align: center;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	color: var(--text3)
}

.terminal-body {
	padding: 20px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px
}

.tline {
	margin-bottom: 5px;
	color: var(--text2);
	line-height: 1.6
}

.prompt {
	color: var(--accent)
}

.cmd {
	color: var(--text)
}

.out {
	padding-left: 16px;
	color: var(--text3)
}

.out.ok {
	color: #28ca41
}

.out.info {
	color: var(--accent2)
}

/* ROADMAP */
.roadmap-bar {
	background: var(--bg2);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 20px
}

.roadmap-title {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--text2);
	margin-bottom: 14px;
	display: flex;
	justify-content: space-between
}

.roadmap-title span {
	color: var(--accent)
}

.progress-track {
	height: 6px;
	background: var(--bg4);
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 10px
}

.progress-fill {
	height: 100%;
	background: var(--accent);
	border-radius: 3px;
	width: 6%;
	transition: width 1s ease
}

.roadmap-weeks {
	display: flex;
	justify-content: space-between;
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px;
	color: var(--text3)
}

/* PRINT */
@media print {
	body {
		background: #fff !important;
		color: #000 !important
	}

	body::after {
		display: none
	}

	nav {
		display: none
	}

	main {
		padding: 20px
	}

	.cv-header {
		border-color: #ddd
	}

	.cv-item,
	.skill-group,
	.pcard,
	.cert-item,
	.terminal-card,
	.roadmap-bar {
		background: #f9f9f9 !important;
		border-color: #ddd !important
	}

	.cv-name,
	.cv-item-title,
	.pcard-title,
	.cert-name {
		color: #111 !important
	}

	.cv-tagline,
	.cv-item-desc,
	.pcard-desc,
	.tline {
		color: #444 !important
	}

	.cv-role,
	.cv-item-org,
	.cv-item-date,
	.stag,
	.ptag {
		color: #555 !important
	}
}

/* MOBILE */
@media(max-width:768px) {
	nav {
		padding: 0 20px
	}

	main {
		padding: 70px 20px 60px
	}

	.cv-header {
		grid-template-columns: 1fr
	}

	.cv-photo-wrap {
		margin: 0 auto
	}

	.cv-contacts {
		align-items: flex-start
	}

	.skills-grid,
	.projects-grid {
		grid-template-columns: 1fr
	}

	.cv-item {
		grid-template-columns: 1fr
	}

	.cv-item-right {
		text-align: left
	}
}

@media print {
	.cv-photo-ring {
		display: none
	}
}