/* 21st.dev Spotlight Card & Framer Motion style smooth transitions */
    .spotlight-card {
      position: relative;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.38s ease, box-shadow 0.38s ease;
      overflow: hidden;
    }
    .spotlight-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(550px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(222,183,87, 0.14), transparent 45%);
      opacity: 0;
      transition: opacity 0.35s ease;
      pointer-events: none;
      z-index: 0;
    }
    .spotlight-card:hover::before {
      opacity: 1;
    }
    .spotlight-card:hover {
      transform: translateY(-4px);
      border-color: rgba(222,183,87, 0.52);
      box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.5), 0 0 25px -5px rgba(222,183,87, 0.18);
    }
    .spotlight-content {
      position: relative;
      z-index: 1;
    }
    /* Animated Gradient Border Pill (21st.dev style) */
    .shimmer-badge {
      background: linear-gradient(90deg, rgba(201,155,44,0.14) 0%, rgba(229,202,117,0.32) 50%, rgba(201,155,44,0.14) 100%);
      background-size: 200% 100%;
      animation: shimmerMove 4s infinite linear;
    }
    @keyframes shimmerMove {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    @keyframes floatSlow {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-7px); }
    }
    .animate-float {
      animation: floatSlow 5s ease-in-out infinite;
    }
    .gold-gradient-text {
      background: linear-gradient(135deg, #F7F0D4 0%, #deb757 48%, #B58522 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    html:not(.dark) .gold-gradient-text {
      background: linear-gradient(135deg, #86641f 0%, #c9a03f 50%, #724C1E 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: var(--ink);
    }
    ::-webkit-scrollbar-thumb {
      background: var(--card-2);
      border-radius: 9999px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #c9a03f;
    }
    /* Tab & Slider transition */
    .tab-pane-enter {
      animation: fadeSlideUp 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    @keyframes fadeSlideUp {
      from {
        opacity: 0;
        transform: translateY(12px) scale(0.99);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    .bg-grid-pattern {
      background-image: linear-gradient(to right, rgba(222,183,87, 0.05) 1px, transparent 1px),
                        linear-gradient(to bottom, rgba(222,183,87, 0.05) 1px, transparent 1px);
      background-size: 40px 40px;
    }