:root {
  --cyan: #00f5ff;
  --purple: #9d00ff;
  --pink: #ff006e;
  --gold: #ffd700;
  --bg: #000005;
  --card-bg: rgba(0, 245, 255, 0.03);
  --border: rgba(0, 245, 255, 0.15);
  --text: #c8e6f0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  overflow-x: hidden;
  cursor: none;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--cyan); border-radius: 2px; }

.cursor {
  width: 12px; height: 12px;
  background: var(--cyan);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.1s ease;
  box-shadow: 0 0 15px var(--cyan), 0 0 30px var(--cyan);
}
.cursor-trail {
  width: 30px; height: 30px;
  border: 1px solid rgba(0,245,255,0.4);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  transition: all 0.15s ease;
}

#spaceCanvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
}

nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0,0,5,0.7);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  font-family: 'Orbitron', monospace;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--cyan);
  text-shadow: 0 0 20px var(--cyan);
  letter-spacing: 3px;
}
.nav-links { display: flex; gap: 40px; list-style: none; }
.nav-links a {
  text-decoration: none;
  color: var(--text);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color 0.3s;
}
.nav-links a::before { content: '//'; color: var(--cyan); margin-right: 6px; opacity: 0; transition: opacity 0.3s; }
.nav-links a:hover { color: var(--cyan); }
.nav-links a:hover::before { opacity: 1; }

section { position: relative; z-index: 1; }

#hero { min-height: 100vh; display: flex; align-items: center; padding: 0 10%; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; width: 100%; }
.hero-text { animation: fadeSlideUp 1s ease forwards; }

