/* Reset & Base */
* {
  margin: 0; padding: 0; box-sizing: border-box;
}
body {
  font-family: 'Montserrat', Arial, sans-serif;
  background: #0f1021;
  color: #fff;
  min-height: 100vh;
  display: flex;
}
a { color: inherit; text-decoration: none; }

/* Neon Glow */
.neon-glow {
  color: #00fff7 !important;
  text-shadow: 0 0 8px #00fff7, 0 0 24px #00fff7, 0 0 48px #0ff;
  transition: text-shadow 0.3s, color 0.3s;
}
.neon-glow:hover, .project-link:hover {
  color: #fff !important;
  text-shadow: 0 0 16px #00fff7, 0 0 32px #00fff7, 0 0 64px #0ff;
}

/* Sidebar */
.sidebar {
  width: 90px;
  background: linear-gradient(180deg, #0f1021 60%, #00fff7 200%);
  box-shadow: 2px 0 32px #00fff733;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 0 24px 0;
  position: fixed;
  height: 100vh;
  z-index: 10;
}
.sidebar-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
}
.sidebar-pic {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 2px solid #00fff7;
  box-shadow: 0 0 16px #00fff7aa;
  object-fit: cover;
}
.sidebar-logo span {
  font-family: 'Orbitron', 'Montserrat', Arial, sans-serif;
  font-size: 0.9em;
  letter-spacing: 1px;
  color: #00fff7;
}
.sidebar nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 32px;
}
.sidebar nav ul li a {
  font-size: 1.7em;
  color: #fff;
  transition: color 0.2s, text-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar nav ul li a:hover {
  color: #00fff7;
  text-shadow: 0 0 16px #00fff7;
}
.sidebar-social {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: auto;
}
.sidebar-social a {
  font-size: 1.3em;
  color: #00fff7;
  transition: color 0.2s, text-shadow 0.2s;
}
.sidebar-social a:hover {
  color: #fff;
  text-shadow: 0 0 16px #00fff7;
}

/* Main Content */
main {
  margin-left: 90px;
  width: 100%;
  background: transparent;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* Animated BG */
.magic-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 20% 30%, #00fff7 0%, transparent 70%),
              radial-gradient(circle at 80% 70%, #ff00ea 0%, transparent 70%),
              linear-gradient(135deg, #232526 0%, #0f1021 100%);
  animation: bgMove 16s ease-in-out infinite alternate;
  filter: blur(80px) brightness(1.1);
}
@keyframes bgMove {
  0% { background-position: 0% 0%, 100% 100%, 0% 0%; }
  100% { background-position: 100% 100%, 0% 0%, 100% 100%; }
}

/* Hero Section */
.hero-section {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hero-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, #00fff7 0%, #0f1021 70%);
  filter: blur(80px) brightness(1.2);
  transform: translate(-50%, -50%);
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 0 32px 0;
}
.profile-pic {
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 4px solid #00fff7;
  box-shadow: 0 0 32px #00fff7aa, 0 0 0 8px #0ff2;
  object-fit: cover;
  margin-bottom: 8px;
  background: #232526;
}
.founder-badge {
  font-size: 1em;
  color: #ff00ea;
  font-family: 'Orbitron', 'Montserrat', Arial, sans-serif;
  letter-spacing: 1px;
}
.typing-container {
  font-size: 1.3em;
  font-family: 'Orbitron', 'Montserrat', Arial, sans-serif;
  color: #fff;
  margin-bottom: 8px;
}
.cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: #00fff7;
  margin-left: 2px;
  animation: blink 0.8s steps(1) infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1;}
  50% { opacity: 0;}
}
.hero-desc {
  color: #fff;
  font-size: 1.1em;
  margin-bottom: 8px;
  text-align: center;
  max-width: 600px;
}
.floating {
  animation: floatY 3.5s ease-in-out infinite alternate;
}
@keyframes floatY {
  0% { transform: translateY(0);}
  100% { transform: translateY(-18px);}
}

/* About Section */
.glass-section {
  background: rgba(20, 20, 40, 0.85);
  border-radius: 24px;
  margin: 48px auto;
  max-width: 900px;
  padding: 36px 32px;
  box-shadow: 0 8px 32px 0 #00fff733;
  position: relative;
}
.about-content {
  display: flex;
  align-items: center;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
}
.about-pic {
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 3px solid #ff00ea;
  box-shadow: 0 0 24px #ff00ea99;
  object-fit: cover;
}
.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 18px 0 0 0;
  padding: 0;
  list-style: none;
}
.skills-list li {
  background: rgba(0,255,247,0.09);
  border: 1.5px solid #00fff7;
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 1.1em;
  color: #fff;
  box-shadow: 0 2px 8px #00fff722;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.3s, box-shadow 0.3s;
}
.skills-list li:hover {
  background: #00fff733;
  box-shadow: 0 4px 16px #00fff755;
}

