@agent-link/server 0.1.114 → 0.1.116

package/web/landing.html

@@ -4,20 +4,20 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>AgentLink — Remote Control for Claude Code</title>
-<meta name="description" content="Remote control for Claude Code. Start a task in your terminal, walk away, and continue from your phone or any browser. Auto-reconnects, end-to-end encrypted.">
+<meta name="description" content="Remote control for Claude Code. Start a task in your terminal, walk away, and continue from your phone or any browser. Multi-session, end-to-end encrypted.">
 <meta name="keywords" content="Claude Code, remote control, browser IDE, AI coding assistant, AgentLink, end-to-end encrypted, self-hosted, mobile coding">
 <link rel="canonical" href="https://msclaude.ai/">
 <!-- Open Graph -->
 <meta property="og:type" content="website">
 <meta property="og:title" content="AgentLink — Remote Control for Claude Code">
-<meta property="og:description" content="Remote control for Claude Code. Start a task in your terminal, walk away, and continue from your phone or any browser. Auto-reconnects, end-to-end encrypted.">
+<meta property="og:description" content="Remote control for Claude Code. Start a task in your terminal, walk away, and continue from your phone or any browser. Multi-session, end-to-end encrypted.">
 <meta property="og:url" content="https://msclaude.ai/">
 <meta property="og:image" content="https://msclaude.ai/iPad.png">
 <meta property="og:site_name" content="AgentLink">
 <!-- Twitter Card -->
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:title" content="AgentLink — Remote Control for Claude Code">
-<meta name="twitter:description" content="Remote control for Claude Code. Start a task in your terminal, walk away, and continue from your phone or any browser. Auto-reconnects, end-to-end encrypted.">
+<meta name="twitter:description" content="Remote control for Claude Code. Start a task in your terminal, walk away, and continue from your phone or any browser. Multi-session, end-to-end encrypted.">
 <meta name="twitter:image" content="https://msclaude.ai/iPad.png">
 <link rel="icon" type="image/svg+xml" href="/favicon.svg">
 <script type="application/ld+json">
@@ -25,7 +25,7 @@
   "@context": "https://schema.org",
   "@type": "SoftwareApplication",
   "name": "AgentLink",
-  "description": "Remote control for Claude Code. Start a task in your terminal, walk away, and continue from your phone or any browser. Auto-reconnects, end-to-end encrypted.",
+  "description": "Remote control for Claude Code. Start a task in your terminal, walk away, and continue from your phone or any browser. Multi-session, end-to-end encrypted.",
   "url": "https://msclaude.ai/",
   "applicationCategory": "DeveloperApplication",
   "operatingSystem": "Windows, macOS, Linux",
@@ -34,25 +34,106 @@
 }
 </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');
+
   * { margin: 0; padding: 0; box-sizing: border-box; }
 
   :root {
-    --bg: #0a0a0a;
-    --surface: #141414;
-    --border: #252525;
-    --text: #e8e8e8;
-    --text-dim: #888;
-    --accent: #6c63ff;
-    --accent-hover: #7c74ff;
-    --green: #22c55e;
+    --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: #f59e0b;
+    --amber: #f59e0b;
+    --cyan: #22d3ee;
+    --green: #34d399;
+    --blue: #60a5fa;
   }
 
   body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     background: var(--bg);
     color: var(--text);
     line-height: 1.6;
     min-height: 100vh;
+    overflow-x: hidden;
+  }
+
+  /* ── Ambient Background ── */
+  .ambient {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 0;
+    overflow: hidden;
+  }
+
+  .ambient-orb {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(120px);
+    opacity: 0.35;
+    animation: float 20s ease-in-out infinite;
+  }
+
+  .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;
+  }
+
+  /* ── Content wrapper ── */
+  .content {
+    position: relative;
+    z-index: 2;
   }
 
   /* ── Nav ── */
@@ -60,465 +141,1096 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 1rem 2rem;
-    max-width: 1100px;
+    padding: 1.5rem 2.5rem;
+    max-width: 1200px;
     margin: 0 auto;
   }
 
   .logo {
-    font-size: 1.25rem;
+    font-size: 1.2rem;
     font-weight: 700;
-    letter-spacing: -0.02em;
+    letter-spacing: -0.03em;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
   }
 
