.top {
	height: 65vh;
	width: 100%;
	background: var(--background-image);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
	position: relative;
}

.top .screen {
	display: flex;
	height: 100%;
	width: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(15, 15, 26, 0.98) 100%);
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.top .screen::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(ellipse at center top, rgba(var(--theme-color-rgb), 0.1) 0%, transparent 60%);
	pointer-events: none;
}

.top .screen .center {
	margin-top: 5vh;
	position: relative;
	z-index: 2;
}

.top .screen .center h1 {
	font-size: 6vh;
	color: #fff;
	margin: 0;
	margin-bottom: 2vh;
	font-weight: 700;
	text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.top .screen .center p {
	font-size: 2vh;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
	padding: 0 15%;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	max-width: 700px;
	margin: 0 auto;
}

.body {
	width: 80%;
	padding: 7.5vh 10%;
	background: linear-gradient(180deg, #0f0f1a 0%, #1a1a2e 50%, #0f0f1a 100%);
	position: relative;
}

.body::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100px;
	background: linear-gradient(to bottom, rgba(15, 15, 26, 1), transparent);
	pointer-events: none;
}

/* Subpage Section Headers */
.body .section-header {
	text-align: center;
	margin-bottom: 5vh;
}

.body .section-header h2 {
	color: #fff;
	font-size: 3.5vh;
	margin: 0 0 1vh 0;
	font-weight: 700;
}

.body .section-header p {
	color: rgba(255,255,255,0.6);
	font-size: 1.8vh;
}

/* ===== ABOUT PAGE STYLES ===== */

.about-page {
	position: relative;
	overflow: visible;
	z-index: 1;
}

.about-page::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(var(--theme-color-rgb, 255, 255, 255), 0.08) 0%, transparent 70%);
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 0;
}

/* About Hero Section */
.about-hero {
	display: flex;
	flex-wrap: wrap;
	gap: 60px;
	align-items: flex-start;
	justify-content: center;
	margin-bottom: 80px;
	position: relative;
	z-index: 2;
}

.about-hero:has(.about-image) {
	display: grid;
	grid-template-columns: 300px 1fr;
}

.about-hero:not(:has(.about-image)) .about-content {
	max-width: 800px;
	text-align: center;
}

.about-hero:not(:has(.about-image)) .about-content h2::after {
	left: 50%;
	transform: translateX(-50%);
}

.about-image {
	display: flex;
	justify-content: center;
}

.about-image .image-wrapper {
	position: relative;
	display: inline-block;
}

.about-image img {
	width: 100%;
	max-width: 350px;
	border-radius: 20px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
	position: relative;
	z-index: 2;
}

.about-image .image-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	height: 80%;
	background: var(--theme-color, #6366f1);
	filter: blur(60px);
	opacity: 0.3;
	transform: translate(-50%, -50%);
	z-index: 1;
	border-radius: 50%;
	animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
	0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
	50% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.1); }
}

.about-content h2 {
	color: #fff;
	font-size: 3.5vh;
	margin: 0 0 25px 0;
	position: relative;
	display: inline-block;
}

.about-content h2::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 60px;
	height: 3px;
	background: linear-gradient(90deg, var(--theme-color, #6366f1), transparent);
	border-radius: 3px;
}

.about-content p {
	color: rgba(255, 255, 255, 0.7);
	font-size: 1.8vh;
	line-height: 1.9;
	margin-bottom: 30px;
}

.about-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 30px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50px;
	color: #fff;
	text-decoration: none;
	font-size: 1.6vh;
	font-weight: 600;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-btn:hover {
	background: var(--theme-color, #6366f1);
	border-color: var(--theme-color, #6366f1);
	transform: translateY(-3px);
	box-shadow: 0 10px 30px rgba(var(--theme-color-rgb, 99, 102, 241), 0.3);
}

/* About Stats */
.about-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-bottom: 80px;
	position: relative;
	z-index: 1;
}

.stat-item {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 40px 30px;
	text-align: center;
	transition: all 0.3s ease;
}

.stat-item:hover {
	transform: translateY(-5px);
	border-color: rgba(255, 255, 255, 0.2);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.stat-number {
	font-size: 5vh;
	font-weight: 700;
	color: var(--theme-color, #6366f1);
	margin-bottom: 10px;
	text-shadow: 0 0 30px rgba(var(--theme-color-rgb, 99, 102, 241), 0.5);
}

.stat-label {
	color: rgba(255, 255, 255, 0.6);
	font-size: 1.6vh;
	text-transform: uppercase;
	letter-spacing: 2px;
}

/* About Skills */
.about-skills {
	position: relative;
	z-index: 1;
}

.about-skills h2 {
	color: #fff;
	font-size: 3vh;
	margin: 0 0 40px 0;
	text-align: center;
}

.skills-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

.skill-item {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 15px;
	padding: 25px;
	transition: all 0.3s ease;
}

.skill-item:hover {
	border-color: rgba(255, 255, 255, 0.15);
	transform: translateX(5px);
}

.skill-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.skill-name {
	color: #fff;
	font-size: 1.8vh;
	font-weight: 600;
}

.skill-percent {
	color: var(--theme-color, #6366f1);
	font-size: 1.6vh;
	font-weight: 700;
}

.skill-bar {
	height: 8px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	overflow: hidden;
}

.skill-progress {
	height: 100%;
	background: linear-gradient(90deg, var(--theme-color, #6366f1), rgba(var(--theme-color-rgb, 99, 102, 241), 0.6));
	border-radius: 10px;
	transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

.skill-progress::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	animation: skillShimmer 2s ease-in-out infinite;
}

@keyframes skillShimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* About Empty State */
.about-empty {
	text-align: center;
	padding: 80px 20px;
}

.about-empty i {
	font-size: 8vh;
	color: var(--theme-color, #6366f1);
	margin-bottom: 30px;
	opacity: 0.5;
}

.about-empty h3 {
	color: #fff;
	font-size: 3vh;
	margin: 0 0 15px 0;
}

.about-empty p {
	color: rgba(255, 255, 255, 0.5);
	font-size: 1.8vh;
}

/* About Page Responsive */
@media screen and (max-width: 900px) {
	.about-hero,
	.about-hero:has(.about-image) {
		display: flex;
		flex-direction: column;
		gap: 40px;
		text-align: center;
	}
	
	.about-content h2::after {
		left: 50%;
		transform: translateX(-50%);
	}
	
	.about-stats {
		grid-template-columns: 1fr;
	}
	
	.skills-grid {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 600px) {
	.about-image img {
		max-width: 250px;
	}
	
	.stat-item {
		padding: 30px 20px;
	}
	
	.stat-number {
		font-size: 4vh;
	}
}