/* Increase base font size */
    html { font-size: 18px; }
    body {
      @apply bg-gray-900 text-gray-100 font-sans;
      background-image: url('https://example.com/pattern.png');
      background-size: 200px 200px;
    }
    header {
      @apply bg-gradient-to-r from-black via-gray-800 to-black;
    }
    .nav-link {
      @apply text-gray-200 hover:text-yellow-400 transition flex items-center text-lg;
    }
    .icon {
      @apply mr-2 text-yellow-400;
    }
    .btn-primary {
      @apply bg-gradient-to-r from-red-600 to-yellow-500 text-white font-bold rounded-full px-10 py-4 shadow-lg hover:from-red-700 hover:to-yellow-600 active:scale-95 transform transition text-lg;
    }
    .btn-secondary {
      @apply bg-gradient-to-r from-green-600 to-teal-400 text-white font-bold rounded-full px-10 py-4 shadow-lg hover:from-green-700 hover:to-teal-500 active:scale-95 transform transition text-lg;
    }
    .card {
      @apply bg-gray-800 bg-opacity-50 backdrop-blur-lg p-8 rounded-2xl shadow-2xl border border-gray-700 hover:border-yellow-400 transition relative overflow-hidden;
    }
    .card::before {
      content: '';
      @apply absolute inset-0 bg-gradient-to-br from-transparent to-yellow-900 opacity-20 pointer-events-none;
    }
    section.separator {
      position: relative;
      padding-top: 5rem;
      padding-bottom: 5rem;
    }
    section.separator::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: 100px;
      height: 5px;
      background: linear-gradient(to right, transparent, #FBBF24, transparent);
      transform: translateX(-50%);
    }
    .animate-flicker {
      @apply animate-pulse;
      animation-duration: 1.2s;
      animation-iteration-count: infinite;
    }