-  .logo span { color: var(--accent); }
+  .logo-mark {
+    width: 28px; height: 28px;
+    border-radius: 8px;
+    background: linear-gradient(135deg, var(--accent), var(--rose));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    font-weight: 800;
+    color: #fff;
+    box-shadow: 0 0 20px var(--accent-glow);
+  }
 
-  nav a {
+  .logo-text span {
+    background: linear-gradient(135deg, var(--accent), var(--rose));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .nav-links {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+  }
+
+  .nav-links a {
     color: var(--text-dim);
     text-decoration: none;
-    font-size: 0.9rem;
-    transition: color 0.2s;
+    font-size: 0.85rem;
+    font-weight: 500;
+    transition: color 0.3s;
+    letter-spacing: 0.02em;
+  }
+
+  .nav-links a:hover { color: var(--text); }
+
+  .nav-gh {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    background: var(--surface);
+    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);
   }
 
-  nav a:hover { color: var(--text); }
+  .nav-gh svg { width: 16px; height: 16px; fill: currentColor; }
 
   /* ── Hero ── */
   .hero {
     text-align: center;
-    padding: 3.5rem 2rem 2rem;
-    max-width: 820px;
+    padding: 5rem 2rem 4rem;
+    max-width: 900px;
     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);
+    border-radius: 100px;
+    padding: 0.4rem 1rem 0.4rem 0.5rem;
+    font-size: 0.8rem;
+    color: var(--accent);
+    font-weight: 500;
+    margin-bottom: 2.5rem;
+    letter-spacing: 0.01em;
+    animation: fadeInUp 0.8s ease-out;
+  }
+
+  .hero-badge-dot {
+    width: 8px; height: 8px;
+    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); }
   }
 
   .hero h1 {
-    font-size: clamp(2.2rem, 5vw, 3.5rem);
+    font-size: clamp(2.8rem, 6vw, 4.5rem);
     font-weight: 800;
-    letter-spacing: -0.03em;
-    line-height: 1.15;
-    margin-bottom: 1.5rem;
+    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;
   }
 
   .hero h1 em {
     font-style: normal;
-    background: linear-gradient(135deg, var(--accent), #a78bfa);
+    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;
   }
 
-  .hero p {
-    font-size: 1.15rem;
-    color: var(--text-dim);
-    max-width: 620px;
-    margin: 0 auto 0.75rem;
+  @keyframes shimmer {
+    0%, 100% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
   }
 
-  .hero p strong {
+  .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); }
+  }
+
+  /* ── CTA Group ── */
+  .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;
+  }
+
+  .cta-primary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: linear-gradient(135deg, var(--accent), #60a5fa);
+    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);
+    border: none;
+    cursor: pointer;
+    font-family: inherit;
   }
 
-  /* ── Install box ── */
-  .install {
+  .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-secondary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
     background: var(--surface);
     border: 1px solid var(--border);
+    color: var(--text);
+    font-weight: 500;
+    font-size: 0.95rem;
+    padding: 0.8rem 1.75rem;
     border-radius: 12px;
-    padding: 2rem 2.5rem;
-    max-width: 600px;
-    margin: 2.5rem auto 4rem;
-    text-align: left;
+    text-decoration: none;
+    transition: all 0.3s;
+    cursor: pointer;
+    font-family: inherit;
   }
 
