/* CSS Reset and Base Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'Roboto', sans-serif;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  overflow-x: hidden;
}

/* CSS Custom Properties */
:root{
  --bg:#0b0f14; --card:#111827; --text:#e5e7eb; --muted:#9ca3af;
  --brand:#2563eb; --brand-2:#60a5fa;
  --glow:rgba(37,99,235,.6); --glow-hover:rgba(37,99,235,.8);
  --border:#374151; --shadow:rgba(0,0,0,.3);
  --gradient:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
}

/* Accessibility */
.skip-link{
  position:absolute;top:-40px;left:6px;background:var(--brand);color:#fff;
  padding:8px;text-decoration:none;border-radius:4px;z-index:1000;transition:top .3s;
}
.skip-link:focus{ top:6px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* Container */
.container{ max-width:1200px; margin:0 auto; padding:0 2rem; }

/* Typography */
h1,h2,h3,h4,h5,h6{ font-weight:600; line-height:1.2; margin-bottom:1rem; }
h1{ font-size:clamp(2.5rem,5vw,4rem); font-weight:700; }
h2{
  font-size:clamp(2rem,4vw,3rem); margin-bottom:3rem; text-align:center; position:relative;
}
h2::after{
  content:''; position:absolute; bottom:-1rem; left:50%; transform:translateX(-50%);
  width:4rem; height:3px; background:var(--gradient); border-radius:2px;
}
h3{ font-size:1.5rem; margin-bottom:.5rem; }
p{ margin-bottom:1rem; color:var(--muted); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; padding:.75rem 1.5rem;
  border:none; border-radius:8px; font-weight:500; text-decoration:none; cursor:pointer;
  transition:all .3s ease; position:relative; overflow:hidden;
}
.btn-primary{ background:var(--gradient); color:#fff; box-shadow:0 4px 15px rgba(37,99,235,.3); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 25px var(--glow-hover); }
.btn-ghost{ background:transparent; color:var(--text); border:2px solid var(--border); }
.btn-ghost:hover{ background:var(--card); border-color:var(--brand); box-shadow:0 0 20px var(--glow); transform:translateY(-2px); }

/* Navigation */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(11,15,20,.8); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border); transition:all .3s ease;
}
.nav-container{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 2rem; max-width:1200px; margin:0 auto;
}
.nav-logo .logo-link{ font-size:1.5rem; font-weight:700; color:var(--brand); text-decoration:none; transition:all .3s ease; }
.nav-logo .logo-link:hover{ text-shadow:0 0 20px var(--glow); }
.nav-menu{ display:flex; list-style:none; gap:2rem; align-items:center; }
.nav-link{ color:var(--text); text-decoration:none; font-weight:500; transition:all .3s ease; position:relative; }
.nav-link:hover,.nav-link.active{ color:var(--brand); }
.nav-link::after{
  content:''; position:absolute; bottom:-5px; left:0; width:0; height:2px; background:var(--gradient); transition:width .3s ease;
}
.nav-link:hover::after,.nav-link.active::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; }
.hamburger{ display:none; flex-direction:column; cursor:pointer; gap:4px; background:none; border:none; }
.hamburger .bar{ width:25px; height:3px; background:var(--text); transition:.3s; border-radius:2px; }

