.card {
  position:relative;
  overflow:hidden;
  padding:28px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--gradient-card),rgba(15,10,28,.62);
  box-shadow:0 16px 46px rgba(0,0,0,.16);
  transition:transform .35s var(--ease),border-color .35s ease,box-shadow .35s ease,background .35s ease;
  transform-style:preserve-3d
}
.card::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgba(151,99,255,.12),transparent 35%);
  opacity:0;
  transition:opacity .3s ease
}
.card:hover::before {
  opacity:1
}
.card:hover {
  border-color:rgba(173,135,255,.34);
  box-shadow:0 24px 64px rgba(0,0,0,.26),0 0 40px rgba(110,52,220,.07)
}
.card-icon {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  margin-bottom:22px;
  border:1px solid rgba(168,130,255,.25);
  border-radius:14px;
  background:rgba(139,92,246,.09);
  color:var(--purple-300);
  font-family:var(--font-display);
  font-size:.77rem;
  font-weight:800;
  letter-spacing:.08em
}
.card h3 {
  margin-bottom:10px;
  font-size:1.12rem
}
.card p {
  font-size:.93rem;
  line-height:1.72
}
.card-kicker {
  display:block;
  margin-top:22px;
  color:var(--purple-300);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase
}
.chip-row {
  display:flex;
  flex-wrap:wrap;
  gap:9px
}
.chip {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.02);
  color:#c5bcd8;
  font-size:.74rem;
  font-weight:700
}
.chip-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--purple-400);
  box-shadow:0 0 12px var(--purple-400)
}