.cg-genre{ padding:56px 16px; }
.cg-wrap{ max-width:1200px; margin:0 auto; text-align:center; }
.cg-title{ font-weight:800; letter-spacing:-.02em; font-size:42px; margin:0 0 8px; }
.cg-sub{ font-size:18px; margin:0 0 32px; opacity:.9; }
.cg-grid{ display:grid; gap:20px; grid-template-columns:repeat(6,1fr); }
@media (max-width:1200px){ .cg-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:680px){ .cg-grid{ grid-template-columns:repeat(2,1fr);} }

.cg-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:28px 16px; border-radius:18px; text-decoration:none; background:#0B0B0B;
  border:1px solid #181818; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cg-card:hover{ transform:translateY(-4px); border-color:var(--cg-glow, #5217FB); box-shadow:0 10px 30px rgba(82,23,251,.18), inset 0 0 0 1px rgba(82,23,251,.25); }
.cg-icon{
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  background:rgba(82,23,251,.14); color:#5217FB; font-size:26px; margin-bottom:14px; overflow:hidden;
}
.cg-icon img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.cg-name{ font-weight:700; font-size:18px; margin-bottom:6px; color:#fff; }
.cg-count{ font-size:15px; color:#9AA0A6; }