Cinematic Hero with 3D Particle Background

<div class="manrope selection:bg-orange-200 selection:text-black overflow-x-hidden"
  style="background-color: #0f0f11; color: #FDFDFD; background-image: radial-gradient(#27272a 1px, transparent 1px); background-size: 24px 24px; min-height: 100vh;">
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Manrope:wght@300;400;500;600;700&display=swap');

    .serif {
      font-family: 'DM Serif Display', serif;
    }

    .manrope {
      font-family: 'Manrope', sans-serif;
    }

    .fade-in-up {
      animation: fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      opacity: 0;
    }

    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .btn-glow:hover {
      box-shadow: 0 0 30px rgba(255, 159, 28, 0.2);
      transition: all 0.4s ease;
    }
  </style>

  <!-- Navigation -->
  <nav class="fixed top-0 left-0 w-full z-50 px-6 md:px-12 py-8 flex justify-between items-center pointer-events-none">
    <div class="flex items-center gap-4 pointer-events-auto">
      <span style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); padding: 6px 16px; border-radius: 999px; font-size: 0.7rem; color: #A1A1AA; letter-spacing: 0.1em; backdrop-filter: blur(8px);">[ RETUNE 1.0 ]</span>
    </div>
    <div class="flex items-center gap-6 pointer-events-auto">
      <span class="text-[10px] font-bold text-gray-600 hidden md:block tracking-[0.3em] uppercase">System Listening</span>
      <button class="bg-[#1e1e20] hover:bg-[#2d2d30] border border-white/5 transition-all px-6 py-2.5 rounded-full text-xs font-semibold tracking-wide">Access Terminal</button>
    </div>
  </nav>

  <!-- Hero Section -->
  <header class="relative w-full h-screen flex flex-col justify-center p-6 md:p-12 overflow-hidden">
    <!-- Interactive Background Layer -->
    <div id="hero-canvas-container"
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;"></div>

    <div
      class="relative z-10 w-full max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-12 items-end pb-12 md:pb-24">
      <div class="md:col-span-9 fade-in-up" style="transform: translateY(60px);">
        <div class="mb-8 inline-flex items-center gap-4">
          <div class="relative flex h-3 w-3">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span>
            <span class="relative inline-flex rounded-full h-3 w-3 bg-orange-500"></span>
          </div>
          <span class="text-[10px] text-orange-200/50 tracking-[0.4em] uppercase font-bold">Signal Optimization Active</span>
        </div>

        <h1 class="serif text-white mb-10"
          style="font-size: clamp(3.5rem, 12vw, 10rem); line-height: 0.85; letter-spacing: -0.04em;">
          Clarity<br><span style="color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.4);">from chaos.</span>
        </h1>

        <div class="flex flex-col md:flex-row gap-10 items-start md:items-center">
          <button class="btn-glow" style="background: #FDFDFD; color: #000; padding: 20px 48px; font-weight: 800; border-radius: 9999px; font-size: 0.9rem; letter-spacing: 0.02em; transition: transform 0.2s ease;" onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
            INITIALIZE UPLINK
          </button>

          <div class="flex items-center gap-6">
            <div class="h-12 w-[1px] bg-white/10 hidden md:block"></div>
            <div class="flex flex-col">
              <span class="text-[10px] text-gray-500 font-bold tracking-[0.2em] uppercase mb-1">Architecture</span>
              <span class="text-sm text-gray-400 font-medium">Neural Engine v4.2</span>
            </div>
          </div>
        </div>
      </div>

      <div class="md:col-span-3 fade-in-up" style="animation-delay: 0.4s; transform: translateY(60px);">
        <div class="p-8 rounded-3xl"
          style="background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); backdrop-filter: blur(12px);">
          <p class="text-gray-400 text-lg leading-relaxed font-light">
            Retune harvests the entropy of raw audio, distilling volatile data into crystalline, actionable
            intelligence.
          </p>
          <div class="mt-6 flex gap-2">
            <div class="h-1 w-8 rounded-full bg-orange-500/40"></div>
            <div class="h-1 w-2 rounded-full bg-white/10"></div>
            <div class="h-1 w-2 rounded-full bg-white/10"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Script for Particle System -->
    <script>
      (function() {
        const container = document.getElementById('hero-canvas-container');
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(60, container.clientWidth / container.clientHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
        
        renderer.setSize(container.clientWidth, container.clientHeight);
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        container.appendChild(renderer.domElement);

        const geometry = new THREE.BufferGeometry();
        const count = 2500;
        const positions = new Float32Array(count * 3);
        const colors = new Float32Array(count * 3);

        for(let i = 0; i < count * 3; i++) {
          positions[i] = (Math.random() - 0.5) * 25;
          colors[i] = Math.random();
        }

        geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
        
        const material = new THREE.PointsMaterial({
          size: 0.025,
          color: 0xff9f1c,
          transparent: true,
          opacity: 0.3,
          blending: THREE.AdditiveBlending
        });

        const points = new THREE.Points(geometry, material);
        scene.add(points);
        camera.position.z = 10;

        let mouseX = 0, mouseY = 0;
        document.addEventListener('mousemove', (e) => {
          mouseX = (e.clientX / window.innerWidth - 0.5) * 2;
          mouseY = (e.clientY / window.innerHeight - 0.5) * 2;
        });

        function animate() {
          requestAnimationFrame(animate);
          points.rotation.y += 0.0005;
          points.rotation.x += 0.0002;
          
          points.position.x += (mouseX * 0.5 - points.position.x) * 0.05;
          points.position.y += (-mouseY * 0.5 - points.position.y) * 0.05;
          
          renderer.render(scene, camera);
        }

        window.addEventListener('resize', () => {
          camera.aspect = container.clientWidth / container.clientHeight;
          camera.updateProjectionMatrix();
          renderer.setSize(container.clientWidth, container.clientHeight);
        });

        animate();
      })();
    </script>
  </header>
</div>