From afbc9462f0951137cd9850e3773d95a1ceb6fd01 Mon Sep 17 00:00:00 2001
From: oliver <oliver@odoo4projects.com>
Date: Fri, 12 Jun 2026 14:23:16 -0300
Subject: [PATCH] split + record

---
 assets/css/style.css | 1834 +++++++++++++++++++++++++++
 assets/js/script.js  |  837 ++++++++++++
 index.html           | 2888 ++----------------------------------------
 3 files changed, 2743 insertions(+), 2816 deletions(-)
 create mode 100644 assets/css/style.css
 create mode 100644 assets/js/script.js

diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 0000000..f42b15c
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,1834 @@
+/* ═══════════════════════════════════════════════════════════════
+   DESIGN TOKENS  (matches app.derez.ai design system)
+   ═══════════════════════════════════════════════════════════════ */
+:root {
+    --bg: #000810;
+    --bg-card: #010f20;
+    --bg-inner: #000d1a;
+    --bg-hover: #001a30;
+    --bg-input: #000813;
+    --border: #0a3060;
+    --border-hi: rgba(0, 245, 255, 0.45);
+    --accent: #00f5ff;
+    --accent-dim: #002535;
+    --danger: #ff3b3b;
+    --danger-dim: #3b0000;
+    --success: #00ff88;
+    --warning: #ffaa00;
+    --text: #c8f0ff;
+    --text-muted: #2e6a80;
+    --radius: 8px;
+    --radius-card: 18px;
+    --shadow:
+        0 0 0 1px rgba(0, 245, 255, 0.25),
+        0 0 60px rgba(0, 245, 255, 0.12),
+        0 28px 72px rgba(0, 0, 0, 0.9);
+    --max-width: 1120px;
+}
+
+/* ── Reset ───────────────────────────────────────────────── */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    scroll-behavior: smooth;
+    -webkit-font-smoothing: antialiased;
+}
+
+body {
+    font-family: "Courier New", Courier, monospace;
+    background: var(--bg);
+    color: var(--text);
+    font-size: 14px;
+    line-height: 1.6;
+    overflow-x: hidden;
+}
+
+/* Ambient glow */
+body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    background:
+        radial-gradient(
+            ellipse 60% 50% at 25% 30%,
+            rgba(0, 245, 255, 0.06) 0%,
+            transparent 70%
+        ),
+        radial-gradient(
+            ellipse 50% 60% at 75% 70%,
+            rgba(0, 200, 255, 0.04) 0%,
+            transparent 70%
+        );
+    pointer-events: none;
+    z-index: 0;
+}
+
+/* ── Typography ──────────────────────────────────────────── */
+h1,
+h2,
+h3,
+h4 {
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+}
+h1 {
+    font-size: clamp(2.2rem, 5.5vw, 3.8rem);
+}
+h2 {
+    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
+    margin-bottom: 0.6em;
+}
+h3 {
+    font-size: 1.1rem;
+}
+p {
+    color: var(--text-muted);
+    font-size: 14px;
+}
+a {
+    color: var(--accent);
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: underline;
+}
+
+.container {
+    max-width: var(--max-width);
+    margin: 0 auto;
+    padding: 0 24px;
+    position: relative;
+    z-index: 1;
+}
+
+/* ── Buttons ─────────────────────────────────────────────── */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 22px;
+    border-radius: var(--radius);
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 600;
+    white-space: nowrap;
+    text-decoration: none;
+    transition:
+        opacity 0.15s,
+        background 0.15s,
+        transform 0.1s;
+}
+.btn:hover {
+    opacity: 0.85;
+    text-decoration: none;
+}
+.btn:active {
+    transform: scale(0.97);
+}
+
+.btn-primary {
+    background: transparent;
+    color: #fff;
+    border: 1px solid var(--accent);
+    box-shadow:
+        0 0 8px rgba(0, 245, 255, 0.35),
+        inset 0 0 8px rgba(0, 245, 255, 0.04);
+}
+.btn-primary:hover {
+    background: rgba(0, 245, 255, 0.08);
+    box-shadow:
+        0 0 14px rgba(0, 245, 255, 0.5),
+        inset 0 0 10px rgba(0, 245, 255, 0.06);
+}
+.btn-ghost {
+    background: var(--bg-hover);
+    color: var(--text);
+    border: 1px solid var(--border);
+}
+.btn-ghost:hover {
+    opacity: 0.85;
+    background: var(--bg-hover);
+    border-color: var(--border);
+}
+.btn-lg {
+    padding: 12px 28px;
+    font-size: 13px;
+    border-radius: 8px;
+}
+.btn-block {
+    width: 100%;
+    justify-content: center;
+}
+
+/* ══════════════════════════════════════════════════════════
+   HEADER / NAV
+   ══════════════════════════════════════════════════════════ */
+.site-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    background: rgba(0, 8, 16, 0.85);
+    backdrop-filter: blur(14px);
+    border-bottom: 1px solid var(--border-hi);
+    transition: background 0.3s;
+}
+
+.site-header .container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 60px;
+}
+
+.site-logo {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+}
+.site-logo:hover {
+    text-decoration: none;
+}
+.site-logo-img {
+    display: block;
+    height: 34px;
+    width: auto;
+}
+
+.nav-links {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    list-style: none;
+}
+.nav-links a {
+    padding: 6px 14px;
+    border-radius: var(--radius);
+    color: var(--text-muted);
+    font-size: 13px;
+    font-weight: 500;
+    transition:
+        color 0.15s,
+        background 0.15s;
+}
+.nav-links a:hover {
+    color: var(--text);
+    background: var(--bg-hover);
+    text-decoration: none;
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.btn-login {
+    background: transparent;
+    color: var(--text);
+    border: 1px solid var(--border);
+    padding: 7px 18px;
+    border-radius: var(--radius);
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    transition:
+        border-color 0.15s,
+        color 0.15s,
+        background 0.15s;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+.btn-login:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+    background: var(--accent-dim);
+    text-decoration: none;
+}
+
+.btn-signup-header {
+    padding: 7px 18px;
+    font-size: 13px;
+}
+
+/* Mobile hamburger */
+.hamburger {
+    display: none;
+    flex-direction: column;
+    gap: 4px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 6px;
+}
+.hamburger span {
+    display: block;
+    width: 22px;
+    height: 2px;
+    background: var(--text);
+    border-radius: 2px;
+    transition:
+        transform 0.2s,
+        opacity 0.2s;
+}
+
+/* ══════════════════════════════════════════════════════════
+   HERO
+   ══════════════════════════════════════════════════════════ */
+.hero {
+    padding: 140px 0 80px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.hero::after {
+    content: "";
+    position: absolute;
+    top: -30%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 90%;
+    height: 140%;
+    background: radial-gradient(
+        ellipse at center,
+        rgba(0, 245, 255, 0.05) 0%,
+        transparent 65%
+    );
+    pointer-events: none;
+}
+
+.hero-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 16px;
+    background: var(--accent-dim);
+    border: 1px solid rgba(0, 245, 255, 0.3);
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--accent);
+    margin-bottom: 24px;
+}
+
+.hero h1 {
+    max-width: 820px;
+    margin: 0 auto 20px;
+}
+.hero h1 .highlight {
+    background: linear-gradient(135deg, var(--accent), #66e5ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.hero-sub {
+    font-size: clamp(1rem, 2vw, 1.2rem);
+    max-width: 620px;
+    margin: 0 auto 36px;
+    line-height: 1.7;
+}
+
+.hero-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 14px;
+    flex-wrap: wrap;
+    margin-bottom: 40px;
+}
+
+.hero-stats {
+    display: flex;
+    justify-content: center;
+    gap: 40px;
+    flex-wrap: wrap;
+}
+.hero-stat {
+    text-align: center;
+}
+.hero-stat-num {
+    font-size: 1.5rem;
+    font-weight: 800;
+    color: var(--text);
+}
+.hero-stat-label {
+    font-size: 12px;
+    color: var(--text-muted);
+    margin-top: 2px;
+}
+
+/* ══════════════════════════════════════════════════════════
+   SECTION COMMON
+   ══════════════════════════════════════════════════════════ */
+section {
+    padding: 80px 0;
+}
+
+.section-title {
+    text-align: center;
+    max-width: 640px;
+    margin: 0 auto 16px;
+}
+.section-sub {
+    text-align: center;
+    max-width: 560px;
+    margin: 0 auto 50px;
+    font-size: 1rem;
+}
+
+/* ══════════════════════════════════════════════════════════
+   VIDEO SLIDER (Speed Run)
+   ══════════════════════════════════════════════════════════ */
+.video-slider-wrapper {
+    position: relative;
+    max-width: 960px;
+    margin: 0 auto;
+}
+
+.video-slider {
+    display: flex;
+    gap: 20px;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    padding: 8px 4px;
+}
+.video-slider::-webkit-scrollbar {
+    display: none;
+}
+
+.video-slide {
+    flex: 0 0 calc((100% - 40px) / 3);
+    min-width: 260px;
+    scroll-snap-align: start;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-card);
+    overflow: hidden;
+    transition:
+        border-color 0.2s,
+        transform 0.2s;
+}
+.video-slide:hover {
+    border-color: var(--border-hi);
+    transform: translateY(-4px);
+}
+
+.video-slide a {
+    text-decoration: none;
+    color: inherit;
+    display: block;
+}
+.video-slide a:hover {
+    text-decoration: none;
+}
+
+.video-thumb {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    background-size: cover;
+    background-position: center;
+    background-color: var(--bg-inner);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.video-thumb .play-btn {
+    width: 54px;
+    height: 54px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.7);
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+        background 0.2s,
+        transform 0.2s;
+    backdrop-filter: blur(4px);
+}
+.video-slide:hover .play-btn {
+    background: var(--accent);
+    border-color: var(--accent);
+    transform: scale(1.08);
+}
+.video-thumb .play-btn svg {
+    width: 20px;
+    height: 20px;
+    fill: #fff;
+    margin-left: 2px;
+}
+
+.video-info {
+    padding: 14px 16px 18px;
+}
+.video-info h4 {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: 4px;
+    line-height: 1.4;
+}
+.video-info .video-desc {
+    font-size: 12px;
+    color: var(--text-muted);
+    line-height: 1.4;
+}
+
+.slider-arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 10;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 1px solid var(--border);
+    background: var(--bg-card);
+    color: var(--text);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    transition:
+        background 0.15s,
+        border-color 0.15s;
+    opacity: 0;
+    pointer-events: none;
+}
+.video-slider-wrapper:hover .slider-arrow {
+    opacity: 1;
+    pointer-events: auto;
+}
+.slider-arrow:hover {
+    background: var(--bg-hover);
+    border-color: var(--accent);
+}
+.slider-arrow-prev {
+    left: -20px;
+}
+.slider-arrow-next {
+    right: -20px;
+}
+
+.slider-dots {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    margin-top: 24px;
+}
+.slider-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    border: none;
+    background: var(--border);
+    cursor: pointer;
+    transition:
+        background 0.2s,
+        transform 0.2s;
+    padding: 0;
+}
+.slider-dot.active {
+    background: var(--accent);
+    transform: scale(1.3);
+}
+.slider-dot:hover {
+    background: var(--text-muted);
+}
+
+@media (max-width: 768px) {
+    .video-slide {
+        flex: 0 0 calc((100% - 20px) / 2);
+        min-width: 0;
+    }
+    .slider-arrow {
+        display: none;
+    }
+}
+@media (max-width: 480px) {
+    .video-slide {
+        flex: 0 0 85%;
+    }
+}
+
+/* ══════════════════════════════════════════════════════════
+   SPEEDRUN (How It Works) — kept for reference
+   ══════════════════════════════════════════════════════════ */
+.steps {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+    counter-reset: step;
+}
+
+.step-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-card);
+    padding: 32px 28px;
+    position: relative;
+    transition:
+        border-color 0.2s,
+        transform 0.2s;
+}
+.step-card:hover {
+    border-color: var(--border-hi);
+    transform: translateY(-4px);
+}
+
+.step-number {
+    font-size: 2.4rem;
+    font-weight: 800;
+    color: rgba(0, 245, 255, 0.12);
+    line-height: 1;
+    margin-bottom: 12px;
+}
+.step-icon {
+    width: 44px;
+    height: 44px;
+    border-radius: 12px;
+    background: var(--accent-dim);
+    border: 1px solid rgba(0, 245, 255, 0.25);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--accent);
+    margin-bottom: 16px;
+}
+.step-card h3 {
+    margin-bottom: 8px;
+    font-size: 1.1rem;
+}
+.step-card p {
+    font-size: 13px;
+    line-height: 1.65;
+}
+
+/* ══════════════════════════════════════════════════════════
+   FEATURES
+   ══════════════════════════════════════════════════════════ */
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+}
+
+.feature-card {
+    background: var(--bg-inner);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-card);
+    padding: 28px 24px;
+    transition:
+        border-color 0.2s,
+        transform 0.2s;
+    position: relative;
+}
+.feature-card.unique {
+    border-color: var(--accent);
+    background: linear-gradient(
+        180deg,
+        rgba(0, 245, 255, 0.04) 0%,
+        var(--bg-inner) 100%
+    );
+}
+.feature-badge {
+    position: absolute;
+    top: -8px;
+    right: 16px;
+    background: var(--accent);
+    color: #000;
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    padding: 3px 12px;
+    border-radius: 20px;
+}
+.feature-card:hover {
+    border-color: var(--border-hi);
+    transform: translateY(-3px);
+}
+
+.feature-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    background: var(--accent-dim);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--accent);
+    margin-bottom: 14px;
+}
+.feature-card h3 {
+    font-size: 15px;
+    margin-bottom: 6px;
+}
+.feature-card p {
+    font-size: 13px;
+    line-height: 1.6;
+}
+
+/* ══════════════════════════════════════════════════════════
+   AGENT OPTIONS
+   ══════════════════════════════════════════════════════════ */
+.agent-options {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+}
+
+.agent-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-card);
+    padding: 36px 32px;
+    text-align: center;
+    transition:
+        border-color 0.2s,
+        transform 0.2s;
+    position: relative;
+}
+.agent-card:hover {
+    border-color: var(--border-hi);
+    transform: translateY(-3px);
+}
+.agent-card.featured {
+    border-color: var(--accent);
+    background: linear-gradient(
+        180deg,
+        rgba(0, 245, 255, 0.05) 0%,
+        var(--bg-card) 100%
+    );
+}
+.agent-card.featured::before {
+    content: "Most Popular";
+    position: absolute;
+    top: -11px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--accent);
+    color: #000;
+    font-size: 11px;
+    font-weight: 600;
+    padding: 3px 16px;
+    border-radius: 20px;
+    letter-spacing: 0.04em;
+}
+
+.agent-card h3 {
+    font-size: 1.2rem;
+    margin-bottom: 4px;
+}
+.agent-tagline {
+    font-size: 13px;
+    color: var(--text-muted);
+    margin-bottom: 14px;
+}
+.agent-desc {
+    font-size: 13px;
+    line-height: 1.65;
+    margin-bottom: 12px;
+}
+.agent-features {
+    list-style: none;
+    text-align: left;
+    margin: 16px 0;
+}
+.agent-features li {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    font-size: 13px;
+    padding: 5px 0;
+    color: var(--text-muted);
+}
+.agent-features li svg {
+    flex-shrink: 0;
+    margin-top: 2px;
+    color: var(--success);
+}
+
+/* ══════════════════════════════════════════════════════════
+   PRICING
+   ══════════════════════════════════════════════════════════ */
+.pricing-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+    max-width: 960px;
+    margin: 0 auto;
+}
+.pricing-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-card);
+    padding: 36px 28px;
+    text-align: center;
+    box-shadow: var(--shadow);
+    position: relative;
+    transition:
+        border-color 0.2s,
+        transform 0.2s;
+    display: flex;
+    flex-direction: column;
+}
+.pricing-card.featured {
+    border-color: var(--accent);
+    background: linear-gradient(
+        180deg,
+        rgba(0, 245, 255, 0.05) 0%,
+        var(--bg-card) 100%
+    );
+    transform: scale(1.04);
+}
+.pricing-perks {
+    list-style: none;
+    text-align: left;
+    margin: 14px 0 24px;
+    flex: 1;
+}
+.pricing-card .btn-block {
+    margin-top: auto;
+}
+.pricing-badge {
+    position: absolute;
+    top: -11px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--accent);
+    color: #000;
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    padding: 3px 18px;
+    border-radius: 20px;
+}
+.pricing-badge-coupon {
+    display: none;
+    font-size: 12px;
+    font-weight: 700;
+    color: #f59e0b;
+    background: rgba(245, 158, 11, 0.1);
+    border: 1px solid rgba(245, 158, 11, 0.25);
+    border-radius: 6px;
+    padding: 3px 10px;
+    margin-top: 8px;
+    margin-bottom: 4px;
+    line-height: 1.4;
+    letter-spacing: 0.02em;
+}
+.pricing-badge-coupon.visible {
+    display: inline-block;
+}
+.pricing-badge-coupon.free {
+    color: #22c55e;
+    background: rgba(34, 197, 94, 0.1);
+    border-color: rgba(34, 197, 94, 0.25);
+}
+.pricing-plan-name {
+    font-size: 13px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--accent);
+    margin-bottom: 6px;
+}
+.pricing-amount {
+    font-size: 3rem;
+    font-weight: 800;
+    color: var(--text);
+    line-height: 1;
+}
+.pricing-amount .pricing-currency {
+    font-size: 1.4rem;
+    vertical-align: super;
+}
+.pricing-period {
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--text-muted);
+}
+.pricing-yearly-bonus {
+    display: none;
+    font-size: 12px;
+    color: var(--success);
+    font-weight: 600;
+    margin-top: 4px;
+}
+.pricing-yearly-bonus.show {
+    display: block;
+}
+.pricing-plan-desc {
+    font-size: 12px;
+    color: var(--text-muted);
+    margin: 10px 0 14px;
+    line-height: 1.5;
+}
+.pricing-plan-quota {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text);
+    padding: 8px 0;
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 14px;
+}
+.pricing-perks {
+    list-style: none;
+    text-align: left;
+    margin: 14px 0 24px;
+}
+.pricing-perks li {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 4px 0;
+    font-size: 13px;
+    color: var(--text);
+}
+.pricing-perks li svg {
+    flex-shrink: 0;
+    margin-top: 3px;
+    color: var(--text-muted);
+}
+.pricing-perks li .plus-icon {
+    color: var(--success);
+    font-weight: 700;
+    font-size: 15px;
+    line-height: 1;
+    margin-top: 3px;
+    flex-shrink: 0;
+}
+.pricing-perks li.new-feature {
+    color: var(--text);
+}
+.pricing-perks li.muted {
+    color: var(--text-muted);
+}
+.pricing-perks li.muted svg {
+    color: var(--text-muted);
+    opacity: 0.4;
+}
+
+/* ── Config box ─────────────────────────────── */
+.pricing-config-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    margin-bottom: 36px;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-card);
+    padding: 14px 24px;
+    flex-wrap: wrap;
+}
+.pricing-config-label {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-muted);
+    white-space: nowrap;
+}
+.pricing-config-select {
+    appearance: none;
+    -webkit-appearance: none;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    color: var(--text);
+    font-size: 13px;
+    padding: 6px 30px 6px 12px;
+    cursor: pointer;
+    outline: none;
+    transition: border-color 0.2s;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    min-width: 110px;
+}
+.pricing-config-select:hover {
+    border-color: var(--accent);
+}
+.pricing-config-select:focus {
+    border-color: var(--accent);
+}
+.pricing-config-input {
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    color: var(--text);
+    font-size: 13px;
+    padding: 6px 12px;
+    outline: none;
+    transition: border-color 0.2s;
+    width: 120px;
+}
+.pricing-config-input:focus {
+    border-color: var(--accent);
+}
+.pricing-config-input::placeholder {
+    color: var(--text-muted);
+    opacity: 0.6;
+}
+#pricing-email {
+    width: 234px;
+}
+#pricing-email.invalid {
+    border-color: var(--danger);
+    box-shadow: 0 0 0 2px rgba(255, 59, 59, 0.2);
+}
+
+.pricing-toast {
+    position: fixed;
+    bottom: 100px;
+    left: 50%;
+    transform: translateX(-50%) translateY(20px);
+    background: var(--bg-card);
+    border: 1px solid var(--danger);
+    border-radius: var(--radius-card);
+    padding: 16px 24px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    font-size: 14px;
+    color: var(--text);
+    opacity: 0;
+    visibility: hidden;
+    transition:
+        opacity 0.3s,
+        transform 0.3s,
+        visibility 0.3s;
+    z-index: 9999;
+    max-width: 420px;
+    text-align: center;
+    pointer-events: none;
+}
+.pricing-toast.show {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(0);
+}
+
+@media (max-width: 900px) {
+    .pricing-grid {
+        grid-template-columns: 1fr;
+        max-width: 420px;
+    }
+    .pricing-card.featured {
+        transform: none;
+    }
+}
+
+/* ══════════════════════════════════════════════════════════
+   FAQ
+   ══════════════════════════════════════════════════════════ */
+.faq-list {
+    max-width: 700px;
+    margin: 0 auto;
+}
+.faq-item {
+    border-bottom: 1px solid var(--border);
+}
+.faq-question {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 18px 0;
+    background: none;
+    border: none;
+    color: var(--text);
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+    text-align: left;
+    gap: 16px;
+    transition: color 0.15s;
+}
+.faq-question:hover {
+    color: var(--accent);
+}
+.faq-question svg {
+    flex-shrink: 0;
+    transition: transform 0.2s;
+    color: var(--text-muted);
+}
+.faq-question.open svg {
+    transform: rotate(180deg);
+}
+.faq-answer {
+    max-height: 0;
+    overflow: hidden;
+    transition:
+        max-height 0.25s ease,
+        padding 0.25s ease;
+    font-size: 14px;
+    color: var(--text-muted);
+    line-height: 1.7;
+}
+.faq-answer.open {
+    max-height: 300px;
+    padding: 0 0 18px;
+}
+
+/* ══════════════════════════════════════════════════════════
+   CTA
+   ══════════════════════════════════════════════════════════ */
+.cta-section {
+    text-align: center;
+    padding: 80px 0 100px;
+}
+.cta-section h2 {
+    max-width: 560px;
+    margin: 0 auto 16px;
+}
+.cta-section p {
+    max-width: 480px;
+    margin: 0 auto 30px;
+}
+
+/* ══════════════════════════════════════════════════════════
+   BLOG
+   ══════════════════════════════════════════════════════════ */
+.blog-search {
+    max-width: 480px;
+    margin: -20px auto 32px;
+}
+.blog-search input {
+    width: 100%;
+    padding: 12px 16px;
+    background: var(--bg-input);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    color: var(--text);
+    font-family: inherit;
+    font-size: 14px;
+    outline: none;
+    transition: border-color 0.2s;
+}
+.blog-search input:focus {
+    border-color: var(--accent);
+}
+.blog-search input::placeholder {
+    color: var(--text-muted);
+}
+.blog-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 20px;
+    margin-bottom: 32px;
+}
+.blog-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-card);
+    padding: 28px;
+    display: flex;
+    flex-direction: column;
+    transition:
+        border-color 0.2s,
+        transform 0.2s;
+    cursor: pointer;
+}
+.blog-card:hover {
+    border-color: var(--accent);
+    transform: translateY(-2px);
+}
+.blog-card-area {
+    display: inline-block;
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    padding: 3px 12px;
+    border-radius: 20px;
+    margin-bottom: 12px;
+    align-self: flex-start;
+    color: #000;
+}
+.blog-card-area.area-howto {
+    background: #00f5ff;
+}
+.blog-card-area.area-news {
+    background: #ffaa00;
+}
+.blog-card-area.area-video-scripts {
+    background: #00ff88;
+}
+.blog-card-area.area-architecture {
+    background: #a78bfa;
+}
+.blog-card-area.area-speed-run {
+    background: #f472b6;
+}
+.blog-card-area.area-default {
+    background: #a78bfa;
+}
+.blog-card-chip {
+    display: inline-block;
+    background: rgba(0, 245, 255, 0.08);
+    color: #00f5ff;
+    border: 1px solid rgba(0, 245, 255, 0.25);
+    font-size: 0.65rem;
+    font-weight: 600;
+    padding: 2px 10px;
+    border-radius: 20px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 12px;
+    align-self: flex-start;
+}
+.blog-card-date {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    margin-bottom: 8px;
+}
+.blog-card h3 {
+    font-size: 1.05rem;
+    font-weight: 600;
+    line-height: 1.4;
+    margin-bottom: 10px;
+    color: var(--text);
+}
+.blog-card p {
+    font-size: 0.88rem;
+    color: var(--text-muted);
+    line-height: 1.6;
+    flex: 1;
+}
+.blog-card-link {
+    margin-top: 16px;
+    font-size: 0.85rem;
+    color: var(--accent);
+    text-decoration: none;
+}
+.blog-card:hover .blog-card-link {
+    text-decoration: underline;
+}
+.blog-pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 24px;
+}
+.blog-pagination button {
+    background: none;
+    border: 1px solid var(--border);
+    color: var(--text);
+    padding: 10px 24px;
+    border-radius: var(--radius);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.88rem;
+    transition:
+        border-color 0.2s,
+        color 0.2s;
+}
+.blog-pagination button:hover:not(:disabled) {
+    border-color: var(--accent);
+    color: var(--accent);
+}
+.blog-pagination button:disabled {
+    opacity: 0.3;
+    cursor: default;
+}
+.blog-page-info {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+}
+.blog-empty {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 60px 20px;
+    color: var(--text-muted);
+    font-size: 0.95rem;
+}
+@media (max-width: 900px) {
+    .blog-grid {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+@media (max-width: 600px) {
+    .blog-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* ══════════════════════════════════════════════════════════
+   TOPICS
+   ══════════════════════════════════════════════════════════ */
+.topics-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    margin-top: 20px;
+}
+.topic-card {
+    display: flex;
+    flex-direction: column;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 18px;
+    padding: 28px;
+    text-decoration: none;
+    transition: border-color .2s, transform .2s;
+}
+.topic-card:hover {
+    border-color: var(--accent);
+    transform: translateY(-3px);
+    text-decoration: none;
+}
+.topic-badge {
+    display: inline-block;
+    background: rgba(0,245,255,0.1);
+    color: var(--accent);
+    border: 1px solid rgba(0,245,255,0.25);
+    font-size: 0.7rem;
+    font-weight: 600;
+    padding: 3px 10px;
+    border-radius: 20px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    align-self: flex-start;
+    margin-bottom: 14px;
+}
+.topic-card h3 {
+    font-size: 1.15rem;
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: 8px;
+    line-height: 1.3;
+}
+.topic-card p {
+    font-size: 0.88rem;
+    color: var(--text-muted);
+    flex: 1;
+    margin-bottom: 16px;
+    line-height: 1.6;
+}
+.topic-link {
+    color: var(--accent);
+    font-weight: 600;
+    font-size: 0.88rem;
+    align-self: flex-start;
+}
+.topic-card:hover .topic-link {
+    text-decoration: underline;
+}
+@media (max-width: 700px) {
+    .topics-grid { grid-template-columns: 1fr; }
+}
+
+/* ══════════════════════════════════════════════════════════
+   FOOTER
+   ══════════════════════════════════════════════════════════ */
+.site-footer {
+    border-top: 1px solid var(--border);
+    padding: 40px 0;
+    font-size: 13px;
+    color: var(--text-muted);
+}
+.site-footer .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 16px;
+}
+.site-footer a {
+    color: var(--text-muted);
+}
+.site-footer a:hover {
+    color: var(--text);
+}
+.footer-links {
+    display: flex;
+    gap: 20px;
+}
+
+/* ══════════════════════════════════════════════════════════
+   RESPONSIVE
+   ══════════════════════════════════════════════════════════ */
+@media (max-width: 900px) {
+    .steps {
+        grid-template-columns: 1fr;
+    }
+    .features-grid {
+        grid-template-columns: 1fr 1fr;
+    }
+    .agent-options {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 700px) {
+    .nav-links {
+        display: none;
+    }
+    .hamburger {
+        display: flex;
+    }
+
+    .nav-links.mobile-open {
+        display: flex;
+        flex-direction: column;
+        position: fixed;
+        top: 60px;
+        left: 0;
+        right: 0;
+        background: var(--bg);
+        border-bottom: 1px solid var(--border);
+        padding: 12px 24px 20px;
+        gap: 6px;
+    }
+
+    .features-grid {
+        grid-template-columns: 1fr;
+    }
+    .hero-stats {
+        gap: 24px;
+    }
+    .hero {
+        padding: 110px 0 60px;
+    }
+    section {
+        padding: 60px 0;
+    }
+    .pricing-card {
+        padding: 32px 24px;
+    }
+
+    .site-footer .container {
+        flex-direction: column;
+        text-align: center;
+    }
+}
+
+/* ── Chat Widget (glowing floating button + glass panel) ── */
+.chat-fab {
+    position: fixed;
+    bottom: 28px;
+    right: 28px;
+    z-index: 9999;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #00f5ff, #0099cc);
+    border: none;
+    cursor: pointer;
+    box-shadow:
+        0 4px 24px rgba(0, 245, 255, 0.4),
+        0 0 0 0 rgba(0, 245, 255, 0.35);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 26px;
+    color: #000;
+    transition:
+        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
+        box-shadow 0.3s;
+    animation: fabPulse 2.5s ease-in-out infinite;
+}
+@keyframes fabPulse {
+    0%,
+    100% {
+        box-shadow:
+            0 4px 24px rgba(0, 245, 255, 0.4),
+            0 0 0 0 rgba(0, 245, 255, 0.35);
+    }
+    50% {
+        box-shadow:
+            0 4px 32px rgba(0, 245, 255, 0.55),
+            0 0 0 12px rgba(0, 245, 255, 0);
+    }
+}
+.chat-fab:hover {
+    transform: scale(1.12) rotate(-8deg);
+    box-shadow: 0 6px 36px rgba(0, 245, 255, 0.5);
+    animation: none;
+}
+.chat-fab:active {
+    transform: scale(0.92);
+}
+.chat-fab.open {
+    transform: scale(0.88);
+    opacity: 0.6;
+    animation: none;
+}
+.chat-widget {
+    position: fixed;
+    bottom: 100px;
+    right: 28px;
+    z-index: 9998;
+    width: 380px;
+    max-width: calc(100vw - 56px);
+    height: 520px;
+    max-height: calc(100vh - 160px);
+    background: rgba(1, 15, 32, 0.92);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(0, 245, 255, 0.25);
+    border-radius: 22px;
+    box-shadow:
+        0 24px 80px rgba(0, 0, 0, 0.6),
+        0 0 40px rgba(0, 245, 255, 0.06);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(16px) scale(0.94);
+    transform-origin: bottom right;
+    transition:
+        opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
+        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
+        visibility 0.3s;
+}
+.chat-widget.open {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0) scale(1);
+}
+.chat-widget::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 22px;
+    padding: 1px;
+    background: linear-gradient(
+        135deg,
+        rgba(0, 245, 255, 0.35),
+        rgba(0, 153, 204, 0.15),
+        rgba(0, 245, 255, 0.35)
+    );
+    -webkit-mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+}
+.chat-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 18px 20px 14px;
+    background: linear-gradient(
+        135deg,
+        rgba(0, 245, 255, 0.08),
+        rgba(0, 153, 204, 0.04)
+    );
+    border-bottom: 1px solid rgba(0, 245, 255, 0.12);
+}
+.chat-header-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--accent-dim), #002535);
+    border: 2px solid var(--accent);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    flex-shrink: 0;
+    position: relative;
+}
+.chat-header-avatar::after {
+    content: "";
+    position: absolute;
+    bottom: -1px;
+    right: -1px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--success);
+    border: 2px solid var(--bg-card);
+}
+.chat-header-info {
+    flex: 1;
+    min-width: 0;
+}
+.chat-header-name {
+    font-weight: 700;
+    font-size: 14px;
+    color: var(--text);
+    letter-spacing: -0.01em;
+}
+.chat-header-status {
+    font-size: 11px;
+    color: var(--success);
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+.chat-header-status::before {
+    content: "";
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: var(--success);
+    display: inline-block;
+    animation: statusPulse 2s ease-in-out infinite;
+}
+@keyframes statusPulse {
+    0%,
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.4;
+    }
+}
+.chat-header-close {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-size: 18px;
+    padding: 6px;
+    line-height: 1;
+    border-radius: 8px;
+    transition:
+        color 0.15s,
+        background 0.15s;
+}
+.chat-header-close:hover {
+    color: var(--text);
+    background: rgba(255, 255, 255, 0.06);
+}
+.chat-msgs {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px 18px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    scroll-behavior: smooth;
+}
+.chat-msgs::-webkit-scrollbar {
+    width: 4px;
+}
+.chat-msgs::-webkit-scrollbar-track {
+    background: transparent;
+}
+.chat-msgs::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 4px;
+}
+.chat-input-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px 16px;
+    border-top: 1px solid rgba(0, 245, 255, 0.08);
+    background: rgba(0, 8, 16, 0.5);
+}
+.chat-input-box {
+    flex: 1;
+    min-width: 0;
+    padding: 10px 16px;
+    border: 1px solid var(--border);
+    border-radius: 22px;
+    outline: none;
+    background: var(--bg-input);
+    color: var(--text);
+    font-size: 13px;
+    transition:
+        border-color 0.2s,
+        box-shadow 0.2s;
+}
+.chat-input-box:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px rgba(0, 245, 255, 0.1);
+}
+.chat-input-box::placeholder {
+    color: var(--text-muted);
+}
+.chat-send-btn {
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--accent), #0099cc);
+    border: none;
+    cursor: pointer;
+    color: #000;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition:
+        opacity 0.15s,
+        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
+        box-shadow 0.2s;
+    box-shadow: 0 2px 12px rgba(0, 245, 255, 0.25);
+}
+.chat-send-btn:hover {
+    opacity: 0.9;
+    transform: scale(1.08);
+    box-shadow: 0 4px 16px rgba(0, 245, 255, 0.35);
+}
+.chat-send-btn:active {
+    transform: scale(0.88);
+}
+.chat-send-btn:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+}
+.chat-msg {
+    max-width: 80%;
+    padding: 10px 14px;
+    border-radius: 16px;
+    line-height: 1.5;
+    word-wrap: break-word;
+    font-size: 13px;
+    animation: msgSlide 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+}
+@keyframes msgSlide {
+    from {
+        opacity: 0;
+        transform: translateY(8px) scale(0.97);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+.chat-msg-bot {
+    align-self: flex-start;
+    background: rgba(1, 15, 32, 0.8);
+    border: 1px solid rgba(0, 245, 255, 0.1);
+    border-bottom-left-radius: 4px;
+}
+.chat-msg-user {
+    align-self: flex-end;
+    background: linear-gradient(135deg, var(--accent), #0099cc);
+    color: #000;
+    border-bottom-right-radius: 4px;
+}
+.chat-msg-thinking {
+    align-self: flex-start;
+    background: rgba(1, 15, 32, 0.6);
+    border: 1px solid rgba(0, 245, 255, 0.08);
+    border-bottom-left-radius: 4px;
+    opacity: 0.5;
+}
+@media (max-width: 500px) {
+    .chat-widget {
+        right: 12px;
+        bottom: 84px;
+        width: calc(100vw - 24px);
+        max-height: calc(100vh - 120px);
+    }
+    .chat-fab {
+        right: 16px;
+        bottom: 20px;
+        width: 52px;
+        height: 52px;
+        font-size: 22px;
+    }
+}
+@media (max-width: 350px) {
+    .chat-widget {
+        display: none;
+    }
+}
+
+/* ══════════════════════════════════════════════════════════
+   FOUNDER STORY
+   ══════════════════════════════════════════════════════════ */
+.story-card {
+    display: flex;
+    align-items: flex-start;
+    gap: 40px;
+    max-width: 760px;
+    margin: 0 auto;
+    background: var(--bg-card);
+    border: 1px solid var(--border-hi);
+    border-radius: var(--radius-card);
+    padding: 40px 36px;
+    box-shadow: var(--shadow);
+}
+.story-avatar {
+    flex-shrink: 0;
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background: var(--accent-dim);
+    border: 2px solid var(--accent);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 40px;
+    color: var(--accent);
+    overflow: hidden;
+}
+.story-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.story-body {
+    flex: 1;
+}
+.story-label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--accent);
+    margin-bottom: 6px;
+}
+.story-body h2 {
+    margin-bottom: 16px;
+    font-size: 1.5rem;
+}
+.story-body p {
+    font-size: 14px;
+    line-height: 1.7;
+    color: var(--text-muted);
+    margin-bottom: 14px;
+}
+.story-body p strong {
+    color: var(--text);
+}
+.story-signoff {
+    font-style: italic;
+    color: var(--accent) !important;
+    margin-top: 8px;
+    font-weight: 500;
+}
+@media (max-width: 600px) {
+    .story-card {
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        gap: 24px;
+        padding: 28px 20px;
+    }
+    .story-avatar {
+        width: 72px;
+        height: 72px;
+        font-size: 28px;
+    }
+}
diff --git a/assets/js/script.js b/assets/js/script.js
new file mode 100644
index 0000000..ba369f5
--- /dev/null
+++ b/assets/js/script.js
@@ -0,0 +1,837 @@
+// ── Speedrun Slider (inline script from how-it-works section) ──
+(function () {
+  const slider = document.getElementById("speedrunSlider");
+  const dotsContainer = document.getElementById("speedrunDots");
+  if (!slider || !dotsContainer) return;
+  const slides = slider.querySelectorAll(".video-slide");
+  const total = slides.length;
+  if (total === 0) return;
+
+  for (let i = 0; i < total; i++) {
+    const dot = document.createElement("button");
+    dot.className = "slider-dot" + (i === 0 ? " active" : "");
+    dot.setAttribute("aria-label", "Go to slide " + (i + 1));
+    dot.onclick = function () {
+      slides[i].scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "start",
+      });
+    };
+    dotsContainer.appendChild(dot);
+  }
+
+  function updateDots() {
+    const threshold = 120;
+    let activeIdx = 0;
+    for (let i = 0; i < total; i++) {
+      const rect = slides[i].getBoundingClientRect();
+      const center = rect.left + rect.width / 2;
+      const sl = slider.getBoundingClientRect();
+      const slCenter = sl.left + sl.width / 2;
+      if (Math.abs(center - slCenter) < threshold) {
+        activeIdx = i;
+      }
+    }
+    dotsContainer.querySelectorAll(".slider-dot").forEach((d, i) => {
+      d.classList.toggle("active", i === activeIdx);
+    });
+  }
+
+  slider.addEventListener("scroll", updateDots);
+  updateDots();
+})();
+
+function slideSpeedrun(dir) {
+  plausible("Speedrun Nav", {
+    props: { direction: dir > 0 ? "next" : "prev" },
+  });
+  const slider = document.getElementById("speedrunSlider");
+  if (!slider) return;
+  const slideWidth = slider.querySelector(".video-slide").offsetWidth + 20;
+  slider.scrollBy({
+    left: slideWidth * dir,
+    behavior: "smooth",
+  });
+}
+
+// ── Mobile menu ──────────────────────────────────────────
+function toggleMobile() {
+  plausible("Mobile Menu Toggle");
+  const nav = document.getElementById("nav-links");
+  nav.classList.toggle("mobile-open");
+}
+
+// ── FAQ accordion ────────────────────────────────────────
+function toggleFaq(btn) {
+  const q = btn.innerText.replace(/[?✦]/g, "").trim();
+  plausible("FAQ Toggle", { props: { question: q } });
+  const answer = btn.nextElementSibling;
+  const isOpen = answer.classList.contains("open");
+  // Close all
+  document
+    .querySelectorAll(".faq-answer.open")
+    .forEach((el) => el.classList.remove("open"));
+  document
+    .querySelectorAll(".faq-question.open")
+    .forEach((el) => el.classList.remove("open"));
+  if (!isOpen) {
+    answer.classList.add("open");
+    btn.classList.add("open");
+  }
+}
+
+// ── Signup Webhook URLs (matching app.derez.ai) ──────────
+const SIGNUP_URL =
+  "https://n8n.derez.ai/webhook/4de196b7-2ad2-4f9a-9b4d-dc8d3b30865b";
+const AUTH_URL =
+  "https://n8n.derez.ai/webhook/aca1b27f-c18e-4424-b7a0-de01007a3fe6";
+const COUPON_URL =
+  "https://n8n.derez.ai/webhook/fd6375cb-6d73-4482-bfa3-ef8365f43a67";
+
+let inlineCouponApplied = false;
+
+// ── Helper: show/hide auth messages ──────────────────────
+function showAuthError(id, msg) {
+  const el = document.getElementById(id);
+  el.textContent = msg;
+  el.style.display = "flex";
+}
+function hideAuthError(id) {
+  document.getElementById(id).style.display = "none";
+}
+
+// ── Helper: btn loading state ────────────────────────────
+function btnLoad(btn, text) {
+  btn.disabled = true;
+  btn.textContent = text;
+}
+function btnReset(btn) {
+  btn.disabled = false;
+  btn.textContent = "Buy Agent — $9.50/mo";
+}
+
+function isValidEmail(e) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
+}
+
+// ── Coupon ──────────────────────────────────────────────
+function handleCouponKey(e) {
+  if (e.key === "Enter") {
+    e.preventDefault();
+    applyInlineCoupon();
+  }
+}
+
+async function applyInlineCoupon() {
+  const input = document.getElementById("signup-coupon-input");
+  const spinner = document.getElementById("signup-coupon-spinner");
+  const errorEl = document.getElementById("signup-coupon-error");
+  const successEl = document.getElementById("signup-coupon-success");
+
+  const code = input.value.trim();
+  if (!code) return;
+
+  spinner.style.display = "flex";
+  errorEl.style.display = "none";
+  successEl.style.display = "none";
+  input.classList.remove("signup-coupon-input-error");
+
+  try {
+    const res = await fetch(COUPON_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ code }),
+    });
+    if (!res.ok) throw new Error("Invalid");
+    const data = await res.json();
+    const raw = Array.isArray(data) ? data[0] : data;
+    const item =
+      raw && typeof raw === "object" && "json" in raw ? raw.json : raw;
+    if (item?.valid === true || item?.status === "ok") {
+      inlineCouponApplied = true;
+      successEl.style.display = "flex";
+      input.style.display = "none";
+    } else {
+      throw new Error("Invalid");
+    }
+  } catch {
+    input.classList.add("signup-coupon-input-error");
+    errorEl.style.display = "block";
+  } finally {
+    spinner.style.display = "none";
+  }
+}
+
+// ── Sign Up (inline on landing page) ────────────────────
+async function doInlineSignUp() {
+  const email = document.getElementById("inline-signup-email").value.trim();
+  const password = document.getElementById("inline-signup-password").value;
+  const agent = document.getElementById("inline-signup-agent").value;
+  const location = document.getElementById("inline-signup-location").value;
+
+  hideAuthError("inline-signup-error");
+  document.getElementById("inline-signup-success").style.display = "none";
+
+  if (!isValidEmail(email)) {
+    showAuthError("inline-signup-error", "Please enter a valid email address.");
+    return;
+  }
+  if (password.length < 8) {
+    showAuthError(
+      "inline-signup-error",
+      "Password must be at least 8 characters.",
+    );
+    return;
+  }
+
+  const btn = document.getElementById("inline-signup-btn");
+  btnLoad(btn, "Hiring agent\u2026");
+
+  // Open blank tab synchronously for Stripe redirect
+  const stripeTab = window.open("", "_blank");
+
+  try {
+    // Step 1: authenticate
+    const authRes = await fetch(AUTH_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email, password }),
+    });
+    if (!authRes.ok)
+      throw new Error("Account creation failed. Please try again later.");
+
+    // Step 2: create agent
+    const createRes = await fetch(SIGNUP_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        email,
+        password,
+        agent,
+        location,
+      }),
+    });
+    if (!createRes.ok) {
+      throw new Error("Agent provisioning failed. Please contact support.");
+    }
+
+    const createData = await createRes.json();
+    const createRaw = Array.isArray(createData) ? createData[0] : createData;
+    const createItem =
+      createRaw && typeof createRaw === "object" && "json" in createRaw
+        ? createRaw.json
+        : createRaw;
+
+    // Navigate the pre-opened tab to Stripe checkout
+    const checkoutUrl =
+      createItem?.checkout_url || createItem?.checkoutUrl || createItem?.url;
+    if (checkoutUrl && checkoutUrl.startsWith("http")) {
+      stripeTab.location.href = checkoutUrl;
+    } else {
+      stripeTab.close();
+    }
+
+    // Show success message
+    document.getElementById("inline-signup-success").textContent =
+      "Agent created! \u2713 Redirecting to checkout\u2026";
+    document.getElementById("inline-signup-success").style.display = "flex";
+  } catch (err) {
+    stripeTab?.close();
+    showAuthError("inline-signup-error", err.message);
+  } finally {
+    btnReset(btn);
+  }
+}
+
+// ── Close mobile menu on link click ──────────────────────
+document.querySelectorAll(".nav-links a").forEach((link) => {
+  link.addEventListener("click", () => {
+    document.getElementById("nav-links").classList.remove("mobile-open");
+  });
+});
+
+// ── Smooth scroll offset for fixed header ────────────────
+document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
+  anchor.addEventListener("click", function (e) {
+    const target = document.querySelector(this.getAttribute("href"));
+    if (target) {
+      e.preventDefault();
+      const headerHeight = 60;
+      const top =
+        target.getBoundingClientRect().top + window.pageYOffset - headerHeight;
+      window.scrollTo({ top, behavior: "smooth" });
+    }
+  });
+});
+
+/* ── Period / billing update ──────────────────────────── */
+function updatePeriodDisplay() {
+  const sel = document.getElementById("pricing-period");
+  const yearly = sel.value === "yearly";
+  document.getElementById("bonus-trainee").classList.toggle("show", yearly);
+  document.getElementById("bonus-junior").classList.toggle("show", yearly);
+  document.getElementById("bonus-senior").classList.toggle("show", yearly);
+
+  document.getElementById("period-trainee").textContent = yearly
+    ? "/ month ✦ yearly"
+    : "/ month";
+  document.getElementById("period-junior").textContent = yearly
+    ? "/ month ✦ yearly"
+    : "/ month";
+  document.getElementById("period-senior").textContent = yearly
+    ? "/ month ✦ yearly"
+    : "/ month";
+}
+document
+  .getElementById("pricing-period")
+  .addEventListener("change", updatePeriodDisplay);
+updatePeriodDisplay(); // fire on load so yearly bonuses show by default
+
+/* ── Capture UTM params from URL ──────────────────────────── */
+(function () {
+  const params = new URLSearchParams(window.location.search);
+  ["source", "medium", "campaign", "term", "content"].forEach(function (key) {
+    const val = params.get("utm_" + key);
+    if (val) document.getElementById("utm_" + key).value = val;
+  });
+})();
+
+/* ── Buy Agent Webhook ───────────────────────────── */
+const ORDER_WEBHOOK = "https://n8n.derez.ai/webhook/payment";
+
+function showPricingToast(msg) {
+  const el = document.getElementById("pricing-toast");
+  el.textContent = msg;
+  el.classList.add("show");
+  if (window._pricingToastTimer) clearTimeout(window._pricingToastTimer);
+  window._pricingToastTimer = setTimeout(function () {
+    el.classList.remove("show");
+  }, 20000);
+}
+
+async function hireAgent(product) {
+  const agent = document.getElementById("pricing-agent").value;
+  const period = document.getElementById("pricing-period").value;
+  const location = document.getElementById("pricing-location").value;
+  const email = document.getElementById("pricing-email").value.trim();
+  const coupon = document.getElementById("pricing-coupon").value.trim();
+
+  // Validate email
+  const emailInput = document.getElementById("pricing-email");
+  emailInput.classList.remove("invalid");
+  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    emailInput.classList.add("invalid");
+    showPricingToast(
+      "Please configure your agent and provide a valid email address.",
+    );
+    emailInput.focus();
+    return;
+  }
+
+  plausible("Pricing Click", {
+    props: { product: product, agent: agent, period: period },
+  });
+
+  try {
+    // Use a hidden form POST so the 302 redirect opens naturally in the new tab
+    const form = document.createElement("form");
+    form.method = "POST";
+    form.action = ORDER_WEBHOOK;
+    form.target = "_self";
+    form.style.display = "none";
+
+    const fields = {
+      product: product,
+      agent: agent,
+      period: period,
+      location: location,
+      email: email || "",
+      coupon: coupon || "",
+      utm_source: document.getElementById("utm_source").value || "",
+      utm_medium: document.getElementById("utm_medium").value || "",
+      utm_campaign: document.getElementById("utm_campaign").value || "",
+      utm_term: document.getElementById("utm_term").value || "",
+      utm_content: document.getElementById("utm_content").value || "",
+    };
+
+    Object.keys(fields).forEach(function (key) {
+      const inp = document.createElement("input");
+      inp.type = "hidden";
+      inp.name = key;
+      inp.value = fields[key];
+      form.appendChild(inp);
+    });
+
+    document.body.appendChild(form);
+    form.submit();
+    document.body.removeChild(form);
+  } catch (err) {
+    console.error("Order webhook failed:", err);
+  }
+}
+
+/* ── Chat Widget ──────────────────────────────────────────── */
+const CHAT_URL =
+  "https://n8n.derez.ai/webhook/a58d00c4-f0c9-40cd-bb50-4f45f0442ef0";
+let chatId = null;
+let chatOpen = false;
+let chatBusy = false;
+let greeted = false;
+let probeTimer = null;
+
+function chatToggle() {
+  plausible("Chat Toggle", {
+    props: { action: chatOpen ? "close" : "open" },
+  });
+  chatOpen = !chatOpen;
+  document.getElementById("chat-widget").classList.toggle("open", chatOpen);
+  document.getElementById("chat-fab").classList.toggle("open", chatOpen);
+  document.getElementById("chat-widget").setAttribute("aria-hidden", !chatOpen);
+  if (chatOpen) {
+    // User opened chat manually — cancel the auto-open probe
+    if (probeTimer) {
+      clearTimeout(probeTimer);
+      probeTimer = null;
+    }
+    if (!chatId) {
+      chatId = String(Math.floor(100000 + Math.random() * 900000));
+      chatAppendMsg(
+        "bot",
+        "Hi! I'm your Sales Agent. Ask me about plans, setup, pricing, integrations, or anything about your AI agent.",
+      );
+    }
+    setTimeout(() => document.getElementById("chat-input").focus(), 300);
+  }
+}
+
+function chatClose() {
+  if (chatOpen) chatToggle();
+}
+
+function chatOpenSilent() {
+  if (!chatOpen) {
+    chatOpen = true;
+    document.getElementById("chat-widget").classList.add("open");
+    document.getElementById("chat-widget").setAttribute("aria-hidden", "false");
+  }
+}
+
+function chatAppendMsg(role, text) {
+  const msgs = document.getElementById("chat-msgs");
+  const div = document.createElement("div");
+  div.className = "chat-msg chat-msg-" + role;
+  // strip <script> and on* handlers to prevent XSS, but render safe HTML
+  div.innerHTML = text
+    .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "")
+    .replace(/\son\w+\s*=\s*"[^"]*"/gi, "")
+    .replace(/\son\w+\s*=\s*'[^']*'/gi, "");
+  msgs.appendChild(div);
+  msgs.scrollTop = msgs.scrollHeight;
+  return div;
+}
+
+function chatKey(e) {
+  if (e.key === "Enter") chatSend();
+}
+
+async function chatSend() {
+  const input = document.getElementById("chat-input");
+  const btn = document.getElementById("chat-send-btn");
+  const msg = input.value.trim();
+  if (!msg || chatBusy) return;
+  plausible("Chat Message Sent");
+  chatBusy = true;
+  chatOpenSilent();
+  chatAppendMsg("user", msg);
+  input.value = "";
+  btn.disabled = true;
+  btn.innerHTML = '<span style="opacity:0.6">…</span>';
+
+  const think = chatAppendMsg("bot", "…");
+  think.className = "chat-msg chat-msg-thinking";
+
+  try {
+    const res = await fetch(CHAT_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        message: msg,
+        sessionId: chatId,
+      }),
+    });
+    const json = await res.json();
+    const first = Array.isArray(json) ? json[0] : json;
+    const reply =
+      typeof json === "string"
+        ? json
+        : (first &&
+            (first.output ||
+              first.message ||
+              first.reply ||
+              first.response ||
+              first.text)) ||
+          JSON.stringify(json);
+    think.remove();
+    chatAppendMsg("bot", reply);
+  } catch (err) {
+    think.remove();
+    chatAppendMsg(
+      "bot",
+      "Sorry, I couldn't connect right now. Please try again later.",
+    );
+  } finally {
+    chatBusy = false;
+    btn.disabled = false;
+    btn.innerHTML = "➤";
+    document.getElementById("chat-input").focus();
+  }
+}
+
+/* ── Visitor Probe — auto-open after 15s ────────────────── */
+(function () {
+  let fired = false;
+  probeTimer = setTimeout(function () {
+    fetch("https://ipinfo.io/json")
+      .then(function (r) {
+        return r.json();
+      })
+      .then(function (geo) {
+        fireProbe(geo);
+      })
+      .catch(function () {
+        fireProbe(null);
+      });
+  }, 15000);
+
+  function fireProbe(geo) {
+    if (fired) return;
+    fired = true;
+    const cid = chatId || String(Math.floor(100000 + Math.random() * 900000));
+    const ua = navigator.userAgent;
+
+    let lines = [
+      "NEW VISITOR — 15s Probe",
+      "========================================",
+      "",
+      "- Page section: hero",
+      "- Scroll depth: " +
+        Math.min(
+          100,
+          Math.round(
+            (window.pageYOffset /
+              Math.max(
+                1,
+                document.documentElement.scrollHeight - window.innerHeight,
+              )) *
+              100,
+          ),
+        ) +
+        "%",
+      "- Time on page: 15 seconds",
+      "- Timestamp: " + new Date().toUTCString(),
+      "",
+      "--- BROWSER & DEVICE ---",
+      "- Browser: " +
+        (/Edg\/([\d.]+)/.test(ua)
+          ? "Edge " + RegExp.$1
+          : /Chrome\/([\d.]+)/.test(ua)
+            ? "Chrome " + RegExp.$1
+            : /Firefox\/([\d.]+)/.test(ua)
+              ? "Firefox " + RegExp.$1
+              : /Version\/([\d.]+).*Safari/.test(ua)
+                ? "Safari " + RegExp.$1
+                : "Unknown"),
+      "- OS: " +
+        (/Windows NT 10/.test(ua)
+          ? "Windows 10/11"
+          : /Mac OS X/.test(ua)
+            ? "macOS"
+            : /Android/.test(ua)
+              ? "Android"
+              : /iPhone/.test(ua)
+                ? "iOS"
+                : /Linux/.test(ua)
+                  ? "Linux"
+                  : "Unknown"),
+      "- Device: " + (/Mobi|Android|iPhone/.test(ua) ? "Mobile" : "Desktop"),
+      "- Screen: " + screen.width + "x" + screen.height,
+      "- Language: " + navigator.language,
+      "- User Agent: " + ua,
+      "",
+      "--- PAGE ---",
+      "- URL: " + window.location.href,
+      "- Referrer: " + (document.referrer || "direct / none"),
+      "- Title: " + document.title,
+    ];
+    if (geo) {
+      lines.push("");
+      lines.push("--- LOCATION ---");
+      if (geo.country) lines.push("- Country: " + geo.country);
+      if (geo.city) lines.push("- City: " + geo.city);
+      if (geo.org) lines.push("- ISP: " + geo.org);
+    }
+    lines.push("");
+    lines.push("- Chat ID: " + cid);
+
+    const payload = {
+      message: lines.join("\n"),
+      sessionId: cid,
+    };
+
+    fetch(CHAT_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    })
+      .then(function (r) {
+        const ct = r.headers.get("content-type") || "";
+        if (ct.indexOf("json") !== -1) return r.json();
+        return r.text().then(function (t) {
+          return { output: t };
+        });
+      })
+      .then(function (d) {
+        const item = Array.isArray(d) ? d[0] : d;
+        const reply =
+          (item &&
+            (item.output ||
+              item.message ||
+              item.reply ||
+              item.response ||
+              item.text)) ||
+          null;
+        if (reply) {
+          if (!chatId) chatId = cid;
+          chatAppendMsg("bot", reply);
+          greeted = true;
+          if (!chatOpen) chatOpenSilent();
+        }
+      })
+      .catch(function () {});
+  }
+})();
+
+/* ── Scroll Depth Tracking ────────────────────────── */
+(function () {
+  const thresholds = [25, 50, 75, 100];
+  let sent = {};
+  let ticking = false;
+  window.addEventListener("scroll", function () {
+    if (!ticking) {
+      window.requestAnimationFrame(function () {
+        const scrolled = window.pageYOffset + window.innerHeight;
+        const total = document.documentElement.scrollHeight;
+        const pct = Math.min(100, Math.round((scrolled / total) * 100));
+        thresholds.forEach(function (t) {
+          if (pct >= t && !sent[t]) {
+            sent[t] = true;
+            plausible("Scroll Depth", {
+              props: { percent: t + "%" },
+            });
+          }
+        });
+        ticking = false;
+      });
+      ticking = true;
+    }
+  });
+})();
+
+/* ── Coupon Badges ──────────────────────────────────── */
+const COUPONS = {
+  // 499
+  blog499: 499,
+  creator499: 499,
+  friends499: 499,
+
+  // 950
+  blog950: 950,
+  creator950: 950,
+  friends950: 950,
+  record950: 950,
+
+  // 1750
+  blog1750: 1750,
+  friends1750: 1750,
+  creator1750: 1750,
+};
+const PLAN_PRICES = { trainee: 499, junior: 950, senior: 1750 };
+function centsToDollar(c) {
+  return "$" + (c / 100).toFixed(2);
+}
+function updateCouponBadges() {
+  var code = document
+    .getElementById("pricing-coupon")
+    .value.trim()
+    .toLowerCase();
+  var discount = COUPONS[code];
+  ["trainee", "junior", "senior"].forEach(function (plan) {
+    var badge = document.getElementById("badge-" + plan);
+    if (discount !== undefined) {
+      var firstMonth = Math.max(0, PLAN_PRICES[plan] - discount);
+      badge.querySelector(".badge-price").textContent =
+        centsToDollar(firstMonth);
+      badge.classList.add("visible");
+      if (firstMonth === 0) badge.classList.add("free");
+      else badge.classList.remove("free");
+    } else {
+      badge.classList.remove("visible", "free");
+      badge.querySelector(".badge-price").textContent = "—";
+    }
+  });
+}
+document
+  .getElementById("pricing-coupon")
+  .addEventListener("input", updateCouponBadges);
+
+/* ── Blog ──────────────────────────────────────────────── */
+const BLOG_POSTS_PER_PAGE = 6;
+let blogAllPosts = [];
+let blogFilteredPosts = [];
+let blogCurrentPage = 0;
+
+function blogFormatDate(dateStr) {
+  const d = new Date(dateStr);
+  const months = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+  return months[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
+}
+
+function blogAreaClass(area) {
+  var map = {
+    howto: "area-howto",
+    news: "area-news",
+    "video-scripts": "area-video-scripts",
+    "speed-run": "area-speed-run",
+  };
+  return map[area] || "area-default";
+}
+
+function blogRender() {
+  const start = blogCurrentPage * BLOG_POSTS_PER_PAGE;
+  const pagePosts = blogFilteredPosts.slice(start, start + BLOG_POSTS_PER_PAGE);
+  const grid = document.getElementById("blog-grid");
+  const totalPages = Math.max(
+    1,
+    Math.ceil(blogFilteredPosts.length / BLOG_POSTS_PER_PAGE),
+  );
+
+  if (pagePosts.length === 0) {
+    grid.innerHTML =
+      '<div class="blog-empty">No posts match your search.</div>';
+    document.getElementById("blog-page-info").textContent = "";
+    document.getElementById("blog-prev").disabled = true;
+    document.getElementById("blog-next").disabled = true;
+    return;
+  }
+
+  grid.innerHTML = pagePosts
+    .map(function (p) {
+      var chip = p.agent
+        ? '<span class="blog-card-chip">' + p.agent + "</span>"
+        : "";
+      return (
+        '<a href="' +
+        p.link +
+        '" class="blog-card" style="text-decoration:none" onclick="plausible(\'Blog Card Click\',{props:{post:\'' +
+        p.id.replace(/'/g, "\\'") +
+        "',area:'" +
+        p.area.replace(/'/g, "\\'") +
+        "'}})'>" +
+        '<span style="display:flex;gap:6px;flex-wrap:wrap;align-self:flex-start">' +
+        '<span class="blog-card-area ' +
+        blogAreaClass(p.area) +
+        '">' +
+        p.area +
+        "</span>" +
+        chip +
+        "</span>" +
+        '<span class="blog-card-date">' +
+        blogFormatDate(p.date) +
+        "</span>" +
+        "<h3>" +
+        p.headline +
+        "</h3>" +
+        "<p>" +
+        p.teaser +
+        "</p>" +
+        '<span class="blog-card-link">Read more &rarr;</span>' +
+        "</a>"
+      );
+    })
+    .join("");
+
+  document.getElementById("blog-page-info").textContent =
+    "Page " + (blogCurrentPage + 1) + " of " + totalPages;
+  document.getElementById("blog-prev").disabled = blogCurrentPage === 0;
+  document.getElementById("blog-next").disabled =
+    blogCurrentPage >= totalPages - 1;
+}
+
+function blogPrev() {
+  if (blogCurrentPage > 0) {
+    blogCurrentPage--;
+    blogRender();
+  }
+}
+
+function blogNext() {
+  const totalPages = Math.ceil(blogFilteredPosts.length / BLOG_POSTS_PER_PAGE);
+  if (blogCurrentPage < totalPages - 1) {
+    blogCurrentPage++;
+    blogRender();
+  }
+}
+
+function blogFilter() {
+  const q = document
+    .getElementById("blog-search-input")
+    .value.trim()
+    .toLowerCase();
+  if (!q) {
+    blogFilteredPosts = blogAllPosts.slice();
+  } else {
+    blogFilteredPosts = blogAllPosts.filter(function (p) {
+      return (
+        p.headline.toLowerCase().indexOf(q) !== -1 ||
+        p.teaser.toLowerCase().indexOf(q) !== -1 ||
+        p.area.toLowerCase().indexOf(q) !== -1
+      );
+    });
+  }
+  blogCurrentPage = 0;
+  blogRender();
+}
+
+// Load blog index
+fetch("blog/index.json?_=" + Date.now())
+  .then(function (r) {
+    return r.json();
+  })
+  .then(function (data) {
+    blogAllPosts = data.posts || [];
+    blogFilteredPosts = blogAllPosts.slice();
+    blogRender();
+  })
+  .catch(function () {
+    document.getElementById("blog-grid").innerHTML =
+      '<div class="blog-empty">Blog coming soon.</div>';
+  });
+
+// Search on input
+document
+  .getElementById("blog-search-input")
+  .addEventListener("input", blogFilter);
diff --git a/index.html b/index.html
index a1705f9..5ad11e7 100644
--- a/index.html
+++ b/index.html
@@ -126,1842 +126,9 @@
             }
         </script>
 
-        <style>
-            /* ═══════════════════════════════════════════════════════════════
-           DESIGN TOKENS  (matches app.derez.ai design system)
-           ═══════════════════════════════════════════════════════════════ */
-            :root {
-                --bg: #000810;
-                --bg-card: #010f20;
-                --bg-inner: #000d1a;
-                --bg-hover: #001a30;
-                --bg-input: #000813;
-                --border: #0a3060;
-                --border-hi: rgba(0, 245, 255, 0.45);
-                --accent: #00f5ff;
-                --accent-dim: #002535;
-                --danger: #ff3b3b;
-                --danger-dim: #3b0000;
-                --success: #00ff88;
-                --warning: #ffaa00;
-                --text: #c8f0ff;
-                --text-muted: #2e6a80;
-                --radius: 8px;
-                --radius-card: 18px;
-                --shadow:
-                    0 0 0 1px rgba(0, 245, 255, 0.25),
-                    0 0 60px rgba(0, 245, 255, 0.12),
-                    0 28px 72px rgba(0, 0, 0, 0.9);
-                --max-width: 1120px;
-            }
+        <!-- ── Stylesheet ───────────────────────────────────────────────── -->
+        <link rel="stylesheet" href="assets/css/style.css" />
 
-            /* ── Reset ───────────────────────────────────────────────── */
-            *,
-            *::before,
-            *::after {
-                box-sizing: border-box;
-                margin: 0;
-                padding: 0;
-            }
-
-            html {
-                scroll-behavior: smooth;
-                -webkit-font-smoothing: antialiased;
-            }
-
-            body {
-                font-family: "Courier New", Courier, monospace;
-                background: var(--bg);
-                color: var(--text);
-                font-size: 14px;
-                line-height: 1.6;
-                overflow-x: hidden;
-            }
-
-            /* Ambient glow */
-            body::before {
-                content: "";
-                position: fixed;
-                inset: 0;
-                background:
-                    radial-gradient(
-                        ellipse 60% 50% at 25% 30%,
-                        rgba(0, 245, 255, 0.06) 0%,
-                        transparent 70%
-                    ),
-                    radial-gradient(
-                        ellipse 50% 60% at 75% 70%,
-                        rgba(0, 200, 255, 0.04) 0%,
-                        transparent 70%
-                    );
-                pointer-events: none;
-                z-index: 0;
-            }
-
-            /* ── Typography ──────────────────────────────────────────── */
-            h1,
-            h2,
-            h3,
-            h4 {
-                font-weight: 700;
-                letter-spacing: -0.02em;
-                line-height: 1.2;
-            }
-            h1 {
-                font-size: clamp(2.2rem, 5.5vw, 3.8rem);
-            }
-            h2 {
-                font-size: clamp(1.6rem, 3.5vw, 2.4rem);
-                margin-bottom: 0.6em;
-            }
-            h3 {
-                font-size: 1.1rem;
-            }
-            p {
-                color: var(--text-muted);
-                font-size: 14px;
-            }
-            a {
-                color: var(--accent);
-                text-decoration: none;
-            }
-            a:hover {
-                text-decoration: underline;
-            }
-
-            .container {
-                max-width: var(--max-width);
-                margin: 0 auto;
-                padding: 0 24px;
-                position: relative;
-                z-index: 1;
-            }
-
-            /* ── Buttons ─────────────────────────────────────────────── */
-            .btn {
-                display: inline-flex;
-                align-items: center;
-                gap: 8px;
-                padding: 10px 22px;
-                border-radius: var(--radius);
-                border: none;
-                cursor: pointer;
-                font-size: 14px;
-                font-weight: 600;
-                white-space: nowrap;
-                text-decoration: none;
-                transition:
-                    opacity 0.15s,
-                    background 0.15s,
-                    transform 0.1s;
-            }
-            .btn:hover {
-                opacity: 0.85;
-                text-decoration: none;
-            }
-            .btn:active {
-                transform: scale(0.97);
-            }
-
-            .btn-primary {
-                background: transparent;
-                color: #fff;
-                border: 1px solid var(--accent);
-                box-shadow:
-                    0 0 8px rgba(0, 245, 255, 0.35),
-                    inset 0 0 8px rgba(0, 245, 255, 0.04);
-            }
-            .btn-primary:hover {
-                background: rgba(0, 245, 255, 0.08);
-                box-shadow:
-                    0 0 14px rgba(0, 245, 255, 0.5),
-                    inset 0 0 10px rgba(0, 245, 255, 0.06);
-            }
-            .btn-ghost {
-                background: var(--bg-hover);
-                color: var(--text);
-                border: 1px solid var(--border);
-            }
-            .btn-ghost:hover {
-                opacity: 0.85;
-                background: var(--bg-hover);
-                border-color: var(--border);
-            }
-            .btn-lg {
-                padding: 12px 28px;
-                font-size: 13px;
-                border-radius: 8px;
-            }
-            .btn-block {
-                width: 100%;
-                justify-content: center;
-            }
-
-            /* ══════════════════════════════════════════════════════════
-           HEADER / NAV
-           ══════════════════════════════════════════════════════════ */
-            .site-header {
-                position: fixed;
-                top: 0;
-                left: 0;
-                right: 0;
-                z-index: 100;
-                background: rgba(0, 8, 16, 0.85);
-                backdrop-filter: blur(14px);
-                border-bottom: 1px solid var(--border-hi);
-                transition: background 0.3s;
-            }
-
-            .site-header .container {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                height: 60px;
-            }
-
-            .site-logo {
-                display: flex;
-                align-items: center;
-                flex-shrink: 0;
-            }
-            .site-logo:hover {
-                text-decoration: none;
-            }
-            .site-logo-img {
-                display: block;
-                height: 34px;
-                width: auto;
-            }
-
-            .nav-links {
-                display: flex;
-                align-items: center;
-                gap: 8px;
-                list-style: none;
-            }
-            .nav-links a {
-                padding: 6px 14px;
-                border-radius: var(--radius);
-                color: var(--text-muted);
-                font-size: 13px;
-                font-weight: 500;
-                transition:
-                    color 0.15s,
-                    background 0.15s;
-            }
-            .nav-links a:hover {
-                color: var(--text);
-                background: var(--bg-hover);
-                text-decoration: none;
-            }
-
-            .header-actions {
-                display: flex;
-                align-items: center;
-                gap: 10px;
-            }
-
-            .btn-login {
-                background: transparent;
-                color: var(--text);
-                border: 1px solid var(--border);
-                padding: 7px 18px;
-                border-radius: var(--radius);
-                font-size: 13px;
-                font-weight: 600;
-                cursor: pointer;
-                transition:
-                    border-color 0.15s,
-                    color 0.15s,
-                    background 0.15s;
-                text-decoration: none;
-                display: inline-flex;
-                align-items: center;
-                gap: 6px;
-            }
-            .btn-login:hover {
-                border-color: var(--accent);
-                color: var(--accent);
-                background: var(--accent-dim);
-                text-decoration: none;
-            }
-
-            .btn-signup-header {
-                padding: 7px 18px;
-                font-size: 13px;
-            }
-
-            /* Mobile hamburger */
-            .hamburger {
-                display: none;
-                flex-direction: column;
-                gap: 4px;
-                background: none;
-                border: none;
-                cursor: pointer;
-                padding: 6px;
-            }
-            .hamburger span {
-                display: block;
-                width: 22px;
-                height: 2px;
-                background: var(--text);
-                border-radius: 2px;
-                transition:
-                    transform 0.2s,
-                    opacity 0.2s;
-            }
-
-            /* ══════════════════════════════════════════════════════════
-           HERO
-           ══════════════════════════════════════════════════════════ */
-            .hero {
-                padding: 140px 0 80px;
-                text-align: center;
-                position: relative;
-                overflow: hidden;
-            }
-
-            .hero::after {
-                content: "";
-                position: absolute;
-                top: -30%;
-                left: 50%;
-                transform: translateX(-50%);
-                width: 90%;
-                height: 140%;
-                background: radial-gradient(
-                    ellipse at center,
-                    rgba(0, 245, 255, 0.05) 0%,
-                    transparent 65%
-                );
-                pointer-events: none;
-            }
-
-            .hero-badge {
-                display: inline-flex;
-                align-items: center;
-                gap: 6px;
-                padding: 6px 16px;
-                background: var(--accent-dim);
-                border: 1px solid rgba(0, 245, 255, 0.3);
-                border-radius: 20px;
-                font-size: 12px;
-                font-weight: 500;
-                color: var(--accent);
-                margin-bottom: 24px;
-            }
-
-            .hero h1 {
-                max-width: 820px;
-                margin: 0 auto 20px;
-            }
-            .hero h1 .highlight {
-                background: linear-gradient(135deg, var(--accent), #66e5ff);
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-                background-clip: text;
-            }
-
-            .hero-sub {
-                font-size: clamp(1rem, 2vw, 1.2rem);
-                max-width: 620px;
-                margin: 0 auto 36px;
-                line-height: 1.7;
-            }
-
-            .hero-actions {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                gap: 14px;
-                flex-wrap: wrap;
-                margin-bottom: 40px;
-            }
-
-            .hero-stats {
-                display: flex;
-                justify-content: center;
-                gap: 40px;
-                flex-wrap: wrap;
-            }
-            .hero-stat {
-                text-align: center;
-            }
-            .hero-stat-num {
-                font-size: 1.5rem;
-                font-weight: 800;
-                color: var(--text);
-            }
-            .hero-stat-label {
-                font-size: 12px;
-                color: var(--text-muted);
-                margin-top: 2px;
-            }
-
-            /* ══════════════════════════════════════════════════════════
-           SECTION COMMON
-           ══════════════════════════════════════════════════════════ */
-            section {
-                padding: 80px 0;
-            }
-
-            .section-title {
-                text-align: center;
-                max-width: 640px;
-                margin: 0 auto 16px;
-            }
-            .section-sub {
-                text-align: center;
-                max-width: 560px;
-                margin: 0 auto 50px;
-                font-size: 1rem;
-            }
-
-            /* ══════════════════════════════════════════════════════════
-           VIDEO SLIDER (Speed Run)
-           ══════════════════════════════════════════════════════════ */
-            .video-slider-wrapper {
-                position: relative;
-                max-width: 960px;
-                margin: 0 auto;
-            }
-
-            .video-slider {
-                display: flex;
-                gap: 20px;
-                overflow-x: auto;
-                scroll-snap-type: x mandatory;
-                -webkit-overflow-scrolling: touch;
-                scrollbar-width: none;
-                padding: 8px 4px;
-            }
-            .video-slider::-webkit-scrollbar {
-                display: none;
-            }
-
-            .video-slide {
-                flex: 0 0 calc((100% - 40px) / 3);
-                min-width: 260px;
-                scroll-snap-align: start;
-                background: var(--bg-card);
-                border: 1px solid var(--border);
-                border-radius: var(--radius-card);
-                overflow: hidden;
-                transition:
-                    border-color 0.2s,
-                    transform 0.2s;
-            }
-            .video-slide:hover {
-                border-color: var(--border-hi);
-                transform: translateY(-4px);
-            }
-
-            .video-slide a {
-                text-decoration: none;
-                color: inherit;
-                display: block;
-            }
-            .video-slide a:hover {
-                text-decoration: none;
-            }
-
-            .video-thumb {
-                position: relative;
-                width: 100%;
-                aspect-ratio: 16 / 9;
-                background-size: cover;
-                background-position: center;
-                background-color: var(--bg-inner);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }
-
-            .video-thumb .play-btn {
-                width: 54px;
-                height: 54px;
-                border-radius: 50%;
-                background: rgba(0, 0, 0, 0.7);
-                border: 2px solid rgba(255, 255, 255, 0.3);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                transition:
-                    background 0.2s,
-                    transform 0.2s;
-                backdrop-filter: blur(4px);
-            }
-            .video-slide:hover .play-btn {
-                background: var(--accent);
-                border-color: var(--accent);
-                transform: scale(1.08);
-            }
-            .video-thumb .play-btn svg {
-                width: 20px;
-                height: 20px;
-                fill: #fff;
-                margin-left: 2px;
-            }
-
-            .video-info {
-                padding: 14px 16px 18px;
-            }
-            .video-info h4 {
-                font-size: 13px;
-                font-weight: 600;
-                color: var(--text);
-                margin-bottom: 4px;
-                line-height: 1.4;
-            }
-            .video-info .video-desc {
-                font-size: 12px;
-                color: var(--text-muted);
-                line-height: 1.4;
-            }
-
-            .slider-arrow {
-                position: absolute;
-                top: 50%;
-                transform: translateY(-50%);
-                z-index: 10;
-                width: 40px;
-                height: 40px;
-                border-radius: 50%;
-                border: 1px solid var(--border);
-                background: var(--bg-card);
-                color: var(--text);
-                cursor: pointer;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 20px;
-                transition:
-                    background 0.15s,
-                    border-color 0.15s;
-                opacity: 0;
-                pointer-events: none;
-            }
-            .video-slider-wrapper:hover .slider-arrow {
-                opacity: 1;
-                pointer-events: auto;
-            }
-            .slider-arrow:hover {
-                background: var(--bg-hover);
-                border-color: var(--accent);
-            }
-            .slider-arrow-prev {
-                left: -20px;
-            }
-            .slider-arrow-next {
-                right: -20px;
-            }
-
-            .slider-dots {
-                display: flex;
-                justify-content: center;
-                gap: 8px;
-                margin-top: 24px;
-            }
-            .slider-dot {
-                width: 8px;
-                height: 8px;
-                border-radius: 50%;
-                border: none;
-                background: var(--border);
-                cursor: pointer;
-                transition:
-                    background 0.2s,
-                    transform 0.2s;
-                padding: 0;
-            }
-            .slider-dot.active {
-                background: var(--accent);
-                transform: scale(1.3);
-            }
-            .slider-dot:hover {
-                background: var(--text-muted);
-            }
-
-            @media (max-width: 768px) {
-                .video-slide {
-                    flex: 0 0 calc((100% - 20px) / 2);
-                    min-width: 0;
-                }
-                .slider-arrow {
-                    display: none;
-                }
-            }
-            @media (max-width: 480px) {
-                .video-slide {
-                    flex: 0 0 85%;
-                }
-            }
-
-            /* ══════════════════════════════════════════════════════════
-           SPEEDRUN (How It Works) — kept for reference
-           ══════════════════════════════════════════════════════════ */
-            .steps {
-                display: grid;
-                grid-template-columns: repeat(3, 1fr);
-                gap: 24px;
-                counter-reset: step;
-            }
-
-            .step-card {
-                background: var(--bg-card);
-                border: 1px solid var(--border);
-                border-radius: var(--radius-card);
-                padding: 32px 28px;
-                position: relative;
-                transition:
-                    border-color 0.2s,
-                    transform 0.2s;
-            }
-            .step-card:hover {
-                border-color: var(--border-hi);
-                transform: translateY(-4px);
-            }
-
-            .step-number {
-                font-size: 2.4rem;
-                font-weight: 800;
-                color: rgba(0, 245, 255, 0.12);
-                line-height: 1;
-                margin-bottom: 12px;
-            }
-            .step-icon {
-                width: 44px;
-                height: 44px;
-                border-radius: 12px;
-                background: var(--accent-dim);
-                border: 1px solid rgba(0, 245, 255, 0.25);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                color: var(--accent);
-                margin-bottom: 16px;
-            }
-            .step-card h3 {
-                margin-bottom: 8px;
-                font-size: 1.1rem;
-            }
-            .step-card p {
-                font-size: 13px;
-                line-height: 1.65;
-            }
-
-            /* ══════════════════════════════════════════════════════════
-           FEATURES
-           ══════════════════════════════════════════════════════════ */
-            .features-grid {
-                display: grid;
-                grid-template-columns: repeat(3, 1fr);
-                gap: 20px;
-            }
-
-            .feature-card {
-                background: var(--bg-inner);
-                border: 1px solid var(--border);
-                border-radius: var(--radius-card);
-                padding: 28px 24px;
-                transition:
-                    border-color 0.2s,
-                    transform 0.2s;
-                position: relative;
-            }
-            .feature-card.unique {
-                border-color: var(--accent);
-                background: linear-gradient(
-                    180deg,
-                    rgba(0, 245, 255, 0.04) 0%,
-                    var(--bg-inner) 100%
-                );
-            }
-            .feature-badge {
-                position: absolute;
-                top: -8px;
-                right: 16px;
-                background: var(--accent);
-                color: #000;
-                font-size: 10px;
-                font-weight: 700;
-                text-transform: uppercase;
-                letter-spacing: 0.06em;
-                padding: 3px 12px;
-                border-radius: 20px;
-            }
-            .feature-card:hover {
-                border-color: var(--border-hi);
-                transform: translateY(-3px);
-            }
-
-            .feature-icon {
-                width: 40px;
-                height: 40px;
-                border-radius: 10px;
-                background: var(--accent-dim);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                color: var(--accent);
-                margin-bottom: 14px;
-            }
-            .feature-card h3 {
-                font-size: 15px;
-                margin-bottom: 6px;
-            }
-            .feature-card p {
-                font-size: 13px;
-                line-height: 1.6;
-            }
-
-            /* ══════════════════════════════════════════════════════════
-           AGENT OPTIONS
-           ══════════════════════════════════════════════════════════ */
-            .agent-options {
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                gap: 24px;
-            }
-
-            .agent-card {
-                background: var(--bg-card);
-                border: 1px solid var(--border);
-                border-radius: var(--radius-card);
-                padding: 36px 32px;
-                text-align: center;
-                transition:
-                    border-color 0.2s,
-                    transform 0.2s;
-                position: relative;
-            }
-            .agent-card:hover {
-                border-color: var(--border-hi);
-                transform: translateY(-3px);
-            }
-            .agent-card.featured {
-                border-color: var(--accent);
-                background: linear-gradient(
-                    180deg,
-                    rgba(0, 245, 255, 0.05) 0%,
-                    var(--bg-card) 100%
-                );
-            }
-            .agent-card.featured::before {
-                content: "Most Popular";
-                position: absolute;
-                top: -11px;
-                left: 50%;
-                transform: translateX(-50%);
-                background: var(--accent);
-                color: #000;
-                font-size: 11px;
-                font-weight: 600;
-                padding: 3px 16px;
-                border-radius: 20px;
-                letter-spacing: 0.04em;
-            }
-
-            .agent-card h3 {
-                font-size: 1.2rem;
-                margin-bottom: 4px;
-            }
-            .agent-tagline {
-                font-size: 13px;
-                color: var(--text-muted);
-                margin-bottom: 14px;
-            }
-            .agent-desc {
-                font-size: 13px;
-                line-height: 1.65;
-                margin-bottom: 12px;
-            }
-            .agent-features {
-                list-style: none;
-                text-align: left;
-                margin: 16px 0;
-            }
-            .agent-features li {
-                display: flex;
-                align-items: flex-start;
-                gap: 8px;
-                font-size: 13px;
-                padding: 5px 0;
-                color: var(--text-muted);
-            }
-            .agent-features li svg {
-                flex-shrink: 0;
-                margin-top: 2px;
-                color: var(--success);
-            }
-
-            /* ══════════════════════════════════════════════════════════
-           PRICING
-           ══════════════════════════════════════════════════════════ */
-            .pricing-grid {
-                display: grid;
-                grid-template-columns: repeat(3, 1fr);
-                gap: 20px;
-                max-width: 960px;
-                margin: 0 auto;
-            }
-            .pricing-card {
-                background: var(--bg-card);
-                border: 1px solid var(--border);
-                border-radius: var(--radius-card);
-                padding: 36px 28px;
-                text-align: center;
-                box-shadow: var(--shadow);
-                position: relative;
-                transition:
-                    border-color 0.2s,
-                    transform 0.2s;
-                display: flex;
-                flex-direction: column;
-            }
-            .pricing-card.featured {
-                border-color: var(--accent);
-                background: linear-gradient(
-                    180deg,
-                    rgba(0, 245, 255, 0.05) 0%,
-                    var(--bg-card) 100%
-                );
-                transform: scale(1.04);
-            }
-            .pricing-perks {
-                list-style: none;
-                text-align: left;
-                margin: 14px 0 24px;
-                flex: 1;
-            }
-            .pricing-card .btn-block {
-                margin-top: auto;
-            }
-            .pricing-badge {
-                position: absolute;
-                top: -11px;
-                left: 50%;
-                transform: translateX(-50%);
-                background: var(--accent);
-                color: #000;
-                font-size: 11px;
-                font-weight: 700;
-                text-transform: uppercase;
-                letter-spacing: 0.04em;
-                padding: 3px 18px;
-                border-radius: 20px;
-            }
-            .pricing-badge-coupon {
-                display: none;
-                font-size: 12px;
-                font-weight: 700;
-                color: #f59e0b;
-                background: rgba(245, 158, 11, 0.1);
-                border: 1px solid rgba(245, 158, 11, 0.25);
-                border-radius: 6px;
-                padding: 3px 10px;
-                margin-top: 8px;
-                margin-bottom: 4px;
-                line-height: 1.4;
-                letter-spacing: 0.02em;
-            }
-            .pricing-badge-coupon.visible {
-                display: inline-block;
-            }
-            .pricing-badge-coupon.free {
-                color: #22c55e;
-                background: rgba(34, 197, 94, 0.1);
-                border-color: rgba(34, 197, 94, 0.25);
-            }
-            .pricing-plan-name {
-                font-size: 13px;
-                font-weight: 700;
-                text-transform: uppercase;
-                letter-spacing: 0.06em;
-                color: var(--accent);
-                margin-bottom: 6px;
-            }
-            .pricing-amount {
-                font-size: 3rem;
-                font-weight: 800;
-                color: var(--text);
-                line-height: 1;
-            }
-            .pricing-amount .pricing-currency {
-                font-size: 1.4rem;
-                vertical-align: super;
-            }
-            .pricing-period {
-                font-size: 0.9rem;
-                font-weight: 500;
-                color: var(--text-muted);
-            }
-            .pricing-yearly-bonus {
-                display: none;
-                font-size: 12px;
-                color: var(--success);
-                font-weight: 600;
-                margin-top: 4px;
-            }
-            .pricing-yearly-bonus.show {
-                display: block;
-            }
-            .pricing-plan-desc {
-                font-size: 12px;
-                color: var(--text-muted);
-                margin: 10px 0 14px;
-                line-height: 1.5;
-            }
-            .pricing-plan-quota {
-                font-size: 13px;
-                font-weight: 600;
-                color: var(--text);
-                padding: 8px 0;
-                border-top: 1px solid var(--border);
-                border-bottom: 1px solid var(--border);
-                margin-bottom: 14px;
-            }
-            .pricing-perks {
-                list-style: none;
-                text-align: left;
-                margin: 14px 0 24px;
-            }
-            .pricing-perks li {
-                display: flex;
-                align-items: flex-start;
-                gap: 8px;
-                padding: 4px 0;
-                font-size: 13px;
-                color: var(--text);
-            }
-            .pricing-perks li svg {
-                flex-shrink: 0;
-                margin-top: 3px;
-                color: var(--text-muted);
-            }
-            .pricing-perks li .plus-icon {
-                color: var(--success);
-                font-weight: 700;
-                font-size: 15px;
-                line-height: 1;
-                margin-top: 3px;
-                flex-shrink: 0;
-            }
-            .pricing-perks li.new-feature {
-                color: var(--text);
-            }
-            .pricing-perks li.muted {
-                color: var(--text-muted);
-            }
-            .pricing-perks li.muted svg {
-                color: var(--text-muted);
-                opacity: 0.4;
-            }
-
-            /* ── Config box ─────────────────────────────── */
-            .pricing-config-box {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                gap: 12px;
-                margin-bottom: 36px;
-                background: var(--bg-card);
-                border: 1px solid var(--border);
-                border-radius: var(--radius-card);
-                padding: 14px 24px;
-                flex-wrap: wrap;
-            }
-            .pricing-config-label {
-                font-size: 13px;
-                font-weight: 600;
-                color: var(--text-muted);
-                white-space: nowrap;
-            }
-            .pricing-config-select {
-                appearance: none;
-                -webkit-appearance: none;
-                background: var(--bg);
-                border: 1px solid var(--border);
-                border-radius: var(--radius);
-                color: var(--text);
-                font-size: 13px;
-                padding: 6px 30px 6px 12px;
-                cursor: pointer;
-                outline: none;
-                transition: border-color 0.2s;
-                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
-                background-repeat: no-repeat;
-                background-position: right 8px center;
-                min-width: 110px;
-            }
-            .pricing-config-select:hover {
-                border-color: var(--accent);
-            }
-            .pricing-config-select:focus {
-                border-color: var(--accent);
-            }
-            .pricing-config-input {
-                background: var(--bg);
-                border: 1px solid var(--border);
-                border-radius: var(--radius);
-                color: var(--text);
-                font-size: 13px;
-                padding: 6px 12px;
-                outline: none;
-                transition: border-color 0.2s;
-                width: 120px;
-            }
-            .pricing-config-input:focus {
-                border-color: var(--accent);
-            }
-            .pricing-config-input::placeholder {
-                color: var(--text-muted);
-                opacity: 0.6;
-            }
-            #pricing-email {
-                width: 234px;
-            }
-            #pricing-email.invalid {
-                border-color: var(--danger);
-                box-shadow: 0 0 0 2px rgba(255, 59, 59, 0.2);
-            }
-
-            .pricing-toast {
-                position: fixed;
-                bottom: 100px;
-                left: 50%;
-                transform: translateX(-50%) translateY(20px);
-                background: var(--bg-card);
-                border: 1px solid var(--danger);
-                border-radius: var(--radius-card);
-                padding: 16px 24px;
-                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-                font-size: 14px;
-                color: var(--text);
-                opacity: 0;
-                visibility: hidden;
-                transition:
-                    opacity 0.3s,
-                    transform 0.3s,
-                    visibility 0.3s;
-                z-index: 9999;
-                max-width: 420px;
-                text-align: center;
-                pointer-events: none;
-            }
-            .pricing-toast.show {
-                opacity: 1;
-                visibility: visible;
-                transform: translateX(-50%) translateY(0);
-            }
-
-            @media (max-width: 900px) {
-                .pricing-grid {
-                    grid-template-columns: 1fr;
-                    max-width: 420px;
-                }
-                .pricing-card.featured {
-                    transform: none;
-                }
-            }
-
-            /* ══════════════════════════════════════════════════════════
-           FAQ
-           ══════════════════════════════════════════════════════════ */
-            .faq-list {
-                max-width: 700px;
-                margin: 0 auto;
-            }
-            .faq-item {
-                border-bottom: 1px solid var(--border);
-            }
-            .faq-question {
-                width: 100%;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                padding: 18px 0;
-                background: none;
-                border: none;
-                color: var(--text);
-                font-size: 15px;
-                font-weight: 600;
-                cursor: pointer;
-                text-align: left;
-                gap: 16px;
-                transition: color 0.15s;
-            }
-            .faq-question:hover {
-                color: var(--accent);
-            }
-            .faq-question svg {
-                flex-shrink: 0;
-                transition: transform 0.2s;
-                color: var(--text-muted);
-            }
-            .faq-question.open svg {
-                transform: rotate(180deg);
-            }
-            .faq-answer {
-                max-height: 0;
-                overflow: hidden;
-                transition:
-                    max-height 0.25s ease,
-                    padding 0.25s ease;
-                font-size: 14px;
-                color: var(--text-muted);
-                line-height: 1.7;
-            }
-            .faq-answer.open {
-                max-height: 300px;
-                padding: 0 0 18px;
-            }
-
-            /* ══════════════════════════════════════════════════════════
-           CTA
-           ══════════════════════════════════════════════════════════ */
-            .cta-section {
-                text-align: center;
-                padding: 80px 0 100px;
-            }
-            .cta-section h2 {
-                max-width: 560px;
-                margin: 0 auto 16px;
-            }
-            .cta-section p {
-                max-width: 480px;
-                margin: 0 auto 30px;
-            }
-
-            /* ══════════════════════════════════════════════════════════
-           BLOG
-           ══════════════════════════════════════════════════════════ */
-            .blog-search {
-                max-width: 480px;
-                margin: -20px auto 32px;
-            }
-            .blog-search input {
-                width: 100%;
-                padding: 12px 16px;
-                background: var(--bg-input);
-                border: 1px solid var(--border);
-                border-radius: var(--radius);
-                color: var(--text);
-                font-family: inherit;
-                font-size: 14px;
-                outline: none;
-                transition: border-color 0.2s;
-            }
-            .blog-search input:focus {
-                border-color: var(--accent);
-            }
-            .blog-search input::placeholder {
-                color: var(--text-muted);
-            }
-            .blog-grid {
-                display: grid;
-                grid-template-columns: 1fr 1fr 1fr;
-                gap: 20px;
-                margin-bottom: 32px;
-            }
-            .blog-card {
-                background: var(--bg-card);
-                border: 1px solid var(--border);
-                border-radius: var(--radius-card);
-                padding: 28px;
-                display: flex;
-                flex-direction: column;
-                transition:
-                    border-color 0.2s,
-                    transform 0.2s;
-                cursor: pointer;
-            }
-            .blog-card:hover {
-                border-color: var(--accent);
-                transform: translateY(-2px);
-            }
-            .blog-card-area {
-                display: inline-block;
-                font-size: 0.7rem;
-                font-weight: 700;
-                text-transform: uppercase;
-                letter-spacing: 0.06em;
-                padding: 3px 12px;
-                border-radius: 20px;
-                margin-bottom: 12px;
-                align-self: flex-start;
-                color: #000;
-            }
-            .blog-card-area.area-howto {
-                background: #00f5ff;
-            }
-            .blog-card-area.area-news {
-                background: #ffaa00;
-            }
-            .blog-card-area.area-video-scripts {
-                background: #00ff88;
-            }
-            .blog-card-area.area-architecture {
-                background: #a78bfa;
-            }
-            .blog-card-area.area-speed-run {
-                background: #f472b6;
-            }
-            .blog-card-area.area-default {
-                background: #a78bfa;
-            }
-            .blog-card-chip {
-                display: inline-block;
-                background: rgba(0, 245, 255, 0.08);
-                color: #00f5ff;
-                border: 1px solid rgba(0, 245, 255, 0.25);
-                font-size: 0.65rem;
-                font-weight: 600;
-                padding: 2px 10px;
-                border-radius: 20px;
-                text-transform: uppercase;
-                letter-spacing: 0.5px;
-                margin-bottom: 12px;
-                align-self: flex-start;
-            }
-            .blog-card-date {
-                font-size: 0.8rem;
-                color: var(--text-muted);
-                margin-bottom: 8px;
-            }
-            .blog-card h3 {
-                font-size: 1.05rem;
-                font-weight: 600;
-                line-height: 1.4;
-                margin-bottom: 10px;
-                color: var(--text);
-            }
-            .blog-card p {
-                font-size: 0.88rem;
-                color: var(--text-muted);
-                line-height: 1.6;
-                flex: 1;
-            }
-            .blog-card-link {
-                margin-top: 16px;
-                font-size: 0.85rem;
-                color: var(--accent);
-                text-decoration: none;
-            }
-            .blog-card:hover .blog-card-link {
-                text-decoration: underline;
-            }
-            .blog-pagination {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                gap: 24px;
-            }
-            .blog-pagination button {
-                background: none;
-                border: 1px solid var(--border);
-                color: var(--text);
-                padding: 10px 24px;
-                border-radius: var(--radius);
-                cursor: pointer;
-                font-family: inherit;
-                font-size: 0.88rem;
-                transition:
-                    border-color 0.2s,
-                    color 0.2s;
-            }
-            .blog-pagination button:hover:not(:disabled) {
-                border-color: var(--accent);
-                color: var(--accent);
-            }
-            .blog-pagination button:disabled {
-                opacity: 0.3;
-                cursor: default;
-            }
-            .blog-page-info {
-                font-size: 0.85rem;
-                color: var(--text-muted);
-            }
-            .blog-empty {
-                grid-column: 1 / -1;
-                text-align: center;
-                padding: 60px 20px;
-                color: var(--text-muted);
-                font-size: 0.95rem;
-            }
-            @media (max-width: 900px) {
-                .blog-grid {
-                    grid-template-columns: 1fr 1fr;
-                }
-            }
-            @media (max-width: 600px) {
-                .blog-grid {
-                    grid-template-columns: 1fr;
-                }
-            }
-
-            /* ══════════════════════════════════════════════════════════
-           TOPICS
-           ══════════════════════════════════════════════════════════ */
-            .topics-grid {
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                gap: 16px;
-                margin-top: 20px;
-            }
-            .topic-card {
-                display: flex;
-                flex-direction: column;
-                background: var(--bg-card);
-                border: 1px solid var(--border);
-                border-radius: 18px;
-                padding: 28px;
-                text-decoration: none;
-                transition: border-color .2s, transform .2s;
-            }
-            .topic-card:hover {
-                border-color: var(--accent);
-                transform: translateY(-3px);
-                text-decoration: none;
-            }
-            .topic-badge {
-                display: inline-block;
-                background: rgba(0,245,255,0.1);
-                color: var(--accent);
-                border: 1px solid rgba(0,245,255,0.25);
-                font-size: 0.7rem;
-                font-weight: 600;
-                padding: 3px 10px;
-                border-radius: 20px;
-                text-transform: uppercase;
-                letter-spacing: 0.5px;
-                align-self: flex-start;
-                margin-bottom: 14px;
-            }
-            .topic-card h3 {
-                font-size: 1.15rem;
-                font-weight: 600;
-                color: var(--text);
-                margin-bottom: 8px;
-                line-height: 1.3;
-            }
-            .topic-card p {
-                font-size: 0.88rem;
-                color: var(--text-muted);
-                flex: 1;
-                margin-bottom: 16px;
-                line-height: 1.6;
-            }
-            .topic-link {
-                color: var(--accent);
-                font-weight: 600;
-                font-size: 0.88rem;
-                align-self: flex-start;
-            }
-            .topic-card:hover .topic-link {
-                text-decoration: underline;
-            }
-            @media (max-width: 700px) {
-                .topics-grid { grid-template-columns: 1fr; }
-            }
-
-            /* ══════════════════════════════════════════════════════════
-           FOOTER
-           ══════════════════════════════════════════════════════════ */
-            .site-footer {
-                border-top: 1px solid var(--border);
-                padding: 40px 0;
-                font-size: 13px;
-                color: var(--text-muted);
-            }
-            .site-footer .container {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                flex-wrap: wrap;
-                gap: 16px;
-            }
-            .site-footer a {
-                color: var(--text-muted);
-            }
-            .site-footer a:hover {
-                color: var(--text);
-            }
-            .footer-links {
-                display: flex;
-                gap: 20px;
-            }
-
-            /* ══════════════════════════════════════════════════════════
-           RESPONSIVE
-           ══════════════════════════════════════════════════════════ */
-            @media (max-width: 900px) {
-                .steps {
-                    grid-template-columns: 1fr;
-                }
-                .features-grid {
-                    grid-template-columns: 1fr 1fr;
-                }
-                .agent-options {
-                    grid-template-columns: 1fr;
-                }
-            }
-
-            @media (max-width: 700px) {
-                .nav-links {
-                    display: none;
-                }
-                .hamburger {
-                    display: flex;
-                }
-
-                .nav-links.mobile-open {
-                    display: flex;
-                    flex-direction: column;
-                    position: fixed;
-                    top: 60px;
-                    left: 0;
-                    right: 0;
-                    background: var(--bg);
-                    border-bottom: 1px solid var(--border);
-                    padding: 12px 24px 20px;
-                    gap: 6px;
-                }
-
-                .features-grid {
-                    grid-template-columns: 1fr;
-                }
-                .hero-stats {
-                    gap: 24px;
-                }
-                .hero {
-                    padding: 110px 0 60px;
-                }
-                section {
-                    padding: 60px 0;
-                }
-                .pricing-card {
-                    padding: 32px 24px;
-                }
-
-                .site-footer .container {
-                    flex-direction: column;
-                    text-align: center;
-                }
-            }
-
-            /* ── Chat Widget (glowing floating button + glass panel) ── */
-            .chat-fab {
-                position: fixed;
-                bottom: 28px;
-                right: 28px;
-                z-index: 9999;
-                width: 60px;
-                height: 60px;
-                border-radius: 50%;
-                background: linear-gradient(135deg, #00f5ff, #0099cc);
-                border: none;
-                cursor: pointer;
-                box-shadow:
-                    0 4px 24px rgba(0, 245, 255, 0.4),
-                    0 0 0 0 rgba(0, 245, 255, 0.35);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 26px;
-                color: #000;
-                transition:
-                    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
-                    box-shadow 0.3s;
-                animation: fabPulse 2.5s ease-in-out infinite;
-            }
-            @keyframes fabPulse {
-                0%,
-                100% {
-                    box-shadow:
-                        0 4px 24px rgba(0, 245, 255, 0.4),
-                        0 0 0 0 rgba(0, 245, 255, 0.35);
-                }
-                50% {
-                    box-shadow:
-                        0 4px 32px rgba(0, 245, 255, 0.55),
-                        0 0 0 12px rgba(0, 245, 255, 0);
-                }
-            }
-            .chat-fab:hover {
-                transform: scale(1.12) rotate(-8deg);
-                box-shadow: 0 6px 36px rgba(0, 245, 255, 0.5);
-                animation: none;
-            }
-            .chat-fab:active {
-                transform: scale(0.92);
-            }
-            .chat-fab.open {
-                transform: scale(0.88);
-                opacity: 0.6;
-                animation: none;
-            }
-            .chat-widget {
-                position: fixed;
-                bottom: 100px;
-                right: 28px;
-                z-index: 9998;
-                width: 380px;
-                max-width: calc(100vw - 56px);
-                height: 520px;
-                max-height: calc(100vh - 160px);
-                background: rgba(1, 15, 32, 0.92);
-                backdrop-filter: blur(20px);
-                -webkit-backdrop-filter: blur(20px);
-                border: 1px solid rgba(0, 245, 255, 0.25);
-                border-radius: 22px;
-                box-shadow:
-                    0 24px 80px rgba(0, 0, 0, 0.6),
-                    0 0 40px rgba(0, 245, 255, 0.06);
-                overflow: hidden;
-                display: flex;
-                flex-direction: column;
-                opacity: 0;
-                visibility: hidden;
-                transform: translateY(16px) scale(0.94);
-                transform-origin: bottom right;
-                transition:
-                    opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
-                    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
-                    visibility 0.3s;
-            }
-            .chat-widget.open {
-                opacity: 1;
-                visibility: visible;
-                transform: translateY(0) scale(1);
-            }
-            .chat-widget::before {
-                content: "";
-                position: absolute;
-                inset: 0;
-                border-radius: 22px;
-                padding: 1px;
-                background: linear-gradient(
-                    135deg,
-                    rgba(0, 245, 255, 0.35),
-                    rgba(0, 153, 204, 0.15),
-                    rgba(0, 245, 255, 0.35)
-                );
-                -webkit-mask:
-                    linear-gradient(#fff 0 0) content-box,
-                    linear-gradient(#fff 0 0);
-                -webkit-mask-composite: xor;
-                mask-composite: exclude;
-                pointer-events: none;
-            }
-            .chat-header {
-                display: flex;
-                align-items: center;
-                gap: 12px;
-                padding: 18px 20px 14px;
-                background: linear-gradient(
-                    135deg,
-                    rgba(0, 245, 255, 0.08),
-                    rgba(0, 153, 204, 0.04)
-                );
-                border-bottom: 1px solid rgba(0, 245, 255, 0.12);
-            }
-            .chat-header-avatar {
-                width: 36px;
-                height: 36px;
-                border-radius: 50%;
-                background: linear-gradient(135deg, var(--accent-dim), #002535);
-                border: 2px solid var(--accent);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 18px;
-                flex-shrink: 0;
-                position: relative;
-            }
-            .chat-header-avatar::after {
-                content: "";
-                position: absolute;
-                bottom: -1px;
-                right: -1px;
-                width: 10px;
-                height: 10px;
-                border-radius: 50%;
-                background: var(--success);
-                border: 2px solid var(--bg-card);
-            }
-            .chat-header-info {
-                flex: 1;
-                min-width: 0;
-            }
-            .chat-header-name {
-                font-weight: 700;
-                font-size: 14px;
-                color: var(--text);
-                letter-spacing: -0.01em;
-            }
-            .chat-header-status {
-                font-size: 11px;
-                color: var(--success);
-                display: flex;
-                align-items: center;
-                gap: 5px;
-            }
-            .chat-header-status::before {
-                content: "";
-                width: 5px;
-                height: 5px;
-                border-radius: 50%;
-                background: var(--success);
-                display: inline-block;
-                animation: statusPulse 2s ease-in-out infinite;
-            }
-            @keyframes statusPulse {
-                0%,
-                100% {
-                    opacity: 1;
-                }
-                50% {
-                    opacity: 0.4;
-                }
-            }
-            .chat-header-close {
-                background: none;
-                border: none;
-                color: var(--text-muted);
-                cursor: pointer;
-                font-size: 18px;
-                padding: 6px;
-                line-height: 1;
-                border-radius: 8px;
-                transition:
-                    color 0.15s,
-                    background 0.15s;
-            }
-            .chat-header-close:hover {
-                color: var(--text);
-                background: rgba(255, 255, 255, 0.06);
-            }
-            .chat-msgs {
-                flex: 1;
-                overflow-y: auto;
-                padding: 16px 18px;
-                display: flex;
-                flex-direction: column;
-                gap: 10px;
-                scroll-behavior: smooth;
-            }
-            .chat-msgs::-webkit-scrollbar {
-                width: 4px;
-            }
-            .chat-msgs::-webkit-scrollbar-track {
-                background: transparent;
-            }
-            .chat-msgs::-webkit-scrollbar-thumb {
-                background: var(--border);
-                border-radius: 4px;
-            }
-            .chat-input-row {
-                display: flex;
-                align-items: center;
-                gap: 8px;
-                padding: 12px 16px 16px;
-                border-top: 1px solid rgba(0, 245, 255, 0.08);
-                background: rgba(0, 8, 16, 0.5);
-            }
-            .chat-input-box {
-                flex: 1;
-                min-width: 0;
-                padding: 10px 16px;
-                border: 1px solid var(--border);
-                border-radius: 22px;
-                outline: none;
-                background: var(--bg-input);
-                color: var(--text);
-                font-size: 13px;
-                transition:
-                    border-color 0.2s,
-                    box-shadow 0.2s;
-            }
-            .chat-input-box:focus {
-                border-color: var(--accent);
-                box-shadow: 0 0 0 2px rgba(0, 245, 255, 0.1);
-            }
-            .chat-input-box::placeholder {
-                color: var(--text-muted);
-            }
-            .chat-send-btn {
-                width: 38px;
-                height: 38px;
-                border-radius: 50%;
-                background: linear-gradient(135deg, var(--accent), #0099cc);
-                border: none;
-                cursor: pointer;
-                color: #000;
-                font-size: 16px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                flex-shrink: 0;
-                transition:
-                    opacity 0.15s,
-                    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
-                    box-shadow 0.2s;
-                box-shadow: 0 2px 12px rgba(0, 245, 255, 0.25);
-            }
-            .chat-send-btn:hover {
-                opacity: 0.9;
-                transform: scale(1.08);
-                box-shadow: 0 4px 16px rgba(0, 245, 255, 0.35);
-            }
-            .chat-send-btn:active {
-                transform: scale(0.88);
-            }
-            .chat-send-btn:disabled {
-                opacity: 0.35;
-                cursor: not-allowed;
-                transform: none;
-                box-shadow: none;
-            }
-            .chat-msg {
-                max-width: 80%;
-                padding: 10px 14px;
-                border-radius: 16px;
-                line-height: 1.5;
-                word-wrap: break-word;
-                font-size: 13px;
-                animation: msgSlide 0.25s cubic-bezier(0.22, 1, 0.36, 1);
-            }
-            @keyframes msgSlide {
-                from {
-                    opacity: 0;
-                    transform: translateY(8px) scale(0.97);
-                }
-                to {
-                    opacity: 1;
-                    transform: translateY(0) scale(1);
-                }
-            }
-            .chat-msg-bot {
-                align-self: flex-start;
-                background: rgba(1, 15, 32, 0.8);
-                border: 1px solid rgba(0, 245, 255, 0.1);
-                border-bottom-left-radius: 4px;
-            }
-            .chat-msg-user {
-                align-self: flex-end;
-                background: linear-gradient(135deg, var(--accent), #0099cc);
-                color: #000;
-                border-bottom-right-radius: 4px;
-            }
-            .chat-msg-thinking {
-                align-self: flex-start;
-                background: rgba(1, 15, 32, 0.6);
-                border: 1px solid rgba(0, 245, 255, 0.08);
-                border-bottom-left-radius: 4px;
-                opacity: 0.5;
-            }
-            @media (max-width: 500px) {
-                .chat-widget {
-                    right: 12px;
-                    bottom: 84px;
-                    width: calc(100vw - 24px);
-                    max-height: calc(100vh - 120px);
-                }
-                .chat-fab {
-                    right: 16px;
-                    bottom: 20px;
-                    width: 52px;
-                    height: 52px;
-                    font-size: 22px;
-                }
-            }
-            @media (max-width: 350px) {
-                .chat-widget {
-                    display: none;
-                }
-            }
-
-            /* ══════════════════════════════════════════════════════════
-           FOUNDER STORY
-           ══════════════════════════════════════════════════════════ */
-            .story-card {
-                display: flex;
-                align-items: flex-start;
-                gap: 40px;
-                max-width: 760px;
-                margin: 0 auto;
-                background: var(--bg-card);
-                border: 1px solid var(--border-hi);
-                border-radius: var(--radius-card);
-                padding: 40px 36px;
-                box-shadow: var(--shadow);
-            }
-            .story-avatar {
-                flex-shrink: 0;
-                width: 100px;
-                height: 100px;
-                border-radius: 50%;
-                background: var(--accent-dim);
-                border: 2px solid var(--accent);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 40px;
-                color: var(--accent);
-                overflow: hidden;
-            }
-            .story-avatar img {
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-            }
-            .story-body {
-                flex: 1;
-            }
-            .story-label {
-                font-size: 11px;
-                font-weight: 600;
-                text-transform: uppercase;
-                letter-spacing: 0.08em;
-                color: var(--accent);
-                margin-bottom: 6px;
-            }
-            .story-body h2 {
-                margin-bottom: 16px;
-                font-size: 1.5rem;
-            }
-            .story-body p {
-                font-size: 14px;
-                line-height: 1.7;
-                color: var(--text-muted);
-                margin-bottom: 14px;
-            }
-            .story-body p strong {
-                color: var(--text);
-            }
-            .story-signoff {
-                font-style: italic;
-                color: var(--accent) !important;
-                margin-top: 8px;
-                font-weight: 500;
-            }
-            @media (max-width: 600px) {
-                .story-card {
-                    flex-direction: column;
-                    align-items: center;
-                    text-align: center;
-                    gap: 24px;
-                    padding: 28px 20px;
-                }
-                .story-avatar {
-                    width: 72px;
-                    height: 72px;
-                    font-size: 28px;
-                }
-            }
-        </style>
         <!-- ── Plausible Analytics ──────────────────────────────────────── -->
         <script
             defer
@@ -2336,78 +503,6 @@
                     </button>
                     <div class="slider-dots" id="speedrunDots"></div>
                 </div>
-
-                <script>
-                    (function () {
-                        const slider =
-                            document.getElementById("speedrunSlider");
-                        const dotsContainer =
-                            document.getElementById("speedrunDots");
-                        if (!slider || !dotsContainer) return;
-                        const slides = slider.querySelectorAll(".video-slide");
-                        const total = slides.length;
-                        if (total === 0) return;
-
-                        for (let i = 0; i < total; i++) {
-                            const dot = document.createElement("button");
-                            dot.className =
-                                "slider-dot" + (i === 0 ? " active" : "");
-                            dot.setAttribute(
-                                "aria-label",
-                                "Go to slide " + (i + 1),
-                            );
-                            dot.onclick = function () {
-                                slides[i].scrollIntoView({
-                                    behavior: "smooth",
-                                    block: "nearest",
-                                    inline: "start",
-                                });
-                            };
-                            dotsContainer.appendChild(dot);
-                        }
-
-                        function updateDots() {
-                            const threshold = 120;
-                            let activeIdx = 0;
-                            for (let i = 0; i < total; i++) {
-                                const rect = slides[i].getBoundingClientRect();
-                                const center = rect.left + rect.width / 2;
-                                const sl = slider.getBoundingClientRect();
-                                const slCenter = sl.left + sl.width / 2;
-                                if (Math.abs(center - slCenter) < threshold) {
-                                    activeIdx = i;
-                                }
-                            }
-                            dotsContainer
-                                .querySelectorAll(".slider-dot")
-                                .forEach((d, i) => {
-                                    d.classList.toggle(
-                                        "active",
-                                        i === activeIdx,
-                                    );
-                                });
-                        }
-
-                        slider.addEventListener("scroll", updateDots);
-                        updateDots();
-                    })();
-
-                    function slideSpeedrun(dir) {
-                        plausible("Speedrun Nav", {
-                            props: { direction: dir > 0 ? "next" : "prev" },
-                        });
-                        const slider =
-                            document.getElementById("speedrunSlider");
-                        if (!slider) return;
-                        const slideWidth =
-                            slider.querySelector(".video-slide").offsetWidth +
-                            20;
-                        slider.scrollBy({
-                            left: slideWidth * dir,
-                            behavior: "smooth",
-                        });
-                    }
-                </script>
             </div>
         </section>
 
@@ -2693,17 +788,19 @@
                     charges. Cancel anytime with monthly termination.
                 </p>
 
-<!-- ── Config: agent, billing, location ── -->
-            <div class="pricing-config-box">
-                <span class="pricing-config-label">Configure and buy your agent</span>
-                <select class="pricing-config-select" id="pricing-agent">
-                    <option value="hermes" selected>Hermes</option>
-                </select>
-                <select class="pricing-config-select" id="pricing-period">
-                    <option value="monthly" selected>Monthly</option>
-                    <option value="yearly">Yearly</option>
-                </select>
-                <select class="pricing-config-select" id="pricing-location">
+                <!-- ── Config: agent, billing, location ── -->
+                <div class="pricing-config-box">
+                    <span class="pricing-config-label"
+                        >Configure and buy your agent</span
+                    >
+                    <select class="pricing-config-select" id="pricing-agent">
+                        <option value="hermes" selected>Hermes</option>
+                    </select>
+                    <select class="pricing-config-select" id="pricing-period">
+                        <option value="monthly" selected>Monthly</option>
+                        <option value="yearly">Yearly</option>
+                    </select>
+                    <select class="pricing-config-select" id="pricing-location">
                         <option value="france">France</option>
                     </select>
                     <input
@@ -3307,7 +1404,16 @@
                             </svg>
                         </button>
                         <div class="faq-answer">
-                            There are two separate passwords. Your <strong>dashboard password</strong> is stored encrypted in our system and can be reset via email at any time. Your <strong>agent / SSH password</strong> is different — it gives you root access to your instance and is set and reset directly from the dashboard. When you change it, the new password is pushed securely into the container. Both work independently and are managed from one place.
+                            There are two separate passwords. Your
+                            <strong>dashboard password</strong> is stored
+                            encrypted in our system and can be reset via email
+                            at any time. Your
+                            <strong>agent / SSH password</strong> is different —
+                            it gives you root access to your instance and is set
+                            and reset directly from the dashboard. When you
+                            change it, the new password is pushed securely into
+                            the container. Both work independently and are
+                            managed from one place.
                         </div>
                     </div>
 
@@ -3442,10 +1548,27 @@
                     <div class="faq-item">
                         <button class="faq-question" onclick="toggleFaq(this)">
                             How do updates work?
-                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9" /></svg>
+                            <svg
+                                width="14"
+                                height="14"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2.5"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            >
+                                <polyline points="6 9 12 15 18 9" />
+                            </svg>
                         </button>
                         <div class="faq-answer">
-                            Each container is completely managed by the agent itself. We do not push any system or agent updates into the containers. Instead, we provide a prompt in the configuration menu that your agent can use to create its own cron job for updating the container and itself &mdash; giving you full control over when and how updates happen.
+                            Each container is completely managed by the agent
+                            itself. We do not push any system or agent updates
+                            into the containers. Instead, we provide a prompt in
+                            the configuration menu that your agent can use to
+                            create its own cron job for updating the container
+                            and itself &mdash; giving you full control over when
+                            and how updates happen.
                         </div>
                     </div>
                 </div>
@@ -3534,25 +1657,46 @@
                     <a href="odoo-hermes-agent.html" class="topic-card">
                         <div class="topic-badge">Integration</div>
                         <h3>Odoo Hermes Agent</h3>
-                        <p>Connect your Odoo ERP to Hermes Agent in 10 minutes. Read, write, and automate your business data through natural language prompts.</p>
+                        <p>
+                            Connect your Odoo ERP to Hermes Agent in 10 minutes.
+                            Read, write, and automate your business data through
+                            natural language prompts.
+                        </p>
                         <span class="topic-link">Explore &rarr;</span>
                     </a>
                     <a href="chatgpt-agent.html" class="topic-card">
                         <div class="topic-badge">Guide</div>
                         <h3>ChatGPT AI Agent</h3>
-                        <p>Build and deploy your own ChatGPT-powered AI agent. Full SSH access, no coding, enterprise-grade hosting — deploy in under 10 minutes.</p>
+                        <p>
+                            Build and deploy your own ChatGPT-powered AI agent.
+                            Full SSH access, no coding, enterprise-grade hosting
+                            — deploy in under 10 minutes.
+                        </p>
                         <span class="topic-link">Explore &rarr;</span>
                     </a>
                     <a href="ssh-for-agents.html" class="topic-card">
                         <div class="topic-badge">Guide</div>
                         <h3>SSH for Agents</h3>
-                        <p>Connect, manage, and transfer files to your agent's Linux instance. Encryption keys, file sync, Tmux sessions, and Midnight Commander — everything you need.</p>
+                        <p>
+                            Connect, manage, and transfer files to your agent's
+                            Linux instance. Encryption keys, file sync, Tmux
+                            sessions, and Midnight Commander — everything you
+                            need.
+                        </p>
                         <span class="topic-link">Explore &rarr;</span>
                     </a>
-                    <a href="odoo-hermes-agent-startups.html" class="topic-card">
+                    <a
+                        href="odoo-hermes-agent-startups.html"
+                        class="topic-card"
+                    >
                         <div class="topic-badge">Startup Stack</div>
                         <h3>Odoo + Hermes Agent for Startups</h3>
-                        <p>Odoo Community Edition with zero per-user fees plus Hermes Agent AI automation. Create a dedicated agent user with granular rights — automate without giving full access.</p>
+                        <p>
+                            Odoo Community Edition with zero per-user fees plus
+                            Hermes Agent AI automation. Create a dedicated agent
+                            user with granular rights — automate without giving
+                            full access.
+                        </p>
                         <span class="topic-link">Explore &rarr;</span>
                     </a>
                 </div>
@@ -3588,896 +1732,8 @@
             </div>
         </footer>
 
-        <!-- ═══════════════════════════════════════════════════════════════
-         JAVASCRIPT
-         ═══════════════════════════════════════════════════════════════ -->
-        <script>
-            // ── Mobile menu ──────────────────────────────────────────
-            function toggleMobile() {
-                plausible("Mobile Menu Toggle");
-                const nav = document.getElementById("nav-links");
-                nav.classList.toggle("mobile-open");
-            }
-
-            // ── FAQ accordion ────────────────────────────────────────
-            function toggleFaq(btn) {
-                const q = btn.innerText.replace(/[?✦]/g, "").trim();
-                plausible("FAQ Toggle", { props: { question: q } });
-                const answer = btn.nextElementSibling;
-                const isOpen = answer.classList.contains("open");
-                // Close all
-                document
-                    .querySelectorAll(".faq-answer.open")
-                    .forEach((el) => el.classList.remove("open"));
-                document
-                    .querySelectorAll(".faq-question.open")
-                    .forEach((el) => el.classList.remove("open"));
-                if (!isOpen) {
-                    answer.classList.add("open");
-                    btn.classList.add("open");
-                }
-            }
-
-            // ── Signup Webhook URLs (matching app.derez.ai) ──────────
-            const SIGNUP_URL =
-                "https://n8n.derez.ai/webhook/4de196b7-2ad2-4f9a-9b4d-dc8d3b30865b";
-            const AUTH_URL =
-                "https://n8n.derez.ai/webhook/aca1b27f-c18e-4424-b7a0-de01007a3fe6";
-            const COUPON_URL =
-                "https://n8n.derez.ai/webhook/fd6375cb-6d73-4482-bfa3-ef8365f43a67";
-
-            let inlineCouponApplied = false;
-
-            // ── Helper: show/hide auth messages ──────────────────────
-            function showAuthError(id, msg) {
-                const el = document.getElementById(id);
-                el.textContent = msg;
-                el.style.display = "flex";
-            }
-            function hideAuthError(id) {
-                document.getElementById(id).style.display = "none";
-            }
-
-            // ── Helper: btn loading state ────────────────────────────
-            function btnLoad(btn, text) {
-                btn.disabled = true;
-                btn.textContent = text;
-            }
-            function btnReset(btn) {
-                btn.disabled = false;
-                btn.textContent = "Buy Agent — $9.50/mo";
-            }
-
-            function isValidEmail(e) {
-                return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
-            }
-
-            // ── Coupon ──────────────────────────────────────────────
-            function handleCouponKey(e) {
-                if (e.key === "Enter") {
-                    e.preventDefault();
-                    applyInlineCoupon();
-                }
-            }
-
-            async function applyInlineCoupon() {
-                const input = document.getElementById("signup-coupon-input");
-                const spinner = document.getElementById(
-                    "signup-coupon-spinner",
-                );
-                const errorEl = document.getElementById("signup-coupon-error");
-                const successEl = document.getElementById(
-                    "signup-coupon-success",
-                );
-
-                const code = input.value.trim();
-                if (!code) return;
-
-                spinner.style.display = "flex";
-                errorEl.style.display = "none";
-                successEl.style.display = "none";
-                input.classList.remove("signup-coupon-input-error");
-
-                try {
-                    const res = await fetch(COUPON_URL, {
-                        method: "POST",
-                        headers: { "Content-Type": "application/json" },
-                        body: JSON.stringify({ code }),
-                    });
-                    if (!res.ok) throw new Error("Invalid");
-                    const data = await res.json();
-                    const raw = Array.isArray(data) ? data[0] : data;
-                    const item =
-                        raw && typeof raw === "object" && "json" in raw
-                            ? raw.json
-                            : raw;
-                    if (item?.valid === true || item?.status === "ok") {
-                        inlineCouponApplied = true;
-                        successEl.style.display = "flex";
-                        input.style.display = "none";
-                    } else {
-                        throw new Error("Invalid");
-                    }
-                } catch {
-                    input.classList.add("signup-coupon-input-error");
-                    errorEl.style.display = "block";
-                } finally {
-                    spinner.style.display = "none";
-                }
-            }
-
-            // ── Sign Up (inline on landing page) ────────────────────
-            async function doInlineSignUp() {
-                const email = document
-                    .getElementById("inline-signup-email")
-                    .value.trim();
-                const password = document.getElementById(
-                    "inline-signup-password",
-                ).value;
-                const agent = document.getElementById(
-                    "inline-signup-agent",
-                ).value;
-                const location = document.getElementById(
-                    "inline-signup-location",
-                ).value;
-
-                hideAuthError("inline-signup-error");
-                document.getElementById("inline-signup-success").style.display =
-                    "none";
-
-                if (!isValidEmail(email)) {
-                    showAuthError(
-                        "inline-signup-error",
-                        "Please enter a valid email address.",
-                    );
-                    return;
-                }
-                if (password.length < 8) {
-                    showAuthError(
-                        "inline-signup-error",
-                        "Password must be at least 8 characters.",
-                    );
-                    return;
-                }
-
-                const btn = document.getElementById("inline-signup-btn");
-                btnLoad(btn, "Hiring agent\u2026");
-
-                // Open blank tab synchronously for Stripe redirect
-                const stripeTab = window.open("", "_blank");
-
-                try {
-                    // Step 1: authenticate
-                    const authRes = await fetch(AUTH_URL, {
-                        method: "POST",
-                        headers: { "Content-Type": "application/json" },
-                        body: JSON.stringify({ email, password }),
-                    });
-                    if (!authRes.ok)
-                        throw new Error(
-                            "Account creation failed. Please try again later.",
-                        );
-
-                    // Step 2: create agent
-                    const createRes = await fetch(SIGNUP_URL, {
-                        method: "POST",
-                        headers: { "Content-Type": "application/json" },
-                        body: JSON.stringify({
-                            email,
-                            password,
-                            agent,
-                            location,
-                        }),
-                    });
-                    if (!createRes.ok) {
-                        throw new Error(
-                            "Agent provisioning failed. Please contact support.",
-                        );
-                    }
-
-                    const createData = await createRes.json();
-                    const createRaw = Array.isArray(createData)
-                        ? createData[0]
-                        : createData;
-                    const createItem =
-                        createRaw &&
-                        typeof createRaw === "object" &&
-                        "json" in createRaw
-                            ? createRaw.json
-                            : createRaw;
-
-                    // Navigate the pre-opened tab to Stripe checkout
-                    const checkoutUrl =
-                        createItem?.checkout_url ||
-                        createItem?.checkoutUrl ||
-                        createItem?.url;
-                    if (checkoutUrl && checkoutUrl.startsWith("http")) {
-                        stripeTab.location.href = checkoutUrl;
-                    } else {
-                        stripeTab.close();
-                    }
-
-                    // Show success message
-                    document.getElementById(
-                        "inline-signup-success",
-                    ).textContent =
-                        "Agent created! \u2713 Redirecting to checkout\u2026";
-                    document.getElementById(
-                        "inline-signup-success",
-                    ).style.display = "flex";
-                } catch (err) {
-                    stripeTab?.close();
-                    showAuthError("inline-signup-error", err.message);
-                } finally {
-                    btnReset(btn);
-                }
-            }
-
-            // ── Close mobile menu on link click ──────────────────────
-            document.querySelectorAll(".nav-links a").forEach((link) => {
-                link.addEventListener("click", () => {
-                    document
-                        .getElementById("nav-links")
-                        .classList.remove("mobile-open");
-                });
-            });
-
-            // ── Smooth scroll offset for fixed header ────────────────
-            document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
-                anchor.addEventListener("click", function (e) {
-                    const target = document.querySelector(
-                        this.getAttribute("href"),
-                    );
-                    if (target) {
-                        e.preventDefault();
-                        const headerHeight = 60;
-                        const top =
-                            target.getBoundingClientRect().top +
-                            window.pageYOffset -
-                            headerHeight;
-                        window.scrollTo({ top, behavior: "smooth" });
-                    }
-                });
-            });
-
-            /* ── Period / billing update ──────────────────────────── */
-            function updatePeriodDisplay() {
-                const sel = document.getElementById("pricing-period");
-                const yearly = sel.value === "yearly";
-                document
-                    .getElementById("bonus-trainee")
-                    .classList.toggle("show", yearly);
-                document
-                    .getElementById("bonus-junior")
-                    .classList.toggle("show", yearly);
-                document
-                    .getElementById("bonus-senior")
-                    .classList.toggle("show", yearly);
-
-                document.getElementById("period-trainee").textContent = yearly
-                    ? "/ month ✦ yearly"
-                    : "/ month";
-                document.getElementById("period-junior").textContent = yearly
-                    ? "/ month ✦ yearly"
-                    : "/ month";
-                document.getElementById("period-senior").textContent = yearly
-                    ? "/ month ✦ yearly"
-                    : "/ month";
-            }
-            document
-                .getElementById("pricing-period")
-                .addEventListener("change", updatePeriodDisplay);
-            updatePeriodDisplay(); // fire on load so yearly bonuses show by default
-
-            /* ── Capture UTM params from URL ──────────────────────────── */
-            (function () {
-                const params = new URLSearchParams(window.location.search);
-                ["source", "medium", "campaign", "term", "content"].forEach(
-                    function (key) {
-                        const val = params.get("utm_" + key);
-                        if (val)
-                            document.getElementById("utm_" + key).value = val;
-                    },
-                );
-            })();
-
-            /* ── Buy Agent Webhook ───────────────────────────── */
-            const ORDER_WEBHOOK = "https://n8n.derez.ai/webhook/payment";
-
-            function showPricingToast(msg) {
-                const el = document.getElementById("pricing-toast");
-                el.textContent = msg;
-                el.classList.add("show");
-                if (window._pricingToastTimer)
-                    clearTimeout(window._pricingToastTimer);
-                window._pricingToastTimer = setTimeout(function () {
-                    el.classList.remove("show");
-                }, 20000);
-            }
-
-            async function hireAgent(product) {
-                const agent = document.getElementById("pricing-agent").value;
-                const period = document.getElementById("pricing-period").value;
-                const location =
-                    document.getElementById("pricing-location").value;
-                const email = document
-                    .getElementById("pricing-email")
-                    .value.trim();
-                const coupon = document
-                    .getElementById("pricing-coupon")
-                    .value.trim();
-
-                // Validate email
-                const emailInput = document.getElementById("pricing-email");
-                emailInput.classList.remove("invalid");
-                if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-                    emailInput.classList.add("invalid");
-                    showPricingToast(
-                        "Please configure your agent and provide a valid email address.",
-                    );
-                    emailInput.focus();
-                    return;
-                }
-
-                plausible("Pricing Click", {
-                    props: { product: product, agent: agent, period: period },
-                });
-
-                try {
-                    // Use a hidden form POST so the 302 redirect opens naturally in the new tab
-                    const form = document.createElement("form");
-                    form.method = "POST";
-                    form.action = ORDER_WEBHOOK;
-                    form.target = "_self";
-                    form.style.display = "none";
-
-                    const fields = {
-                        product: product,
-                        agent: agent,
-                        period: period,
-                        location: location,
-                        email: email || "",
-                        coupon: coupon || "",
-                        utm_source:
-                            document.getElementById("utm_source").value || "",
-                        utm_medium:
-                            document.getElementById("utm_medium").value || "",
-                        utm_campaign:
-                            document.getElementById("utm_campaign").value || "",
-                        utm_term:
-                            document.getElementById("utm_term").value || "",
-                        utm_content:
-                            document.getElementById("utm_content").value || "",
-                    };
-
-                    Object.keys(fields).forEach(function (key) {
-                        const inp = document.createElement("input");
-                        inp.type = "hidden";
-                        inp.name = key;
-                        inp.value = fields[key];
-                        form.appendChild(inp);
-                    });
-
-                    document.body.appendChild(form);
-                    form.submit();
-                    document.body.removeChild(form);
-                } catch (err) {
-                    console.error("Order webhook failed:", err);
-                }
-            }
-
-            /* ── Chat Widget ──────────────────────────────────────────── */
-            const CHAT_URL =
-                "https://n8n.derez.ai/webhook/a58d00c4-f0c9-40cd-bb50-4f45f0442ef0";
-            let chatId = null;
-            let chatOpen = false;
-            let chatBusy = false;
-            let greeted = false;
-            let probeTimer = null;
-
-            function chatToggle() {
-                plausible("Chat Toggle", {
-                    props: { action: chatOpen ? "close" : "open" },
-                });
-                chatOpen = !chatOpen;
-                document
-                    .getElementById("chat-widget")
-                    .classList.toggle("open", chatOpen);
-                document
-                    .getElementById("chat-fab")
-                    .classList.toggle("open", chatOpen);
-                document
-                    .getElementById("chat-widget")
-                    .setAttribute("aria-hidden", !chatOpen);
-                if (chatOpen) {
-                    // User opened chat manually — cancel the auto-open probe
-                    if (probeTimer) {
-                        clearTimeout(probeTimer);
-                        probeTimer = null;
-                    }
-                    if (!chatId) {
-                        chatId = String(
-                            Math.floor(100000 + Math.random() * 900000),
-                        );
-                        chatAppendMsg(
-                            "bot",
-                            "Hi! I'm your Sales Agent. Ask me about plans, setup, pricing, integrations, or anything about your AI agent.",
-                        );
-                    }
-                    setTimeout(
-                        () => document.getElementById("chat-input").focus(),
-                        300,
-                    );
-                }
-            }
-
-            function chatClose() {
-                if (chatOpen) chatToggle();
-            }
-
-            function chatOpenSilent() {
-                if (!chatOpen) {
-                    chatOpen = true;
-                    document
-                        .getElementById("chat-widget")
-                        .classList.add("open");
-                    document
-                        .getElementById("chat-widget")
-                        .setAttribute("aria-hidden", "false");
-                }
-            }
-
-            function chatAppendMsg(role, text) {
-                const msgs = document.getElementById("chat-msgs");
-                const div = document.createElement("div");
-                div.className = "chat-msg chat-msg-" + role;
-                // strip <script> and on* handlers to prevent XSS, but render safe HTML
-                div.innerHTML = text
-                    .replace(
-                        /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
-                        "",
-                    )
-                    .replace(/\son\w+\s*=\s*"[^"]*"/gi, "")
-                    .replace(/\son\w+\s*=\s*'[^']*'/gi, "");
-                msgs.appendChild(div);
-                msgs.scrollTop = msgs.scrollHeight;
-                return div;
-            }
-
-            function chatKey(e) {
-                if (e.key === "Enter") chatSend();
-            }
-
-            async function chatSend() {
-                const input = document.getElementById("chat-input");
-                const btn = document.getElementById("chat-send-btn");
-                const msg = input.value.trim();
-                if (!msg || chatBusy) return;
-                plausible("Chat Message Sent");
-                chatBusy = true;
-                chatOpenSilent();
-                chatAppendMsg("user", msg);
-                input.value = "";
-                btn.disabled = true;
-                btn.innerHTML = '<span style="opacity:0.6">…</span>';
-
-                const think = chatAppendMsg("bot", "…");
-                think.className = "chat-msg chat-msg-thinking";
-
-                try {
-                    const res = await fetch(CHAT_URL, {
-                        method: "POST",
-                        headers: { "Content-Type": "application/json" },
-                        body: JSON.stringify({
-                            message: msg,
-                            sessionId: chatId,
-                        }),
-                    });
-                    const json = await res.json();
-                    const first = Array.isArray(json) ? json[0] : json;
-                    const reply =
-                        typeof json === "string"
-                            ? json
-                            : (first &&
-                                  (first.output ||
-                                      first.message ||
-                                      first.reply ||
-                                      first.response ||
-                                      first.text)) ||
-                              JSON.stringify(json);
-                    think.remove();
-                    chatAppendMsg("bot", reply);
-                } catch (err) {
-                    think.remove();
-                    chatAppendMsg(
-                        "bot",
-                        "Sorry, I couldn't connect right now. Please try again later.",
-                    );
-                } finally {
-                    chatBusy = false;
-                    btn.disabled = false;
-                    btn.innerHTML = "➤";
-                    document.getElementById("chat-input").focus();
-                }
-            }
-
-            /* ── Visitor Probe — auto-open after 15s ────────────────── */
-            (function () {
-                let fired = false;
-                probeTimer = setTimeout(function () {
-                    fetch("https://ipinfo.io/json")
-                        .then(function (r) {
-                            return r.json();
-                        })
-                        .then(function (geo) {
-                            fireProbe(geo);
-                        })
-                        .catch(function () {
-                            fireProbe(null);
-                        });
-                }, 15000);
-
-                function fireProbe(geo) {
-                    if (fired) return;
-                    fired = true;
-                    const cid =
-                        chatId ||
-                        String(Math.floor(100000 + Math.random() * 900000));
-                    const ua = navigator.userAgent;
-
-                    let lines = [
-                        "NEW VISITOR — 15s Probe",
-                        "========================================",
-                        "",
-                        "- Page section: hero",
-                        "- Scroll depth: " +
-                            Math.min(
-                                100,
-                                Math.round(
-                                    (window.pageYOffset /
-                                        Math.max(
-                                            1,
-                                            document.documentElement
-                                                .scrollHeight -
-                                                window.innerHeight,
-                                        )) *
-                                        100,
-                                ),
-                            ) +
-                            "%",
-                        "- Time on page: 15 seconds",
-                        "- Timestamp: " + new Date().toUTCString(),
-                        "",
-                        "--- BROWSER & DEVICE ---",
-                        "- Browser: " +
-                            (/Edg\/([\d.]+)/.test(ua)
-                                ? "Edge " + RegExp.$1
-                                : /Chrome\/([\d.]+)/.test(ua)
-                                  ? "Chrome " + RegExp.$1
-                                  : /Firefox\/([\d.]+)/.test(ua)
-                                    ? "Firefox " + RegExp.$1
-                                    : /Version\/([\d.]+).*Safari/.test(ua)
-                                      ? "Safari " + RegExp.$1
-                                      : "Unknown"),
-                        "- OS: " +
-                            (/Windows NT 10/.test(ua)
-                                ? "Windows 10/11"
-                                : /Mac OS X/.test(ua)
-                                  ? "macOS"
-                                  : /Android/.test(ua)
-                                    ? "Android"
-                                    : /iPhone/.test(ua)
-                                      ? "iOS"
-                                      : /Linux/.test(ua)
-                                        ? "Linux"
-                                        : "Unknown"),
-                        "- Device: " +
-                            (/Mobi|Android|iPhone/.test(ua)
-                                ? "Mobile"
-                                : "Desktop"),
-                        "- Screen: " + screen.width + "x" + screen.height,
-                        "- Language: " + navigator.language,
-                        "- User Agent: " + ua,
-                        "",
-                        "--- PAGE ---",
-                        "- URL: " + window.location.href,
-                        "- Referrer: " + (document.referrer || "direct / none"),
-                        "- Title: " + document.title,
-                    ];
-                    if (geo) {
-                        lines.push("");
-                        lines.push("--- LOCATION ---");
-                        if (geo.country)
-                            lines.push("- Country: " + geo.country);
-                        if (geo.city) lines.push("- City: " + geo.city);
-                        if (geo.org) lines.push("- ISP: " + geo.org);
-                    }
-                    lines.push("");
-                    lines.push("- Chat ID: " + cid);
-
-                    const payload = {
-                        message: lines.join("\n"),
-                        sessionId: cid,
-                    };
-
-                    fetch(CHAT_URL, {
-                        method: "POST",
-                        headers: { "Content-Type": "application/json" },
-                        body: JSON.stringify(payload),
-                    })
-                        .then(function (r) {
-                            const ct = r.headers.get("content-type") || "";
-                            if (ct.indexOf("json") !== -1) return r.json();
-                            return r.text().then(function (t) {
-                                return { output: t };
-                            });
-                        })
-                        .then(function (d) {
-                            const item = Array.isArray(d) ? d[0] : d;
-                            const reply =
-                                (item &&
-                                    (item.output ||
-                                        item.message ||
-                                        item.reply ||
-                                        item.response ||
-                                        item.text)) ||
-                                null;
-                            if (reply) {
-                                if (!chatId) chatId = cid;
-                                chatAppendMsg("bot", reply);
-                                greeted = true;
-                                if (!chatOpen) chatOpenSilent();
-                            }
-                        })
-                        .catch(function () {});
-                }
-            })();
-
-            /* ── Scroll Depth Tracking ────────────────────────── */
-            (function () {
-                const thresholds = [25, 50, 75, 100];
-                let sent = {};
-                let ticking = false;
-                window.addEventListener("scroll", function () {
-                    if (!ticking) {
-                        window.requestAnimationFrame(function () {
-                            const scrolled =
-                                window.pageYOffset + window.innerHeight;
-                            const total = document.documentElement.scrollHeight;
-                            const pct = Math.min(
-                                100,
-                                Math.round((scrolled / total) * 100),
-                            );
-                            thresholds.forEach(function (t) {
-                                if (pct >= t && !sent[t]) {
-                                    sent[t] = true;
-                                    plausible("Scroll Depth", {
-                                        props: { percent: t + "%" },
-                                    });
-                                }
-                            });
-                            ticking = false;
-                        });
-                        ticking = true;
-                    }
-                });
-            })();
-
-            /* ── Coupon Badges ──────────────────────────────────── */
-            const COUPONS = {
-                // 499
-                blog499: 499,
-                creator499: 499,
-                friends499: 499,
-                record499: 499,
-
-                // 950
-                blog950: 950,
-                creator950: 950,
-                friends950: 950,
-
-                // 1750
-                blog1750: 1750,
-                friends1750: 1750,
-                creator1750: 1750,
-            };
-            const PLAN_PRICES = { trainee: 499, junior: 950, senior: 1750 };
-            function centsToDollar(c) {
-                return "$" + (c / 100).toFixed(2);
-            }
-            function updateCouponBadges() {
-                var code = document
-                    .getElementById("pricing-coupon")
-                    .value.trim()
-                    .toLowerCase();
-                var discount = COUPONS[code];
-                ["trainee", "junior", "senior"].forEach(function (plan) {
-                    var badge = document.getElementById("badge-" + plan);
-                    if (discount !== undefined) {
-                        var firstMonth = Math.max(
-                            0,
-                            PLAN_PRICES[plan] - discount,
-                        );
-                        badge.querySelector(".badge-price").textContent =
-                            centsToDollar(firstMonth);
-                        badge.classList.add("visible");
-                        if (firstMonth === 0) badge.classList.add("free");
-                        else badge.classList.remove("free");
-                    } else {
-                        badge.classList.remove("visible", "free");
-                        badge.querySelector(".badge-price").textContent = "—";
-                    }
-                });
-            }
-            document
-                .getElementById("pricing-coupon")
-                .addEventListener("input", updateCouponBadges);
-
-            /* ── Blog ──────────────────────────────────────────────── */
-            const BLOG_POSTS_PER_PAGE = 6;
-            let blogAllPosts = [];
-            let blogFilteredPosts = [];
-            let blogCurrentPage = 0;
-
-            function blogFormatDate(dateStr) {
-                const d = new Date(dateStr);
-                const months = [
-                    "Jan",
-                    "Feb",
-                    "Mar",
-                    "Apr",
-                    "May",
-                    "Jun",
-                    "Jul",
-                    "Aug",
-                    "Sep",
-                    "Oct",
-                    "Nov",
-                    "Dec",
-                ];
-                return (
-                    months[d.getMonth()] +
-                    " " +
-                    d.getDate() +
-                    ", " +
-                    d.getFullYear()
-                );
-            }
-
-            function blogAreaClass(area) {
-                var map = {
-                    howto: "area-howto",
-                    news: "area-news",
-                    "video-scripts": "area-video-scripts",
-                    "speed-run": "area-speed-run",
-                };
-                return map[area] || "area-default";
-            }
-
-            function blogRender() {
-                const start = blogCurrentPage * BLOG_POSTS_PER_PAGE;
-                const pagePosts = blogFilteredPosts.slice(
-                    start,
-                    start + BLOG_POSTS_PER_PAGE,
-                );
-                const grid = document.getElementById("blog-grid");
-                const totalPages = Math.max(
-                    1,
-                    Math.ceil(blogFilteredPosts.length / BLOG_POSTS_PER_PAGE),
-                );
-
-                if (pagePosts.length === 0) {
-                    grid.innerHTML =
-                        '<div class="blog-empty">No posts match your search.</div>';
-                    document.getElementById("blog-page-info").textContent = "";
-                    document.getElementById("blog-prev").disabled = true;
-                    document.getElementById("blog-next").disabled = true;
-                    return;
-                }
-
-                grid.innerHTML = pagePosts
-                    .map(function (p) {
-                        var chip = p.agent
-                            ? '<span class="blog-card-chip">' +
-                              p.agent +
-                              "</span>"
-                            : "";
-                        return (
-                            '<a href="' +
-                            p.link +
-                            '" class="blog-card" style="text-decoration:none" onclick="plausible(\'Blog Card Click\',{props:{post:\'' +
-                            p.id.replace(/'/g, "\\'") +
-                            '\',area:\'' +
-                            p.area.replace(/'/g, "\\'") +
-                            "'}})'>" +
-                            '<span style="display:flex;gap:6px;flex-wrap:wrap;align-self:flex-start">' +
-                            '<span class="blog-card-area ' +
-                            blogAreaClass(p.area) +
-                            '">' +
-                            p.area +
-                            "</span>" +
-                            chip +
-                            "</span>" +
-                            '<span class="blog-card-date">' +
-                            blogFormatDate(p.date) +
-                            "</span>" +
-                            "<h3>" +
-                            p.headline +
-                            "</h3>" +
-                            "<p>" +
-                            p.teaser +
-                            "</p>" +
-                            '<span class="blog-card-link">Read more &rarr;</span>' +
-                            "</a>"
-                        );
-                    })
-                    .join("");
-
-                document.getElementById("blog-page-info").textContent =
-                    "Page " + (blogCurrentPage + 1) + " of " + totalPages;
-                document.getElementById("blog-prev").disabled =
-                    blogCurrentPage === 0;
-                document.getElementById("blog-next").disabled =
-                    blogCurrentPage >= totalPages - 1;
-            }
-
-            function blogPrev() {
-                if (blogCurrentPage > 0) {
-                    blogCurrentPage--;
-                    blogRender();
-                }
-            }
-
-            function blogNext() {
-                const totalPages = Math.ceil(
-                    blogFilteredPosts.length / BLOG_POSTS_PER_PAGE,
-                );
-                if (blogCurrentPage < totalPages - 1) {
-                    blogCurrentPage++;
-                    blogRender();
-                }
-            }
-
-            function blogFilter() {
-                const q = document
-                    .getElementById("blog-search-input")
-                    .value.trim()
-                    .toLowerCase();
-                if (!q) {
-                    blogFilteredPosts = blogAllPosts.slice();
-                } else {
-                    blogFilteredPosts = blogAllPosts.filter(function (p) {
-                        return (
-                            p.headline.toLowerCase().indexOf(q) !== -1 ||
-                            p.teaser.toLowerCase().indexOf(q) !== -1 ||
-                            p.area.toLowerCase().indexOf(q) !== -1
-                        );
-                    });
-                }
-                blogCurrentPage = 0;
-                blogRender();
-            }
-
-            // Load blog index
-            fetch("blog/index.json?_=" + Date.now())
-                .then(function (r) {
-                    return r.json();
-                })
-                .then(function (data) {
-                    blogAllPosts = data.posts || [];
-                    blogFilteredPosts = blogAllPosts.slice();
-                    blogRender();
-                })
-                .catch(function () {
-                    document.getElementById("blog-grid").innerHTML =
-                        '<div class="blog-empty">Blog coming soon.</div>';
-                });
-
-            // Search on input
-            document
-                .getElementById("blog-search-input")
-                .addEventListener("input", blogFilter);
-        </script>
+        <!-- ── JavaScript ───────────────────────────────────────────────── -->
+        <script src="assets/js/script.js" defer></script>
 
         <div class="pricing-toast" id="pricing-toast"></div>
     </body>