-  .install-label {
-    font-size: 0.8rem;
-    color: var(--text-dim);
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    margin-bottom: 1rem;
+  .cta-secondary:hover {
+    background: var(--surface-hover);
+    border-color: var(--border-hover);
+    transform: translateY(-2px);
   }
 
-  .install-step {
+  .cta-secondary svg { width: 18px; height: 18px; fill: currentColor; }
+
+  /* ── Terminal Install ── */
+  .terminal {
+    max-width: 520px;
+    margin: 0 auto;
+    background: rgba(10,10,20,0.7);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    overflow: hidden;
+    animation: fadeInUp 0.8s ease-out 0.4s both;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
+  }
+
+  .terminal-bar {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
-    margin-bottom: 0.75rem;
+    gap: 6px;
+    padding: 0.75rem 1rem;
+    background: rgba(255,255,255,0.03);
+    border-bottom: 1px solid var(--border);
   }
 
-  .step-num {
-    width: 24px;
-    height: 24px;
+  .terminal-dot {
+    width: 10px; height: 10px;
     border-radius: 50%;
-    background: var(--accent);
-    color: #fff;
-    font-size: 0.75rem;
-    font-weight: 700;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
   }
 
-  .install-cmd {
-    background: #1a1a2e;
-    border: 1px solid #2a2a4a;
-    border-radius: 8px;
-    padding: 0.6rem 1rem;
-    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
-    font-size: 0.9rem;
-    color: var(--green);
+  .terminal-dot:nth-child(1) { background: #ff5f57; }
+  .terminal-dot:nth-child(2) { background: #ffbd2e; }
+  .terminal-dot:nth-child(3) { background: #28c840; }
+
+  .terminal-title {
     flex: 1;
-    cursor: pointer;
-    position: relative;
-    transition: border-color 0.2s;
+    text-align: center;
+    font-size: 0.72rem;
+    color: var(--text-dim);
+    font-weight: 500;
+    letter-spacing: 0.03em;
   }
 
-  .install-cmd:hover {
-    border-color: var(--accent);
+  .terminal-body {
+    padding: 1.25rem 1.5rem;
+    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
+    font-size: 0.85rem;
+    line-height: 1.8;
   }
 
-  .install-cmd .copy-hint {
-    position: absolute;
-    right: 0.75rem;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 0.7rem;
+  .terminal-line {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    padding: 0.15rem 0.35rem;
+    margin: 0 -0.35rem;
+    border-radius: 6px;
+    transition: background 0.2s;
+  }
+
+  .terminal-line:hover { background: rgba(255,255,255,0.04); }
+
+  .terminal-prompt { color: var(--accent); user-select: none; }
+  .terminal-cmd { color: var(--green); }
+
+  .terminal-output {
     color: var(--text-dim);
-    opacity: 0;
-    transition: opacity 0.2s;
+    font-size: 0.8rem;
+    padding-left: 1.1rem;
+    margin-top: 0.15rem;
   }
 
-  .install-cmd:hover .copy-hint { opacity: 1; }
+  .terminal-output a {
+    color: var(--cyan);
+    text-decoration: none;
+  }
 
-  .install-note {
+  .terminal-copy-toast {
+    position: fixed;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%) translateY(20px);
+    background: var(--accent);
+    color: #fff;
+    padding: 0.5rem 1.25rem;
+    border-radius: 8px;
     font-size: 0.8rem;
-    color: var(--text-dim);
-    margin-top: 1rem;
-    text-align: center;
+    font-weight: 500;
+    opacity: 0;
+    transition: all 0.3s;
+    pointer-events: none;
+    z-index: 100;
+    font-family: 'Inter', sans-serif;
+  }
+
+  .terminal-copy-toast.show {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
   }
 
-  /* ── Device Showcase ── */
+  /* ── Showcase ── */
   .showcase {
-    max-width: 900px;
-    margin: 0 auto 4rem;
+    max-width: 1000px;
+    margin: 6rem auto 0;
     padding: 0 2rem;
     position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
+    display: grid;
+    grid-template-columns: 5fr 2fr;
+    align-items: end;
+    gap: 2rem;
+    animation: fadeInUp 1s ease-out 0.6s both;
+  }
+
+  .showcase::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 120%;
+    height: 120%;
+    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);
+  }
+
+  /* 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;
-    border-radius: 18px;
     overflow: hidden;
-    box-shadow:
-      0 0 0 1px rgba(255,255,255,0.06),
-      0 25px 80px rgba(0,0,0,0.55),
-      0 8px 32px rgba(0,0,0,0.3);
+    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
 
-  .device img {
-    display: block;
-    width: 100%;
-    height: auto;
+  .device:hover {
+    transform: translateY(-8px);
   }
 
+  .device img, .device picture { display: block; width: 100%; height: auto; }
+
   .device-ipad {
-    width: 72%;
-    border-radius: 18px;
+    width: 100%;
+    border-radius: 20px;
     z-index: 1;
+    box-shadow:
+      0 0 0 1px rgba(255,255,255,0.08),
+      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);
+    transform: rotate(-1deg);
+  }
+
+  .device-ipad:hover {
+    transform: rotate(-1deg) translateY(-8px);
   }
 
   .device-iphone {
-    width: 22%;
-    border-radius: 24px;
+    width: 90%;
+    border-radius: 28px;
     z-index: 2;
-    margin-left: -8%;
-    transform: translateY(2%);
+    justify-self: center;
+    align-self: center;
     box-shadow:
-      0 0 0 1px rgba(255,255,255,0.08),
-      0 30px 90px rgba(0,0,0,0.6),
-      0 10px 40px rgba(0,0,0,0.35);
+      0 0 0 1px rgba(255,255,255,0.1),
+      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);
+    transform: rotate(2deg);
   }
 
-  .showcase::before {
+  .device-iphone:hover {
+    transform: rotate(2deg) translateY(-8px);
+  }
+
+  /* ── Divider ── */
+  .section-divider {
+    max-width: 200px;
+    margin: 6rem auto;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--border-hover), transparent);
+  }
+
+  /* ── Philosophy Section ── */
+  .philosophy {
+    max-width: 700px;
+    margin: 0 auto;
+    padding: 0 2rem;
+    text-align: center;
+  }
+
+  .philosophy-label {
+    font-size: 0.7rem;
+    font-weight: 600;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    color: var(--accent);
+    margin-bottom: 1.5rem;
+  }
+
+  .philosophy h2 {
+    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
+    font-weight: 700;
+    letter-spacing: -0.03em;
+    line-height: 1.25;
+    margin-bottom: 1.5rem;
+  }
+
+  .philosophy h2 em {
+    font-style: normal;
+    color: var(--text-dim);
+  }
+
+  .philosophy p {
+    color: var(--text-mid);
+    font-size: 1.05rem;
+    line-height: 1.8;
+    max-width: 560px;
+    margin: 0 auto;
+  }
+
+  /* ── Bento Grid ── */
+  .bento {
+    max-width: 1000px;
+    margin: 6rem auto;
+    padding: 0 2rem;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: minmax(200px, auto);
+    gap: 1rem;
+  }
+
+  .bento-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);
+  }
+
+  .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;
+  }
+
+  .bento-icon {
+    width: 56px; height: 56px;
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+  }
+
+  .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(245,158,11,0.2), rgba(245,158,11,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); }
+
+  /* Encryption visual */
+  .encrypt-visual {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.72rem;
+    color: var(--text-dim);
+  }
+
+  .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;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 80%;
-    height: 70%;
-    background: radial-gradient(ellipse, rgba(108,99,255,0.12) 0%, transparent 70%);
-    pointer-events: none;
-    z-index: 0;
+    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; }
   }
 
-  /* ── Workflow ── */
+  .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: 800px;
-    margin: 0 auto 5rem;
+    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: 1.8rem;
+    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
     font-weight: 700;
     text-align: center;
-    margin-bottom: 2.5rem;
+    letter-spacing: -0.03em;
+    margin-bottom: 3rem;
   }
 
   .workflow-steps {
+    position: relative;
     display: flex;
     flex-direction: column;
-    gap: 1.25rem;
+    gap: 0;
+  }
+
+  .workflow-steps::before {
+    content: '';
+    position: absolute;
+    left: 23px;
+    top: 48px;
+    bottom: 48px;
+    width: 1px;
+    background: linear-gradient(180deg, var(--accent), var(--rose), var(--cyan), var(--green));
+    opacity: 0.3;
   }
 
   .workflow-step {
     display: flex;
     align-items: flex-start;
-    gap: 1.25rem;
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 1.25rem 1.5rem;
+    gap: 1.5rem;
+    padding: 1.5rem 0;
+    position: relative;
   }
 
-  .workflow-step .step-icon {
-    font-size: 1.5rem;
+  .step-marker {
+    width: 48px; height: 48px;
+    border-radius: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     flex-shrink: 0;
-    width: 2rem;
-    text-align: center;
-    padding-top: 0.1rem;
+    font-size: 1.1rem;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    position: relative;
+    z-index: 1;
   }
 
-  .workflow-step h3 {
+  .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(245,158,11,0.3); }
+  .workflow-step:nth-child(3) .step-marker { border-color: rgba(34,211,238,0.3); }
+  .workflow-step:nth-child(4) .step-marker { border-color: rgba(52,211,153,0.3); }
+
+  .step-content h3 {
     font-size: 1rem;
     font-weight: 600;
-    margin-bottom: 0.3rem;
+    margin-bottom: 0.35rem;
+    letter-spacing: -0.01em;
   }
 
-  .workflow-step p {
-    font-size: 0.9rem;
+  .step-content p {
+    font-size: 0.88rem;
     color: var(--text-dim);
-    line-height: 1.5;
+    line-height: 1.6;
   }
 
-  .workflow-step code {
-    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
-    font-size: 0.85rem;
+  .step-content code {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.8rem;
     color: var(--green);
-    background: #1a1a2e;
-    padding: 0.15rem 0.4rem;
-    border-radius: 4px;
+    background: rgba(52,211,153,0.08);
+    padding: 0.15rem 0.45rem;
+    border-radius: 5px;
+    border: 1px solid rgba(52,211,153,0.12);
   }
 
-  /* ── Features ── */
-  .features {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 1.5rem;
-    max-width: 1000px;
-    margin: 0 auto 5rem;
-    padding: 0 2rem;
+  /* ── Footer ── */
+  footer {
+    text-align: center;
+    padding: 3rem 2rem;
+    color: var(--text-dim);
+    font-size: 0.8rem;
+    position: relative;
   }
 
-  .feature {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 1.5rem;
+  footer::before {
+    content: '';
+    display: block;
+    max-width: 200px;
+    margin: 0 auto 2rem;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--border-hover), transparent);
   }
 
-  .feature-icon {
-    font-size: 1.5rem;
-    margin-bottom: 0.75rem;
+  footer a {
+    color: var(--text-mid);
+    text-decoration: none;
+    transition: color 0.3s;
   }
 
-  .feature h3 {
-    font-size: 1rem;
-    font-weight: 600;
-    margin-bottom: 0.5rem;
+  footer a:hover { color: var(--text); }
+
+  .footer-links {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1.5rem;
+    margin-bottom: 1rem;
   }
 
-  .feature p {
-    font-size: 0.9rem;
-    color: var(--text-dim);
-    line-height: 1.5;
+  .footer-brand {
+    font-weight: 600;
+    letter-spacing: -0.02em;
   }
 
-  /* ── Footer ── */
-  footer {
-    text-align: center;
-    padding: 2rem;
-    color: var(--text-dim);
-    font-size: 0.85rem;
-    border-top: 1px solid var(--border);
+  /* ── 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; }
+    .cta-group { flex-direction: column; }
+    .nav-links { gap: 1rem; }
+    .nav-links a:not(.nav-gh) { display: none; }
+    .encrypt-visual { flex-wrap: wrap; justify-content: center; }
   }
 
-  footer a { color: var(--accent); text-decoration: none; }
-  footer a:hover { text-decoration: underline; }
+  @media (max-width: 640px) {
+    nav { padding: 1rem 1.25rem; }
+    .showcase {
+      margin-top: 3rem;
+      display: flex;
+      justify-content: center;
+      align-items: flex-end;
+      gap: 0;
+    }
+    .showcase::after { display: none; }
+    .device-ipad {
+      width: 78%;
+      transform: rotate(0deg);
+      flex-shrink: 0;
+    }
+    .device-ipad:hover { transform: translateY(-8px); }
+    .device-iphone {
+      width: 28%;
+      transform: rotate(0deg) translateY(5%);
+      margin-left: -12%;
+      flex-shrink: 0;
+      justify-self: auto;
+      align-self: auto;
+    }
+    .device-iphone:hover { transform: translateY(-3%); }
+    .terminal { margin: 0 1rem; }
+    .section-divider { margin: 4rem auto; }
+    .bento { padding: 0 1rem; margin: 4rem auto; }
+    .bento-card { padding: 1.5rem; border-radius: 16px; }
+    .workflow-step { gap: 1rem; }
+    .step-marker { width: 40px; height: 40px; border-radius: 12px; font-size: 1rem; }
+    .workflow-steps::before { left: 19px; }
+  }
 
-  /* ── GitHub Corner ── */
-  .github-corner:hover .octo-arm { animation: octocat-wave 560ms ease-in-out; }
-  @keyframes octocat-wave {
-    0%, 100% { transform: rotate(0); }
-    20%, 60% { transform: rotate(-25deg); }
-    40%, 80% { transform: rotate(10deg); }
+  /* ── Scroll animations ── */
+  .reveal {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: opacity 0.8s ease, transform 0.8s ease;
   }
-  @media (max-width: 500px) {
-    .github-corner:hover .octo-arm { animation: none; }
-    .github-corner .octo-arm { animation: octocat-wave 560ms ease-in-out; }
+
+  .reveal.visible {
+    opacity: 1;
+    transform: translateY(0);
   }
 
   .sr-only {
     position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
+    width: 1px; height: 1px;
+    padding: 0; margin: -1px;
     overflow: hidden;
     clip: rect(0,0,0,0);
     white-space: nowrap;
     border: 0;
   }
-
-  @media (max-width: 640px) {
-    .hero { padding: 2rem 1.5rem 1.5rem; }
-    .install { padding: 1.5rem; margin: 2rem 1rem 3rem; }
-    .showcase { margin-bottom: 3rem; }
-    .device-ipad { width: 78%; }
-    .device-iphone { width: 26%; margin-left: -10%; border-radius: 16px; }
-    .workflow-step { flex-direction: column; gap: 0.75rem; }
-    .workflow-step .step-icon { width: auto; }
-  }
 </style>
 </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">Agent<span>Link</span></div>
+  <div class="logo">
+    <div class="logo-mark">A</div>
+    <div class="logo-text">Agent<span>Link</span></div>
+  </div>
+  <div class="nav-links">
+    <a href="#features">Features</a>
+    <a href="#how-it-works">How It Works</a>
+    <a href="https://github.com/yilee/agentlink" 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>
+      GitHub
+    </a>
+  </div>
 </nav>
-<a href="https://github.com/yilee/agentlink" target="_blank" rel="noopener" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:var(--accent);color:var(--bg);position:absolute;top:0;border:0;right:0;z-index:10" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
 </header>
 
 <main>
+
+<!-- Hero -->
 <section class="hero">
-  <h1>Remote Control for<br><em>Claude Code</em></h1>
-  <p>Start a task in your terminal, close the laptop and go for a walk &mdash; then <strong>pick it up from your phone, a tablet, or any browser</strong>. The session stays alive on your machine.</p>
+  <div class="hero-badge">
+    <div class="hero-badge-dot"></div>
+    Open Source &middot; End-to-End Encrypted
+  </div>
+  <h1>
+    <span class="line">Your Code Follows You.</span>
+    <span class="line"><em>Everywhere.</em></span>
+  </h1>
+  <p class="hero-sub">
+    Start Claude Code on your machine. Walk away.
+    <strong>Pick it up from your phone, a tablet, or any browser</strong> &mdash;
+    fully encrypted, zero configuration.
+  </p>
+  <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>
+      Quick Install
+    </button>
+    <a href="https://github.com/yilee/agentlink" target="_blank" rel="noopener" class="cta-secondary">
+      <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>
+      View on GitHub
+    </a>
+  </div>
+
+  <!-- Terminal -->
+  <div class="terminal">
+    <div class="terminal-bar">
+      <div class="terminal-dot"></div>
+      <div class="terminal-dot"></div>
+      <div class="terminal-dot"></div>
+      <div class="terminal-title">Terminal</div>
+    </div>
+    <div class="terminal-body">
+      <div class="terminal-line" onclick="copyCmd('npm install -g @agent-link/agent')">
+        <span class="terminal-prompt">$</span>
+        <span class="terminal-cmd">npm install -g @agent-link/agent</span>
+      </div>
+      <div class="terminal-line" onclick="copyCmd('agentlink-client start -D')">
+        <span class="terminal-prompt">$</span>
+        <span class="terminal-cmd">agentlink-client start -D</span>
+      </div>
+      <div class="terminal-output">
+        Session ready &rarr; <a>https://msclaude.ai/s/abc123</a>
+      </div>
+    </div>
+  </div>
 </section>
 
-<section class="showcase">
+<!-- Device Showcase -->
+<section class="showcase reveal">
   <div class="device device-ipad">
-    <img src="/iPad.png" alt="AgentLink web interface running Claude Code on an iPad — chat, file editing, and terminal in a browser" loading="eager">
+    <picture>
+      <source srcset="/iPad.webp" type="image/webp">
+      <img src="/iPad.png" alt="AgentLink web interface running Claude Code on an iPad" loading="eager">
+    </picture>
   </div>
   <div class="device device-iphone">
-    <img src="/iPhone.png" alt="AgentLink mobile interface running Claude Code on an iPhone" loading="eager">
+    <picture>
+      <source srcset="/iPhone.webp" type="image/webp">
+      <img src="/iPhone.png" alt="AgentLink mobile interface on iPhone" loading="eager">
+    </picture>
   </div>
 </section>
 
-<section class="install">
-  <div class="install-label">Get started in 30 seconds</div>
-  <div class="install-step">
-    <div class="step-num">1</div>
-    <div class="install-cmd" onclick="copyCmd(this)">
-      npm install -g @agent-link/agent
-      <span class="copy-hint">click to copy</span>
+<div class="section-divider"></div>
+
+<!-- Philosophy -->
+<section class="philosophy reveal">
+  <div class="philosophy-label">Philosophy</div>
+  <h2>Code shouldn't be <em>chained to a desk.</em></h2>
+  <p>
+    AgentLink turns Claude Code into a truly portable experience.
+    One command, one URL &mdash; your AI assistant is accessible from any device,
+    with military-grade encryption and zero accounts required.
+  </p>
+</section>
+
+<div class="section-divider"></div>
+
+<!-- Bento Features -->
+<section class="bento reveal" id="features">
+  <h2 class="sr-only">Features</h2>
+
+  <!-- E2E Encryption — wide -->
+  <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>
+    <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>
+  </div>
+
+  <!-- Zero Config -->
+  <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>
+    <h3>Zero Config</h3>
+    <p>No accounts. No registration. Install, start, open &mdash; done.</p>
+  </div>
+
+  <!-- Any Device -->
+  <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>
+    <h3>Any Device</h3>
+    <p>Phone, tablet, laptop &mdash; any browser becomes your Claude Code terminal.</p>
+  </div>
+
+  <!-- Full Claude Code — wide -->
+  <div class="bento-card wide">
+    <div class="bento-visual">
+      <div class="device-flow">
+        <div class="device-pill">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
+          Terminal
+        </div>
+        <div class="flow-line"></div>
+        <div class="device-pill">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
+          Files
+        </div>
+        <div class="flow-line"></div>
+        <div class="device-pill">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+          Search
+        </div>
+        <div class="flow-line"></div>
+        <div class="device-pill">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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
+        </div>
+      </div>
+    </div>
+    <h3>Full Claude Code Experience</h3>
+    <p>File editing, shell commands, search, multi-turn conversations &mdash; every capability, now in your browser.</p>
+  </div>
+
+  <!-- Self-hostable -->
+  <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>
+    <h3>Self-Hostable</h3>
+    <p>Run your own relay. Full control over your infrastructure and data.</p>
+  </div>
+
+  <!-- Multi Session -->
+  <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>
+    <h3>Multi Session</h3>
+    <p>Run multiple conversations in parallel. Switch between tasks without losing context.</p>
   </div>
-  <div class="install-step">
-    <div class="step-num">2</div>
-    <div class="install-cmd" onclick="copyCmd(this)">
-      agentlink-client start -D
-      <span class="copy-hint">click to copy</span>
+
+  <!-- Password Protection -->
+  <div class="bento-card">
+    <div class="bento-visual">
+      <div class="bento-icon amber">
+        <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="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
+      </div>
     </div>
+    <h3>Optional Password</h3>
+    <p>Add <code style="color:var(--green);font-family:'JetBrains Mono',monospace;font-size:0.8rem">--password</code> to lock your session. Brute-force protection built in.</p>
   </div>
-  <div class="install-note">Open the URL it prints. That's it.</div>
 </section>
 
-<section class="workflow">
-  <h2>How it works</h2>
+<div class="section-divider"></div>
+
+<!-- How It Works -->
+<section class="workflow reveal" id="how-it-works">
+  <div class="workflow-label">How It Works</div>
+  <h2>Four steps. No complexity.</h2>
   <div class="workflow-steps">
     <div class="workflow-step">
-      <div class="step-icon">&#128187;</div>
-      <div>
-        <h3>Start the agent on your dev machine</h3>
-        <p>Run <code>agentlink-client start -D</code> in your project directory. It prints a URL like <code>https://msclaude.ai/s/abc123</code>.</p>
+      <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-icon">&#128274;</div>
-      <div>
-        <h3>The relay encrypts everything</h3>
-        <p>Your messages and code travel through the relay server, but it can't read any of it. All traffic is end-to-end encrypted with XSalsa20-Poly1305. The server is a stateless, blind forwarder.</p>
+      <div class="step-marker">02</div>
+      <div class="step-content">
+        <h3>Everything gets encrypted</h3>
+        <p>Your traffic is end-to-end encrypted with XSalsa20-Poly1305. The relay server is stateless &mdash; it forwards bytes it cannot read.</p>
       </div>
     </div>
     <div class="workflow-step">
-      <div class="step-icon">&#128241;</div>
-      <div>
-        <h3>Open the URL on any device</h3>
-        <p>Your phone, a tablet, a colleague's laptop &mdash; any browser works. Kick off a refactoring task from your desk, then monitor progress from the couch.</p>
+      <div class="step-marker">03</div>
+      <div class="step-content">
+        <h3>Open from anywhere</h3>
+        <p>Phone, tablet, a friend's laptop &mdash; open the URL in any browser. Start a task from your desk, check progress from bed.</p>
       </div>
     </div>
     <div class="workflow-step">
-      <div class="step-icon">&#128260;</div>
-      <div>
-        <h3>Pick up where you left off</h3>
-        <p>Full session history from Claude Code's own logs. Resume any past conversation, switch projects, change working directories &mdash; all from the browser.</p>
+      <div class="step-marker">04</div>
+      <div class="step-content">
+        <h3>Resume any session</h3>
+        <p>Full history from Claude Code's own logs. Resume conversations, switch projects, change working directories &mdash; all from the browser.</p>
       </div>
     </div>
   </div>
 </section>
 
-<section class="features">
-  <h2 class="sr-only">Features</h2>
-  <div class="feature">
-    <div class="feature-icon">&#9889;</div>
-    <h3>Zero config</h3>
-    <p>Install, start, open the URL. No accounts, no registration, no configuration files.</p>
-  </div>
-  <div class="feature">
-    <div class="feature-icon">&#128274;</div>
-    <h3>Optional password protection</h3>
-    <p>Add <code style="color:var(--green)">--password</code> to lock your session. Brute-force protection built in.</p>
-  </div>
-  <div class="feature">
-    <div class="feature-icon">&#128196;</div>
-    <h3>Full Claude Code</h3>
-    <p>File editing, bash commands, search, multi-turn conversations &mdash; everything Claude Code can do, in your browser.</p>
-  </div>
-  <div class="feature">
-    <div class="feature-icon">&#127760;</div>
-    <h3>Works on any device</h3>
-    <p>Responsive UI for phones, tablets, and desktops. Use Claude Code from anywhere with a browser.</p>
-  </div>
-  <div class="feature">
-    <div class="feature-icon">&#128260;</div>
-    <h3>Auto-reconnect</h3>
-    <p>Laptop sleeps, Wi-Fi drops, network switches &mdash; the agent reconnects automatically when it's back online. No lost sessions.</p>
-  </div>
-  <div class="feature">
-    <div class="feature-icon">&#128679;</div>
-    <h3>Self-hostable</h3>
-    <p>Run your own relay server with <code style="color:var(--green)">@agent-link/server</code>. Full control over your infrastructure.</p>
-  </div>
-</section>
 </main>
 
 <footer>
-  AgentLink &mdash; Open Source on <a href="https://github.com/yilee/agentlink" rel="noopener">GitHub</a>
+  <div class="footer-links">
+    <span class="footer-brand">AgentLink</span>
+    <a href="https://github.com/yilee/agentlink" rel="noopener">GitHub</a>
+  </div>
+  <p>Open source. Free forever.</p>
 </footer>
 
+</div>
+
+<!-- Toast for copy -->
+<div class="terminal-copy-toast" id="copyToast">Copied to clipboard</div>
+
 <script>
-function copyCmd(el) {
-  const text = el.childNodes[0].textContent.trim();
+function copyCmd(text) {
   navigator.clipboard.writeText(text);
-  const hint = el.querySelector('.copy-hint');
-  hint.textContent = 'copied!';
-  hint.style.opacity = '1';
-  setTimeout(() => { hint.textContent = 'click to copy'; hint.style.opacity = ''; }, 1500);
+  showToast();
 }
+
+function copyInstall() {
+  navigator.clipboard.writeText('npm install -g @agent-link/agent && agentlink-client start -D');
+  showToast();
+}
+
+function showToast() {
+  const toast = document.getElementById('copyToast');
+  toast.classList.add('show');
+  setTimeout(() => toast.classList.remove('show'), 1800);
+}
+
+// Scroll reveal
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      entry.target.classList.add('visible');
+    }
+  });
+}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
+
+document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
 </script>
 
 </body>