/* === ROOT VARIABLES === */
:root{
  --primary:#8B5CF6;
  --secondary:#6D28D9;
  --text:#F8FAFC;
  --accent:#FBBF24;
  --bg:#070B17;
  --bg-card:rgba(30,41,59,0.9);
  --shadow:0 10px 30px rgba(139,92,246,.3);
  --title-color:#C0C0C0;
}
.light-theme{
  --primary:#7C3AED;
  --secondary:#5B21B6;
  --text:#1E293B;
  --bg:#F1F5F9;
  --bg-card:rgba(241,245,249,0.9);
  --title-color:#4A5568;
}

/* === DYNAMIC BACKGROUND === */
body{
  background:linear-gradient(45deg, #070B17, #121B47);
  color:var(--text);
  overflow-x:hidden;
  line-height:1.6;
}

/* === CUSTOM SCROLLBAR === */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg-card);border-radius:4px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--primary), var(--accent));border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg, #7C3AED, #F59E0B)}

/* === RESET === */
*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,system-ui,sans-serif}

/* === CANVAS / PROGRESS === */
#particle-canvas{position:fixed;top:0;left:0;pointer-events:none;z-index:-1}
#scroll-progress{position:fixed;top:0;left:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--accent));z-index:102}

/* === THEME TOGGLE === */
#theme-toggle{
  position:fixed;
  top:20px;
  right:20px;
  background:var(--bg-card);
  border:1px solid rgba(139,92,246,.2);
  border-radius:50%;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:103;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
#theme-toggle:hover{
  transform:scale(1.2) rotate(180deg);
  box-shadow:0 0 15px rgba(139,92,246,0.6), 0 0 30px rgba(0,255,255,0.4);
}

/* === HEADER === */
header{background:var(--bg-card);padding:30px 20px;text-align:center;margin-bottom:10px}
nav{position:sticky;top:0;left:0;width:100%;background:var(--bg-card);padding:14px 0;z-index:101}
nav ul{display:flex;justify-content:center;gap:25px;list-style:none}
nav a{color:var(--text);font-weight:600;padding:10px 20px;border-radius:10px;transition:all .4s var(--ease);text-decoration:none}
nav a:hover,nav a.active{color:var(--accent);background:rgba(139,92,246,.15)}

/* === TITLE === */
#title{
  font-size:clamp(2.4rem,7vw,3.8rem);
  font-weight:300;
  color:var(--title-color);
  letter-spacing:.04em;
}
.title-letter{
  display:inline-block;
  transition:font-family .4s ease;
}
#subtitle{font-size:1.1rem;color:var(--title-color);letter-spacing:.05em;margin-top:8px}

