/* === Glass Card System === */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025));
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  transition: transform 0.35s var(--ease), border-color 0.25s ease, box-shadow 0.35s ease, background 0.25s ease;
}

.glass:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.08);
}

.glass-dark {
  background: linear-gradient(180deg, rgba(7,4,28,0.72), rgba(7,4,28,0.55));
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}

/* 3D tilt on hover */
.glass-3d {
  transform-style: preserve-3d;
  perspective: 800px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.glass-3d:hover {
  transform: translateY(-3px) rotateX(1deg) rotateY(-1deg);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(168, 85, 247, 0.15);
}

/* Backdrop filter fallback */
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(13, 10, 43, 0.95); }
  .glass-dark { background: rgba(7, 4, 28, 0.95); }
}