html { 
      scroll-behavior: smooth; 
    }
    
    body { 
      font-family: 'Work Sans', sans-serif; 
    }
    
    h1, h2, h3, .display { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }

    .grain::before {
      content: ""; 
      position: fixed; 
      inset: 0; 
      pointer-events: none; 
      z-index: 1;
      opacity: 0.05;
      background-image: radial-gradient(#ffffff 1px, transparent 1px);
      background-size: 4px 4px;
    }

    .reveal { 
      opacity: 0; 
      transform: translateY(30px); 
      transition: opacity 0.8s ease, transform 0.8s ease; 
    }
    
    .reveal.is-visible { 
      opacity: 1; 
      transform: translateY(0); 
    }

    .fade-up { 
      opacity: 0; 
      transform: translateY(24px); 
      animation: fadeUp 0.9s ease forwards; 
    }
    
    @keyframes fadeUp { 
      to { 
        opacity: 1; 
        transform: translateY(0); 
      } 
    }

    .hero-overlay {
        background: linear-gradient(to bottom, rgba(10,12,16,0.35), rgba(10,12,16,0.9));
      }
    
    .work-img { 
      transition: transform 0.6s ease; 
    }
    
    .work-card:hover .work-img { 
      transform: scale(1.05); 
    }

    .accent-line { 
      height: 3px; 
      width: 56px; 
    }
    
    .glow-ring { 
      box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 20px 60px -20px rgba(0,0,0,0.8); 
    }