:root {
      --purple: #7c3aed;
      --purple-light: #a855f7;
      --purple-glow: #9d4edd28;
      --purple-dim: #4c1d95;
      --black: #050508;
      --black-2: #0d0d14;
      --black-3: #12121c;
      --black-4: #1a1a28;
      --white: #f0eeff;
      --muted: #8880aa;
      --border: #1e1e30;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--black);
      color: var(--white);
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      overflow-x: hidden;
    }
    body::before {
      content: '';
      position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none; z-index: 9999; opacity: 0.45;
    }

    /* NAV */
    nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:1rem 5%;background:rgba(5,5,8,.88);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:background .3s;}
    .nav-brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;}
    .nav-logo-img{width:32px;height:32px;border-radius:8px;object-fit:contain;display:block;flex-shrink:0;}
    .nav-logo-img-placeholder{width:32px;height:32px;border-radius:8px;background:var(--purple);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Syne',sans-serif;font-weight:800;font-size:.9rem;color:var(--white);}
    .nav-logo-text{font-family:'Syne',sans-serif;font-weight:800;font-size:1.45rem;color:var(--white);letter-spacing:-.04em;}
    .nav-logo-text span{color:var(--purple-light);}
    .nav-links{display:flex;gap:1.8rem;list-style:none;}
    .nav-links a{color:var(--muted);text-decoration:none;font-size:.87rem;font-weight:400;transition:color .2s;}
    .nav-links a:hover{color:var(--white);}
    .nav-right{display:flex;align-items:center;gap:.75rem;}
    .nav-pill{color:var(--purple-light);text-decoration:none;font-size:.84rem;border:1px solid var(--purple-dim);padding:.48rem 1rem;border-radius:6px;transition:all .2s;}
    .nav-pill:hover{background:var(--purple-glow);border-color:var(--purple);}
    .nav-cta{background:var(--purple);color:var(--white);padding:.6rem 1.4rem;border-radius:6px;font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:500;text-decoration:none;transition:background .2s,box-shadow .2s;}
    .nav-cta:hover{background:var(--purple-light);box-shadow:0 0 20px var(--purple-glow);}
    .nav-links a:hover { color: var(--white); }
    .nav-links a.active { color: var(--purple-light); }
    .nav-back {display: flex; align-items: center; gap: 0.5rem;color: var(--muted); text-decoration: none; font-size: 0.88rem;border: 1px solid var(--border); padding: 0.5rem 1.1rem;border-radius: 6px; transition: all 0.2s;}
    .nav-back:hover { color: var(--white); border-color: var(--purple-dim); }

    /* HERO */
    #hero {
      padding: 9rem 5% 5rem;
      position: relative; overflow: hidden;
      display: flex; flex-direction: column; align-items: center;
      text-align: center;
    }
    #hero::before {
      content: ''; position: absolute; inset: 0;
      background-image: linear-gradient(var(--border) 1px, transparent 1px),
                        linear-gradient(90deg, var(--border) 1px, transparent 1px);
      background-size: 60px 60px; opacity: 0.25;
    }
    .hero-glow-left {
      position: absolute; top: 0; left: -100px;
      width: 500px; height: 500px; border-radius: 50%;
      background: radial-gradient(circle, #7c3aed3a, transparent 65%);
      pointer-events: none;
    }
    .hero-glow-right {
      position: absolute; top: 0; right: -100px;
      width: 500px; height: 500px; border-radius: 50%;
      background: radial-gradient(circle, #a855f722, transparent 65%);
      pointer-events: none;
    }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: var(--black-4); border: 1px solid var(--border);
      border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.77rem;
      color: var(--purple-light); letter-spacing: 0.07em; text-transform: uppercase;
      margin-bottom: 1.8rem; position: relative; z-index: 1;
      animation: fadeUp 0.8s ease both;
    }
    .hero-badge::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
      background: var(--purple-light); animation: pulse 1.6s ease infinite;
    }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

    .hero-title {
      font-family: 'Syne', sans-serif;
      font-size: clamp(2.8rem, 6vw, 5.5rem); font-weight: 800;
      line-height: 1.05; letter-spacing: -0.04em;
      position: relative; z-index: 1; animation: fadeUp 0.8s 0.12s ease both;
    }
    .hero-title .accent { color: var(--purple-light); }

    .hero-sub {
      max-width: 560px; color: var(--muted); font-size: 1rem; line-height: 1.75;
      margin: 1.5rem auto 0; position: relative; z-index: 1;
      animation: fadeUp 0.8s 0.25s ease both;
    }

    /* TEAM STATS BAR */
    .team-stats {
      display: flex; justify-content: center; gap: 0;
      margin-top: 3.5rem; position: relative; z-index: 1;
      background: var(--black-3); border: 1px solid var(--border);
      border-radius: 14px; overflow: hidden;
      animation: fadeUp 0.8s 0.38s ease both;
    }
    .tstat {
      padding: 1.4rem 2.5rem; border-right: 1px solid var(--border); text-align: center;
    }
    .tstat:last-child { border-right: none; }
    .tstat-num {
      font-family: 'Syne', sans-serif; font-size: 1.6rem; font-weight: 800;
      letter-spacing: -0.04em; color: var(--white);
    }
    .tstat-num span { color: var(--purple-light); }
    .tstat-label { font-size: 0.77rem; color: var(--muted); margin-top: 0.2rem; letter-spacing: 0.04em; }

    @keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

    /* LEADERSHIP SECTION */
    #leadership {
      padding: 5rem 5%;
      background: var(--black-2);
    }
    .section-label {
      font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--purple-light); margin-bottom: 0.75rem; font-weight: 500;
    }
    .section-title {
      font-family: 'Syne', sans-serif; font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
    }
    .section-title .accent { color: var(--purple-light); }

    /* GRIDS */
    .csuite-grid, .heads-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 3rem;
      min-height: 200px; /* Space for loader */
    }

    /* MEMBER CARD */
    .member-card {
      background: var(--black-3);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 2.2rem;
      position: relative;
      overflow: hidden;
      transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
      cursor: default;
      display: flex;
      flex-direction: column;
      align-items: center; 
      text-align: center; 
    }
    .member-card::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse at top left, var(--purple-glow), transparent 55%);
      opacity: 0; transition: opacity 0.35s;
    }
    .member-card:hover {
      border-color: var(--purple);
      transform: translateY(-6px);
      box-shadow: 0 20px 50px #7c3aed18;
    }
    .member-card:hover::before { opacity: 1; }

    .member-avatar {
      width: 110px; height: 110px; 
      border-radius: 50%; 
      border: 3px solid var(--purple); 
      overflow: hidden;
      margin-bottom: 1.4rem;
      position: relative; z-index: 1;
      background: var(--black-4);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 15px rgba(124, 58, 237, 0.3); 
    }
    .member-avatar img { width: 100%; height: 100%; object-fit: cover; }

    .member-role-badge {
      position: absolute; top: 1.5rem; right: 1.5rem;
      background: var(--black-4); border: 1px solid var(--border);
      border-radius: 6px; padding: 0.25rem 0.65rem;
      font-size: 0.67rem; color: var(--purple-light);
      letter-spacing: 0.07em; text-transform: uppercase;
      font-weight: 500; z-index: 1;
    }

    .member-name {
      font-family: 'Syne', sans-serif; font-size: 1.15rem; font-weight: 800;
      letter-spacing: -0.02em; position: relative; z-index: 1; margin-bottom: 0.25rem;
    }
    .member-role {
      color: var(--purple-light); font-size: 0.82rem; font-weight: 500;
      margin-bottom: 1.2rem; position: relative; z-index: 1;
    }

    .member-divider {
      width: 100%; height: 1px; background: var(--border); margin: 1.2rem 0;
      position: relative; z-index: 1;
    }

    /* ── SOCIAL ICON INTERACTION REFINEMENTS ── */

