body.category-hub--finance {
  --hub-accent: #22c55e;
  --hub-accent-2: #fbbf24;
  --hub-accent-3: #38bdf8;
}

body.category-hub--finance .category-hero__bg {
  background: radial-gradient(860px 520px at 12% 14%,
      rgba(34, 197, 94, 0.55),
      transparent 66%),
    radial-gradient(980px 580px at 92% 14%,
      rgba(251, 191, 36, 0.46),
      transparent 62%),
    radial-gradient(760px 560px at 60% 118%,
      rgba(56, 189, 248, 0.42),
      transparent 68%);
}

/* Animated stock chart pattern */
body.category-hub--finance .category-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Rising chart line */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='80' viewBox='0 0 200 80'%3E%3Cpath fill='none' stroke='rgba(34,197,94,0.3)' stroke-width='2' d='M0 70 Q20 65 40 55 T80 40 T120 25 T160 35 T200 15'/%3E%3Cpath fill='rgba(34,197,94,0.08)' d='M0 70 Q20 65 40 55 T80 40 T120 25 T160 35 T200 15 V80 H0 Z'/%3E%3C/svg%3E") 10% 60%,
    /* Bar chart */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='60' viewBox='0 0 80 60'%3E%3Crect x='5' y='35' width='10' height='25' fill='rgba(251,191,36,0.25)'/%3E%3Crect x='20' y='20' width='10' height='40' fill='rgba(34,197,94,0.25)'/%3E%3Crect x='35' y='30' width='10' height='30' fill='rgba(56,189,248,0.25)'/%3E%3Crect x='50' y='10' width='10' height='50' fill='rgba(251,191,36,0.3)'/%3E%3Crect x='65' y='25' width='10' height='35' fill='rgba(34,197,94,0.2)'/%3E%3C/svg%3E") 80% 75%,
    /* Grid pattern */
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.06) 0,
      rgba(255, 255, 255, 0.06) 1px,
      transparent 1px,
      transparent 40px),
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.04) 0,
      rgba(255, 255, 255, 0.04) 1px,
      transparent 1px,
      transparent 40px);
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  animation: financeChart 12s ease-in-out infinite;
}

/* Floating currency and coins */
body.category-hub--finance .category-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Dollar sign */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='48' viewBox='0 0 36 48'%3E%3Ctext x='8' y='38' fill='rgba(34,197,94,0.2)' font-size='40' font-weight='bold' font-family='system-ui'%3E$%3C/text%3E%3C/svg%3E") 8% 25%,
    /* Coin */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='none' stroke='rgba(251,191,36,0.35)' stroke-width='3'/%3E%3Ccircle cx='20' cy='20' r='12' fill='rgba(251,191,36,0.15)'/%3E%3C/svg%3E") 90% 20%,
    /* Another coin */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='none' stroke='rgba(34,197,94,0.3)' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='9' fill='rgba(34,197,94,0.12)'/%3E%3C/svg%3E") 75% 80%,
    /* Percent sign */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ctext x='2' y='22' fill='rgba(56,189,248,0.2)' font-size='24' font-weight='bold' font-family='system-ui'%3E%%%3C/text%3E%3C/svg%3E") 20% 85%,
    /* Upward arrow */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 24 32'%3E%3Cpath fill='rgba(34,197,94,0.25)' d='M12 0L24 16H16V32H8V16H0L12 0z'/%3E%3C/svg%3E") 92% 55%;
  background-repeat: no-repeat;
  animation: financeFloat 18s ease-in-out infinite;
}

@keyframes financeChart {

  0%,
  100% {
    opacity: 0.8;
    transform: translateX(0);
  }

  50% {
    opacity: 1;
    transform: translateX(5px);
  }
}

@keyframes financeFloat {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  33% {
    transform: translateY(-10px) scale(1.02);
  }

  66% {
    transform: translateY(-5px) scale(0.98);
  }
}
