:root{
  --bg:#0d1117;
  --panel:#0f1720;
  --muted:#9aa4ad;
  --accent:#00e5ff;
  --card:#0b1220;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:#e6eef6;font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}
a{color:inherit;text-decoration:none}
.container{display:flex;min-height:100vh;}

/* Sidebar */
.sidebar{width:260px;background:linear-gradient(180deg,var(--panel),#0b0f13);padding:28px 20px;display:flex;flex-direction:column;gap:24px;position:fixed;left:0;top:0;bottom:0;border-right:1px solid rgba(255,255,255,0.03);}
.wordmark{font-weight:800;font-size:20px;color:var(--accent);letter-spacing:1px;white-space:nowrap;overflow:hidden}
.nav{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.nav a{padding:8px 10px;border-radius:8px;color:var(--muted);transition:all .18s;display:inline-block}
.nav a:hover{background:rgba(0,229,255,0.06);color:var(--accent);transform:translateX(6px)}

/* Socials at bottom */
.sidebar .socials{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.socials a{font-size:13px;color:var(--muted)}

/* Main content area */
.main{margin-left:280px;padding:40px;flex:1}
.header-hero{display:flex;gap:24px;align-items:center}
.h-title{font-size:28px;font-weight:800;margin:0}
.h-sub{color:var(--muted);margin-top:8px;max-width:720px}

/* Cards grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:20px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);padding:18px;border-radius:12px;transition:transform .2s,box-shadow .2s;opacity:0;transform:translateY(14px);}
.card.show{opacity:1;transform:none}
.card:hover{transform:translateY(-8px);box-shadow:0 10px 30px rgba(0,229,255,0.06);border-color:rgba(0,229,255,0.12)}

/* small screens */
@media (max-width:900px){
  .sidebar{position:relative;width:100%;height:auto;flex-direction:row;align-items:center;padding:12px 14px;gap:12px}
  .main{margin-left:0;padding:20px}
  .grid{grid-template-columns:1fr}
}

/* typewriter caret */
.wordmark .cursor{display:inline-block;background:var(--accent);width:2px;height:1.1em;vertical-align:middle;margin-left:6px;animation:blink 1s steps(2,start) infinite}
@keyframes blink{50%{opacity:0}}

/* small helper */
.kicker{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(0,229,255,0.06);color:var(--accent);font-size:12px;font-weight:600}

/* --- Base Layout (Desktop) --- */
.container {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 250px;
  background-color: var(--bg-alt);
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  position: fixed;
  height: 100vh;
  top: 0;
  left: 0;
}

.main {
  margin-left: 250px;
  padding: 2rem;
  flex: 1;
}

/* ===== Mobile (top navbar) - REPLACE existing @media (max-width:768px) block ===== */
@media (max-width: 768px) {
  .container { flex-direction: column; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;                    /* small top bar */
    background-color: var(--panel);  /* use panel so it matches desktop look */
    flex-direction: row;
    align-items: center;
    padding: 0 12px;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.03);
  }

  /* wordmark stays fixed width on left */
  .wordmark {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 auto;   /* do not shrink below content */
    margin-right: 12px;
  }

  /* nav grows and becomes horizontally scrollable if needed */
  .nav {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    flex: 1 1 auto;                  /* take remaining horizontal space */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding-bottom: 6px;             /* small breathing room for touch */
  }

  /* nav links: no wrap, visible, tap-friendly */
  .nav a {
    display: inline-block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--muted);
    white-space: nowrap;
  }

  /* hide socials on mobile to save space */
  .sidebar .socials { display: none; }

  /* ensure main content is below the top bar */
  .main {
    margin-left: 0;
    margin-top: 60px;
    padding: 1rem;
  }

  /* Optional: if nav still overflows visually, allow scrolling indicator */
  .nav::-webkit-scrollbar { height: 6px; }
  .nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 99px; }
}

body {
  background: radial-gradient(circle at 30% 30%, #0d1117, #0a0f14 60%, #080c10);
  background-size: 200% 200%;
  animation: bgMove 30s ease-in-out infinite;
}

@keyframes bgMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}