body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: #f8fafc;
}

.card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-radius: 12px;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
}

body {
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  direction: rtl;
  text-align: right;
  background-color: #f8fafc;
  background-image: 
    /* Layer 1: Dot Matrix */
    radial-gradient(#cbd5e1 1px, transparent 1px),
    /* Layer 2: Top-left subtle blue glow */
    radial-gradient(at 0% 0%, rgba(13, 110, 253, 0.08) 0px, transparent 50%),
    /* Layer 3: Bottom-right soft purple glow */
    radial-gradient(at 100% 100%, rgba(111, 66, 193, 0.06) 0px, transparent 50%);
  background-size: 
    24px 24px, 
    100% 100%, 
    100% 100%;
  background-attachment: fixed;
  min-height: 100vh;
}

/* Bento Grid Styling */
.bento-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08) !important;
  border-color: rgba(148, 163, 184, 0.6) !important;
}


/* Bento Feature Box with Center Glow */
.feature-bento {
  position: relative;
  overflow: hidden;
}

/* Blue Variant: Bright center fading into soft blue */
.glow-blue {
  background: radial-gradient(circle at 50% 30%, #ffffff 0%, #f0f7ff 65%, #e0effe 100%) !important;
}

/* Emerald Variant */
.glow-emerald {
  background: radial-gradient(circle at 50% 30%, #ffffff 0%, #f0fdf4 65%, #dcfce7 100%) !important;
}

/* Amber/Warm Variant */
.glow-amber {
  background: radial-gradient(circle at 50% 30%, #ffffff 0%, #fffbeb 65%, #fef3c7 100%) !important;
}

/* Icon Badges */
.bento-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.bg-purple {
  background-color: #6f42c1 !important;
}

/* Ambient Corner Glows */
.bento-glow {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  filter: blur(45px);
  opacity: 0.18;
  pointer-events: none;
  top: -40px;
  right: -40px;
}

.bento-glow-primary { background: #0d6efd; }
.bento-glow-purple  { background: #6f42c1; }
.bento-glow-info    { background: #0dcaf0; }
.bento-glow-success { background: #198754; }