/* ════════════════ CARD (glass surface + cursor spotlight) · GLYPH ════════════════ */
.card {
  position: relative; border-radius: 24px; padding: 30px 28px 32px;
  background: linear-gradient(180deg, rgba(24,30,27,.72), rgba(12,20,16,.55));
  box-shadow: inset 0 0 0 1px var(--hair-soft), 0 30px 60px -40px rgba(0,0,0,.8);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
  overflow: hidden;
}
.card::before { /* cursor spotlight */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(135,189,159,.14), transparent 60%);
}
.card:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--hair), 0 40px 80px -40px rgba(0,0,0,.9); }
.card:hover::before { opacity: 1; }
.glyph { /* NavGlyph — hairline rounded square, mint glyph, no fill */
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: var(--mint);
  box-shadow: inset 0 0 0 1px var(--hair); background: var(--canvas); position: relative; z-index: 1;
}
.glyph svg { width: 22px; height: 22px; }