diff --git a/index.html b/index.html
index 35856b3..9de3d32 100644
--- a/index.html
+++ b/index.html
@@ -3,272 +3,616 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>Tootaio — All In One</title>
-  <meta name="description" content="Tootaio — All In One. Self-hosted tools collection." />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Playfair+Display:wght@600;700;900&display=swap" rel="stylesheet">
-  <!-- Optional: feather icons (small) -->
-  <script src="https://unpkg.com/feather-icons"></script>
+  <title>Tootaio — Games First</title>
+  <meta name="description" content="Tootaio — Game studio first, tools second." />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
   <style>
-    :root{
-      --bg-1:#070406;
-      --bg-2:#0f0b0f;
-      --card:#0f0d10;
-      --muted: rgba(255,255,255,0.72);
-      --gold1: #FFD166;
-      --gold2: #F4A261;
-      --accent: linear-gradient(135deg,var(--gold1),var(--gold2));
+    :root {
+      --bg: #07060a;
+      --card: #131118;
+      --card-hover: #1a1721;
+      --muted: #bdb8c4;
+      --text: #f5f3f7;
+      --accent: #ffbf58;
+      --accent-2: #ff7b7b;
+      --accent-gradient: linear-gradient(135deg, var(--accent), var(--accent-2));
+      --gap: 24px;
+      --radius: 16px;
+      --shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+      --transition: all 0.3s ease;
     }
-    *{box-sizing:border-box}
-    html,body{height:100%}
-    body{
-      margin:0;
-      font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;
-      background: radial-gradient(1200px 600px at 10% 10%, rgba(244,162,97,0.06), transparent),
-                  radial-gradient(800px 400px at 90% 90%, rgba(255,209,102,0.04), transparent),
-                  linear-gradient(180deg,var(--bg-1),var(--bg-2));
-      color: #fff; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
-      -webkit-text-size-adjust:100%;
-      padding:32px;
+    
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
     }
-
-    /* Container */
-    .container{max-width:1200px;margin:0 auto}
-
-    /* Header */
-    .header{display:flex;align-items:center;justify-content:space-between;gap:16px}
-    .brand{display:flex;align-items:center;gap:14px}
-    .logo-wrap{width:72px;height:72px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,0.6);}
-    .logo-text{font-family:'Playfair Display',serif;font-weight:700;color:#1b1200;letter-spacing:1px}
-    .brand-meta{line-height:1}
-    .brand-title{font-weight:800;font-size:20px}
-    .brand-sub{font-size:12px;color:var(--muted)}
-
-    /* Hero */
-    .hero{display:flex;flex-wrap:wrap;gap:28px;margin-top:28px}
-    .hero-left{flex:1;min-width:300px}
-    .hero-right{width:480px;min-width:280px}
-    h1{font-family:'Playfair Display',serif;margin:0;font-weight:900;font-size:44px;line-height:1}
-    p.lead{color:var(--muted);margin-top:14px;max-width:700px}
-    .cta-row{margin-top:20px;display:flex;gap:12px}
-    .btn{padding:12px 18px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
-    .btn-primary{background:var(--accent);color:#1b1200;font-weight:700;box-shadow:0 8px 30px rgba(248,176,47,0.12)}
-    .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.08);color:var(--muted)}
-
-    /* glass card */
-    .glass{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border-radius:14px; padding:18px; border:1px solid rgba(255,255,255,0.04); box-shadow:0 10px 30px rgba(6,6,6,0.6)}
-
-    /* Services grid */
-    .services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
-    .service{padding:14px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border:1px solid rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;color:inherit}
-    .service:hover{transform:translateY(-6px);transition:transform 220ms cubic-bezier(.2,.9,.3,1)}
-    .service-title{font-weight:700}
-    .service-desc{font-size:12px;color:var(--muted);margin-top:6px}
-
-    /* Secondary links */
-    .links-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
-    .link-pill{display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);text-decoration:none;color:var(--muted)}
-
+    
+    body {
+      margin: 0;
+      min-height: 100vh;
+      background: linear-gradient(180deg, #050406 0%, #0b0710 100%);
+      color: var(--text);
+      font-family: Inter, system-ui, Segoe UI, Roboto, sans-serif;
+      padding: 32px;
+      line-height: 1.6;
+    }
+    
+    .wrap {
+      max-width: 1280px;
+      margin: 0 auto;
+    }
+    
+    /* Header Styles */
+    header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 20px;
+      margin-bottom: 40px;
+    }
+    
+    .logo {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+      transition: var(--transition);
+    }
+    
+    .logo:hover {
+      transform: translateY(-2px);
+    }
+    
+    .logo-mark {
+      width: 64px;
+      height: 64px;
+      border-radius: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 800;
+      font-family: Playfair Display, serif;
+      background: var(--accent-gradient);
+      color: #251200;
+      box-shadow: 0 8px 30px rgba(255, 150, 0, 0.2);
+      font-size: 22px;
+    }
+    
+    h1 {
+      font-family: Playfair Display, serif;
+      margin: 0;
+      font-size: 36px;
+      font-weight: 800;
+      letter-spacing: -0.5px;
+      background: linear-gradient(to right, #ffbf58, #ff7b7b);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    
+    .subtitle {
+      color: var(--muted);
+      font-size: 14px;
+      margin-top: 8px;
+      font-weight: 400;
+    }
+    
+    .top-controls {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+    }
+    
+    .search {
+      background: rgba(255, 255, 255, 0.03);
+      border: 1px solid rgba(255, 255, 255, 0.06);
+      padding: 12px 16px;
+      border-radius: 12px;
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      transition: var(--transition);
+    }
+    
+    .search:focus-within {
+      border-color: rgba(255, 191, 88, 0.3);
+      box-shadow: 0 0 0 3px rgba(255, 191, 88, 0.1);
+    }
+    
+    .search input {
+      background: transparent;
+      border: 0;
+      outline: none;
+      color: inherit;
+      width: 240px;
+      font-size: 14px;
+    }
+    
+    .search input::placeholder {
+      color: var(--muted);
+    }
+    
+    .btn {
+      padding: 12px 18px;
+      border-radius: 12px;
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      background: rgba(255, 255, 255, 0.03);
+      color: var(--muted);
+      cursor: pointer;
+      transition: var(--transition);
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    
+    .btn:hover {
+      background: rgba(255, 255, 255, 0.06);
+      border-color: rgba(255, 255, 255, 0.12);
+    }
+    
+    /* Main Content */
+    .main {
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      gap: var(--gap);
+      margin-top: 32px;
+    }
+    
+    .section-title {
+      font-size: 20px;
+      font-weight: 700;
+      margin-bottom: 4px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    
+    .section-title i {
+      color: var(--accent);
+      font-size: 18px;
+    }
+    
+    .games, .tools {
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
+      padding: 24px;
+      border-radius: var(--radius);
+      border: 1px solid rgba(255, 255, 255, 0.05);
+      box-shadow: var(--shadow);
+      transition: var(--transition);
+    }
+    
+    .games:hover, .tools:hover {
+      border-color: rgba(255, 255, 255, 0.08);
+    }
+    
+    .games-header, .tools-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+    }
+    
+    .count {
+      font-size: 13px;
+      color: var(--muted);
+      background: rgba(255, 255, 255, 0.03);
+      padding: 4px 10px;
+      border-radius: 20px;
+    }
+    
+    /* Games Grid */
+    .games-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 16px;
+    }
+    
+    .game-card {
+      position: relative;
+      border-radius: 14px;
+      overflow: hidden;
+      cursor: pointer;
+      min-height: 180px;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      padding: 16px;
+      background-size: cover;
+      background-position: center;
+      border: 1px solid rgba(0, 0, 0, 0.3);
+      transition: var(--transition);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    }
+    
+    .game-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 70%);
+      opacity: 0.8;
+      transition: var(--transition);
+    }
+    
+    .game-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
+    }
+    
+    .game-card:hover::before {
+      opacity: 0.9;
+    }
+    
+    .game-card .meta {
+      position: relative;
+      z-index: 2;
+      backdrop-filter: blur(6px);
+      background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
+      padding: 12px;
+      border-radius: 10px;
+      transition: var(--transition);
+    }
+    
+    .game-card:hover .meta {
+      background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7));
+    }
+    
+    .game-title {
+      font-weight: 700;
+      font-size: 16px;
+      margin-bottom: 4px;
+    }
+    
+    .game-sub {
+      font-size: 13px;
+      color: var(--muted);
+      line-height: 1.4;
+    }
+    
+    /* Tools List */
+    .tools-list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    
+    .tool-item {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+      padding: 16px;
+      border-radius: 14px;
+      border: 1px solid rgba(255, 255, 255, 0.05);
+      background: rgba(255, 255, 255, 0.02);
+      cursor: pointer;
+      transition: var(--transition);
+    }
+    
+    .tool-item:hover {
+      transform: translateX(5px);
+      background: rgba(255, 255, 255, 0.05);
+      border-color: rgba(255, 255, 255, 0.08);
+    }
+    
+    .tool-icon {
+      width: 52px;
+      height: 52px;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 700;
+      background: var(--accent-gradient);
+      color: #251200;
+      font-size: 18px;
+      flex-shrink: 0;
+    }
+    
+    .tool-content {
+      flex: 1;
+    }
+    
+    .tool-title {
+      font-weight: 700;
+      font-size: 16px;
+      margin-bottom: 4px;
+    }
+    
+    .tool-desc {
+      font-size: 13px;
+      color: var(--muted);
+      line-height: 1.4;
+    }
+    
     /* Footer */