.hero-tag {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.75rem; color: var(--cyan);
  letter-spacing: 5px; text-transform: uppercase;
  margin-bottom: 20px; display: flex; align-items: center; gap: 12px;
}
.hero-tag::before { content: ''; width: 40px; height: 1px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

.hero-name {
  font-family: 'Orbitron', monospace;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900; line-height: 1.1; color: #fff;
  text-shadow: 0 0 40px rgba(0,245,255,0.3); margin-bottom: 10px;
}
.hero-name span {
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-name:hover { animation: glitch 0.3s ease-in-out; }
.hero-role { font-family: 'Orbitron', monospace; font-size: 1.1rem; color: var(--purple); letter-spacing: 4px; margin-bottom: 30px; text-shadow: 0 0 15px var(--purple); }
.hero-desc { font-size: 1.1rem; line-height: 1.8; color: rgba(200,230,240,0.7); max-width: 500px; margin-bottom: 40px; }
.hero-btns { display: flex; gap: 20px; flex-wrap: wrap; }

.btn-primary {
  padding: 14px 36px; background: transparent; border: 1px solid var(--cyan); color: var(--cyan);
  font-family: 'Orbitron', monospace; font-size: 0.8rem; letter-spacing: 3px; text-transform: uppercase;
  text-decoration: none; position: relative; overflow: hidden; transition: all 0.4s;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}
.btn-primary::before { content: ''; position: absolute; inset: 0; background: var(--cyan); transform: translateX(-100%); transition: transform 0.4s ease; z-index: -1; }
.btn-primary:hover { color: #000; box-shadow: 0 0 30px var(--cyan); }
.btn-primary:hover::before { transform: translateX(0); }

.btn-secondary {
  padding: 14px 36px; background: transparent; border: 1px solid rgba(157,0,255,0.5); color: var(--purple);
  font-family: 'Orbitron', monospace; font-size: 0.8rem; letter-spacing: 3px; text-transform: uppercase;
  text-decoration: none; transition: all 0.4s; clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}
.btn-secondary:hover { border-color: var(--purple); color: #fff; box-shadow: 0 0 30px var(--purple); background: rgba(157,0,255,0.15); }

.hero-photo-wrap { display: flex; justify-content: center; align-items: center; position: relative; animation: fadeSlideUp 1s ease 0.3s both; }
.photo-ring { position: absolute; border-radius: 50%; border: 1px solid transparent; animation: spinRing linear infinite; }
.ring-1 { width: 380px; height: 380px; border-top-color: var(--cyan); border-right-color: var(--cyan); animation-duration: 8s; box-shadow: 0 0 20px rgba(0,245,255,0.2); }
.ring-2 { width: 440px; height: 440px; border-bottom-color: var(--purple); border-left-color: var(--purple); animation-duration: 12s; animation-direction: reverse; }
.ring-3 { width: 500px; height: 500px; border-top-color: rgba(255,0,110,0.4); animation-duration: 20s; }

@keyframes spinRing { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.photo-hexagon {
  width: 440px; height: 300px; position: relative; overflow: hidden;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  border: 3px solid var(--cyan);
  box-shadow: 0 0 60px rgba(0,245,255,0.3), inset 0 0 60px rgba(0,245,255,0.05);
  transition: transform 0.4s ease;
}
.photo-hexagon:hover { transform: scale(1.05); box-shadow: 0 0 100px rgba(0,245,255,0.5); }
.photo-hexagon img { width: 100%; height: 100%; object-fit: contain; object-position: center center; background: transparent; transition: filter 0.4s; }
.photo-hexagon:hover img { filter: saturate(1.2) contrast(1.1); }
.photo-glow { position: absolute; width: 440px; height: 300px; background: radial-gradient(circle, rgba(0,245,255,0.15), transparent 70%); pointer-events: none; }

.stats-bar {
  padding: 60px 10%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: rgba(0,245,255,0.02); position: relative; z-index: 1;
}
.stat-item { text-align: center; padding: 30px; position: relative; transition: all 0.3s; }
.stat-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 20%; bottom: 20%; width: 1px; background: var(--border); }
.stat-item:hover { background: rgba(0,245,255,0.05); }
.stat-num { font-family: 'Orbitron', monospace; font-size: 2.5rem; font-weight: 900; color: var(--cyan); text-shadow: 0 0 20px var(--cyan); display: block; }
.stat-label { font-family: 'Share Tech Mono', monospace; font-size: 0.7rem; letter-spacing: 3px; color: rgba(200,230,240,0.5); text-transform: uppercase; margin-top: 8px; display: block; }

.section-header { text-align: center; margin-bottom: 80px; padding-top: 100px; }
.section-eyebrow { font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; color: var(--cyan); letter-spacing: 6px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 20px; }
.section-eyebrow::before, .section-eyebrow::after { content: ''; flex: 1; max-width: 100px; height: 1px; background: linear-gradient(to right, transparent, var(--cyan)); }
.section-eyebrow::after { background: linear-gradient(to left, transparent, var(--cyan)); }
.section-title { font-family: 'Orbitron', monospace; font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 900; color: #fff; text-shadow: 0 0 30px rgba(0,245,255,0.2); }

#experience { padding: 0 10% 100px; }
.timeline { position: relative; max-width: 900px; margin: 0 auto; }
.timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, var(--cyan), var(--purple), transparent); }
.timeline-item { padding-left: 60px; position: relative; margin-bottom: 60px; opacity: 0; transform: translateX(-30px); transition: all 0.6s ease; }
.timeline-item.visible { opacity: 1; transform: translateX(0); }
.timeline-dot { position: absolute; left: -6px; top: 10px; width: 13px; height: 13px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 15px var(--cyan), 0 0 30px rgba(0,245,255,0.4); }
.exp-card { background: var(--card-bg); border: 1px solid var(--border); padding: 35px; position: relative; overflow: hidden; transition: all 0.4s; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
.exp-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,245,255,0.05), transparent); opacity: 0; transition: opacity 0.4s; }
.exp-card:hover { border-color: var(--cyan); box-shadow: 0 0 40px rgba(0,245,255,0.15), inset 0 0 40px rgba(0,245,255,0.03); transform: translateX(10px); }
.exp-card:hover::before { opacity: 1; }
.exp-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.exp-company { font-family: 'Orbitron', monospace; font-size: 1.2rem; color: var(--cyan); text-shadow: 0 0 10px rgba(0,245,255,0.5); }
.exp-date { font-family: 'Share Tech Mono', monospace; font-size: 0.8rem; color: var(--purple); letter-spacing: 2px; background: rgba(157,0,255,0.1); padding: 4px 12px; border: 1px solid rgba(157,0,255,0.3); }
.exp-role { font-family: 'Share Tech Mono', monospace; font-size: 0.8rem; color: rgba(200,230,240,0.6); margin-bottom: 20px; letter-spacing: 2px; text-transform: uppercase; }
.exp-list { list-style: none; }
.exp-list li { font-size: 1rem; line-height: 1.7; color: rgba(200,230,240,0.75); margin-bottom: 10px; padding-left: 20px; position: relative; }
.exp-list li::before { content: '▶'; position: absolute; left: 0; color: var(--cyan); font-size: 0.6rem; top: 6px; }

#projects { padding: 0 10% 100px; }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.project-card { background: var(--card-bg); border: 1px solid var(--border); padding: 35px; position: relative; overflow: hidden; transition: all 0.4s; opacity: 0; transform: translateY(30px); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
.project-card.visible { opacity: 1; transform: translateY(0); }
.project-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--purple), var(--pink)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; }
.project-card:hover { border-color: rgba(0,245,255,0.3); transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(0,245,255,0.1); }
.project-card:hover::after { transform: scaleX(1); }
.project-num { font-family: 'Orbitron', monospace; font-size: 0.7rem; color: rgba(0,245,255,0.3); letter-spacing: 4px; margin-bottom: 15px; }
.project-title { font-family: 'Orbitron', monospace; font-size: 1.1rem; color: #fff; margin-bottom: 10px; transition: color 0.3s; }
.project-card:hover .project-title { color: var(--cyan); text-shadow: 0 0 15px var(--cyan); }
.project-tech { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tech-tag { font-family: 'Share Tech Mono', monospace; font-size: 0.7rem; padding: 3px 10px; border: 1px solid rgba(0,245,255,0.2); color: var(--cyan); background: rgba(0,245,255,0.05); letter-spacing: 1px; transition: all 0.3s; }
.tech-tag:hover { background: rgba(0,245,255,0.15); border-color: var(--cyan); box-shadow: 0 0 10px rgba(0,245,255,0.2); }
.project-desc { font-size: 0.95rem; line-height: 1.7; color: rgba(200,230,240,0.65); margin-bottom: 25px; }
.project-link { display: inline-flex; align-items: center; gap: 8px; font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; color: var(--cyan); text-decoration: none; letter-spacing: 2px; text-transform: uppercase; transition: all 0.3s; }
.project-link:hover { color: #fff; text-shadow: 0 0 10px var(--cyan); gap: 14px; }
.project-link::after { content: '→'; transition: transform 0.3s; }
.project-link:hover::after { transform: translateX(4px); }

#skills { padding: 0 10% 100px; }
.skills-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.skill-category { background: var(--card-bg); border: 1px solid var(--border); padding: 30px; transition: all 0.4s; position: relative; overflow: hidden; opacity: 0; transform: scale(0.95); }
.skill-category.visible { opacity: 1; transform: scale(1); }
.skill-category::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 0; background: linear-gradient(to bottom, var(--cyan), var(--purple)); transition: height 0.4s ease; }
.skill-category:hover { border-color: rgba(0,245,255,0.2); }
.skill-category:hover::before { height: 100%; }
.skill-cat-title { font-family: 'Orbitron', monospace; font-size: 0.8rem; color: var(--cyan); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.skill-cat-title::before { content: '◆'; font-size: 0.5rem; text-shadow: 0 0 10px var(--cyan); }
.skill-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.skill-pill { font-family: 'Rajdhani', sans-serif; font-size: 0.95rem; font-weight: 600; padding: 6px 16px; background: rgba(0,0,5,0.6); border: 1px solid rgba(0,245,255,0.2); color: rgba(200,230,240,0.8); letter-spacing: 1px; transition: all 0.3s; position: relative; overflow: hidden; }
.skill-pill::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,245,255,0.1), rgba(157,0,255,0.1)); opacity: 0; transition: opacity 0.3s; }
.skill-pill:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 15px rgba(0,245,255,0.2); transform: translateY(-2px); }
.skill-pill:hover::before { opacity: 1; }

