#cards { position: relative; }
.card {
  position: relative;
  border-radius: 1rem; /* rounded-2xl */
  overflow: hidden;
  isolation: isolate;
  min-height: 260px; /* give the glow some canvas */
  background: rgba(255,255,255,.06); /* base card tint */
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.08);
}
.card:hover {
  background: radial-gradient(
    420px circle at var(--mouse-x) var(--mouse-y),
    hsl(var(--color) / 1),
    rgba(255,255,255,0.08) 40%
  );
  border-color: rgba(255,255,255,.12);
}
.card::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(
    520px circle at var(--mouse-x) var(--mouse-y),
    hsl(var(--color) / 0.35),
    transparent 40%
  );
  border-radius: inherit;
  opacity:0; 
  z-index: -1;
  transition: opacity .2s ease;
}
.card:hover::before{ opacity:1; }

/* Inner layer matching the other project's .card_content */
.card_content{
  position:absolute; inset:1px;
  border-radius: inherit;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:18px; padding:2rem;
}
.card_content > i{ font-size:3.5rem; color:rgba(255,255,255,.6); }
.card_content > h2{ font-weight:700; font-size:1.25rem; }
.card_content > p{ color:rgba(255,255,255,.6); text-align: center; }

/* Per-card accent hues (HSL) */
.card--x{           --color: 0 0% 70%; }      /* muted white */
.card--telegram{    --color: 199 89% 52%; }   /* telegram blue */
.card--dexscreener{ --color: 263 84% 58%; }   /* purple */
.card--jupiter{     --color: 160 90% 45%; }   /* teal-green */
.card--coingecko{   --color: 84 56% 50%; }    /* lime */
.card--magiceden{      --color: 338 78% 53%; }   /* pink */
.card--meteora{     --color: 26 94% 58%; }    /* warm orange */
.card--merch{       --color: 0 66% 43%; }     /* red/brand color */