docs: make the repo a first-impression eyecatcher (hero banner + clear WHAT/HOW)

A first-time visitor now learns what VolScope is and how to run it in the
first screenful:

- A designed hero banner (docs/assets/hero.png): the ◈ VolScope wordmark, the
  one-line question ("Is this stock's implied volatility cheap or expensive?"),
  and the REAL Scope IV/HV chart rendered from live QQQ data — green where
  options are cheap, red where rich. Composed by scripts/ops/make_repo_hero.py
  over the actual chart export (docs/assets/iv-hv.png).
- README restructured: centered hero + badges, then a crisp "what it is"
  paragraph, then a one-click "Get started" call-to-action pointing at the
  double-click launcher. Drops the old ASCII-art chart sketch (the real chart
  shows it now).

The chart PNGs are committed, so nobody needs a render toolchain to see them;
generating them needs `pip install kaleido==0.2.1` (maintainer-only, not an
app dependency).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: 2 people

README.md

@@ -1,41 +1,27 @@
+<div align="center">
+
 # ◈ VolScope
 
-> ### Is the option market pricing more movement than the stock has delivered?
->
-> That one question — **implied vs realized volatility** — is what VolScope
-> is built around. Type any ticker and its hero chart answers it at a glance,
-> wrapped in the context a vol desk reads: IV rank, a volatility cone, a
-> time-travelling term structure, 25Δ skew, and a plain-English verdict —
-> all from VolScope's **own** Black-Scholes solver (never Yahoo's IV). The
-> volatility screen you'd otherwise rent from Bloomberg, self-hosted in a
-> browser tab.
+### Is this stock's implied volatility cheap or expensive?
 
-[![CI](https://github.com/SchoenTom/volscope/actions/workflows/ci.yml/badge.svg)](https://github.com/SchoenTom/volscope/actions/workflows/ci.yml)
-![Python](https://img.shields.io/badge/python-3.11%20%7C%203.12-blue)
-[![License: MIT](https://img.shields.io/badge/license-MIT-green)](LICENSE)
-![Status](https://img.shields.io/badge/status-IV%20research-brightgreen)
+<img src="docs/assets/hero.png" alt="VolScope — implied vs realized volatility, green where options are cheap, red where rich" width="900">
 
-## The chart at its heart — Implied vs Realized Volatility
+[![CI](https://github.com/SchoenTom/volscope/actions/workflows/ci.yml/badge.svg)](https://github.com/SchoenTom/volscope/actions/workflows/ci.yml)
+&nbsp;![Python](https://img.shields.io/badge/python-3.11%2B-blue)
+&nbsp;[![License: MIT](https://img.shields.io/badge/license-MIT-green)](LICENSE)
+&nbsp;![Status](https://img.shields.io/badge/status-IV%20research-brightgreen)
 
-This is what VolScope *is*. Everything else exists to add context to it.
+</div>
 
-```
- vol %                                    AAPL · IMPLIED vs REALIZED
-  ▲
-  │            ╭──╮                ← IV 30d (what options cost)
-  │      ╭─────╯  ╰────╮      ╭────
-  │ ─────╯   · · · · · ╰──────╯· · ← HV 20d (what the stock did)
-  │  ░░░░░░  ▒▒▒▒▒▒▒▒  ░░░░░  ▓▓▓   ← background shaded by vol regime
-  └────────────────────────────────►  time      ◆ = earnings
-        IV above HV → options RICH   ·   IV below HV → options CHEAP
-```
+**VolScope is a self-hosted volatility research terminal.** Type any ticker and
+the chart above answers one question at a glance — *is the option market pricing
+more movement than the stock has actually delivered?* Around it sits the context
+a vol desk reads: IV rank, a volatility cone, a time-travelling term structure,
+25Δ skew, and a one-line plain-English verdict — all computed by VolScope's
+**own** Black-Scholes solver, **never** Yahoo's IV. The volatility screen you'd
+otherwise rent from Bloomberg, running in a browser tab on your own machine.
 
-When the **implied-vol** line (what options are charging) sits above
-**realized vol** (what the stock has actually moved), the market is paying
-up for movement — options are *rich*. When it dips below, they're *cheap*.
-The background is shaded by volatility regime, earnings dates are flagged,
-and a one-line verdict sits above it. It is the first, largest chart on the
-Scope page — front and centre, because it is the product.
+> **▶ Get started in one click:** download the ZIP, double-click **`VolScope.app`** — no terminal, no commands. [Full steps ↓](#run-volscope--just-double-click)
 
 ## Why VolScope
 

docs/assets/hero.png

@@ -0,0 +1,132 @@
+#!/usr/bin/env python
+"""Compose the README hero banner: wordmark + tagline + the real IV/HV chart.
+
+Expects docs/assets/iv-hv.png (the rendered Scope chart) to already exist.
+Produces docs/assets/hero.png — the single eyecatcher at the top of the README.
+
+    .venv/bin/python scripts/ops/make_repo_hero.py
+"""
+from __future__ import annotations
+
+from pathlib import Path
+
+from PIL import Image, ImageDraw, ImageFont
+
+_ROOT = Path(__file__).resolve().parents[2]
+_CHART = _ROOT / "docs" / "assets" / "iv-hv.png"
+_OUT = _ROOT / "docs" / "assets" / "hero.png"
+
+# Brand palette (theme.py COLORS)
+_BG_TOP = (10, 11, 15)
+_BG_BOT = (16, 17, 24)
+_ACCENT = (0, 212, 170)
+_ACCENT2 = (91, 140, 255)
+_WARN = (255, 68, 102)
+_TEXT = (224, 228, 239)
+_MUTED = (138, 143, 158)
+_FAINT = (90, 96, 112)
+
+W = 1280
+
+
+def _font(size: int, bold: bool = False):
+    cands = (
+        ["/System/Library/Fonts/SFNSRounded.ttf", "/System/Library/Fonts/SFNS.ttf"]
+        if bold else
+        ["/System/Library/Fonts/SFNS.ttf", "/Library/Fonts/Arial.ttf"]
+    )
+    cands += ["/System/Library/Fonts/Helvetica.ttc", "/Library/Fonts/Arial.ttf"]
+    for p in cands:
+        if Path(p).exists():
+            try:
+                return ImageFont.truetype(p, size)
+            except Exception:
+                continue
+    return ImageFont.load_default()
+
+
+def _vgrad(w: int, h: int, top, bot) -> Image.Image:
+    base = Image.new("RGB", (1, h))
+    for y in range(h):
+        t = y / max(1, h - 1)
+        base.putpixel((0, y), tuple(int(top[i] + (bot[i] - top[i]) * t) for i in range(3)))
+    return base.resize((w, h))
+
+
+def _hgrad_text(draw_size, text, font, c1, c2) -> Image.Image:
+    """Render `text` filled with a horizontal c1->c2 gradient (transparent bg)."""
+    tmp = Image.new("L", draw_size, 0)
+    ImageDraw.Draw(tmp).text((0, 0), text, font=font, fill=255)
+    grad = Image.new("RGB", draw_size)
+    for x in range(draw_size[0]):
+        t = x / max(1, draw_size[0] - 1)
+        col = tuple(int(c1[i] + (c2[i] - c1[i]) * t) for i in range(3))
+        for y in range(draw_size[1]):
+            grad.putpixel((x, y), col)
+    out = Image.new("RGBA", draw_size, (0, 0, 0, 0))
+    out.paste(grad, (0, 0), tmp)
+    return out
+
+
+def main() -> int:
+    chart = Image.open(_CHART).convert("RGB")
+    cw, ch = chart.size
+    chart_w = W - 96
+    chart_h = int(ch * (chart_w / cw))
+    chart = chart.resize((chart_w, chart_h), Image.LANCZOS)
+
+    header_h = 248
+    caption_h = 46
+    H = header_h + chart_h + caption_h + 40
+
+    canvas = _vgrad(W, H, _BG_TOP, _BG_BOT).convert("RGBA")
+    d = ImageDraw.Draw(canvas)
+
+    # Brand mark — a small ◈ diamond left of the wordmark
+    mx, my = 60, 70
+    d.line([(mx, my - 18), (mx + 18, my), (mx, my + 18), (mx - 18, my), (mx, my - 18)],
+           fill=_ACCENT, width=4, joint="curve")
+    d.ellipse([mx - 4, my - 4, mx + 4, my + 4], fill=_ACCENT)
+
+    # Wordmark with gradient fill
+    wf = _font(46, bold=True)
+    wm = _hgrad_text((360, 64), "VolScope", wf, _ACCENT, _ACCENT2)
+    canvas.alpha_composite(wm, (90, 42))
+
+    # Tagline
+    d.text((62, 128), "Is this stock's implied volatility cheap or expensive?",
+           font=_font(27, bold=True), fill=_TEXT)
+    # Sub-line
+    d.text((62, 172),
+           "A self-hosted volatility terminal — its own Black-Scholes solver "
+           "(never Yahoo's IV), in a browser tab.",
+           font=_font(17), fill=_MUTED)
+
+    # Chart
+    cx = (W - chart_w) // 2
+    cy = header_h
+    canvas.paste(chart, (cx, cy))
+    # hairline frame around the chart
+    d.rectangle([cx, cy, cx + chart_w - 1, cy + chart_h - 1],
+                outline=(30, 32, 56), width=1)
+
+    # Caption with the colour key
+    cap_y = cy + chart_h + 16
+    f = _font(15)
+    d.text((cx, cap_y), "Implied vs realized volatility — ", font=f, fill=_MUTED)
+    w1 = d.textlength("Implied vs realized volatility — ", font=f)
+    d.text((cx + w1, cap_y), "green where options are cheap", font=f, fill=_ACCENT)
+    w2 = d.textlength("green where options are cheap", font=f)
+    d.text((cx + w1 + w2, cap_y), ", ", font=f, fill=_MUTED)
+    w3 = d.textlength(", ", font=f)
+    d.text((cx + w1 + w2 + w3, cap_y), "red where rich", font=f, fill=_WARN)
+    w4 = d.textlength("red where rich", font=f)
+    d.text((cx + w1 + w2 + w3 + w4, cap_y), ".   (QQQ, live data)", font=f, fill=_FAINT)
+
+    canvas.convert("RGB").save(_OUT)
+    print(f"wrote {_OUT}  ({_OUT.stat().st_size} bytes, {W}x{H})")
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())