:root{
  --bg: #2f2b2b;
  --panel: rgba(255,255,255,0.03);
  --muted: #bdbdbd;
  --accent: #1e1930;
  --max-width: 1000px;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg);
  color: #fff;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding: 18px;
}

.wrapper{ max-width: var(--max-width); margin:0 auto; padding: 0 16px; }

h1{ text-align:center; font-size:28px; margin: 22px 0 8px; }
.lead{ text-align:center; color:var(--muted); max-width:60ch; margin: 0 auto 16px }

img{ display:block; max-width:100%; height:auto }

/* Navbar ------------------------------------------------- */
nav.navbar{ background: rgba(255,255,255,0.02); padding:10px 12px; border-radius:10px; margin-bottom:14px }
nav.navbar ul{ list-style:none; display:flex; gap:20px; justify-content:center; align-items:center }
nav.navbar a{ color: #fff; text-decoration:none; padding:6px 10px; border-radius:6px; transition: all .14s ease }
nav.navbar a:hover, nav.navbar a:focus{ background: rgba(255,255,255,0.02); color:var(--accent); outline:none }
nav.navbar a.active{ background: rgba(30,144,255,0.12); color: #cfefff }

@media (max-width:700px){ nav.navbar ul{ flex-direction:column } }

/* Buttons & actions ------------------------------------- */
.actions{ display:flex; gap:12px; justify-content:center; margin:12px 0 }
.button{ background:var(--accent); color:#fff; padding:10px 16px; border-radius:8px; text-decoration:none; display:inline-block; font-weight:600; min-width:120px; text-align:center; box-shadow: 0 8px 24px rgba(0,0,0,0.25); transition: transform .12s ease, box-shadow .12s ease }
.button:hover{ transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,0.32) }
.button.secondary{ background:transparent; color: #fff; border:2px solid rgba(255,255,255,0.06); box-shadow:none }
.button:focus{ outline: 3px solid rgba(30,144,255,0.12); outline-offset: 3px }

@media (max-width:600px){ .actions{ flex-direction:column } .actions .button{ width:100%; min-width:0 } }

/* Profiles / teams -------------------------------------- */
.profile-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:18px 0 40px }
.profile-card{ background:var(--panel); padding:14px; border-radius:10px; text-align:center; box-shadow: 0 8px 24px rgba(0,0,0,0.06) }
.profile-card .avatar{ width:88px; height:88px; object-fit:cover; border-radius:50%; display:block; margin: 0 auto 10px }
.profile-card h3{ margin:6px 0; font-size:1.05rem }
.profile-card .meta{ color:var(--muted); font-size:.9rem; margin-bottom:8px }
.profile-card .bio{ color:#ddd; font-size:.95rem; margin-bottom:12px }
.card-actions{ display:flex; gap:10px; justify-content:center }

/* Teams grouping */
.team-section{ margin: 18px 0 28px; padding: 12px; border-radius:10px; background: rgba(255,255,255,0.01) }
.team-section h2{ margin:0 0 12px; font-size:1.2rem; text-align:center }
.member-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:14px }

/* small helpers */
.muted{ color:var(--muted) }


.logo {
    margin-right: auto;
    margin-left: auto;
    display: block;

}
.leader1{
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;  
    font-style: italic;
 }