/* ===========================
   Base / Utility
   =========================== */
:root{
  --bg: #f4f4f4;
  --card: #fff;
  --accent: #febd69; /* Amazon yellow */
  --nav: #37475a;
  --nav-dark: #232f3e;
  --muted: #6b7280;
  --text: #111827;
  --radius: 12px;
  --glass: rgba(255,255,255,0.6);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background 0.25s,color 0.25s;
}
.container{max-width:1100px;margin:0 auto;padding:24px}

/* ===========================
   Topbar / Header
   =========================== */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 20px;
  background:var(--nav-dark);
  color:#fff;
  position:sticky;
  top:0;
  z-index:60;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.topbar-left{display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;text-decoration:none;color:inherit}
.brand-logo{width:40px;height:40px;border-radius:8px;object-fit:cover}
.brand-text{font-weight:700;margin-left:8px}
.site-dot{color:var(--accent)}
.icon-btn{background:none;border:none;color:inherit;font-size:18px;padding:8px;border-radius:8px;cursor:pointer}
.small-link{color:#fff;margin-left:8px;text-decoration:none;padding:6px;border-radius:6px}
.small-link:hover{background:rgba(255,255,255,0.06)}

.search{display:flex;align-items:center;gap:8px;background:#fff;padding:6px;border-radius:8px;min-width:220px}
.search input{border:0;outline:none;padding:8px;font-size:14px;border-radius:6px}
.search-btn{background:var(--accent);border:none;padding:8px 10px;border-radius:6px;cursor:pointer;font-weight:600}

/* ===========================
   Sidebar
   =========================== */
.sidebar{
  position:fixed;
  left:-280px;
  top:0;
  bottom:0;
  width:260px;
  background:var(--nav);
  color:#fff;
  padding:20px;
  box-shadow:2px 0 12px rgba(0,0,0,0.12);
  transition:left .28s ease;
  z-index:70;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.sidebar.open{left:0}
.sidebar nav a{display:block;color:#fff;text-decoration:none;padding:10px 6px;border-radius:8px;margin:6px 0;font-weight:600}
.sidebar nav a:hover, .sidebar nav a.active{background:rgba(255,255,255,0.06)}
.sidebar .cta{display:inline-block;margin-top:12px;padding:10px 12px;background:var(--accent);color:#000;border-radius:8px;text-decoration:none;font-weight:700}

/* overlay */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);opacity:0;pointer-events:none;transition:opacity .2s}
.overlay.visible{opacity:1;pointer-events:auto;z-index:65}

/* ===========================
   Main / Hero
   =========================== */
.main{padding:32px 24px 80px}
.hero{display:flex;align-items:center;justify-content:center;padding:48px 24px;background:linear-gradient(180deg, rgba(254,237,214,0.6), transparent);border-radius:12px;margin:18px 0}
.hero-inner{text-align:center;max-width:920px}
.hero-logo-large{width:120px;height:120px;border-radius:20px;object-fit:cover;margin-bottom:18px;box-shadow:0 6px 18px rgba(0,0,0,0.12)}
.hero h1{font-size:28px;margin:8px 0 12px}
.lead{font-size:16px;color:var(--muted);line-height:1.6}
.hero-actions{display:flex;gap:12px;justify-content:center;margin-top:18px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700}
.btn.primary{background:var(--accent);color:#000}
.btn.outline{border:2px solid rgba(0,0,0,0.08);background:transparent;color:inherit}

/* ===========================
   Feature / Cards
   =========================== */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px,1fr));gap:16px;margin-top:18px}
.feature{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 14px rgba(0,0,0,0.06);text-align:center}
.feature i{color:var(--nav-dark);margin-bottom:10px}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:18px}
.card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 8px 20px rgba(2,6,23,0.06)}
.card-head{display:flex;align-items:center;gap:14px}
.card-icon{font-size:28px;color:var(--nav-dark)}
.card h3{margin:0}
.card p{color:var(--muted)}
.card .card-actions{display:flex;gap:10px;align-items:center;margin-top:12px}
.link{color:var(--nav-dark);font-weight:700;text-decoration:none}

/* ===========================
   Project detailed styles
   =========================== */
.project-detailed{background:var(--card);border-radius:12px;padding:20px;margin:18px 0;box-shadow:0 8px 24px rgba(0,0,0,0.06)}
.project-header{display:flex;gap:18px;align-items:center}
.big-icon{font-size:44px;color:var(--nav-dark)}
.repo-actions{margin-top:8px;display:flex;gap:10px}
.repo-stats{margin-top:14px;color:var(--muted)}
.code{background:#0f172a;color:#fff;padding:12px;border-radius:8px;overflow:auto}

/* ===========================
   Skills / Contact
   =========================== */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.skill{background:var(--card);padding:16px;border-radius:12px;text-align:left}
.skill-icon{font-size:24px;color:var(--nav-dark);margin-bottom:8px}

/* ===========================
   Footer
   =========================== */
.footer{background:transparent;padding:24px;text-align:center;color:var(--muted)}

/* ===========================
   Dark theme
   =========================== */
body.dark{
  --bg:#0b0f12;
  --card:#0e1114;
  --nav:#0f1724;
  --nav-dark:#0b1220;
  --muted:#9ca3af;
  color:#e6eef6;
}
body.dark .search{background:#0f1722}
body.dark .search input{background:transparent;color:var(--muted)}

/* Responsive */
@media (max-width:900px){
  .search{display:none}
  .hero{padding:28px}
  .hero h1{font-size:22px}
}