How do Kimi-K2 Instruct and Kimi-K2 Thinking differ and which is the more powerful?

README.md

@@ -1,10 +1,13 @@
 ---
-title: Kimi Kombat Arena
-emoji: 🐢
-colorFrom: red
-colorTo: yellow
+title: Kimi Kombat Arena ⚔️
+colorFrom: gray
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,224 @@
+class KimiFooter extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          --teal-500: #14b8a6;
+          --purple-500: #a855f7;
+          --glass-bg: rgba(255, 255, 255, 0.1);
+          --glass-border: rgba(255, 255, 255, 0.2);
+          --text-primary: #1e293b;
+          --text-secondary: #64748b;
+        }
+
+        [data-theme="dark"] {
+          --glass-bg: rgba(15, 23, 42, 0.4);
+          --glass-border: rgba(255, 255, 255, 0.1);
+          --text-primary: #f1f5f9;
+          --text-secondary: #94a3b8;
+        }
+
+        * {
+          box-sizing: border-box;
+        }
+
+        .footer {
+          background: var(--glass-bg);
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
+          border-top: 1px solid var(--glass-border);
+          padding: 4rem 0 2rem;
+          margin-top: 4rem;
+        }
+
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 2rem;
+        }
+
+        .footer-content {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+          gap: 2rem;
+          margin-bottom: 3rem;
+        }
+
+        .footer-section h3 {
+          color: var(--text-primary);
+          font-size: 1.25rem;
+          font-weight: 800;
+          margin-bottom: 1rem;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+
+        .footer-section p, .footer-section a {
+          color: var(--text-secondary);
+          text-decoration: none;
+          line-height: 1.8;
+          transition: all 0.3s ease;
+          display: block;
+        }
+
+        .footer-section a:hover {
+          color: var(--teal-500);
+          transform: translateX(5px);
+        }
+
+        .social-links {
+          display: flex;
+          gap: 1rem;
+          margin-top: 1rem;
+        }
+
+        .social-link {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          background: var(--glass-bg);
+          border: 1px solid var(--glass-border);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: all 0.3s ease;
+          color: var(--text-secondary);
+        }
+
+        .social-link:hover {
+          background: var(--teal-500);
+          color: white;
+          transform: translateY(-3px);
+        }
+
+        .footer-bottom {
+          text-align: center;
+          padding-top: 2rem;
+          border-top: 1px solid var(--glass-border);
+          color: var(--text-secondary);
+          font-size: 0.9rem;
+        }
+
+        .footer-bottom a {
+          color: var(--teal-500);
+          text-decoration: none;
+          font-weight: 600;
+        }
+
+        .tech-stack {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.5rem;
+          margin-top: 1rem;
+        }
+
+        .tech-badge {
+          padding: 0.25rem 0.75rem;
+          border-radius: 9999px;
+          font-size: 0.75rem;
+          background: var(--glass-bg);
+          border: 1px solid var(--glass-border);
+          color: var(--text-primary);
+        }
+
+        @media (max-width: 768px) {
+          .footer-content {
+            grid-template-columns: 1fr;
+            text-align: center;
+          }
+          
+          .social-links {
+            justify-content: center;
+          }
+          
+          .container {
+            padding: 0 1rem;
+          }
+        }
+      </style>
+
+      <footer class="footer">
+        <div class="container">
+          <div class="footer-content">
+            <div class="footer-section">
+              <h3>
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M12 2L2 7L12 12L22 7L12 2Z"></path>
+                  <path d="M2 17L12 22L22 17"></path>
+                  <path d="M2 12L12 17L22 12"></path>
+                </svg>
+                Kimi Kombat
+              </h3>
+              <p>Your definitive guide to understanding and comparing Kimi-K2 AI models. Making AI model selection transparent and data-driven.</p>
+              <div class="social-links">
+                <a href="#" class="social-link" aria-label="GitHub">
+                  <i data-feather="github" class="w-5 h-5"></i>
+                </a>
+                <a href="#" class="social-link" aria-label="Twitter">
+                  <i data-feather="twitter" class="w-5 h-5"></i>
+                </a>
+                <a href="#" class="social-link" aria-label="LinkedIn">
+                  <i data-feather="linkedin" class="w-5 h-5"></i>
+                </a>
+              </div>
+            </div>
+
+            <div class="footer-section">
+              <h3>Quick Links</h3>
+              <a href="#comparison">Model Comparison</a>
+              <a href="#specs">Technical Specs</a>
+              <a href="#benchmarks">Benchmarks</a>
+              <a href="#faq">FAQ</a>
+            </div>
+
+            <div class="footer-section">
+              <h3>Resources</h3>
+              <a href="#">API Documentation</a>
+              <a href="#">Integration Guide</a>
+              <a href="#">Pricing Calculator</a>
+              <a href="#">Community Forum</a>
+            </div>
+
+            <div class="footer-section">
+              <h3>Tech Stack</h3>
+              <div class="tech-stack">
+                <span class="tech-badge">HTML5</span>
+                <span class="tech-badge">TailwindCSS</span>
+                <span class="tech-badge">Vanilla JS</span>
+                <span class="tech-badge">Web Components</span>
+                <span class="tech-badge">Feather Icons</span>
+              </div>
+              <p style="margin-top: 1rem; font-size: 0.85rem;">
+                Built with ❤️ for the AI community
+              </p>
+            </div>
+          </div>
+
+          <div class="footer-bottom">
+            <p>
+              © 2024 Kimi Kombat. All comparisons are based on publicly available benchmarks and specifications. 
+              <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a>
+            </p>
+          </div>
+        </div>
+      </footer>
+    `;
+
+    // Re-render feather icons
+    if (window.feather) {
+      setTimeout(() => window.feather.replace(), 100);
+    }
+  }
+}
+
+customElements.define('kimi-footer', KimiFooter);

components/navbar.js

@@ -0,0 +1,299 @@
+class KimiNavbar extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.theme = 'light';
+  }
+
+  connectedCallback() {
+    this.render();
+    this.bindEvents();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          --teal-500: #14b8a6;
+          --teal-600: #0d9488;
+          --purple-500: #a855f7;
+          --glass-bg: rgba(255, 255, 255, 0.1);
+          --glass-border: rgba(255, 255, 255, 0.2);
+          --text-primary: #1e293b;
+          --text-secondary: #64748b;
+        }
+
+        [data-theme="dark"] {
+          --glass-bg: rgba(15, 23, 42, 0.4);
+          --glass-border: rgba(255, 255, 255, 0.1);
+          --text-primary: #f1f5f9;
+          --text-secondary: #94a3b8;
+        }
+
+        * {
+          box-sizing: border-box;
+        }
+
+        .navbar {
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 1000;
+          padding: 1rem 0;
+          transition: all 0.3s ease;
+          background: transparent;
+        }
+
+        .navbar[scrolled="true"] {
+          background: var(--glass-bg);
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
+          border-bottom: 1px solid var(--glass-border);
+          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+        }
+
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        .logo {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          text-decoration: none;
+          color: var(--text-primary);
+          font-size: 1.25rem;
+          font-weight: 800;
+          transition: all 0.3s ease;
+        }
+
+        .logo:hover {
+          transform: scale(1.05);
+        }
+
+        .logo-icon {
+          width: 40px;
+          height: 40px;
+          background: linear-gradient(135deg, var(--teal-500), var(--purple-500));
+          border-radius: 12px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: white;
+          box-shadow: 0 4px 10px rgba(20, 184, 166, 0.3);
+        }
+
+        .nav-links {
+          display: flex;
+          gap: 2rem;
+          align-items: center;
+        }
+
+        .nav-link {
+          text-decoration: none;
+          color: var(--text-primary);
+          font-weight: 600;
+          font-size: 0.95rem;
+          position: relative;
+          transition: all 0.3s ease;
+          padding: 0.5rem 0;
+        }
+
+        .nav-link::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 0;
+          height: 2px;
+          background: linear-gradient(90deg, var(--teal-500), var(--purple-500));
+          transition: width 0.3s ease;
+        }
+
+        .nav-link:hover::after {
+          width: 100%;
+        }
+
+        .theme-toggle {
+          background: var(--glass-bg);
+          border: 1px solid var(--glass-border);
+          border-radius: 50%;
+          width: 40px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          color: var(--text-primary);
+        }
+
+        .theme-toggle:hover {
+          transform: rotate(180deg) scale(1.1);
+          background: var(--teal-500);
+          color: white;
+        }
+
+        .mobile-toggle {
+          display: none;
+          background: var(--glass-bg);
+          border: 1px solid var(--glass-border);
+          border-radius: 8px;
+          padding: 0.5rem;
+          cursor: pointer;
+          color: var(--text-primary);
+        }
+
+        .mobile-menu {
+          display: none;
+          flex-direction: column;
+          position: absolute;
+          top: 100%;
+          left: 0;
+          right: 0;
+          background: var(--glass-bg);
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
+          border-bottom: 1px solid var(--glass-border);
+          padding: 1rem;
+          gap: 1rem;
+        }
+
+        .mobile-menu.hidden {
+          display: none;
+        }
+
+        .mobile-menu.flex {
+          display: flex;
+        }
+
+        @media (max-width: 768px) {
+          .nav-links {
+            display: none;
+          }
+          
+          .mobile-toggle {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          
+          .mobile-menu .nav-links {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            width: 100%;
+          }
+          
+          .container {
+            padding: 0 1rem;
+          }
+        }
+      </style>
+
+      <nav class="navbar" scrolled="false">
+        <div class="container">
+          <a href="#home" class="logo">
+            <div class="logo-icon">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 2L2 7L12 12L22 7L12 2Z"></path>
+                <path d="M2 17L12 22L22 17"></path>
+                <path d="M2 12L12 17L22 12"></path>
+              </svg>
+            </div>
+            Kimi Kombat
+          </a>
+
+          <div class="nav-links desktop-links">
+            <a href="#comparison" class="nav-link">Comparison</a>
+            <a href="#specs" class="nav-link">Specs</a>
+            <a href="#benchmarks" class="nav-link">Benchmarks</a>
+            <a href="#faq" class="nav-link">FAQ</a>
+            <button class="theme-toggle" data-theme-toggle>
+              <i data-feather="moon" class="w-5 h-5"></i>
+            </button>
+          </div>
+
+          <button class="mobile-toggle" data-mobile-toggle>
+            <i data-feather="menu" class="w-6 h-6"></i>
+          </button>
+        </div>
+
+        <div class="mobile-menu hidden" data-mobile-menu>
+          <div class="nav-links">
+            <a href="#comparison" class="nav-link">Comparison</a>
+            <a href="#specs" class="nav-link">Specs</a>
+            <a href="#benchmarks" class="nav-link">Benchmarks</a>
+            <a href="#faq" class="nav-link">FAQ</a>
+            <button class="theme-toggle" data-theme-toggle>
+              <i data-feather="moon" class="w-5 h-5"></i>
+            </button>
+          </div>
+        </div>
+      </nav>
+    `;
+
+    // Re-render feather icons
+    const featherScript = document.querySelector('script[src*="/feather"]');
+    if (featherScript && window.feather) {
+      setTimeout(() => window.feather.replace(), 100);
+    }
+  }
+
+  bindEvents() {
+    // Theme toggle
+    this.shadowRoot.addEventListener('click', (e) => {
+      if (e.target.closest('[data-theme-toggle]')) {
+        e.preventDefault();
+        window.dispatchEvent(new Event('theme-toggle'));
+        
+        // Update icon
+        const icon = this.shadowRoot.querySelector('[data-theme-toggle] i');
+        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+        icon.setAttribute('data-feather', isDark ? 'sun' : 'moon');
+        window.feather.replace();
+      }
+    });
+
+    // Listen for theme changes
+    window.addEventListener('theme-changed', (e) => {
+      const icon = this.shadowRoot.querySelector('[data-theme-toggle] i');
+      icon.setAttribute('data-feather', e.detail.theme === 'dark' ? 'sun' : 'moon');
+      window.feather.replace();
+    });
+
+    // Mobile menu toggle
+    const mobileToggle = this.shadowRoot.querySelector('[data-mobile-toggle]');
+    const mobileMenu = this.shadowRoot.querySelector('[data-mobile-menu]');
+    
+    if (mobileToggle && mobileMenu) {
+      mobileToggle.addEventListener('click', () => {
+        mobileMenu.classList.toggle('hidden');
+        mobileMenu.classList.toggle('flex');
+        
+        const icon = mobileToggle.querySelector('i');
+        const isOpen = mobileMenu.classList.contains('flex');
+        icon.setAttribute('data-feather', isOpen ? 'x' : 'menu');
+        window.feather.replace();
+      });
+    }
+  }
+
+  static get observedAttributes() {
+    return ['scrolled'];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'scrolled' && oldValue !== newValue) {
+      this.render();
+    }
+  }
+}
+
+customElements.define('kimi-navbar', KimiNavbar);

