@layer components {
  /* Gradient Card */
  .card-gradient {
    @apply rounded-2xl shadow-soft p-6 
           bg-gradient-to-br from-ngi-purple/10 via-ngi-gold/10 to-ngi-turquoise/10;
  }

  /* Section Title Gradient Text */
  .section-title {
    @apply bg-gradient-to-r from-ngi-purple to-ngi-gold 
           bg-clip-text text-transparent font-bold;
  }

  /* Section Background Variants */
  .section-bg-subjects {
    @apply bg-gradient-to-br from-ngi-ivory via-ngi-gold/5 to-ngi-purple/5;
  }

  .section-bg-honours {
    @apply bg-gradient-to-br from-ngi-purple/5 via-ngi-ivory to-ngi-turquoise/5;
  }

  .section-bg-highlights {
    @apply bg-gradient-to-br from-ngi-gold/5 via-ngi-ivory to-ngi-purple/5;
  }
}