docs: redesign website and add starlight docs

1 files changed, 849 insertions, 598 deletions

diff --git a/website/css/style.css b/website/css/style.css
index 93bd95d2..44e9516e 100644
--- a/website/css/style.css
+++ b/website/css/style.css
@@ -9,887 +9,1138 @@
         U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
+:root {
+    --bg: #f7f3ea;
+    --bg-soft: #efe8dc;
+    --paper: #fffdf8;
+    --paper-muted: #f6f0e6;
+    --ink: #151a21;
+    --ink-soft: #303944;
+    --muted: #687381;
+    --muted-2: #8a928f;
+    --line: #ded6c8;
+    --line-strong: #c9bdad;
+    --terminal: #151a21;
+    --terminal-2: #202731;
+    --terminal-3: #2a3340;
+    --accent: #1f6f68;
+    --accent-dark: #124d49;
+    --accent-soft: #d9eee9;
+    --blue: #2563eb;
+    --blue-soft: #dce7ff;
+    --green: #2f8a4f;
+    --yellow: #9a6a00;
+    --red: #c43f5f;
+    --shadow: 0 24px 80px rgb(35 29 21 / 0.12);
+    --radius-lg: 28px;
+    --radius-md: 18px;
+    --radius-sm: 12px;
+    --max: 1160px;
+    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
+        monospace;
+    --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+        "Segoe UI", sans-serif;
+}
+
 *,
 *::before,
 *::after {
-    margin: 0;
-    padding: 0;
     box-sizing: border-box;
-    scrollbar-width: thin;
-    scrollbar-color: var(--border-bright) var(--mantle);
-}
-
-*::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
 }
 
