* { font-family: 'Vazirmatn', Tahoma, sans-serif; }

body { margin: 0; background: #f8fafc; }

.header-bg {
  background: linear-gradient(135deg, #0f172a 0%, #312e81 60%, #1e1b4b 100%);
}

/* animated starfield in header */
.stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 60% 70%, #c7d2fe, transparent),
    radial-gradient(1.5px 1.5px at 80% 20%, #fff, transparent),
    radial-gradient(1px 1px at 40% 80%, #a5b4fc, transparent),
    radial-gradient(1px 1px at 90% 60%, #fff, transparent),
    radial-gradient(1px 1px at 10% 60%, #e0e7ff, transparent);
  opacity: 0.5;
  animation: twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle {
  from { opacity: 0.25; }
  to { opacity: 0.6; }
}

.float-icon { animation: float 3s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-8deg); }
}

.card-pop { animation: pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pop {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-in { animation: fadeIn 0.2s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.tabular-nums { font-variant-numeric: tabular-nums; }

/* scrollbar styling */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }