@agent-link/server 0.1.301 → 0.1.303

package/web/dist/landing.html

@@ -40,32 +40,19 @@
 }
 </script>
 <style>
-  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
 
   * { margin: 0; padding: 0; box-sizing: border-box; }
 
-  html {
-    overflow-x: hidden;
-    overscroll-behavior-x: none;
-  }
-
   :root {
-    --bg: #06080f;
-    --surface: rgba(255,255,255,0.03);
-    --surface-hover: rgba(255,255,255,0.06);
-    --border: rgba(255,255,255,0.06);
-    --border-hover: rgba(255,255,255,0.12);
-    --text: #eaeaea;
-    --text-dim: rgba(255,255,255,0.45);
-    --text-mid: rgba(255,255,255,0.65);
-    --accent: #3b82f6;
-    --accent-soft: rgba(59,130,246,0.15);
-    --accent-glow: rgba(59,130,246,0.4);
-    --rose: #f43f5e;
-    --amber: #f59e0b;
-    --cyan: #22d3ee;
-    --green: #34d399;
-    --blue: #60a5fa;
+    --bg: #ffffff;
+    --surface: #f7f8fa;
+    --border: #e5e7eb;
+    --text: #1a1a1a;
+    --text-secondary: #6b7280;
+    --accent: #2563eb;
+    --accent-light: #eff4ff;
+    --code-bg: #1e293b;
   }
 
   body {
@@ -73,88 +60,7 @@
     background: var(--bg);
     color: var(--text);
     line-height: 1.6;
-    min-height: 100vh;
-    overflow-x: hidden;
-    overscroll-behavior-x: none;
-    position: relative;
-    width: 100%;
-  }
-
-  /* ── Ambient Background ── */
-  .ambient {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 0;
-    overflow: hidden;
-    contain: strict;
-    will-change: transform;
-  }
-
-  .ambient-orb {
-    position: absolute;
-    border-radius: 50%;
-    filter: blur(120px);
-    opacity: 0.35;
-    animation: float 20s ease-in-out infinite;
-    will-change: transform;
-    contain: layout style;
-  }
-
-  .ambient-orb:nth-child(1) {
-    width: 600px; height: 600px;
-    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
-    top: -10%; left: -5%;
-    animation-delay: 0s;
-    animation-duration: 25s;
-  }
-
-  .ambient-orb:nth-child(2) {
-    width: 500px; height: 500px;
-    background: radial-gradient(circle, var(--rose) 0%, transparent 70%);
-    top: 20%; right: -10%;
-    animation-delay: -8s;
-    animation-duration: 22s;
-  }
-
-  .ambient-orb:nth-child(3) {
-    width: 400px; height: 400px;
-    background: radial-gradient(circle, var(--cyan) 0%, transparent 70%);
-    bottom: 10%; left: 20%;
-    animation-delay: -15s;
-    animation-duration: 28s;
-  }
-
-  @keyframes float {
-    0%, 100% { transform: translate(0, 0) scale(1); }
-    25% { transform: translate(30px, -40px) scale(1.05); }
-    50% { transform: translate(-20px, 20px) scale(0.95); }
-    75% { transform: translate(40px, 10px) scale(1.02); }
-  }
-
-  /* ── Grain overlay ── */
-  .grain {
-    position: fixed;
-    top: 0; left: 0;
-    width: 100%; height: 100%;
-    pointer-events: none;
-    z-index: 1;
-    opacity: 0.025;
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
-    background-repeat: repeat;
-    background-size: 256px 256px;
-    will-change: transform;
-    contain: strict;
-  }
-
-  /* ── Content wrapper ── */
-  .content {
-    position: relative;
-    z-index: 2;
-    overflow-x: hidden;
+    -webkit-font-smoothing: antialiased;
   }
 
   /* ── Nav ── */
@@ -162,253 +68,162 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 1.5rem 2.5rem;
-    max-width: 1200px;
+    padding: 1.25rem 2rem;
+    max-width: 1080px;
     margin: 0 auto;
   }
 
   .logo {
-    font-size: 1.2rem;
-    font-weight: 700;
-    letter-spacing: -0.03em;
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: var(--text);
+    letter-spacing: -0.02em;
   }
 
-  .logo-mark {
-    width: 28px; height: 28px;
-    border-radius: 8px;
-    box-shadow: 0 0 20px var(--accent-glow);
-  }
-
-  .logo-text span {
-    background: linear-gradient(135deg, var(--accent), var(--rose));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-  }
+  .logo img { width: 26px; height: 26px; border-radius: 6px; }
 
   .nav-links {
     display: flex;
     align-items: center;
-    gap: 2rem;
+    gap: 1.5rem;
   }
 
   .nav-links a {
-    color: var(--text-dim);
+    color: var(--text-secondary);
     text-decoration: none;
-    font-size: 0.85rem;
+    font-size: 0.875rem;
     font-weight: 500;
-    transition: color 0.3s;
-    letter-spacing: 0.02em;
   }
 
   .nav-links a:hover { color: var(--text); }
 
   .nav-gh {
-    display: flex;
+    display: inline-flex;
     align-items: center;
-    gap: 0.4rem;
-    background: var(--surface);
+    gap: 0.35rem;
     border: 1px solid var(--border);
     border-radius: 8px;
-    padding: 0.45rem 0.85rem;
-    transition: all 0.3s;
-  }
-
-  .nav-gh:hover {
-    background: var(--surface-hover);
-    border-color: var(--border-hover);
+    padding: 0.4rem 0.75rem;
   }
 
   .nav-gh svg { width: 16px; height: 16px; fill: currentColor; }
 
   .nav-lang {
-    font-size: 0.8rem;
-    color: var(--text-dim);
-    padding: 0.35rem 0.7rem;
     border: 1px solid var(--border);
     border-radius: 6px;
-    transition: all 0.3s;
-  }
-
-  .nav-lang:hover {
-    color: var(--text);
-    border-color: var(--border-hover);
+    padding: 0.3rem 0.6rem;
+    font-size: 0.8rem;
   }
 
   /* ── Hero ── */
   .hero {
     text-align: center;
-    padding: 5rem 2rem 4rem;
-    max-width: 900px;
+    padding: 5rem 2rem 3rem;
+    max-width: 720px;
     margin: 0 auto;
-    position: relative;
   }
 
   .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
