html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
} 
 
 /* Background Textures */
    .texture-lines {
      background-image: repeating-linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.08) 0px,
        rgba(0, 0, 0, 0.08) 1px,
        transparent 1px,
        transparent 32px
      );
    }
    .dark .texture-lines {
      background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.06) 0px,
        rgba(255, 255, 255, 0.06) 1px,
        transparent 1px,
        transparent 32px
      );
    }
    
    .texture-dots {
      background-image: radial-gradient(circle, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .dark .texture-dots {
      background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    
    /* Animations */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes fadeInDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes float {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-8px);
      }
    }
    
    @keyframes plusFloat {
      0%, 100% {
        transform: translate(0, 0);
        opacity: 0.08;
      }
      50% {
        transform: translate(3px, -5px);
        opacity: 0.12;
      }
    }
    
    .animate-fade-in-up {
      animation: fadeInUp 0.6s ease forwards;
    }
    
    .animate-fade-in-down {
      animation: fadeInDown 0.6s ease forwards;
    }
    
    .animate-float {
      animation: float 6s ease-in-out infinite;
    }
    
    .animate-plus-float {
      animation: plusFloat 8s ease-in-out infinite;
    }
    
    .stagger-1 { animation-delay: 0.1s; }
    .stagger-2 { animation-delay: 0.2s; }
    .stagger-3 { animation-delay: 0.3s; }
    .stagger-4 { animation-delay: 0.4s; }
    .stagger-5 { animation-delay: 0.5s; }
    
    /* Scroll Reveal */
    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    /* Nav Link Underline */
    .nav-link {
      position: relative;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 1px;
      background: currentColor;
      transition: width 0.2s ease;
    }
    .nav-link:hover::after {
      width: 100%;
    }
    
    /* Smooth Color Transitions */
    * {
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    
    /* Decorative Circle */
    .hero-circle {
      position: absolute;
      right: -15%;
      top: 50%;
      transform: translateY(-50%);
      width: 60vw;
      height: 60vw;
      max-width: 800px;
      max-height: 800px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 50%;
      pointer-events: none;
    }
    .dark .hero-circle {
      border-color: rgba(255, 255, 255, 0.08);
    }
    
    /* Mobile Responsive Fixes */
    @media (max-width: 1024px) {
      .hero-circle {
        right: -30%;
        width: 80vw;
        height: 80vw;
      }
    }
    
    @media (max-width: 768px) {
      .hero-circle {
        display: none;
      }
    }
    
    /* Plus Signs */
    .plus-sign {
      position: absolute;
      font-family: 'JetBrains Mono', monospace;
      font-weight: 300;
      color: rgba(0, 0, 0, 0.08);
      pointer-events: none;
    }
    .dark .plus-sign {
      color: rgba(255, 255, 255, 0.08);
    }
    
    /* Code Syntax */
    .syntax-string { color: #7d9e7a; }
    .syntax-value { color: #c4874a; }
    .syntax-comment { color: #8a8580; }
    .syntax-key { color: #9c9690; }