feat: replace hero video with intelligent overlay canvas, fix font loading

index.html

@@ -40,8 +40,8 @@
     }
     </script>
 
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <!-- Google Fonts removed for performance in China -->
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Noto+Sans+SC:wght@400;600;800;900&display=swap" rel="stylesheet">
+    
     <style>
         :root {
             --bg: #050505;
@@ -53,7 +53,7 @@
         * { box-sizing: border-box; margin: 0; padding: 0; }
         html { scroll-behavior: smooth; }
         body {
-            font-family: 'Inter', 'Noto Sans SC', sans-serif;
+            font-family: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
             background: var(--bg);
             color: var(--text-main);
             line-height: 1.6;
@@ -61,6 +61,21 @@
             -webkit-font-smoothing: antialiased;
         }
 
+        /* Hero Canvas */
+        #hero-canvas {
+            position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
+            pointer-events: none;
+        }
+        .hero-poster-bg {
+            position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
+            background-image: url('assets/hero-poster.jpg?v=2');
+            background-size: cover; background-position: center;
+            filter: grayscale(100%) brightness(0.3) contrast(1.2);
+            transform: scale(1.05);
+        }
+        .hero-overlay { z-index: 2; } /* Bump overlay above canvas/poster */
+        .hero-video { display: none; } /* Hide old video */
+
         /* 导航 */
         nav {
             position: fixed; top: 0; width: 100%; z-index: 100;
@@ -417,9 +432,9 @@
 
     <!-- HERO -->
     <div class="hero">
-        <video class="hero-video" autoplay muted loop playsinline preload="auto" poster="assets/hero-poster.jpg?v=2">
+        <!-- Canvas for "Intelligent Overlay" Animation -->
-            <source src="assets/video/hero-bg-compressed.mp4?v=2" type="video/mp4">
+        <canvas id="hero-canvas"></canvas>
-        </video>
+        <div class="hero-poster-bg"></div>
         <div class="hero-overlay"></div>
         <div class="hero-content">
             <div class="hero-line"></div>
@@ -765,5 +780,82 @@
             document.querySelectorAll('#pain-points .pain-item, #approach .approach-item').forEach(el => mobileObs.observe(el));
         }
     </script>
+
+<script>
+(function() {
+    const canvas = document.getElementById('hero-canvas');
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    let width, height;
+    let particles = [];
+    // Configuration
+    const particleCount = window.innerWidth < 768 ? 40 : 70; // Fewer on mobile
+    const connectionDistance = 140;
+    
+    function resize() {
+        width = canvas.width = window.innerWidth;
+        height = canvas.height = window.innerHeight;
+    }
+
+    class Particle {
+        constructor() {
+            this.x = Math.random() * width;
+            this.y = Math.random() * height;
+            this.vx = (Math.random() - 0.5) * 0.4; // Slow cinematic speed
+            this.vy = (Math.random() - 0.5) * 0.4;
+            this.size = Math.random() * 2 + 1;
+            this.opacity = Math.random() * 0.5 + 0.2;
+        }
+        update() {
+            this.x += this.vx;
+            this.y += this.vy;
+            if (this.x < 0 || this.x > width) this.vx *= -1;
+            if (this.y < 0 || this.y > height) this.vy *= -1;
+        }
+        draw() {
+            ctx.beginPath();
+            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+            ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
+            ctx.fill();
+        }
+    }
+
+    function init() {
+        resize();
+        for (let i = 0; i < particleCount; i++) {
+            particles.push(new Particle());
+        }
+    }
+
+    function animate() {
+        ctx.clearRect(0, 0, width, height);
+        for (let i = 0; i < particles.length; i++) {
+            particles[i].update();
+            particles[i].draw();
+            for (let j = i; j < particles.length; j++) {
+                const dx = particles[i].x - particles[j].x;
+                const dy = particles[i].y - particles[j].y;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                if (distance < connectionDistance) {
+                    ctx.beginPath();
+                    // Fading lines based on distance
+                    const opacity = 1 - (distance / connectionDistance);
+                    ctx.strokeStyle = `rgba(255, 255, 255, ${opacity * 0.4})`; 
+                    ctx.lineWidth = 0.5;
+                    ctx.moveTo(particles[i].x, particles[i].y);
+                    ctx.lineTo(particles[j].x, particles[j].y);
+                    ctx.stroke();
+                }
+            }
+        }
+        requestAnimationFrame(animate);
+    }
+
+    window.addEventListener('resize', () => { resize(); particles = []; init(); });
+    init();
+    animate();
+})();
+</script>
+
 </body>
 </html>