/* === SECTIONS === */
section{max-width:1200px;margin:0 auto 40px;padding:40px 20px}
.glass-card{
  background:var(--bg-card);
  border:1px solid rgba(139,92,246,.3);
  border-radius:24px;
  padding:30px;
  transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

/* === ABOUT === */
.about-content{display:flex;align-items:center;gap:30px;flex-wrap:wrap;justify-content:center}
.about-text{flex:1 1 350px;font-size:1.1rem;max-width:550px}
.profile-photo{
  width:220px;
  border-radius:50%;
  border:4px solid var(--primary);
  box-shadow:var(--shadow);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.profile-photo:hover{
  transform:scale(1.12) rotate(3deg);
  box-shadow:0 0 20px rgba(139,92,246,0.6), 0 0 40px rgba(0,255,255,0.4);
}
.resume-button{
  display:inline-block;
  margin-top:20px;
  padding:12px 28px;
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  border-radius:12px;
  text-decoration:none;
  transition:transform .4s var(--ease);
}
.resume-button:hover{transform:translateY(-5px) scale(1.05)}

/* === EDUCATION TIMELINE === */
.timeline{position:relative;max-width:600px;margin:20px auto;padding-left:40px}
.timeline::before{content:'';position:absolute;left:20px;top:0;bottom:0;width:3px;background:var(--primary)}
.timeline-item{position:relative;margin-bottom:20px}
.timeline-dot{position:absolute;left:11px;top:4px;width:20px;height:20px;background:var(--accent);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}
.timeline-content{margin-left:40px;background:var(--bg-card);border-radius:12px;padding:12px}

/* === SKILLS === */
.skill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-top:15px}
.skill-grid h3{grid-column:1/-1;font-size:1.3rem;margin-bottom:8px}
.skill-block{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--bg-card);
  border:1px solid rgba(139,92,246,.2);
  border-radius:12px;
  padding:10px 16px;
  font-weight:500;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.skill-block:hover{
  transform:translateY(-4px) rotate(2deg);
  box-shadow:var(--shadow);
  background:linear-gradient(135deg, rgba(139,92,246,0.2), rgba(0,255,255,0.1));
}
.skill-block i{
  font-size:1.3rem;
  color:var(--accent);
  margin-right:8px;
}
.skill-block img.icon-img{
  width:24px;
  height:24px;
  object-fit:contain;
  margin-right:8px;
  border-radius:0;
}
.skill-block img.icon-img.kotlin-color{
  filter: invert(57%) sepia(91%) saturate(421%) hue-rotate(9deg) brightness(103%) contrast(99%);
}

/* === PROJECTS === */
.projects-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:20px}
.project-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  background:var(--bg-card);
  border:1px solid rgba(139,92,246,.2);
  border-radius:16px;
  padding:20px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.project-card:hover{
  transform:translateY(-6px) rotate(1deg);
  box-shadow:var(--shadow);
  background:linear-gradient(135deg, rgba(139,92,246,0.2), rgba(0,255,255,0.1));
}
.project-card .project-icon{font-size:2rem;color:var(--accent);margin-bottom:10px}
.project-card h3{font-size:1.2rem;margin-bottom:6px}
.project-card p{font-size:.9rem;margin-bottom:10px;text-align:center}
.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  border-radius:8px;
  font-size:.9rem;
  text-decoration:none;
  transition:background .3s var(--ease);
}
.btn:hover{background:linear-gradient(135deg,#7C3AED,#5B21B6)}

/* === EXTRA SECTIONS === */
.intern-list .intern-item,
.ach-list li,
.hobbies-list .hobby{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  font-size:.95rem;
}
.intern-item i,
.ach-list i,
.hobby i{color:var(--accent)}
.hobbies-list{display:flex;flex-wrap:wrap;gap:15px}
.hobby{background:var(--bg-card);border-radius:12px;padding:10px 16px}

/* === CONTACT BUTTONS === */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px;margin-top:20px}
.contact-grid a{
  background:linear-gradient(135deg,#00FFFF,#8B5CF6);
  color:#000;
  font-weight:600;
  padding:10px;
  border-radius:8px;
  text-align:center;
  text-decoration:none;
}

/* === PARTICLE & CURSOR TRAIL === */
.cursor-trail{
  position:fixed;
  width:20px;
  height:20px;
  border:2px solid transparent;
  border-image:linear-gradient(135deg, rgba(0, 255, 255, 0.8), rgba(139, 92, 246, 0.4)) 1;
  background:none;
  pointer-events:none;
  z-index:9999;
  opacity:0.3;
  box-shadow:0 0 15px rgba(0, 255, 255, 0.6), 0 0 30px rgba(139, 92, 246, 0.3);
  transform:translate(-50%, -50%);
}
.cursor-trail.square{border-radius:0}
.cursor-trail.triangle{clip-path:polygon(50% 0%, 0% 100%, 100% 100%)}
.cursor-trail.hexagon{clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)}

/* === HOLOGRAM ANIMATION === */
.hologram{
  position:fixed;
  border:2px solid transparent;
  border-image:linear-gradient(135deg, rgba(0, 255, 255, 0.8), rgba(139, 92, 246, 0.4)) 1;
  background:none;
  pointer-events:none;
  z-index:9998;
  opacity:0.5;
  box-shadow:0 0 15px rgba(0, 255, 255, 0.6), 0 0 30px rgba(139, 92, 246, 0.3);
  transform:translate(-50%, -50%);
}
.hologram.square{border-radius:0}
.hologram.hexagon{clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)}
.hologram.pentagon{clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)}

/* === FOOTER === */
footer{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:15px;
  text-align:center;
  background:var(--bg-card);
  border-top:1px solid rgba(139,92,246,.2);
}