/* =================== RESET & BASE =================== */
* {
  margin:0; padding:0; box-sizing:border-box;
  font-family:'Inter',sans-serif;
}

body {
  background:#0f172a;
  color:#fff;
  line-height:1.6;
  transition:0.4s;
}

body.light {
  background:#f1f5f9;
  color:#111;
}

/* =================== CONTAINER =================== */
.container {
  display:flex;
  min-height:100vh;
}

/* =================== SIDEBAR =================== */
.sidebar {
  width:250px;
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(20px);
  padding:30px 20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-radius:0 40px 40px 0;
  box-shadow: 5px 0 30px rgba(0,0,0,0.2);
  transition:0.5s;
  z-index:100;
}

.sidebar .logo video {
  width:100px;
  border-radius:15px;
  margin-bottom:20px;
}

.sidebar nav h3 {
  margin-bottom:10px;
  font-size:1rem;
  color:#ccc;
}

.sidebar nav ul {
  list-style:none;
}

.sidebar nav ul li {
  margin:10px 0;
}

.nav-menu ul li a {
  display:block;
  padding:10px 15px;
  margin:5px 0;
  background: rgba(255,255,255,0.1);
  border-radius:15px;
  text-decoration:none;
  color:#fff;
  transition:0.3s;
}

.nav-menu ul li a:hover {
  background: #3b82f6;
  color:#fff;
  transform:scale(1.05);
}

.sidebar .powered {
  font-size:0.8rem;
  color:#777;
  margin-top:20px;
}

/* =================== MAIN CONTENT =================== */
.content {
  flex:1;
  margin-left:270px;
  padding:50px;
  overflow:auto;
  transition:0.5s;
}

/* =================== HEADER =================== */
.main-header {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:40px;
  text-align:center;
}

.theme-toggle {
  background:rgba(255,255,255,0.1);
  border:none;
  padding:10px 14px;
  border-radius:50%;
  cursor:pointer;
  align-self:flex-end;
  transition:0.3s;
}

.theme-toggle:hover {
  transform:scale(1.1);
}

/* =================== WELCOME & ABOUT =================== */
#welcome, #about {
  text-align:center;
  margin-bottom:30px;
  opacity:0;
  animation:fadeIn 1s ease forwards;
}

#welcome.visible, #about.visible {
  opacity:1;
}

@keyframes fadeIn {
  from { opacity:0; transform:translateY(-10px);}
  to { opacity:1; transform:translateY(0);}
}

/* =================== CARDS =================== */
.card-section {
  background: rgba(255,255,255,0.05);
  backdrop-filter:blur(15px);
  border-radius:25px;
  padding:30px;
  margin-bottom:30px;
  box-shadow:0 15px 40px rgba(0,0,0,0.3);
  opacity:0;
  transform: translateY(20px);
  transition:0.4s;
  display: none;
}

.card-section.visible {
  opacity:1;
  transform:translateY(0);
  display: block;
}

.card-section h2 {
  font-size:1.6rem;
  margin-bottom:15px;
}

.card-section ul {
  margin-left:20px;
  margin-bottom:15px;
}

.card-section ul li {
  margin-bottom:8px;
}

.card-section p {
  margin-bottom:15px;
}

/* =================== RESPONSIVE =================== */
@media(max-width:900px) {
  .container { flex-direction:column; }
  .sidebar {
    width:100%;
    border-radius:0 0 40px 40px;
    height:auto;
    position:relative;
  }
  .content {
    margin-left:0;
    padding:30px 20px;
  }
}