body.category-hub--education {
  --hub-accent: #6366f1;
  --hub-accent-2: #22c55e;
  --hub-accent-3: #f97316;
}

body.category-hub--education .category-hero__bg {
  background: radial-gradient(980px 560px at 10% 16%,
      rgba(99, 102, 241, 0.54),
      transparent 66%),
    radial-gradient(940px 580px at 92% 16%,
      rgba(34, 197, 94, 0.4),
      transparent 64%),
    radial-gradient(760px 520px at 56% 118%,
      rgba(249, 115, 22, 0.36),
      transparent 68%);
}

/* Animated floating elements container */
body.category-hub--education .category-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    /* Floating pencil shapes */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='80' viewBox='0 0 24 80'%3E%3Cpath fill='rgba(255,255,255,0.15)' d='M12 0L20 8V68L12 80L4 68V8L12 0zM12 72l4-6V12l-4-6-4 6v54l4 6z'/%3E%3C/svg%3E") 8% 20%,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='80' viewBox='0 0 24 80'%3E%3Cpath fill='rgba(255,255,255,0.12)' d='M12 0L20 8V68L12 80L4 68V8L12 0zM12 72l4-6V12l-4-6-4 6v54l4 6z'/%3E%3C/svg%3E") 88% 70%,
    /* Notebook lines */
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.06) 0,
      rgba(255, 255, 255, 0.06) 1px,
      transparent 1px,
      transparent 28px),
    /* Left margin line */
    linear-gradient(90deg,
      transparent 0%,
      transparent 8%,
      rgba(239, 68, 68, 0.15) 8%,
      rgba(239, 68, 68, 0.15) 8.5%,
      transparent 8.5%),
    /* Floating math symbols */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctext x='0' y='15' fill='rgba(255,255,255,0.12)' font-size='16' font-family='serif'%3E+%3C/text%3E%3C/svg%3E") 15% 45%,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctext x='0' y='15' fill='rgba(255,255,255,0.1)' font-size='16' font-family='serif'%3E=%3C/text%3E%3C/svg%3E") 75% 25%,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctext x='0' y='15' fill='rgba(255,255,255,0.08)' font-size='16' font-family='serif'%3Eπ%3C/text%3E%3C/svg%3E") 60% 80%;
  background-repeat: no-repeat;
  animation: educationFloat 20s ease-in-out infinite;
}

/* Animated floating books and graduation caps */
body.category-hub--education .category-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Book stack */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='40' viewBox='0 0 50 40'%3E%3Crect x='5' y='28' width='40' height='6' rx='1' fill='rgba(99,102,241,0.25)'/%3E%3Crect x='8' y='20' width='34' height='6' rx='1' fill='rgba(34,197,94,0.2)'/%3E%3Crect x='3' y='12' width='44' height='6' rx='1' fill='rgba(249,115,22,0.2)'/%3E%3C/svg%3E") 85% 85%,
    /* Graduation cap */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='36' viewBox='0 0 48 36'%3E%3Cpath fill='rgba(255,255,255,0.18)' d='M24 0L0 12l24 12 24-12L24 0z'/%3E%3Cpath fill='rgba(255,255,255,0.12)' d='M8 16v12c0 4 7 8 16 8s16-4 16-8V16L24 28 8 16z'/%3E%3C/svg%3E") 12% 75%,
    /* Light bulb idea */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='44' viewBox='0 0 32 44'%3E%3Cellipse cx='16' cy='16' rx='12' ry='12' fill='rgba(251,191,36,0.2)'/%3E%3Crect x='10' y='28' width='12' height='8' rx='2' fill='rgba(255,255,255,0.15)'/%3E%3Crect x='12' y='36' width='8' height='4' rx='1' fill='rgba(255,255,255,0.1)'/%3E%3C/svg%3E") 92% 15%;
  background-repeat: no-repeat;
  animation: educationPulse 15s ease-in-out infinite alternate;
}

@keyframes educationFloat {

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

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

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

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

@keyframes educationPulse {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.02);
  }

  100% {
    opacity: 0.8;
    transform: scale(0.99);
  }
}