* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Inter', sans-serif;
  background: #0d0d1f;
  color: #e0e0ff;
  line-height: 1.8;
  padding-top: 80px;
  min-height: 100vh;
}

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

/* Navbar */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 1.2rem 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(13, 13, 31, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 255, 234, 0.2);
  z-index: 1000;
  transition: all 0.4s;
}

#navbar.scrolled { padding: 0.8rem 5%; background: rgba(13, 13, 31, 0.98); }

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 1.6rem;
  color: #00ffea;
  text-decoration: none;
}

.nav-logo { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #00ffea; box-shadow: 0 0 20px rgba(0,255,234,0.6); }

.nav-links { display: flex; list-style: none; gap: 2.5rem; }
.nav-link { color: #aaa; text-decoration: none; font-weight: 600; position: relative; transition: color 0.3s; }
.nav-link:hover, .nav-link.active { color: #00ffea; }
.nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -8px; left: 50%; background: #00ffea; transition: width 0.4s; transform: translateX(-50%); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

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

/* Headings */
h1, h2 { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
h1 { font-size: 3.8rem; margin: 2rem 0; }
.highlight { color: #00ffea; }
h2 { font-size: 2.8rem; color: #00ffea; margin: 5rem 0 3rem; text-align: center; }

/* Divider */
.divider { width: 100%; max-width: 1000px; margin: 3rem auto; border-radius: 12px; display: block; }

/* BIG About */
.about { padding: 200px 10% 160px; background: linear-gradient(135deg, #0a001a 0%, #001122 100%); }
.about-content { display: grid; grid-template-columns: 1fr 420px; gap: 7rem; align-items: center; max-width: 1400px; margin: 0 auto; }
.about-text-big { font-size: 1.5rem; line-height: 2.3; color: #e8e8ff; text-align: left; }
.about-text-big p { margin-bottom: 2rem; opacity: 0.95; }
.about-text-big strong { color: #00ffea; font-weight: 700; }
.main-logo-big { width: 420px; height: 420px; border-radius: 50%; object-fit: contain; padding: 30px; background: rgba(0,255,234,0.08); border: 5px solid #00ffea; box-shadow: 0 0 120px rgba(0,255,234,0.7); transition: all 0.8s ease; }
.main-logo-big:hover { transform: scale(1.06) rotate(8deg); box-shadow: 0 0 180px rgba(0,255,234,1); }

/* Tech & Projects */
.badges img { margin: 0.6rem; border-radius: 8px; height: 38px; }
.list { list-style: none; max-width: 600px; margin: 2rem auto; text-align: left; font-size: 1.3rem; }
.list li { margin: 1rem 0; padding-left: 1.5rem; position: relative; }
.list li::before { content: "▹"; color: #00ffea; position: absolute, 0; }

/* BIG Social Icons */
.social-big { display: flex; justify-content: center; gap: 5rem; margin: 3rem 0; }
.social-icon { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #e0e0ff; transition: all 0.5s ease; }
.social-icon i { font-size: 4.5rem; margin-bottom: 1rem; transition: all 0.5s; }
.social-icon span { font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 600; }
.social-icon.github i { color: #00ffea; }
.social-icon.github:hover i { color: #fff; text-shadow: 0 0 40px #00ffea; transform: translateY(-10px); }
.social-icon.github:hover span { color: #00ffea; }
.social-icon.gmail i { color: #ff3366; }
.social-icon.gmail:hover i { color: #fff; text-shadow: 0 0 40px #ff3366; transform: translateY(-10px); }
.social-icon.gmail:hover span { color: #ff3366; }
.contact-info { margin-top: 2rem; font-size: 1.3rem; color: #aaa; }

/* Typing SVG */
.typing-container { margin: 6rem auto; max-width: 100%; padding: 0 1rem; border-radius: 16px; overflow: hidden; box-shadow: 0 0 80px rgba(0,255,234,0.3); }
.typing-svg { width: 100%; height: auto; border-radius: 16px; }

/* Footer */
footer { margin-top: 6rem; padding: 3rem; text-align: center; color: #666; font-size: 1rem; }

/* Responsive */
@media (max-width: 968px) {
  .about-content { grid-template-columns: 1fr; text-align: center; gap: 5rem; }
  .about-text-big { font-size: 1.4rem; text-align: center; }
  .main-logo-big { width: 340px; height: 340px; }
  .social-big { gap: 3rem; }
  .social-icon i { font-size: 3.8rem; }
}

/* Final Contact Section – Bottom of the page */
.contact-final {
  padding: 180px 10% 120px;
  background: linear-gradient(135deg, #0a001a 0%, #001122 100%);
  text-align: center;
}

.feedback-text {
  margin-top: 3rem;
  font-size: 1.4rem;
  color: #aaa;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 2;
}

.badges {
  text-align: center;
}

.list{
  text-align: center;
}

#home {
  text-align: center;
}