-    footer{margin-top:36px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.03);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
-
-    /* search */
-    .search{display:flex;align-items:center;background:rgba(255,255,255,0.02);padding:8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
-    .search input{background:transparent;border:0;color:inherit;outline:none;width:260px}
-
-    /* responsiveness */
-    @media (max-width:900px){
-      .hero{flex-direction:column}
-      .hero-right{width:auto}
-      .services-grid{grid-template-columns:1fr}
-      h1{font-size:36px}
+    footer {
+      margin-top: 40px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: var(--muted);
+      font-size: 14px;
+      padding-top: 20px;
+      border-top: 1px solid rgba(255, 255, 255, 0.05);
+    }
+    
+    .footer-brand {
+      font-weight: 600;
+    }
+    
+    .footer-tagline {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    
+    .footer-tagline i {
+      color: var(--accent);
+      font-size: 12px;
+    }
+    
+    /* Responsive */
+    @media (max-width: 1024px) {
+      .main {
+        grid-template-columns: 1fr;
+      }
+      
+      .games-grid {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+    
+    @media (max-width: 768px) {
+      body {
+        padding: 20px;
+      }
+      
+      header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 20px;
+      }
+      
+      .top-controls {
+        width: 100%;
+        justify-content: space-between;
+      }
+      
+      .search input {
+        width: 100%;
+      }
+      
+      .games-grid {
+        grid-template-columns: 1fr;
+      }
+      
+      footer {
+        flex-direction: column;
+        gap: 12px;
+        align-items: flex-start;
+      }
+    }
+    
+    @media (max-width: 480px) {
+      .logo-mark {
+        width: 52px;
+        height: 52px;
+        font-size: 18px;
+      }
+      
+      h1 {
+        font-size: 28px;
+      }
+      
+      .btn {
+        padding: 10px 14px;
+      }
+    }
+    
+    /* Animation */
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    
+    .game-card, .tool-item {
+      animation: fadeIn 0.5s ease-out;
+    }
+    
+    /* Scrollbar */
+    ::-webkit-scrollbar {
+      width: 8px;
+    }
+    
+    ::-webkit-scrollbar-track {
+      background: rgba(255, 255, 255, 0.03);
+      border-radius: 10px;
+    }
+    
+    ::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 10px;
+    }
+    
+    ::-webkit-scrollbar-thumb:hover {
+      background: rgba(255, 255, 255, 0.2);
     }
-
-    /* subtle marble SVG overlay */
-    .marble{position:absolute;right:-120px;top:-120px;opacity:0.06;pointer-events:none}
-
-    /* small helper */
-    .muted{color:var(--muted)}
-
   </style>
 </head>
 <body>
-  <div class="container">
-    <header class="header">
-      <div class="brand">
-        <div class="logo-wrap"><div class="logo-text">T AIO</div></div>
-        <div class="brand-meta">
-          <div class="brand-title">Tootaio</div>
-          <div class="brand-sub">All In One · 私有托管 · 高端体验</div>
+  <div class="wrap">
+    <header>
+      <div class="logo">
+        <div class="logo-mark">T</div>
+        <div>
+          <h1>Tootaio</h1>
+          <div class="subtitle">Game Studio · Tools as a service</div>
         </div>
       </div>
 
-      <div style="display:flex;align-items:center;gap:10px">
-        <div class="search glass">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-          <input id="q" placeholder="Search services... (按回车)" />
+      <div class="top-controls">
+        <div class="search">
+          <i class="fas fa-search"></i>
+          <input id="q" placeholder="查找游戏或工具（回车）" />
         </div>
-        <button id="langBtn" class="btn btn-ghost">中文</button>
+        <button id="langBtn" class="btn">
+          <i class="fas fa-globe"></i>
+          <span>中文</span>
+        </button>
       </div>
     </header>
 
-    <main class="hero">
-      <div class="hero-left">
-        <h1>奢华·私有·一站式 —— <span style="background:linear-gradient(90deg,var(--gold1),var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent">Tootaio</span></h1>
-        <p class="lead">将最常用的自托管服务与精品工具收纳于一处。我们为个人与团队提供稳定、可控且有温度的基础设施体验。</p>
-
-        <div class="cta-row">
-          <a class="btn btn-primary" href="#services">查看服务</a>
-          <a class="btn btn-ghost" href="#contact">联系我们</a>
-        </div>
-
-        <div class="links-row" id="otherLinksRegion"></div>
-
-      </div>
-
-      <div class="hero-right">
-        <div class="glass" id="services">
-          <div style="display:flex;align-items:center;justify-content:space-between">
-            <div>
-              <div style="font-weight:800">精品服务速览</div>
-              <div class="muted" style="font-size:12px;margin-top:6px">点击卡片以在新标签页打开服务</div>
-            </div>
-            <div id="stats" class="muted" style="font-size:12px">加载中…</div>
+    <main class="main">
+      <section class="games" aria-label="Games">
+        <div class="games-header">
+          <div class="section-title">
+            <i class="fas fa-gamepad"></i>
+            <span>Games</span>
           </div>
-
-          <div class="services-grid" id="servicesGrid" style="margin-top:12px"></div>
-
+          <div class="count" id="gamesCount">—</div>
         </div>
-      </div>
+        <div class="games-grid" id="gamesGrid"></div>
+      </section>
 
+      <aside class="tools" aria-label="Tools">
+        <div class="tools-header">
+          <div class="section-title">
+            <i class="fas fa-tools"></i>
+            <span>Tools</span>
+          </div>
+          <div class="count" id="toolsCount">—</div>
+        </div>
+        <div class="tools-list" id="toolsList"></div>
+      </aside>
     </main>
 
-    <footer id="contact">
-      <div>
-        <div style="font-weight:700">Tootaio</div>
-        <div class="muted" style="font-size:13px;margin-top:6px">欲了解更多，请通过下面链接联系。© <span id="year"></span></div>
+    <footer>
+      <div class="footer-brand">Tootaio — <span id="year"></span></div>
+      <div class="footer-tagline">
+        <i class="fas fa-heart"></i>
+        <span>Focused on Games • Tools for ops & creators</span>
       </div>
-      <div id="footerLinks" style="display:flex;gap:12px;align-items:center"></div>
     </footer>
   </div>
 
-  <!-- decorative SVG marble -->
-  <svg class="marble" width="360" height="360" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <defs>
-      <linearGradient id="g1" x1="0%" x2="100%"><stop offset="0%" stop-color="#FFD166" stop-opacity="0.16"/><stop offset="100%" stop-color="#F4A261" stop-opacity="0.08"/></linearGradient>
-    </defs>
-    <circle cx="100" cy="100" r="80" fill="url(#g1)"/>
-  </svg>
+<script>
+  // Minimal default config (falls back if siteConfig.json missing)
+  const defaultSiteConfig = {
+    services: [
+      { name: "supergame.tootaio.com", url: "https://supergame.tootaio.com", description_en: "Our flagship game demo.", description_zh: "我们的旗舰游戏演示。", category: "game", thumbnail: "" },
+      { name: "git.tootaio.com", url: "https://git.tootaio.com", description_en: "Gitea self-host.", description_zh: "代码托管服务。", category: "tool" },
+      { name: "memos.tootaio.com", url: "https://memos.tootaio.com", description_en: "Notes", description_zh: "笔记空间", category: "tool" },
+      { name: "life-restart.tootaio.com", url: "https://life-restart.tootaio.com", description_en: "Mirrored game.", description_zh: "游戏镜像", category: "game" }
+    ]
+  };
 
-  <script>
-    // Default fallback config (your siteConfig.json can override this by being placed next to index.html)
-    const defaultSiteConfig = {};
+  async function loadConfig(){
+    try{
+      const res = await fetch('./siteConfig.json', {cache:'no-store'});
+      if(!res.ok) throw new Error('no siteConfig.json');
+      const cfg = await res.json();
+      return cfg;
+    }catch(e){
+      console.warn('siteConfig.json not found, using default config.');
+      return defaultSiteConfig;
+    }
+  }
 
-    // Try to fetch siteConfig.json; fall back to defaultSiteConfig
-    async function loadConfig(){
-      try{
-        const res = await fetch('./siteConfig.json', {cache:'no-store'});
-        if(!res.ok) throw new Error('no siteConfig.json');
-        const cfg = await res.json();
-        return cfg;
-      }catch(err){
-        console.warn('Using embedded default siteConfig (could not fetch ./siteConfig.json) —', err.message);
-        return defaultSiteConfig;
+  function guessCategory(s){
+    // if not present, try to guess from name/description
+    if(s.category) return s.category;
+    const name = (s.name || '').toLowerCase();
+    const desc = (s.description_en||'' + s.description_zh||'').toLowerCase();
+    if(/game|play|demo|unity|godot|itch|gamepad|pixel/.test(name+desc)) return 'game';
+    return 'tool';
+  }
+
+  function makeThumbPlaceholder(name, size=320){
+    // generate simple SVG data URI with initials
+    const initials = (name || '').split(/[.\\-\\s]/).slice(0,2).map(x=>x[0]?.toUpperCase()||'').join('');
+    const bg = ['#d97706','#ef4444','#7c3aed','#06b6d4','#f59e0b'][Math.abs(name.length)%5];
+    const fg = '#fff';
+    const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${size}' height='${Math.round(size*0.6)}'><rect width='100%' height='100%' fill='${bg}' rx='8'/><text x='50%' y='55%' font-size='36' dominant-baseline='middle' text-anchor='middle' fill='${fg}' font-family='Inter,system-ui'>${initials}</text></svg>`;
+    return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
+  }
+
+  function render(cfg, lang='zh'){
+    const services = (cfg.services || []).map(s => ({...s, category: guessCategory(s)}));
+    const games = services.filter(s => s.category === 'game');
+    const tools = services.filter(s => s.category !== 'game');
+
+    const gamesGrid = document.getElementById('gamesGrid');
+    const toolsList = document.getElementById('toolsList');
+    gamesGrid.innerHTML = '';
+    toolsList.innerHTML = '';
+
+    games.forEach(s => {
+      const thumb = s.thumbnail || makeThumbPlaceholder(s.name);
+      const a = document.createElement('a');
+      a.className = 'game-card';
+      a.href = s.url;
+      a.target = '_blank';
+      a.rel = 'noreferrer';
+      a.style.backgroundImage = `url('${thumb}')`;
+      const meta = document.createElement('div'); meta.className = 'meta';
+      const title = document.createElement('div'); title.className = 'game-title'; title.textContent = s.name;
+      const sub = document.createElement('div'); sub.className = 'game-sub'; sub.textContent = lang === 'zh' ? (s.description_zh || s.description_en || '') : (s.description_en || s.description_zh || '');
+      meta.appendChild(title); meta.appendChild(sub);
+      a.appendChild(meta);
+      gamesGrid.appendChild(a);
+    });
+
+    tools.forEach(s => {
+      const icon = document.createElement('div'); icon.className = 'tool-icon';
+      icon.textContent = (s.name || '').slice(0,2).toUpperCase();
+      const toolContent = document.createElement('div'); toolContent.className = 'tool-content';
+      const tTitle = document.createElement('div'); tTitle.className = 'tool-title'; tTitle.textContent = s.name;
+      const tSub = document.createElement('div'); tSub.className = 'tool-desc'; tSub.textContent = lang === 'zh' ? (s.description_zh || '') : (s.description_en || '');
+      toolContent.appendChild(tTitle); toolContent.appendChild(tSub);
+      const a = document.createElement('a'); a.className = 'tool-item'; a.href = s.url; a.target='_blank'; a.rel='noreferrer';
+      a.appendChild(icon); a.appendChild(toolContent);
+      toolsList.appendChild(a);
+    });
+
+    document.getElementById('gamesCount').textContent = games.length + ' 项目';
+    document.getElementById('toolsCount').textContent = tools.length + ' 项目';
+  }
+
+  (async function init(){
+    const cfg = await loadConfig();
+    let lang = 'zh';
+    render(cfg, lang);
+    document.getElementById('year').textContent = new Date().getFullYear();
+
+    // search
+    const q = document.getElementById('q');
+    q.addEventListener('keydown',(e)=>{
+      if(e.key === 'Enter'){
+        const term = q.value.trim().toLowerCase();
+        if(!term){ render(cfg, lang); return; }
+        const filtered = (cfg.services||[]).filter(s => {
+          const txt = (s.name + ' ' + (s.description_en||'') + ' ' + (s.description_zh||'')).toLowerCase();
+          return txt.includes(term);
+        });
+        render({services:filtered}, lang);
       }
-    }
+    });
 
-    // render helpers
-    function el(tag, props={}, children=null){
-      const e = document.createElement(tag);
-      for(const k in props){
-        if(k === 'class') e.className = props[k];
-        else if(k === 'html') e.innerHTML = props[k];
-        else e.setAttribute(k, props[k]);
-      }
-      if(children){
-        if(Array.isArray(children)) children.forEach(c => e.appendChild(typeof c === 'string' ? document.createTextNode(c) : c));
-        else e.appendChild(typeof children === 'string' ? document.createTextNode(children) : children);
-      }
-      return e;
-    }
+    // keyboard shortcut to focus search
+    window.addEventListener('keydown',(e)=>{ if(e.key === '/' && document.activeElement !== q){ e.preventDefault(); q.focus(); }});
 
-    // icon map
-    const ICONS = {
-      'github': '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3"/><path d="M20 8c0-3.6-2.1-6-4.5-6S11 4.4 11 8c0 3.2 2.2 5.2 5 6 2.8.8 5 2.8 5 6 0 3-2.5 4-4.5 4-1 0-2.5-.3-3.5-1.2"/></svg>',
-      'blog': '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M8 2v4"/><path d="M16 2v4"/></svg>',
-      'discord': '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M8 14s1.5 1 4 1 4-1 4-1"/><path d="M7 7s1.5-.5 5-1c3.5.5 5 1 5 1v8s-1.5-.8-5-1c-3.2.2-5 1-5 1V7z"/></svg>',
-      'video': '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="15" height="10" rx="2"/><polygon points="23 7 16 12 23 17 23 7"/></svg>'
-    };
+    // language toggle
+    document.getElementById('langBtn').addEventListener('click', ()=>{
+      lang = (lang === 'zh') ? 'en' : 'zh';
+      document.getElementById('langBtn').querySelector('span').textContent = (lang === 'zh') ? '中文' : 'EN';
+      render(cfg, lang);
+    });
 
-    function renderServices(cfg, lang='zh'){
-      const grid = document.getElementById('servicesGrid'); grid.innerHTML = '';
-      (cfg.services || []).forEach(s => {
-        const a = el('a',{class:'service',href:s.url,target:'_blank',rel:'noreferrer'});
-        const left = el('div');
-        const title = el('div',{class:'service-title'}, s.name);
-        const desc = el('div',{class:'service-desc'}, lang === 'zh' ? (s.description_zh || s.description_en || '') : (s.description_en || s.description_zh || ''));
-        left.appendChild(title); left.appendChild(desc);
-        const arrow = el('div',{html:'<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>'});
-        a.appendChild(left); a.appendChild(arrow);
-        grid.appendChild(a);
-      });
-      document.getElementById('stats').textContent = (cfg.services||[]).length + ' services';
-    }
-
-    function renderOtherLinks(cfg, lang='zh'){
-      const region = document.getElementById('otherLinksRegion'); region.innerHTML = '';
-      const footer = document.getElementById('footerLinks'); footer.innerHTML = '';
-      (cfg.otherLinks || []).forEach(l =>{
-        const pill = el('a',{class:'link-pill',href:l.url,target:'_blank',rel:'noreferrer',html:(ICONS[l.icon]||ICONS['blog']) + ' ' + (lang==='zh'?l.name_zh:l.name_en)});
-        region.appendChild(pill);
-        const f = el('a',{href:l.url,target:'_blank',rel:'noreferrer',class:'link-pill',html:(ICONS[l.icon]||'') + ' ' + (lang==='zh'?l.name_zh:l.name_en)});
-        footer.appendChild(f);
-      });
-    }
-
-    (async function init(){
-      const cfg = await loadConfig();
-      let lang = 'zh';
-      renderServices(cfg, lang);
-      renderOtherLinks(cfg, lang);
-
-      // year
-      document.getElementById('year').textContent = new Date().getFullYear();
-
-      // search
-      const q = document.getElementById('q');
-      q.addEventListener('keydown', (e)=>{
-        if(e.key === 'Enter'){
-          const term = q.value.trim().toLowerCase();
-          if(!term){ renderServices(cfg, lang); return; }
-          const filtered = (cfg.services||[]).filter(s => (s.name + ' ' + (s.description_en||'') + ' ' + (s.description_zh||'')).toLowerCase().includes(term));
-          renderServices({services:filtered}, lang);
-        }
-      });
-
-      // language toggle
-      const langBtn = document.getElementById('langBtn');
-      langBtn.addEventListener('click', ()=>{
-        lang = (lang === 'zh') ? 'en' : 'zh';
-        langBtn.textContent = (lang === 'zh') ? '中文' : 'EN';
-        renderServices(cfg, lang);
-        renderOtherLinks(cfg, lang);
-        // heading translations (minimal)
-        document.querySelector('.lead').textContent = (lang === 'zh') ? '将最常用的自托管服务与精品工具收纳于一处。我们为个人与团队提供稳定、可控且有温度的基础设施体验。' : 'We gather the most useful self-hosted tools — from source hosting and cloud storage to game asset mirrors. Tootaio delivers luxurious, stable solutions for individuals and teams.';
-      });
-
-      // quick keyboard: '/' focus search
-      window.addEventListener('keydown', (e)=>{ if(e.key === '/' && document.activeElement !== q){ e.preventDefault(); q.focus(); }});
-
-    })();
-
-  </script>
-
-  <!-- Usage notes (as comments):
-    - Drop your siteConfig.json next to this index.html (same folder). The page will try to fetch it and use it.
-    - You can freely edit styles in the <style> block to tune the "luxury" palette and spacing.
-    - If you want small enhancements: add pagination, category tags, icons per service, or a small admin UI to edit siteConfig in-browser.
-  -->
+  })();
+</script>
 </body>
-</html>
+</html>
\ No newline at end of file
