:root {
  --navy: #0a192f; --light-navy: #112240;
  --slate: #8892b0; --white: #e6f1ff; --highlight: #64ffda;
}
* { margin:0;padding:0;box-sizing:border-box; }
body {
  font-family: 'Inter',sans-serif;
  background: var(--navy);
  color: var(--slate);
  scroll-behavior: smooth;
}
main { max-width:1000px;margin:0 auto;padding:5px 51px; }
.section { padding:50px 0; opacity:0; transform:translateY(20px); }
.fade-up { transition: opacity .6s ease, transform .6s ease; }
.section.visible { opacity:1; transform: translateY(0); }

.hero {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color: var(--white);
}
.highlight { color: var(--highlight); }
.btn {
  margin-top:20px;
  padding:.75em 1.5em;
  border:1px solid var(--highlight);
  color: var(--highlight);
  text-decoration:none;
  transition: background .3s;
}
.btn:hover { background: rgba(100,255,218,0.1); }

/* Sidebar nav */
#sidebar {
  position:fixed; top:50%; left:20px;
  transform: translateY(-50%);
}
#sidebar ul { list-style:none; }
#sidebar li + li { margin-top:15px; }
#sidebar a {
  color: var(--slate);
  font-size: .85rem;
  text-decoration:none;
  display:flex;
  align-items:center;
}
#sidebar span { margin-right:5px; transition: color .3s;padding-right: 5px; }
#sidebar a.active span,
#sidebar a:hover span {
  color: var(--highlight);
}

/* Sidebars */
#socials, #email {
  position:fixed; bottom:0;
}
#socials {
  left:20px;
}
#socials ul { list-style:none; }
#socials li { margin:10px 0; }
#socials a {
  color: var(--slate);
  writing-mode: vertical-rl;
  transform:rotate(180deg);
  text-decoration:none;
  font-size:.85rem;
  transition: color .3s;
}
#socials a:hover { color: var(--highlight); }

#email {
  right:20px;
  writing-mode: vertical-rl;
  transform:rotate(180deg);
}
#email a {
  color: var(--slate);
  text-decoration:none;
  font-size:.85rem;
  transition: color .3s;
}
#email a:hover { color: var(--highlight); }

/* Carousel */
.carousel { position:relative; overflow:hidden; }
.slides {
  display:flex;
  transition: transform .4s ease;
}
.slide {
  min-width:100%;
  background: var(--light-navy);
  padding:20px;
  border-radius:4px;
  color: var(--white);
}
.carousel-nav {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color: var(--highlight);
  font-size:2rem;
  cursor:pointer;
}
.prev { left:0; }
.next { right:0; }

/* Projects */
.project-list {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap:20px;
}
.project-card {
  background: var(--light-navy);
  padding:20px;
  border-radius:4px;
  opacity:0;
  transform:translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
  color: var(--white);
}
.project-card.visible {
  opacity:1;
  transform: translateY(0);
}
.project-card:hover {
  background: var(--slate);
  transform: translateY(-5px);
}

/* Form */
form {
  display:flex;
  flex-direction:column;
  gap:15px;
  max-width:400px;
}
input, textarea {
  padding:10px;
  background: var(--light-navy);
  border:1px solid var(--slate);
  color: var(--white);
  font-size:1rem;
  border-radius:4px;
}
button {
  align-self:flex-start;
  padding:.75em 1.5em;
  background:none;
  border:1px solid var(--highlight);
  color: var(--highlight);
  cursor:pointer;
}
button:hover { background: rgba(100,255,218,0.1); }

/* Responsive */
@media (max-width:768px) {
  #sidebar, #socials, #email { display:none; }
}