/* Versioned build of style.css to defeat stale CDN cache (2025-10-25) */
/* DO NOT EDIT DIRECTLY; edit style.css then copy changes here with new date suffix */

/* Screen reader only content */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:root{
	--bg-1:#1a1a2e;
	--bg-2:#0f2042;
	--glass: rgba(255,255,255,0.1);
	--glass-2: rgba(255,255,255,0.08);
	--accent:#7ef9ff;
	--accent-2:#9b7eff;
	--muted: #d4dbe6;
	--section-bg-1: rgba(26, 26, 46, 0.7);
	--section-bg-2: rgba(15, 32, 66, 0.7);
	--text-primary: #ffffff;
	--text-secondary: #d4dbe6;
	--border-color: rgba(255,255,255,0.1);
	--card-bg: rgba(255,255,255,0.08);
	--card-bg-hover: rgba(255,255,255,0.12);
}

/* Light mode variables */
[data-theme="light"]{
	--bg-1:#ffffff;
	--bg-2:#f1f5f9;
	--glass: rgba(0,0,0,0.08);
	--glass-2: rgba(0,0,0,0.05);
	--accent:#0ea5e9;
	--accent-2:#7c3aed;
	--muted: #475569;
	--section-bg-1: rgba(255, 255, 255, 0.9);
	--section-bg-2: rgba(248, 250, 252, 0.9);
	--text-primary: #1e293b;
	--text-secondary: #475569;
	--border-color: rgba(0,0,0,0.15);
	--card-bg: rgba(255,255,255,0.9);
	--card-bg-hover: rgba(255,255,255,1);
}

