:root{
	--bg:#08040a;
	--panel:#0f0712;
	--muted:#9aa0b4;
	--accent1:#ff2df7;
	--accent2:#6b38ff;
	--glass: rgba(255,255,255,0.04);
	--glass-2: rgba(255,255,255,0.02);
	--glass-border: rgba(255,255,255,0.06);
}
*{box-sizing:border-box}
html,body{height:100%;}
body{
	margin:0;
	font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	background: radial-gradient(1200px 400px at 10% 10%, rgba(107,56,255,0.06), transparent),
							linear-gradient(180deg,#040207 0%, #09060b 100%);
	color:#dbe3ff;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
.container{max-width:1100px;margin:0 auto;padding:24px}
/* App shell layout */
body{background: radial-gradient(1200px 400px at 10% 10%, rgba(107,56,255,0.06), transparent), linear-gradient(180deg,#040207 0%, #09060b 100%);}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:84px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-right:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:column;align-items:center;padding:18px;gap:18px}
.logo{width:48px;height:48px;border-radius:10px;background:linear-gradient(90deg,var(--accent1),var(--accent2));display:flex;align-items:center;justify-content:center;color:#0b0711;font-weight:700}
.side-links{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.side-btn{width:44px;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:var(--muted);cursor:pointer}
.side-btn.active{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#0b0711}
.side-footer{margin-top:auto}

.main-panel{flex:1;display:flex;flex-direction:column}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,0.02)}
.panel-header .name{font-weight:700;color:var(--muted)}
.top-nav{display:flex;gap:18px}
.nav-link{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:8px}
.nav-link:hover{color:var(--accent1)}
.panel-content{padding:22px}
.panel-footer{padding:14px 24px;border-top:1px solid rgba(255,255,255,0.02);color:var(--muted)}

.hero-card{position:relative;border-radius:14px;overflow:hidden;padding:0;margin-bottom:20px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04)}
.hero-bg{position:absolute;inset:0;background-image:url('imgs/bg-city.jpg');background-size:cover;background-position:center;filter:contrast(.9) brightness(.5);opacity:1}
.hero-inner{position:relative;display:grid;grid-template-columns:1fr 360px;gap:28px;padding:34px}
.hero-content{color:#e8eaf8}
.hero-title{font-family:Rajdhani, sans-serif;font-size:84px;line-height:0.9;margin:6px 0;color:#fff;text-shadow:0 8px 40px rgba(107,56,255,0.06)}
.hero-sub{color:var(--accent2);font-weight:600;margin-top:6px}
.hero-desc{color:var(--muted);max-width:520px}
.hero-actions{margin-top:18px;display:flex;gap:12px}
.hero-stats{display:flex;gap:14px;margin-top:18px}
.stat{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);min-width:110px;text-align:center}
.hero-side{display:flex;flex-direction:column;align-items:center;gap:14px}
.portrait-box{width:220px;height:220px;border-radius:10px;background:linear-gradient(180deg,#220b24,#12051a);box-shadow:0 12px 40px rgba(107,56,255,0.12) inset;border:1px solid rgba(255,255,255,0.04)}
.quick-info{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);width:260px}

/* Projects grid inside panel */
.projects-section{margin:18px 0}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.proj-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);border-radius:12px;overflow:hidden;display:flex}
.proj-thumb{width:240px;height:140px;background:linear-gradient(120deg, rgba(107,56,255,0.12), rgba(255,45,247,0.08));background-image:url('imgs/thumb1.svg');background-size:cover;background-position:center}
.proj-body{padding:12px;flex:1}
.proj-tags{margin-top:8px;display:flex;gap:8px}
.proj-tags span{background:rgba(255,255,255,0.02);padding:6px;border-radius:8px;font-size:12px;color:var(--muted)}
.btn-sm{padding:6px 10px;font-size:13px}

/* Resume + contact */
.resume-contact{display:grid;grid-template-columns:1fr 320px;gap:18px;margin-top:20px}
.resume{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,0.04)}
.contact-block{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,0.04)}
.contact-block input,.contact-block textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#fff;margin-bottom:10px}
.eyebrow{color:var(--accent2);margin:0 0 6px 0;font-weight:600}
.hero-title{font-family:Rajdhani, sans-serif;font-size:64px;margin:0;color:#fff;letter-spacing:2px}
.hero-sub{color:var(--muted);margin-top:8px}
.hero-ctas{margin-top:18px}
.btn{display:inline-block;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:600}
.btn-primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#0b0711}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
.btn-outline{border:1px solid rgba(255,255,255,0.06);color:var(--accent1);background:transparent;padding:8px 12px}

.featured{margin-top:28px}
.cards{display:flex;gap:12px;margin-top:12px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid var(--glass-border);padding:10px;border-radius:12px;width:160px;backdrop-filter:blur(6px)}
.card-media{height:80px;border-radius:8px;background:linear-gradient(135deg, rgba(107,56,255,0.18), rgba(255,45,247,0.12));box-shadow:0 6px 18px rgba(107,56,255,0.06) inset}
.card h4{margin:10px 0 4px 0;font-size:14px}
.card p{margin:0;font-size:12px;color:var(--muted)}

.hero-right .profile-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid var(--glass-border);padding:18px;border-radius:16px;backdrop-filter: blur(8px)}
.portrait{height:220px;border-radius:12px;background:linear-gradient(180deg,#1b0a28, #2a0831);box-shadow:0 8px 40px rgba(107,56,255,0.12) inset}
.profile-meta h3{margin-top:14px;margin-bottom:8px;color:#fff}
.profile-meta p{color:var(--muted);font-size:14px}

.projects{padding:40px 0}
.section-head{display:flex;align-items:center;justify-content:space-between}
.filters button{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:8px 10px;border-radius:8px;margin-left:8px}
.filters .active{border-color:var(--accent1);color:var(--accent1)}
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.project{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid var(--glass-border);border-radius:12px;overflow:hidden}
.proj-media{height:160px;background:linear-gradient(120deg, rgba(107,56,255,0.18), rgba(255,45,247,0.12));}
.proj-body{padding:14px}
.proj-body h3{margin:0 0 6px 0}
.proj-body p{margin:0;color:var(--muted);font-size:13px}

.about{padding:48px 0}
.about-inner{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:center}
.about-card{height:320px;background:linear-gradient(180deg,#220b24,#12051a);border-radius:12px;border:1px solid var(--glass-border)}
.stats{display:flex;gap:18px;list-style:none;padding:0;margin:18px 0}
.stats li{color:var(--muted)}

.contact{padding:48px 0}
.contact-inner{display:grid;grid-template-columns:1fr 320px;gap:28px}
.contact-form form label{display:block;margin-bottom:12px;color:var(--muted)}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#fff}

.site-footer{padding:20px 0;border-top:1px solid rgba(255,255,255,0.03);margin-top:40px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}
.footer-nav a{color:var(--muted);margin-left:12px}

@media (max-width:900px){
	.hero-inner{grid-template-columns:1fr}
	.hero-side{order:2}
	.projects-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
	.sidebar{display:none}
	.panel-header .top-nav{display:none}
	.projects-grid{grid-template-columns:1fr}
	.resume-contact{grid-template-columns:1fr}
}

/* Right info panel for projects page */
.content-split{display:grid;grid-template-columns:1fr 320px;gap:18px}
.right-panel{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.04)}
.skill-bar{height:10px;background:rgba(255,255,255,0.03);border-radius:999px;overflow:hidden;margin-bottom:8px}
.skill-bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent1),var(--accent2));width:60%}
.right-panel h4{margin-top:0;color:var(--muted)}

/* Glass neon stroke */
.glass-panel{position:relative;border-radius:12px;padding:12px;border:1px solid rgba(255,255,255,0.04);background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));box-shadow:0 6px 30px rgba(11,7,17,0.6) inset}
.neon-outline{box-shadow:0 0 18px rgba(107,56,255,0.06), 0 0 48px rgba(255,45,247,0.03)}

/* Project thumbnail hover overlay */
.proj-card{position:relative}
.proj-card .proj-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.35));opacity:0;transition:opacity .28s}
.proj-card:hover .proj-thumb::after{opacity:1}


