body.category-hub--technology {
  --hub-accent: #60a5fa;
  --hub-accent-2: #22c55e;
  --hub-accent-3: #f97316;
}

body.category-hub--technology .category-hero__bg {
  background: radial-gradient(880px 520px at 12% 16%,
      rgba(96, 165, 250, 0.52),
      transparent 66%),
    radial-gradient(920px 580px at 92% 8%,
      rgba(34, 197, 94, 0.45),
      transparent 64%),
    radial-gradient(720px 520px at 60% 120%,
      rgba(249, 115, 22, 0.4),
      transparent 70%);
}

/* Animated circuit board and data flow */
body.category-hub--technology .category-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Circuit traces */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80'%3E%3Cpath fill='none' stroke='rgba(96,165,250,0.25)' stroke-width='2' d='M0 40 H30 L40 20 H70 L80 40 H120'/%3E%3Cpath fill='none' stroke='rgba(34,197,94,0.2)' stroke-width='2' d='M0 60 H20 L30 40 H50 L60 60 H80 L90 40 H120'/%3E%3Ccircle cx='40' cy='20' r='4' fill='rgba(249,115,22,0.3)'/%3E%3Ccircle cx='80' cy='40' r='4' fill='rgba(96,165,250,0.3)'/%3E%3Ccircle cx='60' cy='60' r='4' fill='rgba(34,197,94,0.3)'/%3E%3C/svg%3E") 50% 80%,
    /* Grid pattern (PCB style) */
    repeating-linear-gradient(90deg,
      rgba(96, 165, 250, 0.08) 0,
      rgba(96, 165, 250, 0.08) 1px,
      transparent 1px,
      transparent 20px),
    repeating-linear-gradient(0deg,
      rgba(96, 165, 250, 0.06) 0,
      rgba(96, 165, 250, 0.06) 1px,
      transparent 1px,
      transparent 20px),
    /* Data flow dots */
    radial-gradient(2px 2px at 20% 30%, rgba(34, 197, 94, 0.5), transparent),
    radial-gradient(2px 2px at 35% 45%, rgba(34, 197, 94, 0.4), transparent),
    radial-gradient(2px 2px at 50% 35%, rgba(34, 197, 94, 0.5), transparent);
  background-repeat: no-repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
  animation: techPulse 3s ease-in-out infinite;
}

/* Floating tech icons */
body.category-hub--technology .category-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Microchip */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect x='12' y='12' width='24' height='24' rx='2' fill='rgba(96,165,250,0.2)' stroke='rgba(96,165,250,0.3)' stroke-width='2'/%3E%3Crect x='18' y='18' width='12' height='12' fill='rgba(249,115,22,0.2)'/%3E%3Cline x1='16' y1='0' x2='16' y2='12' stroke='rgba(96,165,250,0.2)' stroke-width='2'/%3E%3Cline x1='24' y1='0' x2='24' y2='12' stroke='rgba(96,165,250,0.2)' stroke-width='2'/%3E%3Cline x1='32' y1='0' x2='32' y2='12' stroke='rgba(96,165,250,0.2)' stroke-width='2'/%3E%3Cline x1='16' y1='36' x2='16' y2='48' stroke='rgba(96,165,250,0.2)' stroke-width='2'/%3E%3Cline x1='24' y1='36' x2='24' y2='48' stroke='rgba(96,165,250,0.2)' stroke-width='2'/%3E%3Cline x1='32' y1='36' x2='32' y2='48' stroke='rgba(96,165,250,0.2)' stroke-width='2'/%3E%3Cline x1='0' y1='16' x2='12' y2='16' stroke='rgba(96,165,250,0.2)' stroke-width='2'/%3E%3Cline x1='0' y1='24' x2='12' y2='24' stroke='rgba(96,165,250,0.2)' stroke-width='2'/%3E%3Cline x1='0' y1='32' x2='12' y2='32' stroke='rgba(96,165,250,0.2)' stroke-width='2'/%3E%3Cline x1='36' y1='16' x2='48' y2='16' stroke='rgba(96,165,250,0.2)' stroke-width='2'/%3E%3Cline x1='36' y1='24' x2='48' y2='24' stroke='rgba(96,165,250,0.2)' stroke-width='2'/%3E%3Cline x1='36' y1='32' x2='48' y2='32' stroke='rgba(96,165,250,0.2)' stroke-width='2'/%3E%3C/svg%3E") 10% 25%,
    /* Binary code */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='80' viewBox='0 0 60 80'%3E%3Ctext x='0' y='15' fill='rgba(34,197,94,0.15)' font-size='12' font-family='monospace'%3E101010%3C/text%3E%3Ctext x='5' y='30' fill='rgba(34,197,94,0.12)' font-size='12' font-family='monospace'%3E110011%3C/text%3E%3Ctext x='0' y='45' fill='rgba(34,197,94,0.1)' font-size='12' font-family='monospace'%3E010110%3C/text%3E%3Ctext x='5' y='60' fill='rgba(34,197,94,0.12)' font-size='12' font-family='monospace'%3E101101%3C/text%3E%3Ctext x='0' y='75' fill='rgba(34,197,94,0.1)' font-size='12' font-family='monospace'%3E011010%3C/text%3E%3C/svg%3E") 88% 30%,
    /* Cloud */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='36' viewBox='0 0 56 36'%3E%3Cpath fill='rgba(96,165,250,0.15)' d='M44 36H12C5 36 0 31 0 24c0-6 4-11 10-12 0-7 6-12 14-12 6 0 12 4 14 10 8 0 14 6 14 14s-4 12-8 12z'/%3E%3C/svg%3E") 75% 75%,
    /* Gear */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='rgba(249,115,22,0.2)' d='M20 0l3 8h5l4-6 4 4-6 4v5l8 3v4l-8 3v5l6 4-4 4-4-6h-5l-3 8h-4l-3-8h-5l-4 6-4-4 6-4v-5l-8-3v-4l8-3v-5l-6-4 4-4 4 6h5l3-8h4z'/%3E%3Ccircle cx='20' cy='20' r='8' fill='rgba(15,23,42,0.3)'/%3E%3C/svg%3E") 18% 78%,
    /* WiFi signal */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='28' viewBox='0 0 36 28'%3E%3Cpath fill='none' stroke='rgba(96,165,250,0.2)' stroke-width='2' d='M2 10 Q18 -4 34 10'/%3E%3Cpath fill='none' stroke='rgba(96,165,250,0.25)' stroke-width='2' d='M8 16 Q18 6 28 16'/%3E%3Cpath fill='none' stroke='rgba(96,165,250,0.3)' stroke-width='2' d='M14 22 Q18 16 22 22'/%3E%3Ccircle cx='18' cy='26' r='2' fill='rgba(96,165,250,0.35)'/%3E%3C/svg%3E") 90% 15%;
  background-repeat: no-repeat;
  animation: techFloat 16s ease-in-out infinite;
}

@keyframes techPulse {

  0%,
  100% {
    opacity: 0.7;
  }

  50% {
    opacity: 1;
  }
}

@keyframes techFloat {

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

  25% {
    transform: translateY(-6px) rotate(0.5deg);
  }

  50% {
    transform: translateY(-3px) rotate(-0.3deg);
  }

  75% {
    transform: translateY(-8px) rotate(0.2deg);
  }
}