-    background: var(--accent-soft);
-    border: 1px solid rgba(59,130,246,0.2);
+    background: var(--accent-light);
+    border: 1px solid #dbeafe;
     border-radius: 100px;
-    padding: 0.4rem 1rem 0.4rem 0.5rem;
+    padding: 0.35rem 1rem;
     font-size: 0.8rem;
     color: var(--accent);
     font-weight: 500;
-    margin-bottom: 2.5rem;
-    letter-spacing: 0.01em;
-    animation: fadeInUp 0.8s ease-out;
+    margin-bottom: 2rem;
   }
 
   .hero-badge-dot {
-    width: 8px; height: 8px;
+    width: 7px; height: 7px;
     border-radius: 50%;
-    background: var(--green);
-    box-shadow: 0 0 8px var(--green);
-    animation: pulse 2s ease-in-out infinite;
-  }
-
-  @keyframes pulse {
-    0%, 100% { opacity: 1; transform: scale(1); }
-    50% { opacity: 0.6; transform: scale(0.85); }
+    background: #22c55e;
   }
 
   .hero h1 {
-    font-size: clamp(2.8rem, 6vw, 4.5rem);
-    font-weight: 800;
-    letter-spacing: -0.04em;
-    line-height: 1.08;
-    margin-bottom: 1.75rem;
-    animation: fadeInUp 0.8s ease-out 0.1s both;
-  }
-
-  .hero h1 .line {
-    display: block;
+    font-size: clamp(2.4rem, 5vw, 3.5rem);
+    font-weight: 700;
+    letter-spacing: -0.03em;
+    line-height: 1.15;
+    margin-bottom: 1.5rem;
+    color: var(--text);
   }
 
   .hero h1 em {
     font-style: normal;
-    position: relative;
-    background: linear-gradient(135deg, var(--accent), #60a5fa, var(--rose));
-    background-size: 200% 200%;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    animation: shimmer 6s ease-in-out infinite;
-  }
-
-  @keyframes shimmer {
-    0%, 100% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-  }
-
-  .hero-sub {
-    font-size: 1.2rem;
-    color: var(--text-mid);
-    max-width: 600px;
-    margin: 0 auto 3rem;
-    font-weight: 400;
-    line-height: 1.7;
-    animation: fadeInUp 0.8s ease-out 0.2s both;
-  }
-
-  .hero-sub strong {
-    color: var(--text);
-    font-weight: 500;
-  }
-
-  @keyframes fadeInUp {
-    from { opacity: 0; transform: translateY(20px); }
-    to { opacity: 1; transform: translateY(0); }
+    color: var(--accent);
   }
 
-  /* ── CTA Group ── */
+  /* ── CTA ── */
   .cta-group {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 1rem;
-    margin-bottom: 1.5rem;
-    animation: fadeInUp 0.8s ease-out 0.3s both;
+    gap: 0.75rem;
+    margin-bottom: 2rem;
   }
 
   .cta-primary {
     display: inline-flex;
     align-items: center;
-    gap: 0.5rem;
-    background: linear-gradient(135deg, var(--accent), #60a5fa);
+    gap: 0.4rem;
+    background: var(--accent);
     color: #fff;
     font-weight: 600;
-    font-size: 0.95rem;
-    padding: 0.8rem 1.75rem;
-    border-radius: 12px;
-    text-decoration: none;
-    transition: all 0.3s;
-    box-shadow: 0 0 30px rgba(59,130,246,0.3), 0 4px 15px rgba(0,0,0,0.3);
+    font-size: 0.9rem;
+    padding: 0.7rem 1.5rem;
+    border-radius: 10px;
     border: none;
     cursor: pointer;
     font-family: inherit;
   }
 
-  .cta-primary:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 0 40px rgba(59,130,246,0.45), 0 8px 25px rgba(0,0,0,0.4);
-  }
+  .cta-primary:hover { background: #1d4ed8; }
 
   .cta-secondary {
     display: inline-flex;
     align-items: center;
-    gap: 0.5rem;
-    background: var(--surface);
+    gap: 0.4rem;
+    background: var(--bg);
     border: 1px solid var(--border);
     color: var(--text);
     font-weight: 500;
-    font-size: 0.95rem;
-    padding: 0.8rem 1.75rem;
-    border-radius: 12px;
+    font-size: 0.9rem;
+    padding: 0.7rem 1.5rem;
+    border-radius: 10px;
     text-decoration: none;
-    transition: all 0.3s;
     cursor: pointer;
     font-family: inherit;
   }
 
-  .cta-secondary:hover {
-    background: var(--surface-hover);
-    border-color: var(--border-hover);
-    transform: translateY(-2px);
-  }
-
-  .cta-secondary svg { width: 18px; height: 18px; fill: currentColor; }
+  .cta-secondary:hover { background: var(--surface); }
+  .cta-secondary svg { width: 16px; height: 16px; fill: currentColor; }
 
-  /* ── Terminal Install ── */
+  /* ── Terminal ── */
   .terminal {
-    max-width: 520px;
+    max-width: 500px;
     margin: 0 auto;
-    background: rgba(10,10,20,0.92);
-    border: 1px solid var(--border);
-    border-radius: 14px;
+    background: var(--code-bg);
+    border-radius: 12px;
     overflow: hidden;
-    animation: fadeInUp 0.8s ease-out 0.4s both;
-    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
+    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
   }
 
   .terminal-bar {
     display: flex;
     align-items: center;
     gap: 6px;
-    padding: 0.75rem 1rem;
-    background: rgba(255,255,255,0.03);
-    border-bottom: 1px solid var(--border);
-  }
-
-  .terminal-dot {
-    width: 10px; height: 10px;
-    border-radius: 50%;
+    padding: 0.7rem 1rem;
+    background: rgba(255,255,255,0.06);
   }
 
+  .terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
   .terminal-dot:nth-child(1) { background: #ff5f57; }
   .terminal-dot:nth-child(2) { background: #ffbd2e; }
   .terminal-dot:nth-child(3) { background: #28c840; }
@@ -416,17 +231,17 @@
   .terminal-title {
     flex: 1;
     text-align: center;
-    font-size: 0.72rem;
-    color: var(--text-dim);
+    font-size: 0.7rem;
+    color: rgba(255,255,255,0.4);
     font-weight: 500;
-    letter-spacing: 0.03em;
   }
 
   .terminal-body {
-    padding: 1.25rem 1.5rem;
-    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
-    font-size: 0.85rem;
+    padding: 1rem 1.25rem;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.82rem;
     line-height: 1.8;
+    color: #e2e8f0;
   }
 
   .terminal-line {
@@ -434,35 +249,31 @@
     align-items: center;
     gap: 0.5rem;
     cursor: pointer;
-    padding: 0.15rem 0.35rem;
-    margin: 0 -0.35rem;
-    border-radius: 6px;
-    transition: background 0.2s;
+    padding: 0.1rem 0.3rem;
+    margin: 0 -0.3rem;
+    border-radius: 4px;
   }
 
-  .terminal-line:hover { background: rgba(255,255,255,0.04); }
+  .terminal-line:hover { background: rgba(255,255,255,0.05); }
 
-  .terminal-prompt { color: var(--accent); user-select: none; }
-  .terminal-cmd { color: var(--green); }
+  .terminal-prompt { color: #60a5fa; user-select: none; }
+  .terminal-cmd { color: #86efac; }
 
   .terminal-output {
-    color: var(--text-dim);
-    font-size: 0.8rem;
-    padding-left: 1.1rem;
-    margin-top: 0.15rem;
+    color: rgba(255,255,255,0.45);
+    font-size: 0.78rem;
+    padding-left: 1rem;
+    margin-top: 0.1rem;
   }
 
-  .terminal-output a {
-    color: var(--cyan);
-    text-decoration: none;
-  }
+  .terminal-output a { color: #67e8f9; text-decoration: none; }
 
   .terminal-copy-toast {
     position: fixed;
     bottom: 2rem;
     left: 50%;
     transform: translateX(-50%) translateY(20px);
-    background: var(--accent);
+    background: var(--text);
     color: #fff;
     padding: 0.5rem 1.25rem;
     border-radius: 8px;
@@ -482,119 +293,36 @@
 
   /* ── Showcase ── */
   .showcase {
-    max-width: 1000px;
-    margin: 6rem auto 0;
+    max-width: 960px;
+    margin: 4rem auto 0;
     padding: 0 2rem;
-    position: relative;
     display: grid;
     grid-template-columns: 5fr 2fr;
     align-items: end;
-    gap: 2rem;
-    animation: fadeInUp 1s ease-out 0.6s both;
-    overflow: hidden;
-  }
-
-  .showcase::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 100%;
-    height: 100%;
-    background:
-      radial-gradient(ellipse at 35% 50%, rgba(59,130,246,0.12) 0%, transparent 55%),
-      radial-gradient(ellipse at 65% 50%, rgba(245,158,11,0.08) 0%, transparent 55%);
-    pointer-events: none;
-    z-index: 0;
-    filter: blur(60px);
-    will-change: transform;
-  }
-
-  /* Subtle connecting line between devices */
-  .showcase::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 1px;
-    height: 35%;
-    background: linear-gradient(180deg, transparent, rgba(59,130,246,0.2), rgba(245,158,11,0.2), transparent);
-    pointer-events: none;
-    z-index: 0;
-  }
-
-  .device {
-    position: relative;
-    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  }
-
-  .device:hover {
-    transform: translateY(-8px);
-  }
-
-  .device img, .device picture { display: block; width: 100%; height: auto; }
-
-  .device-ipad {
-    width: 100%;
-    z-index: 1;
-    transform: rotate(-1deg);
-  }
-
-  .device-ipad:hover {
-    transform: rotate(-1deg) translateY(-8px);
-  }
-
-  .device-ipad img {
-    border-radius: 0;
-    box-shadow: none;
+    gap: 1.5rem;
   }
 
-  .device-iphone {
-    width: 90%;
-    z-index: 2;
-    justify-self: center;
-    align-self: center;
-    transform: rotate(2deg);
-  }
+  .device img { display: block; width: 100%; height: auto; }
 
-  .device-iphone:hover {
-    transform: rotate(2deg) translateY(-8px);
-  }
+  .device-ipad { z-index: 1; }
 
-  .device-iphone img {
-    border-radius: 12%;
-    box-shadow:
-      0 45px 100px rgba(0,0,0,0.55),
-      0 15px 50px rgba(0,0,0,0.35),
-      0 0 80px rgba(245,158,11,0.08);
-  }
-
-  /* ── iPad Carousel ── */
   .ipad-carousel {
     position: relative;
     width: 100%;
     overflow: hidden;
     border-radius: 4.2%;
-    box-shadow:
-      0 40px 100px rgba(0,0,0,0.5),
-      0 15px 50px rgba(0,0,0,0.3),
-      0 0 80px rgba(59,130,246,0.08);
+    box-shadow: 0 8px 40px rgba(0,0,0,0.1);
+    border: 1px solid var(--border);
   }
 
-  .carousel-track {
-    position: relative;
-    width: 100%;
-  }
+  .carousel-track { position: relative; width: 100%; }
 
   .carousel-slide {
     position: absolute;
-    top: 0;
-    left: 0;
+    top: 0; left: 0;
     width: 100%;
     opacity: 0;
-    transition: opacity 0.6s ease;
+    transition: opacity 0.5s ease;
     pointer-events: none;
   }
 
@@ -604,469 +332,223 @@
     pointer-events: auto;
   }
 
-  .carousel-slide img {
-    display: block;
-    width: 100%;
-    height: auto;
-    border-radius: 0;
-    box-shadow: none;
-  }
+  .carousel-slide img { display: block; width: 100%; height: auto; }
 
   .carousel-dots {
     position: absolute;
-    bottom: 12px;
+    bottom: 10px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
-    gap: 8px;
+    gap: 6px;
     z-index: 5;
   }
 
   .carousel-dot {
-    width: 8px;
-    height: 8px;
+    width: 7px; height: 7px;
     border-radius: 50%;
     border: none;
-    background: rgba(255,255,255,0.4);
+    background: rgba(255,255,255,0.45);
     cursor: pointer;
     padding: 0;
-    transition: background 0.3s ease, transform 0.3s ease;
   }
 
-  .carousel-dot.active {
-    background: rgba(255,255,255,0.9);
-    transform: scale(1.2);
-  }
-
-  .carousel-dot:hover {
-    background: rgba(255,255,255,0.7);
-  }
+  .carousel-dot.active { background: rgba(255,255,255,0.9); }
 
   .carousel-label {
     position: absolute;
-    top: 16px;
-    left: 16px;
+    top: 12px; left: 12px;
     display: flex;
     flex-direction: column;
-    gap: 2px;
-    background: rgba(0,0,0,0.75);
-    padding: 8px 14px;
-    border-radius: 10px;
+    gap: 1px;
+    background: rgba(0,0,0,0.65);
+    padding: 6px 12px;
+    border-radius: 8px;
     z-index: 4;
     pointer-events: none;
   }
 
-  .carousel-label-title {
-    font-size: 0.95rem;
-    font-weight: 700;
-    color: #fff;
-    letter-spacing: 0.02em;
+  .carousel-label-title { font-size: 0.85rem; font-weight: 700; color: #fff; }
+  .carousel-label-desc { font-size: 0.65rem; color: rgba(255,255,255,0.7); }
+
+  .device-iphone {
+    width: 90%;
+    z-index: 2;
+    justify-self: center;
+    align-self: center;
   }
 
-  .carousel-label-desc {
-    font-size: 0.72rem;
-    color: rgba(255,255,255,0.75);
-    font-weight: 400;
+  .device-iphone img {
+    border-radius: 12%;
+    box-shadow: 0 8px 40px rgba(0,0,0,0.12);
   }
 
   /* ── Divider ── */
-  .section-divider {
-    max-width: 200px;
-    margin: 6rem auto;
+  .divider {
+    max-width: 80px;
+    margin: 5rem auto;
     height: 1px;
-    background: linear-gradient(90deg, transparent, var(--border-hover), transparent);
+    background: var(--border);
   }
 
-  /* ── Bento Grid ── */
-  .bento {
-    max-width: 1000px;
-    margin: 6rem auto;
+  /* ── Features ── */
+  .features {
+    max-width: 960px;
+    margin: 0 auto;
     padding: 0 2rem;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    grid-auto-rows: minmax(200px, auto);
-    gap: 1rem;
+    gap: 1.5rem;
   }
 
-  .bento-card {
+  .feature-card {
     background: var(--surface);
     border: 1px solid var(--border);
-    border-radius: 20px;
-    padding: 2rem;
-    position: relative;
-    overflow: hidden;
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-  }
-
-  .bento-card:hover {
-    border-color: var(--border-hover);
-    background: var(--surface-hover);
-    transform: translateY(-4px);
-    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+    border-radius: 14px;
+    padding: 1.75rem;
   }
 
-  .bento-card.wide { grid-column: span 2; }
-  .bento-card.tall { grid-row: span 2; }
-
-  .bento-visual {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 1.5rem;
-    position: relative;
-  }
+  .feature-card.wide { grid-column: span 2; }
 
-  .bento-icon {
-    width: 56px; height: 56px;
-    border-radius: 16px;
+  .feature-icon {
+    width: 40px; height: 40px;
+    border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    background: var(--accent-light);
+    color: var(--accent);
   }
 
-  .bento-icon.purple { background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(59,130,246,0.05)); color: var(--accent); }
-  .bento-icon.rose { background: linear-gradient(135deg, rgba(244,63,94,0.2), rgba(244,63,94,0.05)); color: var(--rose); }
-  .bento-icon.cyan { background: linear-gradient(135deg, rgba(34,211,238,0.2), rgba(34,211,238,0.05)); color: var(--cyan); }
-  .bento-icon.green { background: linear-gradient(135deg, rgba(52,211,153,0.2), rgba(52,211,153,0.05)); color: var(--green); }
-  .bento-icon.amber { background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(245,158,11,0.05)); color: var(--amber); }
-  .bento-icon.blue { background: linear-gradient(135deg, rgba(96,165,250,0.2), rgba(96,165,250,0.05)); color: var(--blue); }
+  .feature-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
 
-  /* Mode toggle visual */
-  .mode-toggle {
-    display: flex;
-    gap: 0;
-    background: rgba(255,255,255,0.04);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    overflow: hidden;
-  }
+  .feature-icon.green { background: #f0fdf4; color: #16a34a; }
+  .feature-icon.cyan { background: #ecfeff; color: #0891b2; }
+  .feature-icon.amber { background: #fffbeb; color: #d97706; }
 
-  .mode-toggle-item {
-    flex: 1;
-    text-align: center;
-    padding: 0.7rem 1rem;
-    position: relative;
-    transition: all 0.3s;
+  .feature-card h3 {
+    font-size: 0.95rem;
+    font-weight: 600;
+    margin-bottom: 0.3rem;
   }
 
-  .mode-toggle-item:not(:last-child) {
-    border-right: 1px solid var(--border);
+  .feature-card p {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    line-height: 1.55;
   }
 
-  .mode-toggle-item.active {
-    background: rgba(59,130,246,0.12);
+  /* Mode visual for wide card */
+  .mode-pills {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
   }
 
-  .mode-toggle-item .mode-icon {
-    width: 32px; height: 32px;
-    margin: 0 auto 0.4rem;
-    border-radius: 8px;
+  .mode-pill {
     display: flex;
     align-items: center;
-    justify-content: center;
-  }
-
-  .mode-toggle-item .mode-icon svg { width: 18px; height: 18px; }
-
-  .mode-toggle-item .mode-icon.chat-icon { background: rgba(59,130,246,0.15); color: var(--accent); }
-  .mode-toggle-item .mode-icon.team-icon { background: rgba(96,165,250,0.15); color: var(--blue); }
-  .mode-toggle-item .mode-icon.loop-icon { background: rgba(52,211,153,0.15); color: var(--green); }
-
-  .mode-toggle-item .mode-name {
-    font-size: 0.8rem;
-    font-weight: 600;
-    margin-bottom: 0.2rem;
+    gap: 0.35rem;
+    padding: 0.4rem 0.75rem;
+    border-radius: 8px;
+    font-size: 0.78rem;
+    font-weight: 500;
+    background: #fff;
+    border: 1px solid var(--border);
     color: var(--text);
   }
 
-  .mode-toggle-item .mode-desc {
-    font-size: 0.68rem;
-    color: var(--text-dim);
-    line-height: 1.4;
-  }
+  .mode-pill svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
+  .mode-pill.active { background: var(--accent-light); border-color: #bfdbfe; color: var(--accent); }
 
-  /* Encryption visual */
+  /* Encrypt visual */
   .encrypt-visual {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: 0.5rem;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.72rem;
-    color: var(--text-dim);
+    color: var(--text-secondary);
+    margin-bottom: 1rem;
   }
 
   .encrypt-block {
-    padding: 0.4rem 0.7rem;
-    border-radius: 8px;
-    background: rgba(255,255,255,0.04);
-    border: 1px solid var(--border);
-    white-space: nowrap;
-  }
-
-  .encrypt-arrow { color: var(--accent); font-size: 1rem; }
-
-  .encrypt-block.locked {
-    color: var(--green);
-    border-color: rgba(52,211,153,0.2);
-    background: rgba(52,211,153,0.05);
-  }
-
-  /* Device flow visual */
-  .device-flow {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
-
-  .device-pill {
-    display: flex;
-    align-items: center;
-    gap: 0.4rem;
-    padding: 0.5rem 0.8rem;
-    border-radius: 10px;
-    background: rgba(255,255,255,0.04);
-    border: 1px solid var(--border);
-    font-size: 0.75rem;
-    color: var(--text-mid);
-  }
-
-  .device-pill svg { width: 14px; height: 14px; fill: currentColor; opacity: 0.6; }
-
-  .flow-line {
-    flex: 1;
-    height: 1px;
-    background: linear-gradient(90deg, var(--border-hover), transparent);
-    position: relative;
-  }
-
-  .flow-line::after {
-    content: '';
-    position: absolute;
-    right: 0; top: -2px;
-    width: 5px; height: 5px;
-    border-radius: 50%;
-    background: var(--accent);
-    box-shadow: 0 0 8px var(--accent-glow);
-    animation: flowPulse 2s ease-in-out infinite;
-  }
-
-  @keyframes flowPulse {
-    0%, 100% { opacity: 0.4; }
-    50% { opacity: 1; }
-  }
-
-  .bento-card h3 {
-    font-size: 1.05rem;
-    font-weight: 600;
-    margin-bottom: 0.4rem;
-    letter-spacing: -0.01em;
-  }
-
-  .bento-card p {
-    font-size: 0.85rem;
-    color: var(--text-dim);
-    line-height: 1.55;
-  }
-
-  /* ── How It Works ── */
-  .workflow {
-    max-width: 700px;
-    margin: 0 auto 6rem;
-    padding: 0 2rem;
-  }
-
-  .workflow-label {
-    font-size: 0.7rem;
-    font-weight: 600;
-    letter-spacing: 0.15em;
-    text-transform: uppercase;
-    color: var(--accent);
-    text-align: center;
-    margin-bottom: 1.5rem;
-  }
-
-  .workflow h2 {
-    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
-    font-weight: 700;
-    text-align: center;
-    letter-spacing: -0.03em;
-    margin-bottom: 3rem;
-  }
-
-  .workflow-steps {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-  }
-
-  .workflow-steps::before {
-    content: '';
-    position: absolute;
-    left: 23px;
-    top: 48px;
-    bottom: 48px;
-    width: 1px;
-    background: linear-gradient(180deg, var(--accent), var(--cyan), var(--green));
-    opacity: 0.3;
-  }
-
-  .workflow-step {
-    display: flex;
-    align-items: flex-start;
-    gap: 1.5rem;
-    padding: 1.5rem 0;
-    position: relative;
-  }
-
-  .step-marker {
-    width: 48px; height: 48px;
-    border-radius: 14px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    font-size: 1.1rem;
-    background: var(--surface);
+    padding: 0.3rem 0.6rem;
+    border-radius: 6px;
+    background: #fff;
     border: 1px solid var(--border);
-    position: relative;
-    z-index: 1;
-  }
-
-  .workflow-step:nth-child(1) .step-marker { border-color: rgba(59,130,246,0.3); }
-  .workflow-step:nth-child(2) .step-marker { border-color: rgba(34,211,238,0.3); }
-  .workflow-step:nth-child(3) .step-marker { border-color: rgba(52,211,153,0.3); }
-
-  .step-content h3 {
-    font-size: 1rem;
-    font-weight: 600;
-    margin-bottom: 0.35rem;
-    letter-spacing: -0.01em;
   }
 
-  .step-content p {
-    font-size: 0.88rem;
-    color: var(--text-dim);
-    line-height: 1.6;
-  }
-
-  .step-content code {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 0.8rem;
-    color: var(--green);
-    background: rgba(52,211,153,0.08);
-    padding: 0.15rem 0.45rem;
-    border-radius: 5px;
-    border: 1px solid rgba(52,211,153,0.12);
-  }
+  .encrypt-arrow { color: var(--accent); }
+  .encrypt-block.locked { color: #16a34a; border-color: #bbf7d0; background: #f0fdf4; }
 
   /* ── Footer ── */
   footer {
     text-align: center;
     padding: 3rem 2rem;
-    color: var(--text-dim);
+    color: var(--text-secondary);
     font-size: 0.8rem;
-    position: relative;
-  }
-
-  footer::before {
-    content: '';
-    display: block;
-    max-width: 200px;
-    margin: 0 auto 2rem;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, var(--border-hover), transparent);
+    border-top: 1px solid var(--border);
+    margin-top: 5rem;
   }
 
-  footer a {
-    color: var(--text-mid);
-    text-decoration: none;
-    transition: color 0.3s;
-  }
-
-  footer a:hover { color: var(--text); }
-
   .footer-links {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 1.5rem;
-    margin-bottom: 1rem;
+    margin-bottom: 0.75rem;
   }
 
-  .footer-brand {
-    font-weight: 600;
-    letter-spacing: -0.02em;
+  .footer-brand { font-weight: 600; color: var(--text); }
+
+  footer a {
+    color: var(--text-secondary);
+    text-decoration: none;
   }
 
+  footer a:hover { color: var(--text); }
+
   /* ── Responsive ── */
   @media (max-width: 768px) {
-    .bento {
-      grid-template-columns: 1fr;
-    }
-    .bento-card.wide { grid-column: span 1; }
-    .bento-card.tall { grid-row: span 1; }
-    .hero { padding: 5rem 1.5rem 3rem; }
+    .features { grid-template-columns: 1fr; }
+    .feature-card.wide { grid-column: span 1; }
+    .hero { padding: 4rem 1.5rem 2rem; }
     .cta-group { flex-direction: column; }
-    .nav-links { gap: 1rem; }
+    .nav-links { gap: 0.75rem; }
     .nav-links a:not(.nav-gh):not(.nav-lang) { display: none; }
-    .encrypt-visual { flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
+    .encrypt-visual { flex-wrap: wrap; justify-content: flex-start; gap: 0.4rem; }
     .encrypt-visual .encrypt-arrow { display: none; }
-    .encrypt-block { font-size: 0.65rem; }
-    .device-flow { flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
-    .device-flow .flow-line { display: none; }
-    .device-pill { font-size: 0.7rem; }
+    .mode-pills { flex-wrap: wrap; }
   }
 
   @media (max-width: 640px) {
     nav { padding: 1rem 1.25rem; }
     .showcase {
-      margin-top: 3rem;
       display: flex;
       justify-content: center;
       align-items: flex-end;
       gap: 0;
+      margin-top: 3rem;
     }
-    .showcase::after { display: none; }
-    .device-ipad {
-      width: 78%;
-      transform: rotate(0deg);
-      flex-shrink: 0;
-    }
-    .device-ipad:hover { transform: translateY(-8px); }
+    .device-ipad { width: 78%; flex-shrink: 0; }
     .device-iphone {
       width: 28%;
-      transform: rotate(0deg) translateY(5%);
+      transform: translateY(5%);
       margin-left: -12%;
       flex-shrink: 0;
-      justify-self: auto;
-      align-self: auto;
     }
-    .device-iphone:hover { transform: translateY(-3%); }
-    .carousel-dots { bottom: 8px; gap: 6px; }
+    .carousel-dots { bottom: 6px; gap: 5px; }
     .carousel-dot { width: 6px; height: 6px; }
-    .carousel-label { top: 8px; left: 8px; padding: 5px 10px; border-radius: 8px; }
-    .carousel-label-title { font-size: 0.8rem; }
-    .carousel-label-desc { font-size: 0.62rem; }
-    .terminal { margin: 0 1rem; max-width: calc(100vw - 2rem); }
-    .terminal-body { padding: 1rem; font-size: 0.75rem; overflow-x: auto; }
-    .terminal-line { gap: 0.4rem; white-space: nowrap; }
-    .terminal-output { font-size: 0.7rem; padding-left: 0.9rem; }
-    .section-divider { margin: 4rem auto; }
-    .bento { padding: 0 1rem; margin: 4rem auto; }
-    .bento-card { padding: 1.5rem; border-radius: 16px; overflow: visible; }
-    .encrypt-visual { gap: 0.4rem; }
-    .encrypt-block { padding: 0.3rem 0.5rem; font-size: 0.6rem; }
-    .device-flow { gap: 0.5rem; }
-    .device-pill { padding: 0.4rem 0.6rem; font-size: 0.65rem; }
-    .workflow-step { gap: 1rem; }
-    .step-marker { width: 40px; height: 40px; border-radius: 12px; font-size: 1rem; }
-    .workflow-steps::before { left: 19px; }
+    .carousel-label { top: 8px; left: 8px; padding: 4px 8px; }
+    .carousel-label-title { font-size: 0.75rem; }
+    .carousel-label-desc { font-size: 0.58rem; }
+    .terminal { margin: 0 1rem; }
+    .terminal-body { padding: 0.75rem 1rem; font-size: 0.75rem; overflow-x: auto; }
+    .features { padding: 0 1rem; }
+    .feature-card { padding: 1.25rem; }
+    .divider { margin: 3.5rem auto; }
   }
 
   .sr-only {
@@ -1082,26 +564,14 @@
 </head>
 <body>
 
-<!-- Ambient background -->
-<div class="ambient" aria-hidden="true">
-  <div class="ambient-orb"></div>
-  <div class="ambient-orb"></div>
-  <div class="ambient-orb"></div>
-</div>
-<div class="grain" aria-hidden="true"></div>
-
-<div class="content">
-
-<!-- Nav -->
 <header>
 <nav>
   <div class="logo">
-    <img class="logo-mark" src="/favicon.svg" alt="AgenticWorker">
-    <div class="logo-text">Agentic<span>Worker</span></div>
+    <img src="/favicon.svg" alt="AgenticWorker">
+    <span>AgenticWorker</span>
   </div>
   <div class="nav-links">
     <a href="#features">Features</a>
-    <a href="#how-it-works">How It Works</a>
     <a href="/zh" class="nav-lang">中文</a>
     <a href="https://github.com/kailunshi_microsoft/AgenticWorker" target="_blank" rel="noopener" class="nav-gh">
       <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
@@ -1119,18 +589,10 @@
     <div class="hero-badge-dot"></div>
     Open Source &middot; End-to-End Encrypted
   </div>
-  <h1>
-    <span class="line">Control Claude Code.</span>
-    <span class="line"><em>From anywhere.</em></span>
-  </h1>
-  <p class="hero-sub">
-    Start Claude Code on your machine. Walk away.
-    <strong>Chat, launch agent teams, or schedule tasks</strong> &mdash;
-    from your phone, tablet, or any browser. End-to-end encrypted, zero config.
-  </p>
+  <h1>Remote Control<br><em>for Claude Code.</em></h1>
   <div class="cta-group">
     <button class="cta-primary" onclick="copyInstall()">
-      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
       Quick Install
     </button>
     <a href="https://github.com/kailunshi_microsoft/AgenticWorker" target="_blank" rel="noopener" class="cta-secondary">
@@ -1139,7 +601,6 @@
     </a>
   </div>
 
-  <!-- Terminal -->
   <div class="terminal">
     <div class="terminal-bar">
       <div class="terminal-dot"></div>
@@ -1202,154 +663,94 @@
   </div>
 </section>
 
-<div class="section-divider"></div>
+<div class="divider"></div>
 
-<!-- Bento Features -->
-<section class="bento" id="features">
+<!-- Features -->
+<section class="features" id="features">
   <h2 class="sr-only">Features</h2>
 
-  <!-- Row 1: Chat | Team | Loop (wide) + Any Device -->
-  <div class="bento-card wide">
-    <div class="bento-visual">
-      <div class="mode-toggle">
-        <div class="mode-toggle-item active">
-          <div class="mode-icon chat-icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
-          </div>
-          <div class="mode-name">Chat</div>
-          <div class="mode-desc">Interactive coding sessions</div>
-        </div>
-        <div class="mode-toggle-item">
-          <div class="mode-icon team-icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-          </div>
-          <div class="mode-name">Team</div>
-          <div class="mode-desc">Parallel sub-agents</div>
-        </div>
-        <div class="mode-toggle-item">
-          <div class="mode-icon loop-icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
-          </div>
-          <div class="mode-name">Loop</div>
-          <div class="mode-desc">Scheduled cron tasks</div>
-        </div>
-      </div>
+  <div class="feature-card wide">
+    <div class="mode-pills">
+      <span class="mode-pill active">
+        <svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+        Chat
+      </span>
+      <span class="mode-pill">
+        <svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+        Team
+      </span>
+      <span class="mode-pill">
+        <svg viewBox="0 0 24 24"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
+        Loop
+      </span>
     </div>
     <h3>Three Modes, One Interface</h3>
     <p>Chat with Claude interactively, spawn agent teams for complex tasks, or schedule recurring Loop jobs with cron &mdash; all from the same browser tab.</p>
   </div>
 
-  <div class="bento-card">
-    <div class="bento-visual">
-      <div class="bento-icon cyan">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
-      </div>
+  <div class="feature-card">
+    <div class="feature-icon cyan">
+      <svg viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
     </div>
     <h3>Any Device</h3>
     <p>Phone, tablet, laptop &mdash; any browser becomes your Claude Code terminal.</p>
   </div>
 
-  <!-- Row 2: E2E Encryption (wide) + Self-Hostable -->
-  <div class="bento-card wide">
-    <div class="bento-visual">
-      <div class="encrypt-visual">
-        <div class="encrypt-block">hello world</div>
-        <div class="encrypt-arrow">&rarr;</div>
-        <div class="encrypt-block locked">x9f#k2$mQ...</div>
-        <div class="encrypt-arrow">&rarr;</div>
-        <div class="encrypt-block">hello world</div>
-      </div>
+  <div class="feature-card wide">
+    <div class="encrypt-visual">
+      <div class="encrypt-block">hello world</div>
+      <div class="encrypt-arrow">&rarr;</div>
+      <div class="encrypt-block locked">x9f#k2$mQ...</div>
+      <div class="encrypt-arrow">&rarr;</div>
+      <div class="encrypt-block">hello world</div>
     </div>
     <h3>End-to-End Encrypted</h3>
-    <p>XSalsa20-Poly1305 encryption. The relay server is a blind forwarder &mdash; it never sees your code, your prompts, or your data.</p>
+    <p>XSalsa20-Poly1305 encryption. The relay server is a blind forwarder &mdash; it never sees your code, prompts, or data.</p>
   </div>
 
-  <div class="bento-card">
-    <div class="bento-visual">
-      <div class="bento-icon green">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>
-      </div>
+  <div class="feature-card">
+    <div class="feature-icon green">
+      <svg viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>
     </div>
     <h3>Self-Hostable</h3>
     <p>Run your own relay server. Your infrastructure, your rules, your data.</p>
   </div>
 
-  <!-- Row 3: Multi-Agent Teams + Multi Session + Zero Config -->
-  <div class="bento-card">
-    <div class="bento-visual">
-      <div class="bento-icon blue">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-      </div>
+  <div class="feature-card">
+    <div class="feature-icon">
+      <svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
     </div>
     <h3>Multi-Agent Teams</h3>
     <p>Spawn parallel Claude subagents to tackle complex tasks. Live kanban board, activity feed, and team history.</p>
   </div>
 
-  <div class="bento-card">
-    <div class="bento-visual">
-      <div class="bento-icon blue">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="8" height="8" rx="1.5"></rect><rect x="14" y="3" width="8" height="8" rx="1.5"></rect><rect x="2" y="13" width="8" height="8" rx="1.5"></rect><rect x="14" y="13" width="8" height="8" rx="1.5"></rect></svg>
-      </div>
+  <div class="feature-card">
+    <div class="feature-icon">
+      <svg viewBox="0 0 24 24"><rect x="2" y="3" width="8" height="8" rx="1.5"></rect><rect x="14" y="3" width="8" height="8" rx="1.5"></rect><rect x="2" y="13" width="8" height="8" rx="1.5"></rect><rect x="14" y="13" width="8" height="8" rx="1.5"></rect></svg>
     </div>
     <h3>Multi Session</h3>
     <p>Run multiple conversations in parallel. Switch between tasks without losing context.</p>
   </div>
 
-  <div class="bento-card">
-    <div class="bento-visual">
-      <div class="bento-icon purple">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
-      </div>
+  <div class="feature-card">
+    <div class="feature-icon amber">
+      <svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
     </div>
     <h3>Zero Config</h3>
     <p>No accounts. No registration. Install, start, open &mdash; done.</p>
   </div>
 </section>
 
-<div class="section-divider"></div>
-
-<!-- How It Works -->
-<section class="workflow" id="how-it-works">
-  <div class="workflow-label">How It Works</div>
-  <h2>Three steps. That's it.</h2>
-  <div class="workflow-steps">
-    <div class="workflow-step">
-      <div class="step-marker">01</div>
-      <div class="step-content">
-        <h3>Start the agent</h3>
-        <p>Run <code>agentlink-client start -D</code> in your project directory. It prints a unique session URL.</p>
-      </div>
-    </div>
-    <div class="workflow-step">
-      <div class="step-marker">02</div>
-      <div class="step-content">
-        <h3>Open the URL, anywhere</h3>
-        <p>Phone, tablet, a friend's laptop &mdash; any browser works. Traffic is end-to-end encrypted automatically; the relay never sees your data.</p>
-      </div>
-    </div>
-    <div class="workflow-step">
-      <div class="step-marker">03</div>
-      <div class="step-content">
-        <h3>Chat, collaborate, automate</h3>
-        <p>Run interactive sessions, spawn agent teams for complex tasks, or set up scheduled Loop jobs &mdash; all from the same URL, with full history preserved.</p>
-      </div>
-    </div>
-  </div>
-</section>
-
 </main>
 
 <footer>
   <div class="footer-links">
     <span class="footer-brand">AgenticWorker</span>
     <a href="https://github.com/kailunshi_microsoft/AgenticWorker" rel="noopener">GitHub</a>
+    <a href="https://www.linkedin.com/in/shikailun/" rel="noopener">LinkedIn</a>
   </div>
-  <p>Open source. Free forever. Built for developers who ship from anywhere.</p>
 </footer>
 
-</div>
-
-<!-- Toast for copy -->
 <div class="terminal-copy-toast" id="copyToast">Copied to clipboard</div>
 
 <script>
@@ -1401,13 +802,11 @@ function showToast() {
     });
   });
 
-  // Touch/swipe support
   const track = document.querySelector('.ipad-carousel');
-  let startX = 0, startY = 0, dragging = false;
+  let startX = 0, dragging = false;
 
   track.addEventListener('touchstart', e => {
     startX = e.touches[0].clientX;
-    startY = e.touches[0].clientY;
     dragging = true;
   }, { passive: true });
 
@@ -1415,14 +814,12 @@ function showToast() {
     if (!dragging) return;
     dragging = false;
     const dx = e.changedTouches[0].clientX - startX;
-    const dy = e.changedTouches[0].clientY - startY;
-    if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy)) {
+    if (Math.abs(dx) > 50) {
       goTo(dx < 0 ? current + 1 : current - 1);
       resetAuto();
     }
   }, { passive: true });
 
-  // Mouse drag support for desktop
   track.addEventListener('mousedown', e => {
     startX = e.clientX;
     dragging = true;