:root{
  --bg:#070b17;
  --card:#121a31cc;
  --text:#ecf1ff;
  --muted:#9ba8ce;
  --line:#2a355b;
  --a:#00d4ff;
  --b:#7a5cff;
  --ok:#31c48d;
  --warn:#f59e0b;
  --hold:#ef4444;
}
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  scroll-behavior:smooth;
}
body{overflow-x:hidden}
.container{width:min(1100px,92%);margin-inline:auto}

#particleCanvas{
  position:fixed;inset:0;z-index:-3;pointer-events:none;
}
#bgFX{
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(circle at 15% 20%, rgba(0,212,255,.12), transparent 28%),
    radial-gradient(circle at 80% 30%, rgba(122,92,255,.16), transparent 35%),
    radial-gradient(circle at 60% 80%, rgba(0,212,255,.08), transparent 22%);
  filter:blur(16px);
  animation:float 9s ease-in-out infinite alternate;
}
.grid-overlay{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.17;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(circle at center, black 35%, transparent 85%);
  mask-image:radial-gradient(circle at center, black 35%, transparent 85%);
}
.orb{
  position:fixed;z-index:-1;border-radius:50%;filter:blur(10px);opacity:.28;pointer-events:none;
  animation:orbFloat 12s ease-in-out infinite alternate;
}
.orb-1{
  width:280px;height:280px;left:-60px;top:12%;
  background:radial-gradient(circle at 30% 30%, #00d4ff, transparent 70%);
}
.orb-2{
  width:330px;height:330px;right:-80px;bottom:8%;
  background:radial-gradient(circle at 60% 40%, #7a5cff, transparent 70%);
  animation-duration:15s;
}
@keyframes float{from{transform:translateY(-10px)}to{transform:translateY(8px)}}
@keyframes orbFloat{from{transform:translateY(-14px) translateX(4px)}to{transform:translateY(12px) translateX(-8px)}}

.site-header{
  position:sticky;top:0;z-index:30;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  background:rgba(11,16,32,.65);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  min-height:72px;
}
.logo{
  text-decoration:none;color:var(--text);font-weight:800;font-size:1.1rem;
  letter-spacing:.4px;
}
.nav-links{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
.nav-links a{text-decoration:none;color:var(--text);opacity:.9}
.nav-links a:hover{opacity:1}

.hero{padding:6.2rem 0 2.5rem}
.hero-copy{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid #2b365f;
  border-radius:20px;
  padding:1.4rem;
  box-shadow:0 14px 40px rgba(0,0,0,.28);
}
.eyebrow{
  margin:0 0 .6rem;
  color:#9fc4ff;
  font-size:.8rem;
  letter-spacing:.11em;
}
.hero-copy h1{
  font-size:clamp(2rem,4.7vw,3.4rem);
  line-height:1.08;margin:0 0 1rem
}
.hero-copy p{color:var(--muted);max-width:700px}
.gradient{
  background:linear-gradient(90deg,var(--a),var(--b));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.shimmer{
  background-image:linear-gradient(110deg,#fff 35%,#b7c8ff 45%,#fff 55%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 4s linear infinite;
}
@keyframes shimmer{
  from{background-position:200% 0}
  to{background-position:-200% 0}
}

.tech-chips{
  margin:1rem 0;
  display:flex;flex-wrap:wrap;gap:.5rem;
}
.tech-chips span{
  font-size:.82rem;
  padding:.34rem .65rem;
  border:1px solid #33406b;
  background:rgba(122,92,255,.1);
  border-radius:999px;
  color:#d8e5ff;
}

.btn{
  border:none;cursor:pointer;
  background:linear-gradient(90deg,var(--a),var(--b));
  color:white;padding:.65rem 1rem;border-radius:10px;
  text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:.4rem;
  box-shadow:0 8px 24px rgba(55,108,255,.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(55,108,255,.48);
}
.btn-outline{
  background:transparent;border:1px solid var(--line);color:var(--text)
}
.hero-cta{display:flex;gap:.7rem;margin-top:1rem;flex-wrap:wrap}

.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:.7rem;margin-top:1.1rem;
}
.stats-grid article{
  border:1px solid #2d3a62;border-radius:12px;
  padding:.7rem;background:rgba(11,17,35,.55);
}
.stats-grid h3{margin:.1rem 0 .2rem}
.stats-grid p{margin:0;color:#9fb2de;font-size:.88rem}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:1.1rem;
  margin:1rem auto;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.tilt-card{transition:transform .2s ease}

.section-head{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap
}
#projectSearch{
  width:min(430px,100%);
  background:#0f1529;color:var(--text);
  border:1px solid var(--line);border-radius:10px;
  padding:.62rem .8rem;outline:none
}

.table-wrap{
  overflow:auto;border-radius:12px;border:1px solid var(--line);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
table{width:100%;border-collapse:collapse;min-width:820px}
thead th{
  position:sticky;top:0;
  text-align:left;background:#10172c;color:#dbe4ff;
  padding:.78rem;border-bottom:1px solid var(--line)
}
tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
tbody tr:hover{background:rgba(122,92,255,.12)}
tbody td{
  padding:.7rem;border-bottom:1px solid #212b4a;color:#d6def8
}

.project-name-link,
.project-name-link:visited,
.project-name-link:hover,
.project-name-link:active {
  color: #ecf1ff;
  text-decoration: none;
  font-weight: 700;
}

.project-name-link:focus-visible {
  outline: 2px solid #7a5cff;
  outline-offset: 2px;
  border-radius: 4px;
}

.project-name-text {
  color: #ecf1ff;
  font-weight: 700;
}
.status{
  font-size:.82rem;font-weight:700;padding:.25rem .55rem;border-radius:999px;display:inline-block
}
.status.live{background:rgba(49,196,141,.2);color:var(--ok)}
.status.beta{background:rgba(245,158,11,.2);color:var(--warn)}
.status.onhold{background:rgba(239,68,68,.18);color:var(--hold)}
.status.open{background:rgba(59,130,246,.2);color:#60a5fa}
.status.development{background:rgba(168,85,247,.2);color:#c084fc}
.status.closed{background:rgba(107,114,128,.25);color:#d1d5db}
.status.archived{background:rgba(75,85,99,.3);color:#9ca3af}

.skills-grid{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.6rem
}
.skills-grid li{
  background:#0f1529;border:1px solid var(--line);border-radius:10px;padding:.65rem
}

.social-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.7rem;
}
.social-card{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.7rem .8rem;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0f1529;
  color:var(--text);
  text-decoration:none;
}
.social-card-disabled{
  opacity:.75;
  cursor:not-allowed;
}
.email-cards{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}
.email-card{
  display:inline-flex;
  align-items:center;
  padding:.32rem .62rem;
  border:1px solid #31406b;
  border-radius:8px;
  background:#0d1427;
  color:#cfe1ff;
  text-decoration:none;
  font-size:.82rem;
  line-height:1.1;
}
.email-card:hover{
  border-color:#4d7fff;
  color:#ffffff;
}
.social-icon{
  width:20px;
  height:20px;
  min-width:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#9ec5ff;
}
.social-icon svg{
  width:18px;
  height:18px;
  display:block;
}
.social-name{
  font-weight:600;
}
.social-verified{
  margin-left:auto;
  font-size:.72rem;
  color:#7dd3fc;
  border:1px solid #33406b;
  border-radius:999px;
  padding:.15rem .45rem;
}
.social-no-link{
  margin-left:auto;
  font-size:.72rem;
  color:#fca5a5;
  border:1px solid #7f1d1d;
  border-radius:999px;
  padding:.15rem .45rem;
}

.audio-widget{
  position:fixed;
  right:14px;
  top:86px;
  z-index:60;
  display:flex;
  align-items:flex-start;
  gap:.55rem;
}
.audio-widget-toggle{
  width:40px;height:40px;
  border-radius:999px;
  border:1px solid #355089;
  background:linear-gradient(145deg, rgba(16,24,46,.88), rgba(21,35,70,.88));
  color:#cfe1ff;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.audio-widget-panel{
  min-width:220px;
  border:1px solid #355089;
  border-radius:12px;
  background:rgba(12,20,40,.88);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  padding:.65rem;
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.audio-widget.collapsed .audio-widget-panel{
  display:none;
}
.audio-row{
  display:flex;
  gap:.5rem;
}
.audio-mini-btn{
  flex:1;
  border:1px solid #3a4f84;
  border-radius:8px;
  background:#111a32;
  color:#d7e6ff;
  padding:.38rem .5rem;
  cursor:pointer;
}
.audio-mini-btn:hover{
  border-color:#5f8fff;
}
.audio-volume-wrap{
  display:grid;
  gap:.35rem;
  color:#c6d7ff;
  font-size:.85rem;
}
#audioValue,#globalAudioValue{
  color:#9fc0ff;
  font-weight:700;
}
#globalAudioVolume{
  width:100%;
}

.footer{padding:1.3rem;text-align:center;color:var(--muted)}

.reveal{opacity:0;transform:translateY(16px);transition:all .65s ease}
.reveal.show{opacity:1;transform:translateY(0)}

.roles-legend-grid{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:.8rem;
}
.role-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.4rem .72rem;
  border-radius:999px;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 6px 14px rgba(0,0,0,.2);
  color:#fff;
}
.role-badge-group{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}
.role-owner{background:linear-gradient(90deg,#ff8a00,#e52e71)}
.role-admin{background:linear-gradient(90deg,#e11d48,#be123c)}
.role-developer{background:linear-gradient(90deg,#2563eb,#06b6d4)}
.role-helper{background:linear-gradient(90deg,#14b8a6,#0ea5e9)}
.role-trainee{background:linear-gradient(90deg,#64748b,#94a3b8)}
.role-mod{background:linear-gradient(90deg,#16a34a,#22c55e)}
.role-srmod{background:linear-gradient(90deg,#15803d,#166534)}
.role-technical{background:linear-gradient(90deg,#0f172a,#334155)}
.role-media{background:linear-gradient(90deg,#ec4899,#f43f5e)}
.role-manager{background:linear-gradient(90deg,#7c3aed,#4f46e5)}
.role-staff-manager{background:linear-gradient(90deg,#6d28d9,#9333ea)}
.role-lead-dev{background:linear-gradient(90deg,#0284c7,#2563eb)}
.role-data-dev{background:linear-gradient(90deg,#0ea5e9,#14b8a6)}
.role-backend-dev{background:linear-gradient(90deg,#7c3aed,#2563eb)}
.role-fullstack-dev{background:linear-gradient(90deg,#06b6d4,#7c3aed)}
.role-founder{background:linear-gradient(90deg,#f59e0b,#d97706)}
.role-alpha{background:linear-gradient(90deg,#22c55e,#84cc16)}
.role-beta-team{background:linear-gradient(90deg,#0ea5e9,#6366f1)}
.role-ceo{background:linear-gradient(90deg,#991b1b,#b91c1c)}
.role-cto{background:linear-gradient(90deg,#1d4ed8,#1e40af)}
.role-community{background:linear-gradient(90deg,#059669,#10b981)}
.role-staff{background:linear-gradient(90deg,#4b5563,#6b7280)}
.role-embassador{background:linear-gradient(90deg,#0891b2,#06b6d4)}
.role-platform-admin{background:linear-gradient(90deg,#334155,#0f172a)}
.role-verified{background:linear-gradient(90deg,#0ea5e9,#3b82f6)}
.role-recruit{background:linear-gradient(90deg,#9333ea,#c026d3)}
.role-assistant{background:linear-gradient(90deg,#475569,#64748b)}
.role-reviewer{background:linear-gradient(90deg,#7c2d12,#b45309)}
.role-collaborator{background:linear-gradient(90deg,#0369a1,#0284c7)}
.role-donator{background:linear-gradient(90deg,#b91c1c,#ef4444)}
.role-beta-tester{background:linear-gradient(90deg,#2563eb,#7c3aed)}
.role-service-provider{background:linear-gradient(90deg,#0f766e,#14b8a6)}
.role-event-host{background:linear-gradient(90deg,#be185d,#db2777)}
.role-technical-host{background:linear-gradient(90deg,#1e3a8a,#1d4ed8)}
.role-hosting-provider{background:linear-gradient(90deg,#374151,#111827)}
.role-generic{background:linear-gradient(90deg,#334155,#475569)}

.roles-legend-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:.8rem;
  margin-top:1rem;
}
.role-item{
  background:#0f1529;
  border:1px solid var(--line);
  border-radius:12px;
  padding:.85rem;
}
.role-item p{
  margin:.55rem 0 0;
  color:#b9c7ea;
  font-size:.9rem;
  line-height:1.4;
}
.legend-subtitle{
  color:#9fb2de;
  margin:.25rem 0 .5rem;
}

.legend-duo{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.legend-duo .legend-section{
  margin:0;
}

@media (max-width: 1024px){
  .hero-copy{padding:1.1rem}
  .stats-grid{grid-template-columns:repeat(2,minmax(140px,1fr))}
}
@media (max-width: 860px){
  .nav-links{display:none}
  .hero{padding:5rem 0 2rem}
  .tech-chips{gap:.4rem}
  .stats-grid{grid-template-columns:1fr}
  .legend-duo{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .container{width:min(1100px,94%)}
  .hero-copy h1{font-size:clamp(1.6rem,8vw,2.3rem)}
  .card{padding:.9rem}
  .section-head{align-items:flex-start}
  #projectSearch{width:100%}
  .roles-legend-grid{gap:.42rem}
  .role-badge{font-size:.73rem;padding:.35rem .62rem}
}