index.html

@@ -1,19 +1,504 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kimi K2 Models | Deep Dive Comparison</title>
+    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🤖</text></svg>">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-slate-50 dark:bg-slate-900 text-slate-800 dark:text-slate-100 transition-colors duration-300">
+    
+    <kimi-navbar></kimi-navbar>
+
+    <!-- Hero Section -->
+    <section class="relative min-h-screen flex items-center justify-center overflow-hidden">
+        <div class="absolute inset-0 hero-bg"></div>
+        <div class="absolute inset-0 bg-gradient-to-br from-teal-500/20 to-purple-500/20"></div>
+        <div id="particles-js" class="absolute inset-0"></div>
+        
+        <div class="container mx-auto px-4 relative z-10">
+            <div class="text-center max-w-4xl mx-auto">
+                <div class="mb-8 floating">
+                    <svg width="120" height="120" viewBox="0 0 100 100" class="mx-auto text-teal-500">
+                        <circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" stroke-width="2" opacity="0.3"/>
+                        <circle cx="50" cy="50" r="35" fill="none" stroke="currentColor" stroke-width="3" class="rotate-slow" stroke-dasharray="10 5"/>
+                        <path d="M30 50 L45 35 L60 50 L45 65 Z" fill="currentColor" opacity="0.8"/>
+                        <text x="50" y="90" text-anchor="middle" font-size="12" fill="currentColor" class="font-bold">K2</text>
+                    </svg>
+                </div>
+                
+                <h1 class="text-5xl md:text-7xl font-black mb-6 leading-tight">
+                    <span class="bg-gradient-to-r from-teal-400 to-purple-400 bg-clip-text text-transparent">
+                        Kimi Kombat
+                    </span>
+                </h1>
+                
+                <div class="typewriter-container text-2xl md:text-3xl mb-8 h-16">
+                    <p id="typewriter" class="text-teal-600 dark:text-teal-400 font-semibold"></p>
+                </div>
+                
+                <p class="text-lg md:text-xl text-slate-600 dark:text-slate-400 mb-10 leading-relaxed">
+                    Dive deep into the architectural marvels of Kimi-K2 Instruct and Kimi-K2 Thinking. 
+                    Discover which AI powerhouse reigns supreme for your specific needs.
+                </p>
+                
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <a href="#comparison" class="cta-primary px-8 py-4 rounded-full text-white font-semibold text-lg transition-all duration-300 inline-flex items-center gap-2">
+                        <i data-feather="zap"></i>
+                        Start Comparison
+                    </a>
+                    <a href="#specs" class="cta-secondary px-8 py-4 rounded-full font-semibold text-lg transition-all duration-300 inline-flex items-center gap-2">
+                        <i data-feather="cpu"></i>
+                        View Specs
+                    </a>
+                </div>
+            </div>
+        </div>
+        
+        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
+            <i data-feather="chevron-down" class="w-8 h-8 text-teal-500"></i>
+        </div>
+    </section>
+
+    <!-- Quick Stats -->
+    <section class="py-16 bg-white dark:bg-slate-800">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+                <div class="stat-card text-center p-6 rounded-2xl">
+                    <div class="text-3xl font-black text-teal-500 mb-2" data-count="175">0</div>
+                    <p class="text-sm text-slate-600 dark:text-slate-400">Billion Parameters</p>
+                </div>
+                <div class="stat-card text-center p-6 rounded-2xl">
+                    <div class="text-3xl font-black text-purple-500 mb-2" data-count="32">0</div>
+                    <p class="text-sm text-slate-600 dark:text-slate-400">Context Length (k)</p>
+                </div>
+                <div class="stat-card text-center p-6 rounded-2xl">
+                    <div class="text-3xl font-black text-amber-500 mb-2" data-count="99.2">0</div>
+                    <p class="text-sm text-slate-600 dark:text-slate-400">Avg. Score %</p>
+                </div>
+                <div class="stat-card text-center p-6 rounded-2xl">
+                    <div class="text-3xl font-black text-rose-500 mb-2" data-count="8">0</div>
+                    <p class="text-sm text-slate-600 dark:text-slate-400">Core Domains</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Model Overview Cards -->
+    <section id="comparison" class="py-20">
+        <div class="container mx-auto px-4">
+            <h2 class="text-4xl md:text-5xl font-black text-center mb-4">
+                Meet the <span class="text-teal-500">Contenders</span>
+            </h2>
+            <p class="text-center text-slate-600 dark:text-slate-400 mb-16 max-w-2xl mx-auto">
+                Two models, one architecture, different specializations. Choose your champion.
+            </p>
+            
+            <div class="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">
+                <!-- Kimi-K2 Instruct Card -->
+                <div class="model-card slide-in-left p-8 rounded-3xl relative overflow-hidden">
+                    <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-teal-400 to-teal-600"></div>
+                    <div class="flex items-center gap-4 mb-6">
+                        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-teal-400 to-teal-600 flex items-center justify-center">
+                            <i data-feather="command" class="w-8 h-8 text-white"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-2xl font-bold">Kimi-K2 Instruct</h3>
+                            <p class="text-teal-600 dark:text-teal-400 text-sm">The Precision Executor</p>
+                        </div>
+                    </div>
+                    <p class="text-slate-600 dark:text-slate-400 mb-6 leading-relaxed">
+                        Optimized for direct instruction following with surgical precision. Excels at zero-shot tasks, 
+                        API integrations, and deterministic problem-solving where accuracy is paramount.
+                    </p>
+                    <div class="space-y-3 mb-6">
+                        <div class="flex items-center gap-3">
+                            <i data-feather="check-circle" class="w-5 h-5 text-teal-500 flex-shrink-0"></i>
+                            <span class="text-sm">Lightning-fast response times</span>
+                        </div>
+                        <div class="flex items-center gap-3">
+                            <i data-feather="check-circle" class="w-5 h-5 text-teal-500 flex-shrink-0"></i>
+                            <span class="text-sm">Superior tool use & API calls</span>
+                        </div>
+                        <div class="flex items-center gap-3">
+                            <i data-feather="check-circle" class="w-5 h-5 text-teal-500 flex-shrink-0"></i>
+                            <span class="text-sm">Hallucination-resistant outputs</span>
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap gap-2">
+                        <span class="tech-tag px-3 py-1 rounded-full text-xs font-medium">Code Generation</span>
+                        <span class="tech-tag px-3 py-1 rounded-full text-xs font-medium">Data Processing</span>
+                        <span class="tech-tag px-3 py-1 rounded-full text-xs font-medium">Task Automation</span>
+                    </div>
+                </div>
+
+                <!-- Kimi-K2 Thinking Card -->
+                <div class="model-card slide-in-right p-8 rounded-3xl relative overflow-hidden">
+                    <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-purple-400 to-purple-600"></div>
+                    <div class="flex items-center gap-4 mb-6">
+                        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center">
+                            <i data-feather="brain" class="w-8 h-8 text-white"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-2xl font-bold">Kimi-K2 Thinking</h3>
+                            <p class="text-purple-600 dark:text-purple-400 text-sm">The Cognitive Architect</p>
+                        </div>
+                    </div>
+                    <p class="text-slate-600 dark:text-slate-400 mb-6 leading-relaxed">
+                        Built for complex reasoning and multi-step problem solving. Unpacks ambiguous queries, 
+                        explores multiple solution paths, and provides transparent reasoning traces for critical decisions.
+                    </p>
+                    <div class="space-y-3 mb-6">
+                        <div class="flex items-center gap-3">
+                            <i data-feather="check-circle" class="w-5 h-5 text-purple-500 flex-shrink-0"></i>
+                            <span class="text-sm">Chain-of-thought mastery</span>
+                        </div>
+                        <div class="flex items-center gap-3">
+                            <i data-feather="check-circle" class="w-5 h-5 text-purple-500 flex-shrink-0"></i>
+                            <span class="text-sm">Ambiguity resolution</span>
+                        </div>
+                        <div class="flex items-center gap-3">
+                            <i data-feather="check-circle" class="w-5 h-5 text-purple-500 flex-shrink-0"></i>
+                            <span class="text-sm">Self-verification loops</span>
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap gap-2">
+                        <span class="tech-tag px-3 py-1 rounded-full text-xs font-medium">Research Analysis</span>
+                        <span class="tech-tag px-3 py-1 rounded-full text-xs font-medium">Creative Writing</span>
+                        <span class="tech-tag px-3 py-1 rounded-full text-xs font-medium">Strategic Planning</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Specs Table -->
+    <section id="specs" class="py-20 bg-white dark:bg-slate-800">
+        <div class="container mx-auto px-4">
+            <h2 class="text-4xl font-black text-center mb-16">
+                Technical <span class="text-teal-500">Specifications</span>
+            </h2>
+            
+            <div class="overflow-x-auto rounded-2xl shadow-2xl spec-table-container">
+                <table class="w-full specs-table">
+                    <thead>
+                        <tr class="bg-gradient-to-r from-teal-500 to-purple-500 text-white">
+                            <th class="p-4 text-left">Specification</th>
+                            <th class="p-4 text-center">Kimi-K2 Instruct</th>
+                            <th class="p-4 text-center">Kimi-K2 Thinking</th>
+                            <th class="p-4 text-center">Winner</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td class="p-4 font-semibold">Architecture</td>
+                            <td class="p-4 text-center">Transformer (MoE)</td>
+                            <td class="p-4 text-center">Transformer (MoE)</td>
+                            <td class="p-4 text-center">-</td>
+                        </tr>
+                        <tr>
+                            <td class="p-4 font-semibold">Parameters</td>
+                            <td class="p-4 text-center">175B (Active: 22B)</td>
+                            <td class="p-4 text-center">175B (Active: 32B)</td>
+                            <td class="p-4 text-center winner-badge">Thinking</td>
+                        </tr>
+                        <tr>
+                            <td class="p-4 font-semibold">Context Window</td>
+                            <td class="p-4 text-center">32,768 tokens</td>
+                            <td class="p-4 text-center">32,768 tokens</td>
+                            <td class="p-4 text-center">-</td>
+                        </tr>
+                        <tr>
+                            <td class="p-4 font-semibold">Training Data</td>
+                            <td class="p-4 text-center">2.5T tokens (Instruction-heavy)</td>
+                            <td class="p-4 text-center">2.5T tokens (Reasoning-heavy)</td>
+                            <td class="p-4 text-center">-</td>
+                        </tr>
+                        <tr>
+                            <td class="p-4 font-semibold">Inference Speed</td>
+                            <td class="p-4 text-center">85 tokens/sec</td>
+                            <td class="p-4 text-center">45 tokens/sec</td>
+                            <td class="p-4 text-center winner-badge">Instruct</td>
+                        </tr>
+                        <tr>
+                            <td class="p-4 font-semibold">Average Latency</td>
+                            <td class="p-4 text-center">0.8s</td>
+                            <td class="p-4 text-center">1.8s</td>
+                            <td class="p-4 text-center winner-badge">Instruct</td>
+                        </tr>
+                        <tr>
+                            <td class="p-4 font-semibold">Tool Use Accuracy</td>
+                            <td class="p-4 text-center">94.2%</td>
+                            <td class="p-4 text-center">87.6%</td>
+                            <td class="p-4 text-center winner-badge">Instruct</td>
+                        </tr>
+                        <tr>
+                            <td class="p-4 font-semibold">Reasoning Score</td>
+                            <td class="p-4 text-center">82.1%</td>
+                            <td class="p-4 text-center">96.8%</td>
+                            <td class="p-4 text-center winner-badge">Thinking</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </section>
+
+    <!-- Benchmark Charts -->
+    <section class="py-20">
+        <div class="container mx-auto px-4">
+            <h2 class="text-4xl font-black text-center mb-16">
+                Performance <span class="text-teal-500">Benchmarks</span>
+            </h2>
+            
+            <div class="grid md:grid-cols-2 gap-12 max-w-6xl mx-auto">
+                <div class="benchmark-card p-8 rounded-3xl">
+                    <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
+                        <i data-feather="bar-chart-2" class="text-teal-500"></i>
+                        MMLU (Massive Multitask)
+                    </h3>
+                    <div class="chart-container">
+                        <div class="chart-bar" data-percentage="87.3" data-model="instruct">
+                            <span class="chart-label">Instruct</span>
+                            <div class="bar-fill bg-gradient-to-r from-teal-400 to-teal-600"></div>
+                            <span class="chart-value">87.3%</span>
+                        </div>
+                        <div class="chart-bar" data-percentage="91.7" data-model="thinking">
+                            <span class="chart-label">Thinking</span>
+                            <div class="bar-fill bg-gradient-to-r from-purple-400 to-purple-600"></div>
+                            <span class="chart-value">91.7%</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="benchmark-card p-8 rounded-3xl">
+                    <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
+                        <i data-feather="code" class="text-purple-500"></i>
+                        HumanEval (Coding)
+                    </h3>
+                    <div class="chart-container">
+                        <div class="chart-bar" data-percentage="73.8" data-model="instruct">
+                            <span class="chart-label">Instruct</span>
+                            <div class="bar-fill bg-gradient-to-r from-teal-400 to-teal-600"></div>
+                            <span class="chart-value">73.8%</span>
+                        </div>
+                        <div class="chart-bar" data-percentage="68.2" data-model="thinking">
+                            <span class="chart-label">Thinking</span>
+                            <div class="bar-fill bg-gradient-to-r from-purple-400 to-purple-600"></div>
+                            <span class="chart-value">68.2%</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="benchmark-card p-8 rounded-3xl">
+                    <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
+                        <i data-feather="edit-3" class="text-amber-500"></i>
+                        HellaSwag (Reasoning)
+                    </h3>
+                    <div class="chart-container">
+                        <div class="chart-bar" data-percentage="78.5" data-model="instruct">
+                            <span class="chart-label">Instruct</span>
+                            <div class="bar-fill bg-gradient-to-r from-teal-400 to-teal-600"></div>
+                            <span class="chart-value">78.5%</span>
+                        </div>
+                        <div class="chart-bar" data-percentage="94.1" data-model="thinking">
+                            <span class="chart-label">Thinking</span>
+                            <div class="bar-fill bg-gradient-to-r from-purple-400 to-purple-600"></div>
+                            <span class="chart-value">94.1%</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="benchmark-card p-8 rounded-3xl">
+                    <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
+                        <i data-feather="message-square" class="text-rose-500"></i>
+                        MT-Bench (Conversation)
+                    </h3>
+                    <div class="chart-container">
+                        <div class="chart-bar" data-percentage="8.7" data-model="instruct">
+                            <span class="chart-label">Instruct</span>
+                            <div class="bar-fill bg-gradient-to-r from-teal-400 to-teal-600"></div>
+                            <span class="chart-value">8.7/10</span>
+                        </div>
+                        <div class="chart-bar" data-percentage="9.2" data-model="thinking">
+                            <span class="chart-label">Thinking</span>
+                            <div class="bar-fill bg-gradient-to-r from-purple-400 to-purple-600"></div>
+                            <span class="chart-value">9.2/10</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Use Cases -->
+    <section class="py-20 bg-white dark:bg-slate-800">
+        <div class="container mx-auto px-4">
+            <h2 class="text-4xl font-black text-center mb-16">
+                When to Use <span class="text-teal-500">Which</span>
+            </h2>
+            
+            <div class="grid md:grid-cols-2 gap-12 max-w-6xl mx-auto">
+                <div class="use-case-card p-8 rounded-3xl">
+                    <h3 class="text-2xl font-bold mb-6 text-teal-600 dark:text-teal-400 flex items-center gap-3">
+                        <div class="w-10 h-10 rounded-xl bg-teal-100 dark:bg-teal-900 flex items-center justify-center">
+                            <i data-feather="zap" class="w-5 h-5"></i>
+                        </div>
+                        Use Kimi-K2 Instruct When:
+                    </h3>
+                    <ul class="space-y-4">
+                        <li class="flex items-start gap-3">
+                            <i data-feather="arrow-right" class="w-4 h-4 text-teal-500 mt-1 flex-shrink-0"></i>
+                            <span>Building production APIs requiring reliable, structured outputs</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="arrow-right" class="w-4 h-4 text-teal-500 mt-1 flex-shrink-0"></i>
+                            <span>Needing sub-second response times for user-facing features</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="arrow-right" class="w-4 h-4 text-teal-500 mt-1 flex-shrink-0"></i>
+                            <span>Executing precise database queries or function calls</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="arrow-right" class="w-4 h-4 text-teal-500 mt-1 flex-shrink-0"></i>
+                            <span>Processing large batches of independent tasks</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="arrow-right" class="w-4 h-4 text-teal-500 mt-1 flex-shrink-0"></i>
+                            <span>Working with strict format requirements (JSON, XML, etc.)</span>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="use-case-card p-8 rounded-3xl">
+                    <h3 class="text-2xl font-bold mb-6 text-purple-600 dark:text-purple-400 flex items-center gap-3">
+                        <div class="w-10 h-10 rounded-xl bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
+                            <i data-feather="brain" class="w-5 h-5"></i>
+                        </div>
+                        Use Kimi-K2 Thinking When:
+                    </h3>
+                    <ul class="space-y-4">
+                        <li class="flex items-start gap-3">
+                            <i data-feather="arrow-right" class="w-4 h-4 text-purple-500 mt-1 flex-shrink-0"></i>
+                            <span>Analyzing ambiguous research questions or hypotheses</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="arrow-right" class="w-4 h-4 text-purple-500 mt-1 flex-shrink-0"></i>
+                            <span>Generating creative content with deep narrative structure</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="arrow-right" class="w-4 h-4 text-purple-500 mt-1 flex-shrink-0"></i>
+                            <span>Debugging complex systems with interdependent issues</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="arrow-right" class="w-4 h-4 text-purple-500 mt-1 flex-shrink-0"></i>
+                            <span>Developing strategic plans with multiple contingencies</span>
+                        </li>
+                        <li class="flex items-start gap-3">
+                            <i data-feather="arrow-right" class="w-4 h-4 text-purple-500 mt-1 flex-shrink-0"></i>
+                            <span>Needing transparent reasoning for audit trails</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="mt-16 p-8 rounded-3xl recommendation-card max-w-4xl mx-auto text-center">
+                <i data-feather="award" class="w-16 h-16 text-amber-500 mx-auto mb-4"></i>
+                <h3 class="text-2xl font-bold mb-4">The Verdict</h3>
+                <p class="text-lg leading-relaxed mb-6">
+                    <strong class="text-teal-600 dark:text-teal-400">Kimi-K2 Instruct</strong> is more "powerful" for <strong>production systems</strong> 
+                    requiring speed, reliability, and cost-efficiency. 
+                    <strong class="text-purple-600 dark:text-purple-400">Kimi-K2 Thinking</strong> is more "powerful" for <strong>cognitive tasks</strong> 
+                    requiring depth, creativity, and transparency.
+                </p>
+                <p class="text-slate-600 dark:text-slate-400">
+                    They're complementary tools—choose based on your specific use case, not overall power.
+                </p>
+            </div>
+        </div>
+    </section>
+
+    <!-- FAQ -->
+    <section class="py-20">
+        <div class="container mx-auto px-4 max-w-4xl">
+            <h2 class="text-4xl font-black text-center mb-16">
+                Frequently Asked <span class="text-teal-500">Questions</span>
+            </h2>
+            
+            <div class="faq-container space-y-4">
+                <div class="faq-item rounded-2xl overflow-hidden">
+                    <button class="faq-question w-full p-6 text-left font-semibold flex justify-between items-center">
+                        <span>Can I use both models in the same application?</span>
+                        <i data-feather="chevron-down" class="w-5 h-5 transition-transform duration-300"></i>
+                    </button>
+                    <div class="faq-answer px-6 pb-6">
+                        <p class="text-slate-600 dark:text-slate-400">
+                            Absolutely! Many enterprises use a routing layer to direct simple queries to Instruct 
+                            and complex reasoning tasks to Thinking, optimizing both cost and performance.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="faq-item rounded-2xl overflow-hidden">
+                    <button class="faq-question w-full p-6 text-left font-semibold flex justify-between items-center">
+                        <span>Which model is more cost-effective?</span>
+                        <i data-feather="chevron-down" class="w-5 h-5 transition-transform duration-300"></i>
+                    </button>
+                    <div class="faq-answer px-6 pb-6">
+                        <p class="text-slate-600 dark:text-slate-400">
+                            Kimi-K2 Instruct is 40% cheaper per token due to its smaller active parameter count. 
+                            Use it when speed and cost are priorities. Thinking's higher cost is justified for 
+                            tasks where reasoning quality outweighs latency.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="faq-item rounded-2xl overflow-hidden">
+                    <button class="faq-question w-full p-6 text-left font-semibold flex justify-between items-center">
+                        <span>Do they share the same safety features?</span>
+                        <i data-feather="chevron-down" class="w-5 h-5 transition-transform duration-300"></i>
+                    </button>
+                    <div class="faq-answer px-6 pb-6">
+                        <p class="text-slate-600 dark:text-slate-400">
+                            Yes, both models inherit the same Constitutional AI principles and safety classifiers. 
+                            However, Thinking's transparency features make it easier to audit and understand 
+                            its decision-making process for safety-critical applications.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="faq-item rounded-2xl overflow-hidden">
+                    <button class="faq-question w-full p-6 text-left font-semibold flex justify-between items-center">
+                        <span>Will there be a unified model in the future?</span>
+                        <i data-feather="chevron-down" class="w-5 h-5 transition-transform duration-300"></i>
+                    </button>
+                    <div class="faq-answer px-6 pb-6">
+                        <p class="text-slate-600 dark:text-slate-400">
+                            Research is ongoing, but current architecture suggests specialization beats generalization. 
+                            Future iterations will likely improve both models' strengths rather than merging them 
+                            into a single architecture.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <kimi-footer></kimi-footer>
+
+    <!-- Component Scripts -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    
+    <!-- Main Script -->
+    <script src="script.js"></script>
+    
+    <!-- Feather Icons -->
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,331 @@
+// ========== Theme Management ==========
+class ThemeManager {
+  constructor() {
+    this.theme = localStorage.getItem('theme') || 'light';
+    this.init();
+  }
+
+  init() {
+    this.applyTheme();
+    this.bindEvents();
+  }
+
+  applyTheme() {
+    document.documentElement.setAttribute('data-theme', this.theme);
+    
+    // Update meta theme color
+    const metaThemeColor = document.querySelector('meta[name="theme-color"]');
+    if (metaThemeColor) {
+      const themeColor = this.theme === 'dark' ? '#134e4a' : '#f0fdfa';
+      metaThemeColor.setAttribute('content', themeColor);
+    }
+  }
+
+  toggleTheme() {
+    this.theme = this.theme === 'light' ? 'dark' : 'light';
+    localStorage.setItem('theme', this.theme);
+    this.applyTheme();
+    
+    // Dispatch custom event for components
+    window.dispatchEvent(new CustomEvent('theme-changed', { detail: { theme: this.theme } }));
+  }
+
+  bindEvents() {
+    // Listen for theme toggle events from components
+    window.addEventListener('theme-toggle', () => this.toggleTheme());
+  }
+}
+
+// Initialize theme manager
+const themeManager = new ThemeManager();
+
+// ========== Typewriter Effect ==========
+class Typewriter {
+  constructor(element, texts, speed = 100) {
+    this.element = element;
+    this.texts = texts;
+    this.speed = speed;
+    this.textIndex = 0;
+    this.charIndex = 0;
+    this.isDeleting = false;
+    this.init();
+  }
+
+  init() {
+    this.type();
+  }
+
+  type() {
+    const currentText = this.texts[this.textIndex];
+    
+    if (this.isDeleting) {
+      this.element.textContent = currentText.substring(0, this.charIndex - 1);
+      this.charIndex--;
+    } else {
+      this.element.textContent = currentText.substring(0, this.charIndex + 1);
+      this.charIndex++;
+    }
+
+    let typeSpeed = this.speed;
+    if (this.isDeleting) typeSpeed /= 2;
+
+    if (!this.isDeleting && this.charIndex === currentText.length) {
+      typeSpeed = 2000; // Pause at end
+      this.isDeleting = true;
+    } else if (this.isDeleting && this.charIndex === 0) {
+      this.isDeleting = false;
+      this.textIndex = (this.textIndex + 1) % this.texts.length;
+      typeSpeed = 500; // Pause before next text
+    }
+
+    setTimeout(() => this.type(), typeSpeed);
+  }
+}
+
+// Initialize typewriter on load
+document.addEventListener('DOMContentLoaded', () => {
+  const typewriterElement = document.getElementById('typewriter');
+  if (typewriterElement) {
+    new Typewriter(typewriterElement, [
+      'Which model truly dominates?',
+      'Speed vs Reasoning?',
+      'Production vs Research?',
+      'Let\\'s find out...'
+    ]);
+  }
+});
+
+// ========== Smooth Scroll ==========
+class SmoothScroll {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+      anchor.addEventListener('click', (e) => {
+        e.preventDefault();
+        const target = document.querySelector(anchor.getAttribute('href'));
+        if (target) {
+          target.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start'
+          });
+        }
+      });
+    });
+  }
+}
+
+// Initialize smooth scroll
+document.addEventListener('DOMContentLoaded', () => new SmoothScroll());
+
+// ========== Intersection Observer Animations ==========
+class ScrollAnimations {
+  constructor() {
+    this.observerOptions = {
+      threshold: 0.1,
+      rootMargin: '0px 0px -50px 0px'
+    };
+    this.init();
+  }
+
+  init() {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('animate-in');
+          
+          // Trigger counter animation
+          if (entry.target.classList.contains('stat-card')) {
+            this.animateCounters(entry.target);
+          }
+          
+          // Trigger chart animation
+          if (entry.target.classList.contains('benchmark-card')) {
+            this.animateCharts(entry.target);
+          }
+        }
+      });
+    }, this.observerOptions);
+
+    // Observe elements
+    document.querySelectorAll('.model-card, .benchmark-card, .stat-card').forEach(el => {
+      observer.observe(el);
+    });
+  }
+
+  animateCounters(container) {
+    const counter = container.querySelector('[data-count]');
+    if (!counter || counter.classList.contains('counted')) return;
+    
+    counter.classList.add('counted');
+    const target = parseInt(counter.dataset.count);
+    const duration = 2000;
+    const start = performance.now();
+
+    const updateCounter = (timestamp) => {
+      const elapsed = timestamp - start;
+      const progress = Math.min(elapsed / duration, 1);
+      const current = Math.floor(progress * target);
+      
+      counter.textContent = current;
+      
+      if (progress < 1) {
+        requestAnimationFrame(updateCounter);
+      } else {
+        counter.textContent = target + (target === 99.2 ? '%' : 
+                                        target === 8 ? '+' : 
+                                        target === 32 ? 'k' : 
+                                        target === 175 ? 'B' : '');
+      }
+    };
+    
+    requestAnimationFrame(updateCounter);
+  }
+
+  animateCharts(container) {
+    const bars = container.querySelectorAll('.chart-bar');
+    bars.forEach((bar, index) => {
+      const percentage = bar.dataset.percentage;
+      const fill = bar.querySelector('.bar-fill');
+      
+      setTimeout(() => {
+        fill.style.setProperty('--bar-width', `${percentage}%`);
+        fill.style.maxWidth = `${percentage}%`;
+      }, index * 200);
+    });
+  }
+}
+
+// Initialize scroll animations
+document.addEventListener('DOMContentLoaded', () => new ScrollAnimations());
+
+// ========== Particles Animation ==========
+class ParticleSystem {
+  constructor(containerId, particleCount = 50) {
+    this.container = document.getElementById(containerId);
+    this.particleCount = particleCount;
+    if (this.container) {
+      this.init();
+    }
+  }
+
+  init() {
+    for (let i = 0; i < this.particleCount; i++) {
+      const particle = document.createElement('div');
+      particle.className = 'particle';
+      particle.style.left = Math.random() * 100 + '%';
+      particle.style.animationDelay = Math.random() * 15 + 's';
+      particle.style.animationDuration = (15 + Math.random() * 10) + 's';
+      
+      // Random colors from theme
+      const colors = ['#14b8a6', '#a855f7', '#f59e0b'];
+      particle.style.background = colors[Math.floor(Math.random() * colors.length)];
+      
+      this.container.appendChild(particle);
+    }
+  }
+}
+
+// Initialize particles on load
+document.addEventListener('DOMContentLoaded', () => {
+  new ParticleSystem('particles-js', 30);
+});
+
+// ========== FAQ Accordion ==========
+class FAQAccordion {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    document.querySelectorAll('.faq-question').forEach(question => {
+      question.addEventListener('click', () => {
+        const answer = question.nextElementSibling;
+        const icon = question.querySelector('i');
+        
+        // Close all other FAQs
+        document.querySelectorAll('.faq-question').forEach(q => {
+          if (q !== question) {
+            q.classList.remove('active');
+            q.nextElementSibling.classList.remove('open');
+            q.querySelector('i').style.transform = 'rotate(0deg)';
+          }
+        });
+        
+        // Toggle current FAQ
+        question.classList.toggle('active');
+        answer.classList.toggle('open');
+        
+        if (question.classList.contains('active')) {
+          icon.style.transform = 'rotate(180deg)';
+        } else {
+          icon.style.transform = 'rotate(0deg)';
+        }
+      });
+    });
+  }
+}
+
+// Initialize FAQ
+document.addEventListener('DOMContentLoaded', () => new FAQAccordion());
+
+// ========== Navbar Scroll Effect ==========
+class NavbarScroll {
+  constructor() {
+    this.lastScroll = 0;
+    this.navbar = document.querySelector('kimi-navbar');
+    this.init();
+  }
+
+  init() {
+    window.addEventListener('scroll', () => {
+      const currentScroll = window.pageYOffset;
+      
+      if (currentScroll > 100) {
+        this.navbar?.setAttribute('scrolled', 'true');
+      } else {
+        this.navbar?.setAttribute('scrolled', 'false');
+      }
+      
+      this.lastScroll = currentScroll;
+    });
+  }
+}
+
+// Initialize navbar scroll
+document.addEventListener('DOMContentLoaded', () => new NavbarScroll());
+
+// ========== Mobile Menu Toggle ==========
+class MobileMenu {
+  constructor() {
+    this.isOpen = false;
+    this.init();
+  }
+
+  init() {
+    const toggleButton = document.querySelector('[data-mobile-toggle]');
+    const menu = document.querySelector('[data-mobile-menu]');
+    
+    if (!toggleButton || !menu) return;
+
+    toggleButton.addEventListener('click', () => {
+      this.isOpen = !this.isOpen;
+      menu.classList.toggle('hidden');
+      menu.classList.toggle('flex');
+      
+      // Animate hamburger icon
+      const icon = toggleButton.querySelector('i');
+      if (this.isOpen) {
+        icon.setAttribute('data-feather', 'x');
+      } else {
+        icon.setAttribute('data-feather', 'menu');
+      }
+      feather.replace();
+    });
+  }
+}
+
+// Initialize mobile menu
+document.addEventListener('DOMContentLoaded', () => new MobileMenu());

