website updated

website/styles.css

@@ -91,6 +91,60 @@ a {
   color: var(--primary);
 }
 
+/* 立即尝试 CTA button in nav */
+.nav-cta {
+  background: var(--primary) !important;
+  color: var(--on-primary) !important;
+  margin-left: 8px;
+  font-weight: 800 !important;
+  box-shadow: 0 4px 14px rgba(11, 87, 208, 0.28);
+  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
+}
+
+.nav-cta:hover {
+  background: #0a4eb8 !important;
+  color: var(--on-primary) !important;
+  transform: translateY(-1px);
+  box-shadow: 0 8px 20px rgba(11, 87, 208, 0.34);
+}
+
+/* Hamburger menu button — hidden on desktop */
+.hamburger {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  width: 40px;
+  height: 40px;
+  padding: 8px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  cursor: pointer;
+  z-index: 20;
+}
+
+.hamburger span {
+  display: block;
+  width: 100%;
+  height: 2.5px;
+  border-radius: 2px;
+  background: var(--text);
+  transition: transform 200ms ease, opacity 200ms ease;
+}
+
+.hamburger[aria-expanded="true"] span:nth-child(1) {
+  transform: translateY(7.5px) rotate(45deg);
+}
+
+.hamburger[aria-expanded="true"] span:nth-child(2) {
+  opacity: 0;
+}
+
+.hamburger[aria-expanded="true"] span:nth-child(3) {
+  transform: translateY(-7.5px) rotate(-45deg);
+}
+
 .hero {
   display: grid;
   grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
@@ -431,14 +485,41 @@ h3 {
 
 @media (max-width: 900px) {
   .topbar {
-    align-items: flex-start;
-    flex-direction: column;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .hamburger {
+    display: flex;
   }
 
   .nav {
+    display: none;
     width: 100%;
-    overflow-x: auto;
-    padding-bottom: 2px;
+    flex-direction: column;
+    gap: 2px;
+    padding: 8px 0 4px;
+    border-top: 1px solid rgba(114, 119, 130, 0.14);
+    margin-top: 10px;
+  }
+
+  .nav.open {
+    display: flex;
+  }
+
+  .nav a {
+    width: 100%;
+    padding: 12px 16px;
+    border-radius: 14px;
+    font-size: 1rem;
+  }
+
+  .nav-cta {
+    margin-left: 0 !important;
+    margin-top: 6px;
+    text-align: center;
   }
 
   .hero {
@@ -462,30 +543,94 @@ h3 {
 }
 
 @media (max-width: 640px) {
+  .topbar {
+    padding: 10px 16px;
+  }
+
   .hero,
   .section {
     padding-right: 16px;
     padding-left: 16px;
   }
 
+  .hero {
+    padding-top: 32px;
+    padding-bottom: 32px;
+    gap: 24px;
+  }
+
+  h1 {
+    font-size: clamp(2.8rem, 10vw, 4rem);
+  }
+
+  h2 {
+    font-size: clamp(1.6rem, 5vw, 2.4rem);
+  }
+
+  .lead {
+    font-size: 1rem;
+    margin-top: 16px;
+  }
+
+  .hero-panel {
+    width: 100%;
+  }
+
+  .device-window {
+    width: 100%;
+    border-radius: 20px;
+  }
+
+  .stream-preview {
+    min-height: 180px;
+  }
+
+  .play-symbol {
+    width: 60px;
+    height: 60px;
+  }
+
   .architecture-grid,
   .download-grid,
   .feature-list {
     grid-template-columns: 1fr;
   }
 
-  .actions,
+  .architecture-card,
+  .download-card {
+    padding: 20px;
+    border-radius: 18px;
+  }
+
+  .feature-item {
+    padding: 20px;
+  }
+
+  .actions {
+    flex-direction: column;
+  }
+
   .button,
   .download-link {
     width: 100%;
+    justify-content: center;
   }
 
-  .stream-preview {
-    min-height: 220px;
+  .nav a {
+    min-height: 48px;
+    padding: 14px 16px;
+    font-size: 1.05rem;
+  }
+
+  .nav-cta {
+    min-height: 50px;
+    font-size: 1.05rem;
   }
 
   .footer {
     grid-template-columns: 1fr;
+    gap: 8px;
+    padding: 24px 16px;
   }
 
   .footer span,