/* Hero */
.hero{ min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.hero-background{ position:absolute; inset:0; z-index:-1; }
.hero-content{ text-align:center; max-width:800px; padding:0 2rem; }
.hero-name{
  font-size:clamp(3rem,8vw,5rem); font-weight:700; margin-bottom:1rem;
  background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-nickname{ color:var(--muted); font-weight:400; }
.hero-title{ font-size:clamp(1.2rem,3vw,1.5rem); color:var(--muted); margin-bottom:2rem; max-width:600px; margin-inline:auto; }
.hero-cta{ display:flex; gap:1rem; justify-content:center; margin-bottom:2rem; flex-wrap:wrap; }
.hero-links{ display:flex; gap:1rem; justify-content:center; align-items:center; flex-wrap:wrap; font-size:.9rem; color:var(--muted); }
.location{ margin-right:.5rem; }
.social-link{ color:var(--muted); text-decoration:none; transition:color .3s ease; }
.social-link:hover{ color:var(--brand); }

/* Sections */
.section{ padding:5rem 0; position:relative; }
.section-title{ text-align:center; margin-bottom:3rem; }

/* About */
.about-content{ max-width:800px; margin:0 auto; text-align:center; }
.about-text{ font-size:1.1rem; line-height:1.8; margin-bottom:1.5rem; }

/* Skills */
.skills-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; margin-top:3rem; }
.skill-card{
  background:var(--card); padding:2rem; border-radius:12px; border:1px solid var(--border);
  transition:all .3s ease; position:relative; overflow:hidden;
}
.skill-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient); transform:scaleX(0); transition:transform .3s ease; }
.skill-card:hover{ transform:translateY(-5px); box-shadow:0 10px 30px var(--glow); border-color:var(--brand); }
.skill-card:hover::before{ transform:scaleX(1); }
.skill-icon{ font-size:2rem; margin-bottom:1rem; }
.skill-title{ font-size:1.3rem; margin-bottom:1rem; color:var(--text); }
.skill-tags{ display:flex; flex-wrap:wrap; gap:.5rem; }

/* Tags */
.tag{
  background:rgba(37,99,235,.1); color:var(--brand-2); padding:.25rem .75rem; border-radius:20px;
  font-size:.85rem; border:1px solid rgba(37,99,235,.2); transition:all .3s ease;
}
.tag:hover{ background:rgba(37,99,235,.2); transform:translateY(-1px); }

/* Experience */
.experience-timeline{ max-width:800px; margin:0 auto; position:relative; }
.experience-timeline::before{ content:''; position:absolute; left:2rem; top:0; bottom:0; width:2px; background:var(--gradient); }
.experience-item{ position:relative; margin-bottom:3rem; padding-left:5rem; }
.experience-item::before{
  content:''; position:absolute; left:1.5rem; top:.5rem; width:12px; height:12px; background:var(--brand);
  border-radius:50%; border:3px solid var(--bg); box-shadow:0 0 0 3px var(--brand);
}
.experience-date{ color:var(--brand); font-weight:600; font-size:.9rem; margin-bottom:.5rem; }
.experience-title{ color:var(--text); margin-bottom:.25rem; }
.experience-company{ color:var(--muted); font-size:1rem; margin-bottom:1rem; }
.experience-details{ list-style:none; padding-left:0; }
.experience-details li{ position:relative; padding-left:1.5rem; margin-bottom:.5rem; color:var(--muted); }
.experience-details li::before{ content:'→'; position:absolute; left:0; color:var(--brand); font-weight:bold; }

/* Projects */
.projects-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; margin-top:3rem; }
.project-card{
  background:var(--card); padding:2rem; border-radius:12px; border:1px solid var(--border);
  transition:all .3s ease; position:relative; overflow:hidden;
}
.project-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient); transform:scaleX(0); transition:transform .3s ease; }
.project-card:hover{ transform:translateY(-5px); box-shadow:0 10px 30px var(--glow); border-color:var(--brand); }
.project-card:hover::before{ transform:scaleX(1); }
.project-title{ color:var(--text); margin-bottom:1rem; }
.project-description{ color:var(--muted); margin-bottom:1.5rem; line-height:1.6; }
.project-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.project-link{ color:var(--brand); text-decoration:none; font-weight:500; transition:all .3s ease; }
.project-link:hover{ color:var(--brand-2); text-shadow:0 0 10px var(--glow); }

