.num-font { font-family: 'Montserrat', sans-serif; }
    
    
    .credit-reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .credit-reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    
    .credit-role {
      font-feature-settings: "palt";
      letter-spacing: 0.2em;
    }
    .credit-name {
      font-feature-settings: "palt";
      letter-spacing: 0.25em;
    }

    
    .dynamic-pattern-container {
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 0;
      pointer-events: none;
    }
    .dynamic-pattern {
      position: absolute;
      
      inset: -50%;
      background-repeat: repeat;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      opacity: 0;
    }

    
    .pattern-stripe {
      background-image: repeating-linear-gradient(45deg, transparent, transparent 60px, currentColor 60px, currentColor 61px);
      color: #94a3b8; 
      animation: move-stripe 40s linear infinite, fade-1 16s ease-in-out infinite alternate;
    }
    .dark .pattern-stripe { color: #475569;  }

    
    .pattern-grid {
      background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px);
      background-size: 80px 80px;
      color: #94a3b8;
      transform: rotate(15deg);
      animation: move-grid 50s linear infinite, fade-2 22s ease-in-out infinite alternate;
    }
    .dark .pattern-grid { color: #475569; }

    
    .pattern-dots {
      background-image: radial-gradient(circle, currentColor 2px, transparent 2px);
      background-size: 60px 60px;
      color: #94a3b8;
      animation: move-dots 60s linear infinite, fade-3 18s ease-in-out infinite alternate;
    }
    .dark .pattern-dots { color: #475569; }

    
    .pattern-cross {
      background-image: repeating-linear-gradient(-45deg, transparent, transparent 40px, currentColor 40px, currentColor 41px);
      color: #94a3b8;
      animation: move-cross 45s linear infinite, fade-4 20s ease-in-out infinite alternate;
    }
    .dark .pattern-cross { color: #475569; }

    
    @keyframes move-stripe { 0% { background-position: 0 0; } 100% { background-position: 600px 600px; } }
    @keyframes move-grid { 0% { background-position: 0 0; } 100% { background-position: -400px 300px; } }
    @keyframes move-dots { 0% { background-position: 0 0; } 100% { background-position: 400px -600px; } }
    @keyframes move-cross { 0% { background-position: 0 0; } 100% { background-position: -500px -500px; } }

    
    
    @keyframes fade-1 { 0%, 20% { opacity: 0; } 50%, 80% { opacity: 0.15; } 100% { opacity: 0; } }
    @keyframes fade-2 { 0%, 30% { opacity: 0.1; } 60%, 100% { opacity: 0; } }
    @keyframes fade-3 { 0% { opacity: 0; } 40%, 60% { opacity: 0.15; } 100% { opacity: 0; } }
    @keyframes fade-4 { 0%, 40% { opacity: 0; } 70%, 100% { opacity: 0.12; } }

    
    .heading-deco {
      position: relative;
    }
    .heading-deco::before, .heading-deco::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 30px;
      height: 1px;
      background-color: currentColor;
      opacity: 0.3;
    }
    .heading-deco::before { right: 100%; margin-right: 16px; }
    .heading-deco::after { left: 100%; margin-left: 16px; }