-*::-webkit-scrollbar-track {
-    background: var(--mantle);
+html {
+    background: var(--bg);
+    color: var(--ink);
+    font-family: var(--sans);
+    font-size: 16px;
+    -webkit-font-smoothing: antialiased;
+    scroll-behavior: smooth;
 }
 
-*::-webkit-scrollbar-thumb {
-    background: var(--border-bright);
-    border: 2px solid var(--mantle);
-    border-radius: 999px;
+body {
+    margin: 0;
+    min-width: 320px;
+    background:
+        radial-gradient(circle at 10% 0%, rgb(31 111 104 / 0.16), transparent 30rem),
+        radial-gradient(circle at 90% 4rem, rgb(37 99 235 / 0.12), transparent 28rem),
+        linear-gradient(180deg, #fbf8f1 0%, var(--bg) 24rem);
 }
 
-*::-webkit-scrollbar-thumb:hover {
-    background: var(--text-dim);
+body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    opacity: 0.35;
+    background-image:
+        linear-gradient(rgb(21 26 33 / 0.05) 1px, transparent 1px),
+        linear-gradient(90deg, rgb(21 26 33 / 0.05) 1px, transparent 1px);
+    background-size: 48px 48px;
+    mask-image: linear-gradient(180deg, black, transparent 70%);
 }
 
-*::-webkit-scrollbar-corner {
-    background: var(--mantle);
+img,
+video {
+    max-width: 100%;
+    display: block;
 }
 
-:root {
-    --base: #11111b;
-    --surface: #1e1e2e;
-    --mantle: #181825;
-    --overlay: #262637;
-    --border: #313244;
-    --border-bright: #45475a;
-    --white: #cdd6f4;
-    --text: #a6adc8;
-    --text-dim: #6c7086;
-    --text-faint: #45475a;
-    --green: #a6e3a1;
-    --blue: #89b4fa;
-    --red: #f38ba8;
-    --yellow: #f9e2af;
-    --mauve: #cba6f7;
-    --max-w: 880px;
+button,
+a {
+    font: inherit;
 }
 
-html {
-    background: var(--base);
-    color: var(--text);
-    font-family: "JetBrains Mono", monospace;
-    font-size: 17px;
-    -webkit-font-smoothing: antialiased;
-    scroll-behavior: smooth;
+a {
+    color: inherit;
+    text-decoration: none;
 }
 
-body {
-    overflow-x: clip;
+a:hover {
+    color: var(--accent-dark);
 }
 
 code,
 pre,
 kbd,
 samp {
-    font-family: inherit;
+    font-family: var(--mono);
 }
 
-a {
-    color: var(--text);
-    text-decoration: none;
-    border-bottom: 1px solid var(--border);
+::selection {
+    background: var(--accent-soft);
+}
+
+.site-header {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    backdrop-filter: blur(18px);
+    background: rgb(247 243 234 / 0.78);
+    border-bottom: 1px solid rgb(222 214 200 / 0.7);
+}
+
+.nav {
+    max-width: var(--max);
+    margin: 0 auto;
+    padding: 0.85rem 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.65rem;
+    font-family: var(--mono);
+    font-weight: 700;
+    letter-spacing: -0.04em;
+    color: var(--ink);
+}
+
+.brand img {
+    width: 34px;
+    height: 34px;
+    border-radius: 10px;
+    box-shadow: 0 8px 24px rgb(21 26 33 / 0.12);
+}
+
+.nav-links {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    color: var(--muted);
+    font-size: 0.92rem;
+}
+
+.nav-links a,
+.footer a,
+.inline-links a {
     transition:
-        color 0.15s,
-        border-color 0.15s;
+        color 0.16s ease,
+        border-color 0.16s ease,
+        background 0.16s ease;
 }
-a:hover {
-    color: var(--green);
-    border-color: var(--green);
+
+.nav-cta {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 2.3rem;
+    padding: 0 1rem;
+    border: 1px solid var(--line-strong);
+    border-radius: 999px;
+    background: rgb(255 253 248 / 0.74);
+    color: var(--ink-soft);
+    font-size: 0.9rem;
+    font-weight: 650;
 }
 
-::selection {
-    background: var(--overlay);
-    color: var(--white);
+.nav-cta:hover {
+    border-color: var(--accent);
+    background: var(--accent-soft);
+}
+
+.hero,
+.section,
+.demo-section,
+.footer,
+.final-cta {
+    max-width: var(--max);
+    margin: 0 auto;
+    padding-inline: 1.25rem;
+}
+
+.hero {
+    display: grid;
+    grid-template-columns: minmax(0, 1.04fr) minmax(340px, 0.76fr);
+    gap: 3.25rem;
+    align-items: center;
+    padding-top: 6.25rem;
+    padding-bottom: 3.75rem;
+}
+
+.eyebrow,
+.section-kicker {
+    margin: 0 0 1rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.55rem;
+    color: var(--accent-dark);
+    font-size: 0.78rem;
+    font-weight: 750;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+}
+
+.hero h1,
+.section h2,
+.final-cta h2 {
+    margin: 0;
+    color: var(--ink);
+    letter-spacing: -0.065em;
+    line-height: 0.97;
+}
+
+.hero h1 {
+    max-width: 760px;
+    font-size: clamp(3.2rem, 8vw, 6.7rem);
 }
 
-/* ── State dots ── */
-.dot {
+.hero-lede {
+    max-width: 690px;
+    margin: 1.5rem 0 0;
+    color: var(--ink-soft);
+    font-size: clamp(1.08rem, 2vw, 1.35rem);
+    line-height: 1.6;
+}
+
+.state {
+    font-weight: 750;
+}
+
+.state.blocked {
+    color: var(--red);
+}
+
+.state.working {
+    color: var(--yellow);
+}
+
+.state.done {
+    color: var(--blue);
+}
+
+.status-dot {
     display: inline-block;
-    width: 8px;
-    height: 8px;
+    width: 0.58rem;
+    height: 0.58rem;
     border-radius: 50%;
-    flex-shrink: 0;
+    flex: 0 0 auto;
 }
+
 .dot-blocked {
     background: var(--red);
 }
+
 .dot-working {
-    background: var(--yellow);
+    background: #d89a00;
 }
+
 .dot-done {
     background: var(--blue);
 }
+
 .dot-idle {
     background: var(--green);
 }
 
-.text-blocked {
-    color: var(--red);
-}
-.text-working {
-    color: var(--yellow);
-}
-.text-done {
-    color: var(--blue);
+.hero-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.8rem;
+    margin-top: 2rem;
 }
-.text-idle {
-    color: var(--green);
+
+.hero-actions.center {
+    justify-content: center;
 }
 
-/* ── Sections ── */
-.section {
-    max-width: var(--max-w);
-    margin: 0 auto;
-    padding: 0 2rem;
+.button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 3rem;
+    padding: 0.8rem 1.15rem;
+    border-radius: 999px;
+    font-weight: 750;
+    border: 1px solid transparent;
 }
 
-.section-rule {
-    border: none;
-    border-top: 1px solid var(--border);
-    max-width: var(--max-w);
-    margin: 0 auto;
+.button-primary {
+    background: var(--ink);
+    color: #fffdf8;
+    box-shadow: 0 18px 46px rgb(21 26 33 / 0.18);
 }
 
-.gap {
-    height: 5rem;
+.button-primary:hover {
+    background: var(--accent-dark);
+    color: #fffdf8;
 }
-.gap-lg {
-    height: 7rem;
+
+.button-secondary {
+    background: rgb(255 253 248 / 0.74);
+    border-color: var(--line-strong);
+    color: var(--ink-soft);
 }
-.gap-sm {
-    height: 3rem;
+
+.button-secondary:hover {
+    background: var(--accent-soft);
+    border-color: var(--accent);
 }
 
-.section-heading {
-    display: flex;
+.install-card {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
     align-items: center;
-    gap: 0.65rem;
-    margin-bottom: 2rem;
+    gap: 0.75rem;
+    max-width: 650px;
+    margin-top: 1rem;
+    padding: 0.82rem 0.9rem;
+    border-radius: 999px;
+    background: var(--terminal);
+    color: #eaf1f8;
+    box-shadow: 0 18px 54px rgb(21 26 33 / 0.18);
 }
 
-.section-heading h2 {
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.15em;
-    color: var(--text-dim);
+.install-card code {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 0.86rem;
 }
 
-/* ── Hero ── */
-.hero {
-    position: relative;
-    max-width: var(--max-w);
-    margin: 0 auto;
-    padding: 6rem 2rem 0;
-    overflow: hidden;
+.prompt {
+    color: #67d7ca;
+    font-family: var(--mono);
+    font-weight: 700;
 }
 
-.hero-pasture {
-    position: absolute;
-    inset: 0;
-    overflow: hidden;
-    pointer-events: none;
-    z-index: 0;
+.install-card button {
+    border: 1px solid rgb(255 255 255 / 0.14);
+    border-radius: 999px;
+    background: rgb(255 255 255 / 0.07);
+    color: #d8e3ed;
+    cursor: pointer;
+    padding: 0.42rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 700;
 }
 
-.hero > *:not(.hero-pasture) {
-    position: relative;
-    z-index: 1;
+.install-card button:hover {
+    background: rgb(255 255 255 / 0.14);
 }
 
-.hero .sheep-el {
-    position: absolute;
-    font-family: "JetBrains Mono", monospace;
-    line-height: 1.15;
-    white-space: pre;
-    pointer-events: none;
-    user-select: none;
-    will-change: transform;
+.hero-note {
+    margin: 1rem 0 0;
+    color: var(--muted);
+    font-size: 0.9rem;
 }
 
-.hero-logo {
-    width: 56px;
-    height: 56px;
-    border-radius: 14px;
-    margin-right: 1rem;
-    vertical-align: middle;
+.hero-panel {
+    border-radius: var(--radius-lg);
+    background:
+        linear-gradient(180deg, rgb(255 255 255 / 0.08), transparent),
+        var(--terminal);
+    color: #d8e3ed;
+    padding: 1rem;
+    box-shadow: var(--shadow), inset 0 0 0 1px rgb(255 255 255 / 0.08);
+    transform: rotate(1.25deg);
 }
 
-.hero-name {
-    font-size: 1.5rem;
-    font-weight: 500;
-    text-transform: lowercase;
-    letter-spacing: 0.05em;
-    color: var(--white);
-    margin-bottom: 2rem;
-    display: inline-block;
+.panel-chrome {
+    display: flex;
+    gap: 0.45rem;
+    padding: 0.2rem 0.2rem 0.9rem;
 }
 
-.hero-tagline {
-    font-size: 2.75rem;
-    font-weight: 700;
-    color: var(--white);
-    letter-spacing: -0.03em;
-    line-height: 1.1;
-    margin-bottom: 1.5rem;
+.panel-chrome span {
+    width: 0.72rem;
+    height: 0.72rem;
+    border-radius: 50%;
+    background: #45515f;
 }
 
-.hero-dots {
-    display: flex;
-    gap: 0.6rem;
-    margin-bottom: 3rem;
+.panel-chrome span:nth-child(1) {
+    background: #ee6a72;
 }
 
-.hero-dots .dot {
-    width: 10px;
-    height: 10px;
+.panel-chrome span:nth-child(2) {
+    background: #e4b64b;
 }
 
-.manifesto {
-    font-size: 1rem;
-    line-height: 1.9;
-    color: var(--text-dim);
-    margin-bottom: 3rem;
+.panel-chrome span:nth-child(3) {
+    background: #5cc071;
 }
 
-.manifesto p + p {
-    margin-top: 1rem;
+.panel-title {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.7rem 0.85rem;
+    border-radius: 14px;
+    background: var(--terminal-2);
+    font-family: var(--mono);
+    font-size: 0.82rem;
 }
-.manifesto strong {
-    color: var(--white);
-    font-weight: 500;
+
+.panel-title span:last-child {
+    color: #8fa0b2;
 }
 
-.mouse-native-line span:not(.mouse-native-pill) {
-    transition: color 0.2s ease;
+.workspace-list,
+.agent-list {
+    margin-top: 0.9rem;
+    border: 1px solid rgb(255 255 255 / 0.08);
+    border-radius: 18px;
+    overflow: hidden;
 }
 
-.mouse-native-line:hover span:not(.mouse-native-pill) {
-    color: var(--white);
+.workspace {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 0.72rem;
+    padding: 0.82rem 0.9rem;
+    border-bottom: 1px solid rgb(255 255 255 / 0.07);
+    font-family: var(--mono);
+    font-size: 0.82rem;
 }
 
-.mouse-native-pill {
-    color: var(--green);
-    transition: text-shadow 0.2s ease;
+.workspace:last-child {
+    border-bottom: 0;
 }
 
-.mouse-native-line:hover .mouse-native-pill {
-    text-shadow: 0 0 8px rgba(166, 227, 161, 0.35);
+.workspace.active {
+    background: rgb(103 215 202 / 0.08);
 }
 
-.install-row {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    margin-bottom: 1rem;
-    flex-wrap: wrap;
+.number {
+    color: #788697;
 }
 
-.install-box {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    background: var(--mantle);
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    padding: 0.55rem 0.9rem;
-    font-size: 0.875rem;
-    max-width: 100%;
+.label {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
-.install-box .prompt {
-    color: var(--green);
+.status-pill {
+    border-radius: 999px;
+    padding: 0.18rem 0.48rem;
+    font-size: 0.68rem;
+    font-weight: 700;
 }
-.install-box code {
-    color: var(--text);
-    white-space: normal;
-    overflow-wrap: anywhere;
-    word-break: break-word;
+
+.pill-blocked {
+    color: #ffd9e1;
+    background: rgb(196 63 95 / 0.28);
 }
 
-.copy-btn {
-    background: none;
-    border: 1px solid var(--border);
-    border-radius: 4px;
-    color: var(--text-dim);
-    font-family: inherit;
-    font-size: 0.75rem;
-    padding: 0.35rem 0.6rem;
-    cursor: pointer;
-    transition:
-        color 0.15s,
-        border-color 0.15s;
+.pill-working {
+    color: #ffecc0;
+    background: rgb(216 154 0 / 0.22);
 }
-.copy-btn:hover {
-    border-color: var(--text-dim);
-    color: var(--text);
+
+.pill-done {
+    color: #dce7ff;
+    background: rgb(37 99 235 / 0.26);
 }
-.copy-btn.copied {
-    border-color: var(--green);
-    color: var(--green);
+
+.agent-list {
+    padding: 0.9rem;
+    color: #c6d1dd;
+    font-family: var(--mono);
+    font-size: 0.8rem;
 }
 
-.hero-meta {
-    font-size: 0.7rem;
-    color: var(--text-faint);
-    overflow-wrap: anywhere;
+.agent-list p {
+    margin: 0 0 0.7rem;
+    color: #8fa0b2;
+    font-family: var(--sans);
+    font-size: 0.72rem;
+    font-weight: 750;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
 }
 
-.hero-meta a {
-    color: var(--text-dim);
-    border: none;
+.agent-list div {
+    display: flex;
+    align-items: center;
+    gap: 0.55rem;
+    padding: 0.35rem 0;
 }
-.hero-meta a:hover {
-    color: var(--green);
+
+.terminal-line {
+    margin-top: 0.9rem;
+    padding: 0.82rem 0.9rem;
+    border-radius: 14px;
+    background: #0f1319;
+    color: #a8b4c2;
+    font-family: var(--mono);
+    font-size: 0.72rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
-/* ── Demo ── */
-.demo {
-    max-width: var(--max-w);
-    margin: 0 auto;
-    padding: 0 2rem;
+.demo-section {
+    padding-top: 0;
+    padding-bottom: 6rem;
 }
 
 .demo-frame {
-    border: 1px solid var(--border);
-    border-radius: 8px;
+    position: relative;
     overflow: hidden;
+    border-radius: 30px;
+    background: var(--terminal);
+    box-shadow: var(--shadow), 0 0 0 1px rgb(21 26 33 / 0.08);
 }
 
-.demo-frame video {
+.demo-frame::before {
+    content: "";
     display: block;
-    width: 100%;
-    height: auto;
+    height: 2.4rem;
+    background:
+        radial-gradient(circle at 1.4rem 50%, #ee6a72 0 0.38rem, transparent 0.4rem),
+        radial-gradient(circle at 2.65rem 50%, #e4b64b 0 0.38rem, transparent 0.4rem),
+        radial-gradient(circle at 3.9rem 50%, #5cc071 0 0.38rem, transparent 0.4rem),
+        var(--terminal-2);
+    border-bottom: 1px solid rgb(255 255 255 / 0.08);
 }
 
-/* ── Comparison ── */
-.position-table {
+.demo-frame video {
     width: 100%;
-    border-collapse: collapse;
-    font-size: 0.875rem;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
 }
 
-.position-table th {
-    text-align: left;
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: var(--text-faint);
-    padding: 0.6rem 1rem;
-    border-bottom: 1px solid var(--border);
-    background: var(--mantle);
+.section {
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+    border-top: 1px solid rgb(201 189 173 / 0.68);
 }
 
-.position-table th.herdr-col {
-    color: var(--green);
+.intro-section {
+    padding-top: 3rem;
 }
 
-.position-table td {
-    padding: 0.5rem 1rem;
-    color: var(--text-dim);
-    line-height: 1.55;
-    border-bottom: 1px solid var(--border);
-    vertical-align: top;
+.section-heading,
+.section-heading-wide {
+    margin-bottom: 2rem;
 }
 
-.position-table tr:last-child td {
-    border-bottom: none;
+.section-heading h2,
+.section-heading-wide h2,
+.feature-copy h2,
+.api-copy h2,
+.final-cta h2 {
+    font-size: clamp(2.1rem, 4.8vw, 4.4rem);
+    max-width: 880px;
 }
-.position-table td:first-child {
-    width: 11rem;
-    color: var(--text);
-    font-weight: 500;
+
+.section-heading-wide {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.52fr);
+    gap: 2.5rem;
+    align-items: end;
 }
-.position-table td.herdr-col {
-    color: var(--text);
+
+.section-heading-wide p,
+.feature-copy p,
+.api-copy p,
+.final-cta p {
+    margin: 0;
+    color: var(--ink-soft);
+    font-size: 1.05rem;
+    line-height: 1.75;
 }
 
-.mark {
-    color: var(--text-faint);
+.pillar-grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 1rem;
 }
-.mark-yes {
-    color: var(--green);
+
+.pillar-card,
+.access-card,
+.awareness-card {
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    background: rgb(255 253 248 / 0.74);
+    box-shadow: 0 16px 50px rgb(35 29 21 / 0.06);
 }
 
-/* ── Prose block ── */
-.prose-block {
-    font-size: 0.875rem;
-    line-height: 1.85;
-    color: var(--text-dim);
+.pillar-card {
+    min-height: 270px;
+    padding: 1.35rem;
+    display: flex;
+    flex-direction: column;
 }
 
-.prose-block strong {
-    color: var(--white);
-    font-weight: 500;
+.card-index {
+    width: fit-content;
+    border-radius: 999px;
+    background: var(--accent-soft);
+    color: var(--accent-dark);
+    padding: 0.26rem 0.55rem;
+    font-family: var(--mono);
+    font-size: 0.72rem;
+    font-weight: 700;
 }
 
-.prose-block p + p {
-    margin-top: 1rem;
+.pillar-card h3,
+.access-card h3,
+.awareness-card h3 {
+    margin: 1.25rem 0 0;
+    color: var(--ink);
+    letter-spacing: -0.04em;
+    line-height: 1.08;
+    font-size: 1.45rem;
 }
 
-/* ── Detach flow ── */
-.detach-flow {
-    background: var(--mantle);
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    padding: 1.75rem 2rem;
+.pillar-card p,
+.access-card p,
+.awareness-card p {
+    margin: auto 0 0;
+    color: var(--muted);
+    line-height: 1.65;
 }
 
-.detach-line {
-    font-size: 0.875rem;
-    line-height: 2.2;
-    color: var(--text-dim);
+.feature-split,
+.api-section {
+    display: grid;
+    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
+    gap: 2rem;
+    align-items: center;
 }
 
-.detach-line .prompt {
-    color: var(--green);
+.feature-copy,
+.api-copy {
+    min-width: 0;
+}
+
+.feature-copy .section-kicker,
+.api-copy .section-kicker {
+    margin-bottom: 1rem;
 }
-.detach-line .cmd {
-    color: var(--white);
+
+.feature-copy p,
+.api-copy p {
+    margin-top: 1.3rem;
 }
-.detach-line .key {
-    color: var(--blue);
+
+.check-list {
+    list-style: none;
+    margin: 1.4rem 0 0;
+    padding: 0;
+    display: grid;
+    gap: 0.7rem;
+    color: var(--ink-soft);
+}
+
+.check-list li {
+    position: relative;
+    padding-left: 1.55rem;
 }
-.detach-line .comment {
-    color: var(--text-faint);
+
+.check-list li::before {
+    content: "✓";
+    position: absolute;
+    left: 0;
+    color: var(--accent);
+    font-weight: 800;
 }
-.detach-line .dim {
-    color: var(--text-faint);
+
+.screenshot-card {
+    margin: 0;
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+    background: var(--terminal);
+    box-shadow: var(--shadow);
+    border: 1px solid rgb(21 26 33 / 0.1);
+}
+
+.screenshot-card img {
+    width: 100%;
+    height: 430px;
+    object-fit: cover;
+    object-position: 52% 42%;
 }
 
-/* ── Access modes ── */
 .access-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 1rem;
-    margin-top: 1.5rem;
 }
 
 .access-card {
-    display: grid;
-    grid-template-rows: auto 3.2rem 1fr auto;
-    min-width: 0;
-    background: var(--mantle);
-    border: 1px solid var(--border);
-    border-radius: 6px;
     padding: 1.25rem;
 }
 
-.access-kicker {
-    margin-bottom: 0.75rem;
-    font-size: 0.65rem;
-    font-weight: 600;
+.access-label {
+    color: var(--accent-dark);
+    font-size: 0.72rem;
+    font-weight: 800;
     letter-spacing: 0.14em;
     text-transform: uppercase;
-    color: var(--text-faint);
 }
 
 .access-card h3 {
-    margin-bottom: 0.65rem;
-    font-size: 0.9rem;
-    font-weight: 500;
-    color: var(--white);
+    margin-top: 1rem;
 }
 
 .access-card p {
-    margin-bottom: 1rem;
-    font-size: 0.8rem;
-    line-height: 1.7;
-    color: var(--text-dim);
-}
-
-.mini-flow {
-    display: grid;
-    align-content: start;
-    gap: 0.35rem;
-    min-height: 3.6rem;
-    padding-top: 0.85rem;
-    border-top: 1px solid var(--border);
-    font-size: 0.74rem;
-    line-height: 1.6;
-    overflow-wrap: anywhere;
+    margin-top: 0.85rem;
 }
 
-.mini-flow .prompt {
-    color: var(--green);
-}
-.mini-flow .cmd {
-    color: var(--white);
-}
-.mini-flow .key {
-    color: var(--blue);
-}
-.mini-flow .comment,
-.mini-flow .dim {
-    color: var(--text-faint);
+.access-card pre {
+    margin: 1.2rem 0 0;
+    padding: 1rem;
+    overflow: auto;
+    border-radius: 14px;
+    background: var(--terminal);
+    color: #d8e3ed;
+    font-size: 0.82rem;
+    line-height: 1.55;
 }
 
-/* ── Mobile proof ── */
 .mobile-proof {
     display: grid;
-    grid-template-columns: repeat(2, minmax(0, 260px));
+    grid-template-columns: repeat(2, minmax(0, 230px));
     justify-content: center;
-    gap: 1.25rem;
-    margin-top: 1.75rem;
-}
-
-.phone-shot {
-    min-width: 0;
+    gap: 1rem;
+    margin-top: 2rem;
 }
 
-.phone-shot-frame {
-    padding: 0.75rem;
-    border: 1px solid var(--border);
-    border-radius: 28px;
-    background:
-        radial-gradient(circle at 50% 0%, rgba(137, 180, 250, 0.08), transparent 38%),
-        var(--mantle);
-    box-shadow: inset 0 0 0 1px rgba(205, 214, 244, 0.025);
+.mobile-proof figure {
+    margin: 0;
+    text-align: center;
 }
 
-.phone-shot img {
-    display: block;
+.mobile-proof img {
+    aspect-ratio: 9 / 18;
     width: 100%;
-    height: auto;
-    border: 1px solid var(--border-bright);
-    border-radius: 20px;
-    background: var(--base);
+    object-fit: cover;
+    object-position: top;
+    border-radius: 24px;
+    border: 8px solid var(--terminal);
+    box-shadow: 0 24px 70px rgb(21 26 33 / 0.18);
 }
 
-.phone-shot figcaption {
-    margin-top: 0.65rem;
-    font-size: 0.7rem;
-    color: var(--text-faint);
-    text-align: center;
+.mobile-proof figcaption {
+    margin-top: 0.7rem;
+    color: var(--muted);
+    font-size: 0.85rem;
 }
 
-.mobile-shout {
-    margin-top: 1.25rem;
-    font-size: 0.7rem;
-    color: var(--text-faint);
-    text-align: center;
+.api-section {
+    align-items: stretch;
 }
 
-.mobile-shout a {
-    color: var(--text-dim);
-    border-bottom: 1px solid var(--border-bright);
-}
-.mobile-shout a:hover {
-    color: var(--green);
-    border-color: var(--green);
+.inline-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.8rem;
+    margin-top: 1.5rem;
 }
 
-/* ── Awareness ── */
-.awareness-split {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1.5rem;
-    margin-bottom: 1.5rem;
+.inline-links a {
+    border: 1px solid var(--line-strong);
+    border-radius: 999px;
+    padding: 0.62rem 0.85rem;
+    color: var(--ink-soft);
+    font-weight: 700;
 }
 
-.awareness-panel {
-    display: flex;
-    gap: 1.25rem;
-    align-items: flex-start;
+.inline-links a:hover {
+    border-color: var(--accent);
+    background: var(--accent-soft);
 }
 
-.awareness-panel-img {
-    flex-shrink: 0;
-    width: 240px;
-    border: 1px solid var(--border);
-    border-radius: 4px;
+.code-card {
+    min-width: 0;
+    border-radius: var(--radius-lg);
+    background: var(--terminal);
+    box-shadow: var(--shadow), inset 0 0 0 1px rgb(255 255 255 / 0.08);
     overflow: hidden;
 }
 
-.awareness-panel-img img {
-    display: block;
-    width: 100%;
-    height: auto;
-    image-rendering: auto;
+.code-card pre {
+    margin: 0;
+    padding: 1.35rem;
+    color: #d8e3ed;
+    overflow: auto;
+    font-size: 0.82rem;
+    line-height: 1.8;
 }
 
-.awareness-panel-text h3 {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: var(--white);
-    margin-bottom: 0.35rem;
+.comment {
+    color: #788697;
 }
 
-.awareness-panel-text p {
-    font-size: 0.875rem;
-    color: var(--text-dim);
-    line-height: 1.65;
+.cmd {
+    color: #67d7ca;
+    font-weight: 700;
 }
 
-.state-bar {
-    display: flex;
-    gap: 2rem;
-    padding: 0.5rem 0 0;
+.flag {
+    color: #8eb3ff;
 }
 
-.state-bar-item {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.875rem;
-    color: var(--text-dim);
+.str {
+    color: #f4cf88;
+}
+
+.awareness-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
 }
 
-/* ── Terminal ── */
-.terminal-block {
-    background: var(--mantle);
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    padding: 1.75rem 2rem;
+.awareness-card {
+    padding: 1.25rem;
 }
 
-.terminal-block p {
-    font-size: 0.875rem;
-    line-height: 1.85;
-    color: var(--text-dim);
+.awareness-card img {
+    width: 100%;
+    min-height: 220px;
+    object-fit: contain;
+    border-radius: 16px;
+    background: var(--terminal);
+    padding: 1rem;
 }
 
-.terminal-block strong {
-    color: var(--white);
-    font-weight: 500;
+.awareness-card p {
+    margin-top: 0.85rem;
 }
 
-.term-pills {
+.state-legend {
     display: flex;
-    gap: 0.4rem;
     flex-wrap: wrap;
-    margin-top: 1.25rem;
+    gap: 0.75rem;
+    margin-top: 1rem;
 }
 
-.term-pill {
-    font-size: 0.75rem;
-    color: var(--text-dim);
-    background: var(--base);
-    padding: 0.2rem 0.6rem;
-    border: 1px solid var(--border);
-    border-radius: 4px;
+.state-legend span {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    border: 1px solid var(--line);
+    border-radius: 999px;
+    background: rgb(255 253 248 / 0.65);
+    color: var(--ink-soft);
+    padding: 0.5rem 0.75rem;
+    font-size: 0.9rem;
 }
 
-/* ── Comparison ── */
 .table-wrap {
-    width: 100%;
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
+    overflow: auto;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    background: rgb(255 253 248 / 0.76);
+    box-shadow: 0 16px 50px rgb(35 29 21 / 0.06);
 }
 
-.agents-table {
+table {
     width: 100%;
     border-collapse: collapse;
-    font-size: 0.875rem;
+    min-width: 720px;
 }
 
-.agents-table th {
+th,
+td {
+    padding: 1rem;
+    border-bottom: 1px solid var(--line);
     text-align: left;
-    padding: 0.6rem 1rem;
-    color: var(--text-faint);
-    font-weight: 600;
+}
+
+th {
+    color: var(--muted);
     font-size: 0.75rem;
+    letter-spacing: 0.12em;
     text-transform: uppercase;
-    letter-spacing: 0.1em;
-    background: var(--mantle);
-    border-bottom: 1px solid var(--border);
 }
 
-.agents-table td {
-    padding: 0.5rem 1rem;
-    border-bottom: 1px solid var(--border);
-    color: var(--text-dim);
+td {
+    color: var(--ink-soft);
 }
 
-.agents-table tr:last-child td {
-    border-bottom: none;
-}
-.agents-table td:first-child {
-    color: var(--text);
-    font-weight: 500;
+tr:last-child td {
+    border-bottom: 0;
 }
 
-.agents-table a {
-    border-bottom: 1px solid var(--border-bright);
+th:last-child,
+td:last-child {
+    color: var(--accent-dark);
+    font-weight: 800;
+    background: rgb(217 238 233 / 0.5);
 }
-.agents-table a:hover {
-    border-color: var(--green);
+
+.integration-grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 0.75rem;
 }
 
-.check {
-    color: var(--green);
+.integration-grid a,
+.integration-grid span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 4.5rem;
+    border: 1px solid var(--line);
+    border-radius: 18px;
+    background: rgb(255 253 248 / 0.76);
+    color: var(--ink-soft);
+    font-weight: 750;
+    box-shadow: 0 12px 36px rgb(35 29 21 / 0.05);
 }
-.partial {
-    color: var(--yellow);
+
+.integration-grid a:hover {
+    border-color: var(--accent);
+    background: var(--accent-soft);
 }
-.untested {
-    color: var(--text-faint);
-    font-size: 0.75rem;
+
+.final-cta {
+    margin-top: 2rem;
+    margin-bottom: 5rem;
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+    text-align: center;
+    border-radius: 36px;
+    background:
+        radial-gradient(circle at 18% 20%, rgb(103 215 202 / 0.2), transparent 22rem),
+        radial-gradient(circle at 82% 0%, rgb(37 99 235 / 0.16), transparent 20rem),
+        var(--paper);
+    border: 1px solid var(--line);
+    box-shadow: var(--shadow);
 }
 
-/* ── API ── */
-.api-grid {
-    display: grid;
-    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
-    gap: 2rem;
-    align-items: start;
+.final-cta .section-kicker {
+    justify-content: center;
 }
 
-.api-grid > * {
-    min-width: 0;
+.final-cta h2 {
+    margin-inline: auto;
+    max-width: 760px;
 }
 
-.api-text p {
-    font-size: 0.875rem;
-    color: var(--text-dim);
-    line-height: 1.85;
-    margin-bottom: 0.75rem;
+.final-cta p {
+    max-width: 620px;
+    margin: 1.2rem auto 0;
 }
 
-.api-text strong {
-    color: var(--white);
-    font-weight: 500;
+.footer {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    border-top: 1px solid var(--line);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    color: var(--muted);
 }
 
-.api-links {
+.footer div {
     display: flex;
-    gap: 0.5rem;
-    margin-top: 0.75rem;
     flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: flex-end;
+    font-size: 0.9rem;
 }
 
-.api-links a {
-    font-size: 0.75rem;
-    color: var(--text-dim);
-    padding: 0.3rem 0.65rem;
-    border: 1px solid var(--border);
-    border-radius: 4px;
-    transition:
-        color 0.15s,
-        border-color 0.15s;
-}
-.api-links a:hover {
-    border-color: var(--green);
-    color: var(--green);
-}
+@media (max-width: 980px) {
+    .hero,
+    .feature-split,
+    .api-section,
+    .section-heading-wide {
+        grid-template-columns: 1fr;
+    }
 
-.code-block {
-    background: var(--mantle);
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    padding: 1.25rem 1.5rem;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-}
+    .hero {
+        padding-top: 4.5rem;
+    }
 
-.code-block pre {
-    font-size: 0.72rem;
-    line-height: 1.9;
-    color: var(--text-dim);
-}
+    .hero-panel {
+        transform: none;
+        max-width: 620px;
+    }
 
-.code-block .comment {
-    color: var(--text-faint);
-}
-.code-block .cmd {
-    color: var(--green);
-}
-.code-block .flag {
-    color: var(--blue);
-}
-.code-block .str {
-    color: var(--yellow);
-}
+    .pillar-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
 
-/* ── Footer ── */
-.footer {
-    max-width: var(--max-w);
-    margin: 0 auto;
-    padding: 2rem 2rem 4rem;
-    text-align: center;
+    .access-grid,
+    .integration-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
 }
 
-.footer p {
-    font-size: 0.7rem;
-    color: var(--text-faint);
-    line-height: 2;
-}
+@media (max-width: 720px) {
+    .nav {
+        padding-inline: 1rem;
+    }
 
-.footer a {
-    color: var(--text-dim);
-    border: none;
-}
-.footer a:hover {
-    color: var(--green);
-}
+    .nav-links {
+        display: none;
+    }
 
-/* ── Responsive ── */
-@media (max-width: 768px) {
     .hero,
     .section,
-    .demo,
-    .footer {
-        padding-left: 1.25rem;
-        padding-right: 1.25rem;
+    .demo-section,
+    .footer,
+    .final-cta {
+        padding-inline: 1rem;
     }
+
     .hero {
-        padding-top: 4rem;
-    }
-    .hero-tagline {
-        font-size: 2rem;
+        padding-top: 3.25rem;
+        padding-bottom: 2.5rem;
+        gap: 2rem;
     }
-    .manifesto {
-        font-size: 0.875rem;
+
+    .hero h1 {
+        font-size: clamp(3rem, 17vw, 4.2rem);
     }
-    .awareness-panel {
-        flex-direction: column;
-        align-items: flex-start;
+
+    .hero-lede {
+        font-size: 1rem;
     }
-    .awareness-panel-img {
-        width: min(100%, 220px);
+
+    .install-card {
+        border-radius: 18px;
+        grid-template-columns: auto minmax(0, 1fr);
     }
-    .access-grid {
-        grid-template-columns: 1fr;
+
+    .install-card button {
+        grid-column: 1 / -1;
+        justify-self: start;
     }
-    .mobile-proof {
-        grid-template-columns: minmax(0, 260px);
-        justify-content: center;
-        gap: 1rem;
+
+    .demo-section {
+        padding-bottom: 4rem;
     }
-    .phone-shot-frame {
-        padding: 0.45rem;
+
+    .demo-frame {
         border-radius: 20px;
     }
-    .phone-shot img {
-        border-radius: 15px;
+
+    .section {
+        padding-top: 4rem;
+        padding-bottom: 4rem;
+    }
+
+    .section-heading h2,
+    .section-heading-wide h2,
+    .feature-copy h2,
+    .api-copy h2,
+    .final-cta h2 {
+        font-size: clamp(2rem, 11vw, 3rem);
     }
-    .api-grid {
+
+    .pillar-grid,
+    .access-grid,
+    .awareness-grid,
+    .integration-grid {
         grid-template-columns: 1fr;
     }
-    .state-bar {
-        gap: 1.25rem;
-        flex-wrap: wrap;
+
+    .pillar-card {
+        min-height: auto;
     }
-    .position-table {
-        min-width: 42rem;
+
+    .pillar-card p {
+        margin-top: 1rem;
     }
-    .agents-table {
-        min-width: 38rem;
+
+    .screenshot-card img {
+        height: 300px;
     }
-    .position-table td:first-child {
-        width: 11rem;
+
+    .mobile-proof {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .final-cta {
+        border-radius: 24px;
+        margin-bottom: 3rem;
+    }
+
+    .footer {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .footer div {
+        justify-content: flex-start;
     }
 }
 
-@media (max-width: 480px) {
-    .hero {
-        padding-top: 3rem;
+@media (max-width: 440px) {
+    .button {
+        width: 100%;
     }
-    .hero-tagline {
-        font-size: 1.7rem;
+
+    .hero-actions {
+        width: 100%;
+    }
+
+    .hero-panel {
+        margin-inline: -0.2rem;
+    }
+
+    .workspace,
+    .agent-list,
+    .terminal-line {
+        font-size: 0.72rem;
+    }
+
+    .mobile-proof {
+        gap: 0.65rem;
+    }
+
+    .mobile-proof img {
+        border-width: 5px;
+        border-radius: 18px;
     }
-    .manifesto {
-        font-size: 0.875rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        scroll-behavior: auto !important;
     }
 }