/* Global resets and variables */
:root {
	--bg: #070216;
	--panel: rgba(255,255,255,0.04);
	--accent: #7df9ff;
	--accent2: #ff6bd8;
	--glass: rgba(255,255,255,0.04);
	--glass-border: rgba(255,255,255,0.06);
	--neon: 0 0 18px rgba(125,249,255,0.12), 0 0 48px rgba(255,107,216,0.06);
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
* { box-sizing: border-box; }
html, body, #stage { height: 100%; }
body { margin:0; background:var(--bg); color:#e6eef6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* Background canvas fills stage */
#bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }

.nav { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); display:flex; align-items:center; gap:32px; z-index:30 }
.nav .brand { font-weight:700; font-family: Orbitron, Inter; color: var(--accent2); text-shadow: 0 0 10px rgba(255,107,216,0.18) }
.nav .links { display:flex; gap:18px }
.nav a { color:#cfeefb; opacity:0.9; text-decoration:none; padding:8px 12px; border-radius:8px; font-weight:600 }
.nav a:hover { background: linear-gradient(90deg, rgba(125,249,255,0.06), rgba(255,107,216,0.04)); box-shadow: var(--neon) }

.hero { min-height:80vh; display:flex; align-items:center; justify-content:center; position:relative; z-index:10; padding:90px 20px 60px }
.hero-inner { text-align:center; max-width:980px; margin:0 auto }
.avatar-wrap { position:relative; display:inline-block }
.avatar-wrap img { width:140px; height:140px; border-radius:20px; object-fit:cover; border:2px solid rgba(255,255,255,0.06); box-shadow:0 6px 30px rgba(0,0,0,0.6) }
.avatar-glow { position:absolute; inset:-14px; border-radius:26px; background: radial-gradient(circle at 30% 20%, rgba(125,249,255,0.18), transparent 20%, rgba(255,107,216,0.09) 45%, transparent 65%); filter: blur(12px); pointer-events:none }
.hero-title { font-family:Orbitron, Inter; font-size:44px; margin:18px 0 6px; color:#fff }
.typed { display:inline-block; color:var(--accent); font-weight:700; font-size:20px }
.hero-desc { max-width:780px; margin:18px auto 22px; color:#cfeefb; opacity:0.9 }
.hero-ctas { display:flex; gap:14px; justify-content:center; margin-bottom:10px }
.btn { padding:10px 18px; border-radius:14px; text-decoration:none; font-weight:700 }
.btn.neon { background: linear-gradient(90deg, var(--accent), var(--accent2)); color:#05060a; box-shadow:0 6px 28px rgba(125,249,255,0.06), 0 0 24px rgba(255,107,216,0.06) }
.btn.ghost { background:transparent; border:1px solid rgba(255,255,255,0.06); color:#d8eef8 }
.socials { display:flex; gap:12px; justify-content:center; margin-top:14px }
.socials img { width:40px; height:40px; filter: drop-shadow(0 6px 20px rgba(0,0,0,0.6)); border-radius:8px }

.section { padding:60px 20px; position:relative; z-index:11 }
.glass { background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border:1px solid var(--glass-border); border-radius:16px; margin:18px auto; max-width:1100px; padding:28px }
.section h2 { font-family:Orbitron, Inter; margin:6px 0 14px; color:var(--accent2) }
.container { max-width:1100px; margin:0 auto }

.cards { display:flex; gap:18px; flex-wrap:wrap; justify-content:center }
.card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); padding:18px; border-radius:12px; min-width:260px; max-width:420px; display:flex; gap:12px; align-items:center }
.card img { width:86px; height:auto; border-radius:8px }
.card-body h3 { margin:0; font-size:18px }

.skills-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap:18px; margin-top:12px }
.skill { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:12px; padding:14px; display:flex; flex-direction:column; align-items:center; gap:8px; border:1px solid rgba(255,255,255,0.03); transition: transform .25s ease, box-shadow .25s ease; cursor:pointer }
.skill img { width:48px }
.skill span { font-weight:600; font-size:13px; color:#def9ff }
.skill:hover { transform: translateY(-8px); box-shadow:0 12px 48px rgba(125,249,255,0.06), 0 6px 22px rgba(255,107,216,0.04) }

.contact-grid { display:flex; gap:20px; flex-wrap:wrap; justify-content:space-between }
.footer { padding:24px; text-align:center; color:#9fbfcc; opacity:0.9 }

/* Responsive tweaks */
@media (max-width:720px){
	.nav { left:16px; transform:none }
	.hero-title { font-size:30px }
	.avatar-wrap img { width:110px; height:110px }
}

/* small accent pulse animation */
@keyframes accentPulse { 0% { transform:scale(1); opacity:0.95 } 50% { transform:scale(1.02); opacity:1 } 100% { transform:scale(1); opacity:0.95 } }

.neon-card { animation: accentPulse 6s ease-in-out infinite }

/* utility */
.text-muted { color:#9fbfcc }