feat(landing): restyle scenario tags as card grid matching open-source matrix

- Replace flat scenario tags with 6-column card grid (mx-sc)
- Each card has colored top-bar, label and one-line description
- Visual style matches .mx cards (surface bg, cut-corner clip-path, hover)
- Stars total kept as separate summary bar below
- Responsive: 3-col at 1080px, 1-col at 760px

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: M09Ic

overrides/home.html

@@ -813,27 +813,54 @@
   margin-top: 0.25rem;
 }
 
-.mx-total-scenarios { flex: 1; }
+.mx-scenarios {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 2px;
+  margin-top: 2px;
+}
 
-.mx-scenario-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.4rem;
-  margin-top: 0.5rem;
-  justify-content: center;
+.mx-sc {
+  --sc: var(--text-3);
+  padding: 1rem 1.1rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
+  text-align: center;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.mx-sc::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: var(--sc);
+  opacity: 0.5;
+}
+
+.mx-sc:hover {
+  background: var(--surface-2);
+  border-color: color-mix(in srgb, var(--sc), transparent 70%);
 }
 
-.mx-scenario-tag {
+.mx-sc-name {
   font-family: var(--heading);
-  font-size: 0.72rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
-  padding: 0.2rem 0.55rem;
   color: var(--sc);
-  background: color-mix(in srgb, var(--sc), transparent 90%);
-  border: 1px solid color-mix(in srgb, var(--sc), transparent 75%);
-  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
+}
+
+.mx-sc-desc {
+  margin-top: 0.35rem;
+  font-size: 0.82rem;
+  color: var(--text-2);
+  line-height: 1.45;
 }
 
 /* ── footer ── */
@@ -902,6 +929,7 @@
   .timeline { grid-template-columns: repeat(3, 1fr); gap: 1.5rem 0; }
   .timeline::before { display: none; }
   .matrix { grid-template-columns: repeat(2, 1fr); }
+  .mx-scenarios { grid-template-columns: repeat(3, 1fr); }
 }
 
 @media (max-width: 760px) {
@@ -933,7 +961,7 @@
   .stats { flex-direction: column; }
   .stat { border-right: none; border-bottom: 1px solid var(--border); }
   .stat:last-child { border-bottom: none; }
-  .timeline, .products, .matrix { grid-template-columns: 1fr !important; }
+  .timeline, .products, .matrix, .mx-scenarios { grid-template-columns: 1fr !important; }
   .mx-total { flex-direction: column; gap: 1.25rem; }
   .foot-in { flex-direction: column; gap: 0.75rem; align-items: flex-start; }
 }
@@ -1061,22 +1089,37 @@ <h2 class="sec-title">开源项目</h2>
         <div class="mx-meta"><span class="mx-lang">Go</span><span class="mx-cat">Pre-Exploit</span></div>
       </a>
     </div>
+    <div class="mx-scenarios rv">
+      <div class="mx-sc" style="--sc:var(--blue)">
+        <div class="mx-sc-name">Pre-Exploit</div>
+        <div class="mx-sc-desc">攻击面发现与漏洞检测</div>
+      </div>
+      <div class="mx-sc" style="--sc:var(--red)">
+        <div class="mx-sc-name">Post-Exploit</div>
+        <div class="mx-sc-desc">权限维持与横向移动</div>
+      </div>
+      <div class="mx-sc" style="--sc:var(--green)">
+        <div class="mx-sc-name">Network</div>
+        <div class="mx-sc-desc">隧道穿透与流量代理</div>
+      </div>
+      <div class="mx-sc" style="--sc:var(--violet)">
+        <div class="mx-sc-name">AI Agent</div>
+        <div class="mx-sc-desc">意图驱动的自主执行</div>
+      </div>
+      <div class="mx-sc" style="--sc:var(--amber)">
+        <div class="mx-sc-name">Library</div>
+        <div class="mx-sc-desc">指纹、模板与基础库</div>
+      </div>
+      <div class="mx-sc" style="--sc:var(--text-3)">
+        <div class="mx-sc-name">Tool</div>
+        <div class="mx-sc-desc">情报聚合与社区协作</div>
+      </div>
+    </div>
     <div class="mx-total rv">
       <div class="mx-total-item">
         <div class="mx-total-num">5,400+</div>
         <div class="mx-total-label">Total Stars</div>
       </div>
-      <div class="mx-total-item mx-total-scenarios">
-        <div class="mx-total-label" style="margin-top:0">覆盖场景</div>
-        <div class="mx-scenario-tags">
-          <span class="mx-scenario-tag" style="--sc:var(--blue)">Pre-Exploit</span>
-          <span class="mx-scenario-tag" style="--sc:var(--red)">Post-Exploit</span>
-          <span class="mx-scenario-tag" style="--sc:var(--green)">Network</span>
-          <span class="mx-scenario-tag" style="--sc:var(--violet)">AI Agent</span>
-          <span class="mx-scenario-tag" style="--sc:var(--amber)">Library</span>
-          <span class="mx-scenario-tag" style="--sc:var(--text-3)">Tool</span>
-        </div>
-      </div>
     </div>
   </div>
 </section>