#education { padding: 0 10% 100px; }
.edu-card { max-width: 800px; margin: 0 auto; background: var(--card-bg); border: 1px solid var(--border); padding: 50px; position: relative; overflow: hidden; transition: all 0.4s; }
.edu-card::before { content: ''; position: absolute; top: -50%; right: -50%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(157,0,255,0.1), transparent 70%); pointer-events: none; }
.edu-card:hover { border-color: rgba(157,0,255,0.4); box-shadow: 0 0 60px rgba(157,0,255,0.1); }
.edu-univ { font-family: 'Orbitron', monospace; font-size: 1.4rem; color: var(--purple); text-shadow: 0 0 15px rgba(157,0,255,0.5); margin-bottom: 8px; }
.edu-degree { font-family: 'Rajdhani', sans-serif; font-size: 1.2rem; font-weight: 600; color: rgba(200,230,240,0.8); margin-bottom: 15px; }
.edu-meta { display: flex; gap: 30px; margin-bottom: 30px; flex-wrap: wrap; }
.edu-badge { font-family: 'Share Tech Mono', monospace; font-size: 0.8rem; padding: 6px 16px; border: 1px solid; letter-spacing: 2px; }
.edu-badge.gpa { border-color: var(--gold); color: var(--gold); background: rgba(255,215,0,0.05); }
.edu-badge.date { border-color: var(--cyan); color: var(--cyan); background: rgba(0,245,255,0.05); }
.courses-title { font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; color: rgba(200,230,240,0.4); letter-spacing: 4px; text-transform: uppercase; margin-bottom: 15px; }
.courses-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.course-item { font-size: 0.9rem; color: rgba(200,230,240,0.6); padding: 8px 12px; background: rgba(0,0,5,0.4); border: 1px solid rgba(255,255,255,0.05); text-align: center; transition: all 0.3s; }
.course-item:hover { color: var(--cyan); border-color: rgba(0,245,255,0.2); }