/* Animations & Hovers */
.btn{transition:transform .22s ease, box-shadow .22s ease, opacity .18s ease}
.btn:hover{transform:translateY(-4px);opacity:0.98}
.btn-primary:hover{box-shadow:0 12px 30px rgba(107,56,255,0.16), 0 0 28px rgba(255,45,247,0.08)}
.brand{transition:text-shadow .35s ease, transform .22s ease}
.brand:hover{transform:translateY(-2px);text-shadow:0 6px 24px rgba(107,56,255,0.18)}

.card{transition:transform .35s cubic-bezier(.2,.9,.2,1), box-shadow .35s, border-color .25s}
.card:hover{transform:translateY(-8px);border-color:var(--accent2);box-shadow:0 18px 40px rgba(107,56,255,0.08), 0 6px 20px rgba(255,45,247,0.04) inset}

.project{transition:transform .3s ease, box-shadow .35s ease, border-color .2s}
.project:hover{transform:translateY(-10px) scale(1.01);box-shadow:0 28px 60px rgba(107,56,255,0.08);border-color:var(--accent1)}
.proj-media{position:relative;overflow:hidden}
.proj-media::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg, rgba(107,56,255,0.06), rgba(255,45,247,0.04));opacity:0;transform:translateY(8px);transition:opacity .35s, transform .35s}
.project:hover .proj-media::after{opacity:1;transform:translateY(0)}

/* Navigation link hover underline */
.main-nav a{position:relative}
.main-nav a::after{content:"";position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent1),var(--accent2));bottom:-6px;transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.main-nav a:hover::after{transform:scaleX(1)}

/* Neon flicker for title */
.hero-title{transition:text-shadow .4s ease}
.hero-title:hover{text-shadow:0 6px 30px rgba(107,56,255,0.28), 0 0 18px rgba(255,45,247,0.14)}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .7s cubic-bezier(.2,.9,.2,1), transform .7s cubic-bezier(.2,.9,.2,1)}
.reveal.in-view{opacity:1;transform:none}

/* Small pulsing glow for brand */
@keyframes pulseGlow{0%{text-shadow:0 0 0 rgba(107,56,255,0)}50%{text-shadow:0 12px 30px rgba(107,56,255,0.08)}100%{text-shadow:0 0 0 rgba(107,56,255,0)}}
.brand.glow{animation:pulseGlow 3.6s ease-in-out infinite}