@layer utilities {
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-primary;
  }
  .badge-brand-primary { @apply bg-brand-primary text-white; }
  .badge-brand-secondary { @apply bg-brand-secondary text-white; }
  .badge-brand-success { @apply bg-brand-success text-white; }
  .badge-brand-info { @apply bg-brand-info text-white; }
  .badge-brand-warning { @apply bg-brand-warning text-white; }
  .badge-brand-error { @apply bg-brand-error text-white; }
  .badge-brand-neutral { @apply bg-brand-neutral text-white; }
  .bank-badge {
    height: auto;
    line-height: 1.2;
    color: oklch(var(--bc) / 1) !important;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
  }
  .card.compact .card-body { @apply p-3 text-sm; }
  .card.compact:hover { @apply bg-base-300/50; }
  .card.no-gap {
    gap: 0;
  }
  .compact-section {
    margin-top: 0.75rem; /* ~mt-3 */
    margin-bottom: 0.75rem;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .group-hover-reveal {
    opacity: 0;
    transform: translateX(-2px);
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .group:hover .group-hover-reveal {
    opacity: 1;
    transform: translateX(0);
  }

  .hero-carousel-arrow {
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  #hero-carousel:hover .hero-carousel-arrow,
  #hero-carousel:focus-within .hero-carousel-arrow {
    opacity: 1;
  }

  .hero-carousel-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 9999px;
    background-color: oklch(var(--bc) / 0.35);
    transition: background-color 0.2s ease, transform 0.2s ease;
  }
  .hero-carousel-dot.active {
    background-color: oklch(var(--p) / 0.9);
    transform: scale(1.1);
  }
}