/* Education */
.education-content{ max-width:800px; margin:0 auto; }
.education-item{
  background:var(--card); padding:2rem; border-radius:12px; border:1px solid var(--border); margin-bottom:2rem; transition:all .3s ease;
}
.education-item:hover{ transform:translateY(-2px); box-shadow:0 5px 20px var(--glow); border-color:var(--brand); }
.education-degree{ color:var(--text); margin-bottom:.5rem; }
.education-school{ color:var(--brand); margin-bottom:.5rem; }
.education-date{ color:var(--muted); margin-bottom:1rem; }
.coursework h5{ color:var(--text); margin-bottom:1rem; }
.coursework-tags{ display:flex; flex-wrap:wrap; gap:.5rem; }

/* Achievements */
.achievements-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; margin-bottom:3rem; }
.achievement-card{
  background:var(--card); padding:2rem; border-radius:12px; border:1px solid var(--border); text-align:center; transition:all .3s ease;
}
.achievement-card:hover{ transform:translateY(-5px); box-shadow:0 10px 30px var(--glow); border-color:var(--brand); }
.achievement-title{ color:var(--text); margin-bottom:1rem; }
.achievement-description{ color:var(--muted); }

.extracurriculars{ max-width:600px; margin:0 auto; text-align:center; }
.extracurriculars-title{ color:var(--text); margin-bottom:1rem; }
.extracurriculars-list{ list-style:none; padding:0; }
.extracurriculars-list li{ color:var(--muted); margin-bottom:.5rem; position:relative; padding-left:1.5rem; }
.extracurriculars-list li::before{ content:'•'; position:absolute; left:0; color:var(--brand); font-weight:bold; }

/* Contact */
.contact-content{
  max-width:800px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start;
}
.contact-description{ font-size:1.1rem; margin-bottom:2rem; color:var(--muted); }
.contact-details{ display:flex; flex-direction:column; gap:1rem; }
.contact-link{ color:var(--text); text-decoration:none; transition:color .3s ease; display:flex; align-items:center; gap:.5rem; }
.contact-link:hover{ color:var(--brand); }

/* Form */
.contact-form{ background:var(--card); padding:2rem; border-radius:12px; border:1px solid var(--border); }
.form-group{ margin-bottom:1.5rem; }
.form-label{ display:block; margin-bottom:.5rem; color:var(--text); font-weight:500; }
.form-input,.form-textarea{
  width:100%; padding:.75rem; border:1px solid var(--border); border-radius:8px; background:var(--bg);
  color:var(--text); font-family:inherit; transition:all .3s ease;
}
.form-input:focus,.form-textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.form-textarea{ resize:vertical; min-height:120px; }
.form-submit{ width:100%; }

