/* ===== CSS Variables ===== */
:root {
  --bg: #f9f9f9;
  --text: #222;
  --card: #ffffff;
  --accent: #0077ff;
}

body.dark {
  --bg: #121212;
  --text: #eaeaea;
  --card: #1e1e1e;
  --accent: #4da3ff;
}

/* ===== Base ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  font-family: Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background 0.3s, color 0.3s;
}

.container {
  width: 90%;
  max-width: 1100px;
  margin: auto;
}

.section {
  padding: 4rem 0;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

/* ===== Header ===== */
.header {
  background: var(--card);
  border-bottom: 1px solid #4442;
  position: sticky;
  top: 0;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.nav-list {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.nav-list a {
  text-decoration: none;
  color: var(--text);
}

.theme-toggle {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: var(--text);
}

/* ===== Hamburger ===== */
.hamburger {
  display: none;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

/* ===== Hero ===== */
.hero {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
}

.hero span {
  color: var(--accent);
}

/* ===== Skills ===== */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.skill-bar {
  background: #5553;
  height: 8px;
}

.skill { height: 100%; }
.skill.html { width: 90%; background: #e34c26; }
.skill.css  { width: 85%; background: #264de4; }
.skill.js   { width: 75%; background: #f0db4f; }
.skill.git  { width: 70%; background: #777; }

/* ===== Projects ===== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

.project-card {
  background: var(--card);
  padding: 1.5rem;
  border-radius: 6px;
  transition: transform 0.3s;
}

.project-card:hover {
  transform: translateY(-6px);
}

/* ===== Reveal Animation ===== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Footer ===== */
.footer {
  text-align: center;
  padding: 1.5rem;
  background: var(--card);
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }

  .nav-list {
    position: absolute;
    top: 64px;
    right: 0;
    background: var(--card);
    flex-direction: column;
    width: 200px;
    padding: 1rem;
    display: none;
  }

  .nav-list.show {
    display: flex;
  }
}