#achievements { padding: 0 10% 100px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; }
.ach-item { display: flex; align-items: flex-start; gap: 20px; padding: 25px; background: var(--card-bg); border: 1px solid var(--border); transition: all 0.4s; opacity: 0; transform: translateY(20px); }
.ach-item.visible { opacity: 1; transform: translateY(0); }
.ach-item:hover { border-color: rgba(255,215,0,0.4); box-shadow: 0 0 30px rgba(255,215,0,0.08); transform: translateX(8px); }
.ach-icon { width: 50px; height: 50px; min-width: 50px; background: rgba(255,215,0,0.1); border: 1px solid rgba(255,215,0,0.3); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.ach-text { font-size: 1rem; line-height: 1.6; color: rgba(200,230,240,0.75); }

#contact { padding: 80px 10% 100px; text-align: center; border-top: 1px solid var(--border); position: relative; z-index: 1; }
.contact-links { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 50px; }
.contact-link { display: flex; align-items: center; gap: 12px; padding: 18px 30px; background: var(--card-bg); border: 1px solid var(--border); color: var(--text); text-decoration: none; font-family: 'Share Tech Mono', monospace; font-size: 0.85rem; letter-spacing: 2px; transition: all 0.4s; position: relative; overflow: hidden; }
.contact-link::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--purple)); transform: scaleX(0); transition: transform 0.4s; }
.contact-link:hover { border-color: rgba(0,245,255,0.3); color: var(--cyan); box-shadow: 0 0 30px rgba(0,245,255,0.1); transform: translateY(-4px); }
.contact-link:hover::before { transform: scaleX(1); }
.contact-icon { font-size: 1.2rem; }

footer { text-align: center; padding: 30px; border-top: 1px solid var(--border); font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; color: rgba(200,230,240,0.2); letter-spacing: 3px; position: relative; z-index: 1; }

@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes glitch {
  0% { text-shadow: none; }
  20% { text-shadow: 3px 0 var(--pink), -3px 0 var(--cyan); }
  40% { text-shadow: -3px 0 var(--pink), 3px 0 var(--cyan); }
  60% { text-shadow: 3px 0 var(--cyan), -3px 0 var(--purple); }
  80% { text-shadow: 0 3px var(--purple), 0 -3px var(--cyan); }
  100% { text-shadow: none; }
}

@media (max-width: 768px) {
  nav { padding: 15px 20px; }
  .nav-links { display: none; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-photo-wrap { order: -1; }
  .hero-tag { justify-content: center; }
  .stats-bar { grid-template-columns: repeat(3, 1fr); }
  .courses-grid { grid-template-columns: repeat(2, 1fr); }
  .ring-1, .ring-2, .ring-3 { display: none; }
  .photo-hexagon { width: 280px; height: 220px; }
}