/* Base reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: #0f172a; background: #f8fafc; }
:root {
  --sidebar-width: 260px;
  --sidebar-bg: #0b1220;
  --sidebar-fg: #e5e7eb;
  --accent: #22c55e;
  --link: #60a5fa;
  --card-bg: #ffffff;
  --card-border: #e5e7eb;
}

/* Layout */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 1rem;
}
.brand { font-weight: 700; letter-spacing: 0.3px; }
.sidebar nav { display: flex; flex-direction: column; gap: 0.25rem; }
.nav-link {
  color: var(--sidebar-fg);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
}
.nav-link:hover { background: rgba(255,255,255,0.08); }
.nav-link.active { background: rgba(255,255,255,0.14); color: #fff; }
.sidebar-toggle { display: none; margin-top: auto; background: transparent; color: var(--sidebar-fg); border: 1px solid rgba(255,255,255,0.2); padding: 0.4rem 0.6rem; border-radius: 0.375rem; cursor: pointer; }

.content {
  margin-left: var(--sidebar-width);
  padding: 2rem;
  min-height: 100vh;
}
.section { max-width: 1000px; margin: 0 auto 3rem; }
.section h1 { margin: 0 0 0.75rem; font-size: 1.75rem; }
.section p { margin: 0 0 1rem; color: #334155; }

.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 0.75rem; padding: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }

.doc-actions { display: flex; gap: 0.75rem; }
.btn { display: inline-block; background: var(--accent); color: #0b1220; padding: 0.6rem 0.9rem; border-radius: 0.5rem; text-decoration: none; font-weight: 600; }
.btn:hover { filter: brightness(0.95); }

/* Smooth scroll behavior */
html { scroll-behavior: smooth; }

/* Responsive */
@media (max-width: 900px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .sidebar { width: 72%; transform: translateX(-100%); transition: transform 0.25s ease; z-index: 20; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-toggle { display: block; }
  .content { margin-left: 0; padding: 1.25rem; }
}