:root{
--bg:#0f1724;
--card:#0b1220;
--muted:#9aa4b2;
--accent1:#7c3aed; /* purple */
--accent2:#06b6d4; /* teal */
--glass: rgba(255,255,255,0.03);
--radius:14px;
--gap:18px;
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}


*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#071026 0%, #071428 60%);color:#e6eef6;min-height:100vh}
.container{max-width:1100px;margin:0 auto;padding:28px}
.site-header{padding:28px 0 12px}
.site-title{margin:0;font-size:28px;letter-spacing:-0.5px}
.site-sub{margin:6px 0 0;color:var(--muted);font-size:13px}
.site-footer{padding:26px 0 40px;color:var(--muted);text-align:center}


.controls{display:flex;justify-content:space-between;align-items:center;margin:8px 0 18px}
.controls .muted{color:var(--muted);margin:4px 0 0}


.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap);
  margin-top: 20px;
}



.member-card {
  display: grid;
  grid-template-columns: 80px 1fr; /* avatar + info */
  align-items: start;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: 0 6px 18px rgba(2,6,23,0.6);
  transition: transform .22s ease, box-shadow .22s ease;
}

.avatar-wrap {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


.member-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}


.member-card:hover{transform:translateY(-6px);box-shadow:0 14px 36px rgba(2,6,23,0.8)}
.member-name{margin:0;font-size:16px;text-transform:capitalize}
.member-position{background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600}


.socials{margin-top:10px;display:flex;gap:10px;align-items:center}
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  color: #fff; /* icon color */
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}

.social-link i {
  font-size: 18px;
}

.social-link:hover {
  transform: translateY(-3px) scale(1.05);
  background: rgba(255,255,255,0.15);
}

.no-socials{color:var(--muted);font-size:13px}


/* Responsive tweaks */
@media (max-width:480px){
.avatar{width:56px;height:56px}
.avatar-wrap{height:56px}
}