/* Footer */
.footer{ background:var(--card); border-top:1px solid var(--border); padding:2rem 0; margin-top:5rem; }
.footer-content{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-copyright{ color:var(--muted); margin:0; }
.footer-links{ display:flex; gap:2rem; }
.footer-link{ color:var(--muted); text-decoration:none; transition:color .3s ease; }
.footer-link:hover{ color:var(--brand); }

/* Back to top */
.back-to-top{
  position:fixed; bottom:2rem; right:2rem; width:50px; height:50px; background:var(--gradient);
  border:none; border-radius:50%; color:#fff; cursor:pointer; opacity:0; visibility:hidden; transition:all .3s ease;
  z-index:1000; display:flex; align-items:center; justify-content:center;
}
.back-to-top.visible{ opacity:1; visibility:visible; }
.back-to-top:hover{ transform:translateY(-3px); box-shadow:0 5px 20px var(--glow); }

/* Toast */
.toast{
  position:fixed; top:2rem; right:2rem; padding:1rem 1.5rem; border-radius:8px; color:#fff; font-weight:500; z-index:1001;
  transform:translateX(100%); transition:transform .3s ease;
}
.toast.success{ background:#10b981; }
.toast.error{ background:#ef4444; }
.toast.show{ transform:translateX(0); }

/* Animations */
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:translateY(0); } }
.fade-in-up{ animation:fadeInUp .6s ease forwards; }

/* Responsive */
@media (max-width:768px){
  .container{ padding:0 1rem; }
  .nav-container{ padding:1rem; }
  .nav-menu{
    position:fixed; top:70px; left:-100%; width:100%; height:calc(100vh - 70px); background:var(--card);
    flex-direction:column; justify-content:start; padding:2rem; transition:left .3s ease; border-top:1px solid var(--border);
  }
  .nav-menu.active{ left:0; }
  .hamburger{ display:flex; }
  .hamburger.active .bar:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
  .hamburger.active .bar:nth-child(2){ opacity:0; }
  .hamburger.active .bar:nth-child(3){ transform:rotate(-45deg) translate(7px,-6px); }
  .nav-cta{ display:none; }
  .hero-cta{ flex-direction:column; align-items:center; }
  .hero-links{ flex-direction:column; gap:.5rem; }
  .skills-grid,.projects-grid,.achievements-grid{ grid-template-columns:1fr; }
  .contact-content{ grid-template-columns:1fr; gap:2rem; }
  .footer-content{ flex-direction:column; text-align:center; }
  .footer-links{ justify-content:center; }
  .back-to-top{ bottom:1rem; right:1rem; width:45px; height:45px; }
}
@media (max-width:480px){
  .section{ padding:3rem 0; }
  .hero{ min-height:80vh; }
  .skill-card,.project-card,.achievement-card,.education-item{ padding:1.5rem; }
  .contact-form{ padding:1.5rem; }
}

/* Research Section */
.research-content{ max-width:900px; margin:0 auto; }
.research-item{
  background:var(--card); padding:2.5rem; border-radius:12px; border:1px solid var(--border);
  transition:all .3s ease; position:relative; overflow:hidden;
}
.research-item::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient);
  transform:scaleX(0); transition:transform .3s ease;
}
.research-item:hover{ transform:translateY(-5px); box-shadow:0 10px 30px var(--glow); border-color:var(--brand); }
.research-item:hover::before{ transform:scaleX(1); }
.research-title{
  color:var(--text); font-size:1.5rem; margin-bottom:1rem;
  background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.research-description{ color:var(--muted); font-size:1.1rem; line-height:1.7; margin-bottom:2rem; }
.research-details{ display:grid; gap:2rem; }
.research-highlights h4,.research-results h4,.research-technologies h4{ color:var(--text); margin-bottom:1rem; font-size:1.1rem; }
.research-list{ list-style:none; padding:0; }
.research-list li{ color:var(--muted); margin-bottom:.75rem; position:relative; padding-left:1.5rem; }
.research-list li::before{ content:'→'; position:absolute; left:0; color:var(--brand); font-weight:bold; }
.results-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; }
.result-item{
  background:rgba(37,99,235,.1); padding:1.5rem; border-radius:8px; border:1px solid rgba(37,99,235,.2);
  text-align:center; transition:all .3s ease;
}
.result-item:hover{ background:rgba(37,99,235,.15); transform:translateY(-2px); }
.result-metric{ display:block; font-size:2rem; font-weight:700; color:var(--brand); margin-bottom:.5rem; }
.result-label{ color:var(--muted); font-size:.9rem; }
.tech-tags{ display:flex; flex-wrap:wrap; gap:.5rem; }

/* Alias (if old markup used .research-card) */
.research-card{ composes: research-item; } /* safe no-op in most browsers; keep block below for compatibility */
.research-card{
  background:var(--card); padding:2.5rem; border-radius:12px; border:1px solid var(--border);
  transition:all .3s ease; position:relative; overflow:hidden;
}
.research-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient);
  transform:scaleX(0); transition:transform .3s ease;
}
.research-card:hover{ transform:translateY(-5px); box-shadow:0 10px 30px var(--glow); border-color:var(--brand); }
.research-card:hover::before{ transform:scaleX(1); }

/* Print */
@media print{
  .navbar,.back-to-top,.toast{ display:none; }
  body{ background:#fff; color:#000; }
  .section{ page-break-inside:avoid; }
}