.member-socials {
  display: flex;
  gap: 0.65rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 10; /* Ensures links stay above card pseudo-elements */
}

.member-social {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--black-4);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  pointer-events: auto; /* Explicitly captures click events */
}

.member-social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  pointer-events: none; /* Prevents the SVG from intercepting the anchor click */
  transition: transform 0.2s ease;
}

/* Hover & Active States */
.member-social:hover {
  border-color: var(--purple);
  color: var(--purple-light);
  background: var(--purple-glow);
  box-shadow: 0 0 15px var(--purple-glow);
  transform: translateY(-2px);
}

.member-social:hover svg {
  transform: scale(1.1);
}

.member-social:active {
  transform: translateY(0) scale(0.95);
}

    .info-row {
      display: flex; align-items: center; justify-content: center; gap: 0.65rem;
      font-size: 0.8rem; color: var(--muted); margin-bottom: 0.55rem;
    }
    .info-val a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
    .info-val a:hover { color: var(--purple-light); }

    .section-divider { display: flex; align-items: center; gap: 1.2rem; margin: 4rem 0 0; }
    .section-divider-line { flex: 1; height: 1px; background: var(--border); }
    .section-divider-label { font-family: 'Syne', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

    footer{background:var(--black);border-top:1px solid var(--border);padding:2.5rem 5%;}
    .footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
    .footer-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;}
    .footer-logo-img{width:26px;height:26px;border-radius:6px;object-fit:contain;}
    .footer-logo-placeholder{width:26px;height:26px;border-radius:6px;background:var(--purple);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:.72rem;color:var(--white);}
    .footer-logo-text{font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:800;letter-spacing:-.04em;color:var(--white);}
    .footer-logo-text span{color:var(--purple-light);}
    .footer-links{display:flex;gap:1.8rem;flex-wrap:wrap;}
    .footer-links a{color:var(--muted);text-decoration:none;font-size:.82rem;transition:color .2s;}
    .footer-links a:hover{color:var(--white);}
    .footer-copy{color:var(--muted);font-size:.78rem;}
    
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }

    @media (max-width: 1024px) { .csuite-grid, .heads-grid { grid-template-columns: repeat(2,1fr); } }
    @media (max-width: 640px) { .csuite-grid, .heads-grid { grid-template-columns: 1fr; } .team-stats { flex-direction: column; } .nav-links { display: none; } }
    @media (max-width: 380px) { .csuite-grid, .heads-grid { grid-template-columns: 1fr; } .team-stats { flex-direction: column; } .nav-links { display: none; } footer { padding: 2rem 4%; } .footer-inner { flex-direction: column; align-items: flex-start; gap: 1.2rem; } .footer-links { display: none; } .footer-links a { font-size: 0.8rem; }}