/* Projects Section */
.projects-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  margin-top: 18px;
}
.project-card {
  background: rgba(20, 20, 40, 0.92);
  border-radius: 18px;
  padding: 24px 18px 18px 18px;
  width: 290px;
  box-shadow: 0 4px 24px #00fff733;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 2px solid #00fff733;
  transition: box-shadow 0.4s, border 0.4s, transform 0.3s;
}
.project-card:hover {
  border: 2px solid #ff00ea;
  box-shadow: 0 0 48px #ff00ea99, 0 0 0 6px #00fff755;
  transform: translateY(-8px) scale(1.03);
}
.project-img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 14px;
  box-shadow: 0 2px 12px #00fff733;
}
.project-link {
  margin-top: 10px;
  display: inline-block;
  padding: 8px 20px;
  background: linear-gradient(90deg, #00fff7 0%, #ff00ea 100%);
  color: #fff !important;
  border-radius: 8px;
  font-weight: bold;
  letter-spacing: 1px;
  box-shadow: 0 0 16px #00fff755;
  text-decoration: none;
  transition: background 0.3s, box-shadow 0.3s;
}
.project-link:hover {
  background: linear-gradient(90deg, #ff00ea 0%, #00fff7 100%);
  box-shadow: 0 0 32px #ff00eacc;
  color: #fff !important;
}

/* Contact Section */
#contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  margin-top: 12px;
}
#contact-form input,
#contact-form textarea {
  width: 100%;
  max-width: 420px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1.5px solid #00fff744;
  background: rgba(20, 20, 40, 0.65);
  color: #fff;
  font-size: 1em;
  outline: none;
  transition: border 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 8px #00fff722;
}
#contact-form input:focus,
#contact-form textarea:focus {
  border: 1.5px solid #ff00ea;
  box-shadow: 0 0 12px #ff00ea55;
}
#contact-form button {
  margin-top: 8px;
  background: linear-gradient(90deg, #00fff7 0%, #ff00ea 100%);
  color: #fff !important;
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 16px #00fff755;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 10px 28px;
  font-size: 1.1em;
  cursor: pointer;
  transition: background 0.3s, box-shadow 0.3s;
}
#contact-form button:hover {
  background: linear-gradient(90deg, #ff00ea 0%, #00fff7 100%);
  box-shadow: 0 0 32px #ff00eacc;
  color: #fff !important;
}
#form-message {
  margin-top: 10px;
  font-size: 1.1em;
  font-family: 'Orbitron', 'Montserrat', Arial, sans-serif;
  min-height: 24px;
}

/* Footer */
footer {
  margin: 48px auto 0 auto;
  text-align: center;
  color: #00fff7;
  font-family: 'Orbitron', 'Montserrat', Arial, sans-serif;
  font-size: 1em;
  letter-spacing: 1px;
  padding-bottom: 24px;
  opacity: 0.7;
}

/* Section Headings */
h2.neon-glow {
  font-size: 2.2em;
  margin-bottom: 18px;
  text-align: center;
}

/* Responsive */
@media (max-width: 900px) {
  .glass-section {
    max-width: 98vw;
    padding: 18px 4vw;
  }
  .projects-grid {
    flex-direction: column;
    align-items: center;
  }
  main { margin-left: 70px; }
  .sidebar { width: 70px; }
  .sidebar-logo span { display: none; }
}
@media (max-width: 700px) {
  .sidebar { display: none; }
  main { margin-left: 0; }
  .glass-section { padding: 12px 2vw; }
  .project-card { width: 98vw; max-width: 340px; }
  .about-content { flex-direction: column; gap: 18px; }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  background: #232526;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #00fff7 0%, #ff00ea 100%);
  border-radius: 8px;
}