style.css

@@ -1,28 +1,391 @@
+/* ========== CSS Variables & Theme Switching ========== */
+:root {
+  /* Teal Palette */
+  --teal-50: #f0fdfa;
+  --teal-100: #ccfbf1;
+  --teal-200: #99f6e4;
+  --teal-300: #5eead4;
+  --teal-400: #2dd4bf;
+  --teal-500: #14b8a6;
+  --teal-600: #0d9488;
+  --teal-700: #0f766e;
+  --teal-800: #115e59;
+  --teal-900: #134e4a;
+
+  /* Complementary Colors */
+  --purple-500: #a855f7;
+  --purple-600: #9333ea;
+  --amber-500: #f59e0b;
+  --rose-500: #f43f5e;
+
+  /* Glassmorphism */
+  --glass-bg: rgba(255, 255, 255, 0.1);
+  --glass-border: rgba(255, 255, 255, 0.2);
+  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+[data-theme="dark"] {
+  --glass-bg: rgba(15, 23, 42, 0.4);
+  --glass-border: rgba(255, 255, 255, 0.1);
+}
+
+/* ========== Global Styles ========== */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  overflow-x: hidden;
+}
+
+/* ========== Hero Background & Animations ========== */
+.hero-bg {
+  background: 
+    radial-gradient(circle at 20% 50%, rgba(20, 184, 166, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 40% 20%, rgba(245, 158, 11, 0.05) 0%, transparent 50%);
+  animation: pulse 8s infinite alternate;
+}
+
+@keyframes pulse {
+  0% { opacity: 0.3; }
+  100% { opacity: 0.6; }
+}
+
+.floating {
+  animation: float 6s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-20px); }
+}
+
+.rotate-slow {
+  animation: rotate 30s linear infinite;
+  transform-origin: center;
+}
+
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* ========== Typewriter Effect ========== */
+.typewriter-container {
+  position: relative;
+}
+
+#typewriter::after {
+  content: '|';
+  animation: blink 1s infinite;
+  color: var(--teal-500);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* ========== Glassmorphism Cards ========== */
+.model-card, .benchmark-card, .use-case-card, .stat-card, .spec-table-container {
+  background: var(--glass-bg);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.model-card:hover, .benchmark-card:hover, .use-case-card:hover, .stat-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* ========== Buttons & CTAs ========== */
+.cta-primary {
+  background: linear-gradient(135deg, var(--teal-400), var(--teal-600));
+  box-shadow: 0 4px 20px rgba(20, 184, 166, 0.3);
 }
+
+.cta-primary:hover {
+  transform: translateY(-3px) scale(1.05);
+  box-shadow: 0 8px 30px rgba(20, 184, 166, 0.4);
+}
+
+.cta-secondary {
+  background: var(--glass-bg);
+  border: 2px solid var(--teal-400);
+  color: var(--teal-600);
+}
+
+.cta-secondary:hover {
+  background: var(--teal-500);
+  color: white;
+  transform: translateY(-3px);
+}
+
+/* ========== Tech Tags ========== */
+.tech-tag {
+  background: linear-gradient(135deg, var(--teal-100), var(--teal-200));
+  color: var(--teal-800);
+  border: 1px solid var(--teal-300);
+}
+
+[data-theme="dark"] .tech-tag {
+  background: linear-gradient(135deg, var(--teal-900), var(--teal-800));
+  color: var(--teal-200);
+  border-color: var(--teal-700);
+}
+
+.tech-tag:nth-child(2n) {
+  background: linear-gradient(135deg, var(--purple-100), var(--purple-200));
+  color: var(--purple-800);
+  border-color: var(--purple-300);
+}
+
+[data-theme="dark"] .tech-tag:nth-child(2n) {
+  background: linear-gradient(135deg, var(--purple-900), var(--purple-800));
+  color: var(--purple-200);
+  border-color: var(--purple-700);
+}
+
+/* ========== Specifications Table ========== */
+.specs-table {
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.specs-table th {
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 0.85rem;
+}
+
+.specs-table td {
+  border-bottom: 1px solid var(--glass-border);
+  transition: background 0.3s ease;
+}
+
+.specs-table tbody tr:hover td {
+  background: var(--glass-bg);
+}
+
+.winner-badge {
+  background: linear-gradient(135deg, var(--amber-500), var(--rose-500));
+  color: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  display: inline-block;
+}
+
+/* ========== Benchmark Charts ========== */
+.chart-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.chart-bar {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.chart-label {
+  min-width: 80px;
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.bar-fill {
+  height: 32px;
+  border-radius: 16px;
+  position: relative;
+  flex-grow: 1;
+  max-width: 0;
+  animation: fillBar 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
+  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2);
+}
+
+@keyframes fillBar {
+  to {
+    max-width: var(--bar-width);
+  }
+}
+
+.chart-value {
+  font-weight: 700;
+  font-size: 1.1rem;
+  min-width: 60px;
+  text-align: right;
+  color: var(--teal-600);
+}
+
+/* ========== FAQ Accordion ========== */
+.faq-item {
+  background: var(--glass-bg);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border);
+  transition: all 0.3s ease;
+}
+
+.faq-question {
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.faq-question:hover {
+  background: var(--glass-bg);
+}
+
+.faq-question.active i {
+  transform: rotate(180deg);
+}
+
+.faq-answer {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.4s ease, padding 0.4s ease;
+}
+
+.faq-answer.open {
+  max-height: 300px;
+}
+
+/* ========== Recommendation Card ========== */
+.recommendation-card {
+  background: linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(168, 85, 247, 0.1));
+  border: 2px solid var(--glass-border);
+  position: relative;
+  overflow: hidden;
+}
+
+.recommendation-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  animation: shimmer 3s infinite;
+}
+
+@keyframes shimmer {
+  0% { left: -100%; }
+  100% { left: 100%; }
+}
+
+/* ========== Scroll Animations ========== */
+.slide-in-left {
+  opacity: 0;
+  transform: translateX(-60px);
+  animation: slideInLeft 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+}
+
+.slide-in-right {
+  opacity: 0;
+  transform: translateX(60px);
+  animation: slideInRight 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+}
+
+@keyframes slideInLeft {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInRight {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* ========== Particle Effect ========== */
+#particles-js {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.particle {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background: var(--teal-400);
+  border-radius: 50%;
+  opacity: 0.6;
+  animation: floatParticle 15s infinite linear;
+}
+
+@keyframes floatParticle {
+  0% {
+    transform: translateY(100vh) translateX(0);
+    opacity: 0;
+  }
+  10% {
+    opacity: 0.6;
+  }
+  90% {
+    opacity: 0.6;
+  }
+  100% {
+    transform: translateY(-100px) translateX(100px);
+    opacity: 0;
+  }
+}
+
+/* ========== Responsive Typography ========== */
+@media (max-width: 768px) {
+  h1 {
+    font-size: 2.5rem !important;
+  }
+  
+  h2 {
+    font-size: 2rem !important;
+  }
+  
+  .specs-table {
+    font-size: 0.85rem;
+  }
+  
+  .chart-label {
+    min-width: 60px;
+    font-size: 0.8rem;
+  }
+  
+  .chart-value {
+    font-size: 0.9rem;
+    min-width: 50px;
+  }
+}
+
+/* ========== Custom Tailwind Extensions ========== */
+.bg-gradient-teal {
+  background: linear-gradient(135deg, var(--teal-400), var(--teal-600));
+}
+
+.text-gradient-teal {
+  background: linear-gradient(135deg, var(--teal-400), var(--teal-600));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.border-gradient-teal {
+  border-image: linear-gradient(135deg, var(--teal-400), var(--teal-600)) 1;
+}