feat: neural network hero with true 3D and dynamic lines

- True 3D positioning with translate3d(x, y, z) for each node
- Larger cards (200px width) with proper spacing
- Canvas-based dynamic connection lines
- Lines connect at card borders (edge-to-edge)
- Straight solid lines (3px, yellow, 50% opacity)
- Mouse parallax with smooth easing
- 3D perspective changes card sizes dynamically
- Mobile responsive: flat column layout
- Device orientation support for touch devices

src/scripts/home.js

@@ -180,53 +180,138 @@ form?.addEventListener('submit', async (event) => {
   }
 });
 
-// Neural Network Hero - Mouse Parallax
-const neuralScene = document.querySelector('.neural-scene');
+// Neural Network Hero - True 3D with Dynamic Lines
 const heroNeural = document.querySelector('.hero-neural');
+const neuralScene = document.querySelector('.neural-scene');
+const canvas = document.querySelector('.neural-canvas');
+const ctx = canvas?.getContext('2d');
+const nodes = document.querySelectorAll('.neural-node');
 
-if (neuralScene && heroNeural) {
+if (heroNeural && neuralScene && canvas && ctx && nodes.length > 0) {
+  // 3D rotation state
   let targetRotateX = 0;
   let targetRotateY = 0;
   let currentRotateX = 0;
   let currentRotateY = 0;
   
+  // Canvas setup
+  function resizeCanvas() {
+    const rect = heroNeural.getBoundingClientRect();
+    canvas.width = rect.width * window.devicePixelRatio;
+    canvas.height = rect.height * window.devicePixelRatio;
+    canvas.style.width = rect.width + 'px';
+    canvas.style.height = rect.height + 'px';
+    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+  }
+  
+  resizeCanvas();
+  window.addEventListener('resize', resizeCanvas);
+  
+  // Find intersection point on node border
+  function findBorderPoint(nodeRect, targetX, targetY) {
+    const cx = nodeRect.left + nodeRect.width / 2;
+    const cy = nodeRect.top + nodeRect.height / 2;
+    const hw = nodeRect.width / 2;
+    const hh = nodeRect.height / 2;
+    
+    const dx = targetX - cx;
+    const dy = targetY - cy;
+    
+    if (dx === 0 && dy === 0) return { x: cx, y: cy };
+    
+    const absDx = Math.abs(dx);
+    const absDy = Math.abs(dy);
+    
+    let scale;
+    if (absDx * hh > absDy * hw) {
+      scale = hw / absDx;
+    } else {
+      scale = hh / absDy;
+    }
+    
+    return {
+      x: cx + dx * scale,
+      y: cy + dy * scale
+    };
+  }
+  
+  // Draw connections
+  function drawConnections() {
+    const rect = heroNeural.getBoundingClientRect();
+    ctx.clearRect(0, 0, rect.width, rect.height);
+    
+    const centerNode = document.querySelector('[data-node="center"]');
+    const outerNodes = document.querySelectorAll('.neural-card');
+    
+    if (!centerNode) return;
+    
+    const centerRect = centerNode.getBoundingClientRect();
+    const centerX = centerRect.left + centerRect.width / 2 - rect.left;
+    const centerY = centerRect.top + centerRect.height / 2 - rect.top;
+    
+    outerNodes.forEach(node => {
+      const nodeRect = node.getBoundingClientRect();
+      const nodeX = nodeRect.left + nodeRect.width / 2 - rect.left;
+      const nodeY = nodeRect.top + nodeRect.height / 2 - rect.top;
+      
+      const startPt = findBorderPoint(
+        { left: centerRect.left - rect.left, top: centerRect.top - rect.top, 
+          width: centerRect.width, height: centerRect.height },
+        nodeX, nodeY
+      );
+      
+      const endPt = findBorderPoint(
+        { left: nodeRect.left - rect.left, top: nodeRect.top - rect.top, 
+          width: nodeRect.width, height: nodeRect.height },
+        centerX, centerY
+      );
+      
+      ctx.beginPath();
+      ctx.moveTo(startPt.x, startPt.y);
+      ctx.lineTo(endPt.x, endPt.y);
+      ctx.strokeStyle = 'rgba(254, 212, 0, 0.5)';
+      ctx.lineWidth = 3;
+      ctx.lineCap = 'round';
+      ctx.stroke();
+    });
+  }
+  
   // Mouse move handler
   heroNeural.addEventListener('mousemove', (e) => {
     const rect = heroNeural.getBoundingClientRect();
     const x = (e.clientX - rect.left) / rect.width;
     const y = (e.clientY - rect.top) / rect.height;
     
-    // Convert to rotation angles (±15 degrees)
-    targetRotateY = (x - 0.5) * 30;  // -15 to +15
-    targetRotateX = (y - 0.5) * -30; // -15 to +15 (inverted)
+    targetRotateY = (x - 0.5) * 30;
+    targetRotateX = (y - 0.5) * -30;
   });
   
-  // Reset on mouse leave
   heroNeural.addEventListener('mouseleave', () => {
     targetRotateX = 0;
     targetRotateY = 0;
   });
   
-  // Smooth animation loop
+  // Animation loop
   function animate() {
-    // Ease towards target
     currentRotateX += (targetRotateX - currentRotateX) * 0.08;
     currentRotateY += (targetRotateY - currentRotateY) * 0.08;
     
     neuralScene.style.transform = 
       `rotateX(${currentRotateX}deg) rotateY(${currentRotateY}deg)`;
     
+    drawConnections();
+    
     requestAnimationFrame(animate);
   }
   
   animate();
   
-  // Mobile: Device orientation (if available)
+  // Mobile: Device orientation
   if (window.DeviceOrientationEvent && 'ontouchstart' in window) {
     window.addEventListener('deviceorientation', (e) => {
       if (e.gamma !== null && e.beta !== null) {
-        targetRotateY = e.gamma * 0.3; // -30 to +30 scaled down
-        targetRotateX = (e.beta - 45) * 0.3; // Assume holding at 45deg
+        targetRotateY = e.gamma * 0.3;
+        targetRotateX = (e.beta - 45) * 0.3;
       }
     });
   }