/* Test light mode - make it very obvious */
[data-theme="light"] body{
	background: linear-gradient(120deg, #ffffff, #f8fafc) !important;
	color: #1e293b !important;
}

/* Light mode specific adjustments */
[data-theme="light"] .orb{
	background:radial-gradient(circle at 30% 30%, rgba(14,165,233,0.15), rgba(124,58,237,0.08), transparent);
}

[data-theme="light"] .hero h1{
	background:none;
	color:#0f172a;
	text-shadow:0 8px 24px rgba(15,23,42,0.08);
}

[data-theme="light"] .tagline{
	color:rgba(71,85,105,0.8);
}

[data-theme="light"] .btn.primary{
	color:#ffffff;
}

[data-theme="light"] .form-input::placeholder{
	color:rgba(71,85,105,0.6);
}

[data-theme="light"] .nav-links a:hover{
	color:var(--text-primary);
}

/* Define fallback colors directly as classes for Cloudflare compatibility */
.bg-primary { background-color: #1a1a2e; }
.bg-secondary { background-color: #0f2042; }
.accent-color { color: #7ef9ff; }
.accent-color-2 { color: #9b7eff; }
.muted-color { color: #d4dbe6; }
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	background-color: var(--bg-1);
	background-image: linear-gradient(120deg, var(--bg-1), var(--bg-2));
	background-attachment: fixed;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color: var(--text-primary);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	padding-bottom:4rem;
	min-height: 100vh;
	transition: all 0.3s ease;
}
.glass{
	background-color: var(--glass-2);
	border:1px solid var(--border-color); 
	border-radius:12px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
nav{position:sticky;top:18px;padding:8px 18px;margin:0 24px;z-index:60}
.nav-inner{display:flex;align-items:center;gap:24px;justify-content:space-between;max-width:1100px;margin:0 auto}
.brand{color:var(--accent);font-weight:700;text-decoration:none;font-size:1.05rem;flex-shrink:0}
.nav-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}
.theme-toggle{background:transparent;border:none;color:var(--text-secondary);font-size:1.1rem;cursor:pointer;padding:6px 8px;border-radius:6px;transition:all .3s ease;display:flex;align-items:center;justify-content:center}
.theme-toggle:hover{color:var(--accent);background:var(--glass)}
.theme-icon{font-size:16px;transition:transform .3s ease;display:inline-block}
.theme-toggle:hover .theme-icon{transform:scale(1.1)}
#menu-toggle{display:none;background:transparent;border:none;color:var(--text-secondary);font-size:1.3rem}
.nav-links{display:flex;gap:20px;list-style:none;margin:0;padding:6px;flex:1;justify-content:center}
.nav-links a{color:var(--text-secondary);text-decoration:none;padding:8px 12px;border-radius:8px;transition:all .18s;font-weight:500}
.nav-links a:hover{color:var(--text-primary);background:linear-gradient(90deg, rgba(126,249,255,0.1), rgba(155,126,255,0.08));box-shadow:0 6px 20px rgba(126,249,255,0.1)}
@media (max-width:640px){
	.nav-links{display:none;position:fixed;top:60px;left:0;right:0;background:var(--section-bg-1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);flex-direction:column;padding:1rem;gap:8px;border-radius:0 0 12px 12px;border:1px solid var(--border-color);z-index:1000;opacity:0;transform:translateY(-10px);transition:all .3s ease}
	.nav-links.open{display:flex;opacity:1;transform:translateY(0)}
	.nav-links li{margin-bottom:6px;width:100%}
	.nav-links li:last-child{margin-bottom:0}
	.theme-toggle{display:block!important}
	#menu-toggle{display:block;background:transparent;border:none;font-size:24px;cursor:pointer;padding:8px;color:var(--text-secondary);transition:color .3s ease}
	#menu-toggle.open{color:var(--accent)}
	.nav-inner{padding:10px 20px}
	.nav-links a{padding:12px;width:100%;text-align:center;display:block;margin:2px 0}
}

/* Hero Image Section */
.hero-image {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
	max-width: 400px;
	margin-left: 40px;
}

.personal-image-container {
	position: relative;
	display: flex !important;
	justify-content: center;
	align-items: center;
	width: 300px;
	height: 300px;
}

.personal-image {
	width: 280px !important;
	height: 280px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	object-position: center !important;
	border: 4px solid var(--accent) !important;
	box-shadow: 
		0 0 40px rgba(126, 249, 255, 0.3),
		0 0 80px rgba(126, 249, 255, 0.2),
		0 12px 40px rgba(0, 0, 0, 0.2) !important;
	transition: all 0.4s ease !important;
	z-index: 2;
	position: relative;
	background: var(--glass);
	display: block !important;
}

.image-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(126, 249, 255, 0.15), rgba(155, 126, 255, 0.1), transparent);
	border-radius: 50%;
	z-index: 1;
	animation: pulse-glow 4s ease-in-out infinite;
}

@keyframes pulse-glow {
	0%, 100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0.4;
	}
	50% {
		transform: translate(-50%, -50%) scale(1.05);
		opacity: 0.7;
	}
}

/* Enhanced hover effects for personal image */
.personal-image:hover {
	transform: scale(1.05) !important;
	box-shadow: 0 0 40px rgba(126, 249, 255, 0.5), 0 0 80px rgba(126, 249, 255, 0.3) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.hero {
		flex-direction: column !important;
		text-align: center !important;
	}
	
	.hero-image {
		margin-left: 0 !important;
		margin-top: 30px !important;
		max-width: 200px !important;
	}
	
	.personal-image-container {
		width: 180px !important;
		height: 180px !important;
	}
	
	.personal-image {
		width: 160px !important;
		height: 160px !important;
	}
	
	.image-glow {
		width: 200px !important;
		height: 200px !important;
	}
}

/* Light mode adjustments for hero image */
[data-theme="light"] .personal-image {
	border-color: var(--accent);
	box-shadow: 
		0 0 40px rgba(14, 165, 233, 0.25),
		0 0 80px rgba(14, 165, 233, 0.15),
		0 12px 40px rgba(0, 0, 0, 0.1);
	background: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .image-glow {
	background: radial-gradient(circle, rgba(14, 165, 233, 0.12), rgba(124, 58, 237, 0.08), transparent);
}

[data-theme="light"] .personal-image:hover {
	border-color: var(--accent-2);
	box-shadow: 
		0 0 50px rgba(14, 165, 233, 0.35),
		0 0 100px rgba(124, 58, 237, 0.25),
		0 16px 50px rgba(0, 0, 0, 0.15);
}

/* Additional responsive design for hero image */
@media (max-width: 1024px) {
	.hero-image {
		max-width: 300px;
		margin-left: 20px;
	}
	
	.personal-image {
		width: 220px !important;
		height: 220px !important;
	}
	
	.image-glow {
		width: 260px;
		height: 260px;
	}
}

@media (max-width: 480px) {
	.hero-image {
		margin-top: 20px;
		max-width: 200px;
	}
	
	.personal-image {
		width: 150px !important;
		height: 150px !important;
		border-width: 2px !important;
	}
	
	.image-glow {
		width: 180px;
		height: 180px;
	}
}

.hero{position:relative;overflow:hidden;margin:28px auto;max-width:1100px;padding:48px;border-radius:18px;display:flex;align-items:center}
.hero-inner{max-width:680px;padding:36px}
.hero h1{font-size:2.6rem;margin:0 0 8px;color:transparent;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text}
.hero h2{font-weight:400;margin:0 0 12px;color:var(--text-secondary)}
.tagline{color:rgba(230,238,248,0.8);margin-bottom:18px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#05102a}
.btn.ghost{border:1px solid var(--border-color);color:var(--text-secondary);background:transparent}
.hero-cta{display:flex;gap:12px}
.orb{position:absolute;right:-120px;top:-60px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(126,249,255,0.22), rgba(155,126,255,0.12), transparent);filter:blur(48px);transform:translateZ(0);pointer-events:none;background-attachment:fixed}
.glass-section{padding:36px;border-radius:12px;background-color:var(--section-bg-1);border:1px solid var(--border-color);transition:all 0.3s ease}
section{position:relative;overflow:hidden;z-index:1;max-width:1100px;margin:0 auto 4rem auto;padding:0 2rem}
.section-title{text-align:center;margin-bottom:36px;color:var(--accent);font-size:2.2rem}
.about-container{display:flex;align-items:flex-start;gap:30px;width:100%;flex-wrap:nowrap}
.code-editor-container{flex:0 0 280px;width:280px}
.code-editor-wrapper{position:relative;overflow:hidden;border-radius:12px;border:3px solid rgba(126,249,255,0.3);box-shadow:0 8px 24px rgba(10,20,40,0.3);background-color:#0d1117}
.code-editor-image{width:100%;display:block;border-radius:9px}
.code-editor-wrapper:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 20px rgba(126,249,255,0.2);pointer-events:none;border-radius:10px}
.about-content{flex:1 1 auto;min-width:0}
.about-section{margin-bottom:24px}
.about-section h3{color:var(--accent);margin-bottom:10px;font-size:1.2rem}
.about-section p{line-height:1.6;margin-bottom:0;text-align:justify}
.skills-section{flex:0 0 100%;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
.skills ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.skills li{background:linear-gradient(180deg, var(--glass-2), var(--glass));padding:10px 14px;border-radius:8px;color:var(--text-secondary)}
@media (max-width:840px){.about-container{flex-direction:column}.code-editor-container{width:100%;max-width:350px;margin:0 auto 20px;text-align:center}.about-content{width:100%}.skills-section{grid-template-columns:1fr}}
/* About Section Buttons */
.about-inline-buttons{display:flex;flex-direction:column;width:100%;max-width:280px;margin:20px auto 0 auto;gap:12px}
.about-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:10px 18px;background-color:#0f2042;border:2px solid #7ef9ff;border-radius:8px;color:#7ef9ff;font-size:15px;font-weight:500;text-decoration:none;font-family:Arial,Helvetica,sans-serif;position:relative;overflow:hidden;letter-spacing:.25px;transition:background-color .25s,color .25s,transform .25s,box-shadow .25s}
.about-btn .label-icon{font-weight:700;font-size:16px;margin-right:8px;color:#7ef9ff;line-height:1}
.about-btn span:last-child{color:#7ef9ff}
.about-btn:hover{background-color:#15325f;box-shadow:0 4px 14px rgba(126,249,255,0.25);transform:translateY(-2px)}
.about-btn:active{transform:translateY(0)}
.about-btn:focus-visible{outline:2px solid #9b7eff;outline-offset:3px}
@media (max-width:480px){.about-inline-buttons{max-width:320px}}
.profile-links{display:flex;flex-wrap:wrap;gap:24px;margin-top:32px;justify-content:flex-start}
.profile-btn{display:inline-flex;align-items:center;gap:14px;padding:18px 32px;background-color:rgba(30,40,60,0.7);border:1.5px solid #7ef9ff;border-radius:16px;color:#7ef9ff;font-size:1.15rem;font-weight:600;text-decoration:none;box-shadow:0 2px 16px rgba(126,249,255,0.08);transition:all .2s ease;position:relative}
.profile-btn:hover{background-color:rgba(126,249,255,0.18);color:#fff;box-shadow:0 4px 24px rgba(126,249,255,0.18);transform:translateY(-2px)}
.btn-icon{display:inline-block;width:30px;height:30px;text-align:center;flex-shrink:0}
.icon-text{font-size:1.5rem;color:#7ef9ff;font-weight:bold;line-height:1}
.profile-btn span{color:#7ef9ff;font-size:1.1rem;font-weight:600}
.profile-btn{background-image:linear-gradient(120deg, rgba(30,40,60,0.9), rgba(30,40,60,0.7))}
@media (max-width:640px){.profile-links{flex-direction:column;gap:18px;align-items:stretch}.profile-btn{width:100%;justify-content:center;text-align:center;padding:16px 0}.btn-icon{width:24px;height:24px;margin-right:5px}}
.profile-btn.linkedin .icon-text{font-family:Arial,Helvetica,sans-serif;font-size:1.5em;font-weight:bold}
.profile-btn.resume .icon-text{font-family:Arial,Helvetica,sans-serif;font-size:1.3em}
.nav-special{color:var(--accent)!important;border:1px solid rgba(126,249,255,0.2)}
#services{background-color:var(--section-bg-2);padding:36px;max-width:1100px;margin:28px auto;border-radius:12px;border:1px solid var(--border-color);transition:all 0.3s ease}
#services h2{text-align:center;margin-bottom:32px}
.services-grid{max-width:1100px;margin:28px auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:0 8px}
.card{padding:24px;border-radius:16px;background:linear-gradient(180deg, var(--card-bg), var(--glass-2));border:1px solid var(--border-color);box-shadow:0 10px 30px rgba(10,20,40,0.2);transition:all .3s ease}
.card:hover{transform:translateY(-5px);box-shadow:0 15px 40px rgba(126,249,255,0.15);background:linear-gradient(180deg, var(--card-bg-hover), var(--glass))}
.card h3{margin:0 0 8px;color:var(--accent-2)}
.card p{margin:0;color:var(--text-secondary)}
.neon{position:relative;overflow:hidden}
.neon:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg, rgba(126,249,255,0.03), rgba(155,126,255,0.02));pointer-events:none}
.portfolio-items{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1100px;margin:20px auto}
.portfolio-item{min-height:120px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
/* Contact Section */
.contact-container{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:20px}
.contact-info-card,.contact-form-card{padding:28px;border-radius:16px;background:linear-gradient(180deg, var(--card-bg), var(--glass-2));border:1px solid var(--border-color);box-shadow:0 10px 30px rgba(10,20,40,0.3);position:relative;overflow:hidden;transition:all 0.3s ease}
.contact-info-card h3,.contact-form-card h3{color:var(--accent);margin:0 0 16px;font-size:1.3rem}
.contact-info-card p{color:var(--text-secondary);line-height:1.6;margin-bottom:24px}
.contact-details{display:flex;flex-direction:column;gap:20px}
.contact-item{display:flex;align-items:flex-start;gap:16px;padding:12px 0}
.contact-icon{font-size:1.2rem;width:24px;text-align:center;flex-shrink:0;margin-top:2px}
.contact-item div{flex:1}
.contact-item strong{display:block;color:var(--accent-2);margin-bottom:4px;font-size:0.95rem}
.contact-item a{color:var(--accent);text-decoration:none;transition:color .2s}
.contact-item a:hover{color:white}
.contact-item span{color:var(--text-secondary)}
.contact-form{display:flex;flex-direction:column;gap:16px}
.form-group{position:relative}
.form-input{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--border-color);background:var(--glass-2);color:var(--text-primary);font-size:15px;transition:all .3s ease;backdrop-filter:blur(10px)}
.form-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(126,249,255,0.1);background:var(--glass)}
.form-input::placeholder{color:rgba(255,255,255,0.5)}
.form-textarea{min-height:120px;resize:vertical;font-family:inherit}
.form-submit{width:100%;padding:14px;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .3s ease}
.form-submit:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(126,249,255,0.3)}
.btn-icon{font-size:18px;transition:transform .3s ease}
.form-submit:hover .btn-icon{transform:translateX(4px)}
@media (max-width:840px){.contact-container{grid-template-columns:1fr;gap:20px}}
@media (max-width:640px){.contact-info-card,.contact-form-card{padding:20px}.section-title{font-size:1.8rem}.contact-item{flex-direction:column;align-items:flex-start;gap:8px}.contact-icon{margin-top:0}}
footer{text-align:center;color:var(--text-secondary);margin-top:40px}
@media (max-width:1024px){.services-grid{grid-template-columns:repeat(2,1fr)}.portfolio-items{grid-template-columns:repeat(2,1fr)}.section-grid{grid-template-columns:1fr}}
@media (max-width:640px){.nav-links{display:none}#menu-toggle{display:block}.hero{padding:20px;border-radius:12px}.hero h1{font-size:1.6rem}.services-grid{grid-template-columns:1fr}.portfolio-items{grid-template-columns:1fr}}
.card,.glass-section,.hero-inner{transform:translateY(8px);opacity:0;animation:enter .6s ease forwards}
.card{animation-delay:.06s}
.glass-section{animation-delay:.02s}
.hero-inner{animation-delay:0}
@keyframes enter{to{transform:none;opacity:1}}
.cf-social-links{margin-top:32px;margin-bottom:24px}
.cf-button{display:inline-block;margin-right:20px;margin-bottom:15px;padding:12px 25px;background-color:#071028;border:2px solid #7ef9ff;border-radius:8px;color:#7ef9ff;font-size:16px;font-weight:normal;text-decoration:none}
.cf-button:hover{background-color:#0f1a2e;color:white}
.cf-button strong{margin-right:10px;font-weight:bold;font-size:18px;font-family:Arial,Helvetica,sans-serif}
@media (max-width:640px){.cf-social-links{display:flex;flex-direction:column}.cf-button{display:block;margin-right:0;margin-bottom:12px;text-align:center;padding:12px 15px}}