body.category-hub--environment {
  --hub-accent: #22c55e;
  --hub-accent-2: #10b981;
  --hub-accent-3: #38bdf8;
}

body.category-hub--environment .category-hero__bg {
  background: radial-gradient(980px 560px at 10% 16%,
      rgba(34, 197, 94, 0.54),
      transparent 66%),
    radial-gradient(940px 600px at 92% 14%,
      rgba(16, 185, 129, 0.5),
      transparent 64%),
    radial-gradient(720px 520px at 58% 118%,
      rgba(56, 189, 248, 0.36),
      transparent 68%);
}

/* Animated nature elements */
body.category-hub--environment .category-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Leaf */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='50' viewBox='0 0 40 50'%3E%3Cpath fill='rgba(34,197,94,0.25)' d='M20 0C35 15 40 35 20 50C0 35 5 15 20 0z'/%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.15)' stroke-width='1' d='M20 5L20 45M12 20L20 25L28 20M10 35L20 38L30 35'/%3E%3C/svg%3E") 8% 30%,
    /* Another leaf */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='40' viewBox='0 0 32 40'%3E%3Cpath fill='rgba(16,185,129,0.22)' d='M16 0C28 12 32 28 16 40C0 28 4 12 16 0z'/%3E%3C/svg%3E") 88% 65%,
    /* Water drop */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='36' viewBox='0 0 24 36'%3E%3Cpath fill='rgba(56,189,248,0.25)' d='M12 0C12 0 0 16 0 24C0 30 5 36 12 36S24 30 24 24C24 16 12 0 12 0z'/%3E%3Cellipse cx='8' cy='24' rx='3' ry='4' fill='rgba(255,255,255,0.15)'/%3E%3C/svg%3E") 75% 20%,
    /* Sun rays */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='10' fill='rgba(251,191,36,0.2)'/%3E%3Cpath fill='none' stroke='rgba(251,191,36,0.15)' stroke-width='2' d='M24 4V12M24 36V44M4 24H12M36 24H44M10 10L16 16M32 32L38 38M38 10L32 16M16 32L10 38'/%3E%3C/svg%3E") 92% 15%,
    /* Wave pattern */
    repeating-linear-gradient(100deg,
      rgba(56, 189, 248, 0.08) 0px,
      transparent 8px,
      transparent 16px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  animation: envFloat 20s ease-in-out infinite;
}

/* Floating trees and nature */
body.category-hub--environment .category-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Tree */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='60' viewBox='0 0 40 60'%3E%3Crect x='16' y='45' width='8' height='15' fill='rgba(139,90,43,0.2)'/%3E%3Cpath fill='rgba(34,197,94,0.2)' d='M20 0L40 30H30L40 45H0L10 30H0L20 0z'/%3E%3C/svg%3E") 12% 78%,
    /* Recycle symbol */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath fill='none' stroke='rgba(34,197,94,0.25)' stroke-width='3' d='M22 8L32 20H26L26 28H18V20H12L22 8z'/%3E%3Cpath fill='none' stroke='rgba(34,197,94,0.25)' stroke-width='3' d='M32 24L36 36H28L22 32L18 36L24 28z' transform='rotate(120 22 22)'/%3E%3Cpath fill='none' stroke='rgba(34,197,94,0.25)' stroke-width='3' d='M32 24L36 36H28L22 32L18 36L24 28z' transform='rotate(240 22 22)'/%3E%3C/svg%3E") 82% 80%,
    /* Wind turbine */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='56' viewBox='0 0 36 56'%3E%3Crect x='16' y='20' width='4' height='36' fill='rgba(255,255,255,0.12)'/%3E%3Ccircle cx='18' cy='20' r='4' fill='rgba(255,255,255,0.15)'/%3E%3Cpath fill='rgba(255,255,255,0.1)' d='M18 16L20 0L22 16zM18 24L4 28L18 20zM18 24L32 28L18 20z'/%3E%3C/svg%3E") 25% 20%,
    /* Earth globe */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='22' fill='rgba(56,189,248,0.15)' stroke='rgba(56,189,248,0.2)' stroke-width='2'/%3E%3Cellipse cx='24' cy='24' rx='10' ry='22' fill='none' stroke='rgba(34,197,94,0.15)' stroke-width='1'/%3E%3Cpath fill='none' stroke='rgba(34,197,94,0.15)' stroke-width='1' d='M4 24h40M8 12h32M8 36h32'/%3E%3C/svg%3E") 70% 35%;
  background-repeat: no-repeat;
  animation: envSway 18s ease-in-out infinite alternate;
}

@keyframes envFloat {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  25% {
    transform: translateY(-8px) rotate(1deg);
  }

  50% {
    transform: translateY(-4px) rotate(-0.5deg);
  }

  75% {
    transform: translateY(-12px) rotate(0.5deg);
  }
}

@keyframes envSway {
  0% {
    transform: translateX(0) rotate(0deg);
  }

  100% {
    transform: translateX(8px) rotate(1deg);
  }
}