/* -----------------------------------------
   THEME VARIABLES
--------------------------------------------*/
:root{
  --bg:#0b0d10;
  --text:#e9eef5;
  --muted:#9aa0a6;
  --card:#0f1720;
  --accent:#00e6ff;
  --accent-2:#6a9cff;
  --nav-bg:rgba(0,0,0,0.40);
}

:root.light{
  --bg:#f7f9fb;
  --text:#0b1220;
  --muted:#5b6a73;
  --card:#ffffff;
  --accent:#0066cc;
  --accent-2:#0047a3;
  --nav-bg:rgba(255,255,255,0.70);
}

/* -----------------------------------------
   GLOBAL
--------------------------------------------*/
*{box-sizing:border-box;}
html,body{
  margin:0;
  font-family:'Poppins',sans-serif;
  color:var(--text);
  background:var(--bg);
  transition:background .3s,color .3s;
}
a{color:var(--accent);text-decoration:none;}
.container{max-width:1200px;margin:auto;padding:40px;}
.section{padding-top:80px;}
.section-title{
  text-align:center;
  font-size:26px;
  margin-bottom:12px;
}
.lead{
  color:var(--muted);
  font-size:16px;
}

/* -----------------------------------------
   NAVBAR
--------------------------------------------*/
.nav{position:fixed;top:0;left:0;right:0;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.10));z-index:60;border-bottom:1px solid rgba(255,255,255,0.03)}
.nav-left{display:flex;align-items:center;gap:12px;}
#logo{height:55px;width:145px;border-radius:8px;object-fit:cover;}
.brand{font-size:20px;font-weight:700;color:var(--text);}
.nav-right{display:flex;align-items:center;gap:18px;}
.nav-right a{color:var(--muted);font-weight:600;}

.theme-btn{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.theme-btn i{width:18px;text-align:center}

/* -----------------------------------------
   PROJECT CARDS
--------------------------------------------*/
.projects-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:20px;
  margin-top:20px;
}

.repo-card{
  background:var(--card);
  padding:18px;
  border-radius:12px;
  border-left:4px solid var(--accent);
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
  transition:.25s ease;
}
.repo-card:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 26px rgba(0,0,0,0.45);
}
.repo-card h3{
  margin:0 0 8px;
  font-size:18px;
}
.repo-card p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

/* -----------------------------------------
   FOOTER
--------------------------------------------*/
.footer{
  text-align:center;
  padding:32px;
  margin-top:50px;
  color:var(--muted);
}