diff --git a/site/assets/screenshots/.gitkeep b/site/assets/screenshots/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/site/style.css b/site/style.css
new file mode 100644
index 0000000..46aa2ab
--- /dev/null
+++ b/site/style.css
@@ -0,0 +1,344 @@
+@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Alegreya:ital,wght@0,400;0,500;1,400&display=swap');
+
+/* ── Variables ─────────────────────────────────────────── */
+:root {
+  --gold:               #c9a84c;
+  --gold-dark:          #8b6914;
+  --gold-dim:           rgba(201, 168, 76, 0.12);
+  --gold-border:        rgba(201, 168, 76, 0.3);
+  --bg-dark:            #0d0a05;
+  --bg-dark-2:          #1a1408;
+  --bg-parchment:       #f5f0e8;
+  --bg-parchment-alt:   #ede8d5;
+  --border-dark:        #2a2010;
+  --border-parchment:   #d4c9a8;
+  --border-light:       #e0d5b5;
+  --text-gold:          #c9a84c;
+  --text-parchment:     #e8dcc8;
+  --text-dark:          #2a1f0a;
+  --text-muted:         #6a5a3a;
+  --text-label:         #8b6914;
+  --font-display:       'Cinzel', serif;
+  --font-body:          'Alegreya', serif;
+}
+
+/* ── Reset ──────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { scroll-behavior: smooth; }
+body { font-family: var(--font-body); background: var(--bg-dark); color: var(--text-parchment); }
+img { display: block; max-width: 100%; height: auto; border-radius: 6px; }
+a { text-decoration: none; }
+
+/* ── Hero ───────────────────────────────────────────────── */
+.hero {
+  min-height: 100vh;
+  background: var(--bg-dark);
+  border-bottom: 2px solid var(--border-dark);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 80px 24px;
+  position: relative;
+  overflow: hidden;
+}
+
+.hero::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(201,168,76,0.07) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.hero-content { position: relative; max-width: 680px; }
+
+.wordmark {
+  font-family: var(--font-display);
+  font-size: 11px;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+  color: var(--gold);
+  margin-bottom: 28px;
+  opacity: 0.9;
+}
+
+.hero-headline {
+  font-family: var(--font-display);
+  font-size: clamp(2.2rem, 5vw, 3.6rem);
+  font-weight: 700;
+  color: var(--text-parchment);
+  line-height: 1.2;
+  margin-bottom: 20px;
+  text-shadow: 0 0 40px rgba(201,168,76,0.15);
+}
+
+.hero-subhead {
+  font-family: var(--font-body);
+  font-size: 1.15rem;
+  color: #9a8a6a;
+  line-height: 1.65;
+  margin-bottom: 40px;
+  max-width: 520px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.hero-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 28px;
+  flex-wrap: wrap;
+}
+
+.btn-primary {
+  font-family: var(--font-display);
+  font-size: 13px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  background: var(--gold);
+  color: var(--bg-dark);
+  padding: 14px 32px;
+  border-radius: 3px;
+  font-weight: 700;
+  transition: background 0.2s, transform 0.1s;
+}
+.btn-primary:hover { background: #e0bc60; transform: translateY(-1px); }
+
+.scroll-hint {
+  font-family: var(--font-body);
+  font-size: 0.95rem;
+  color: var(--text-muted);
+  transition: color 0.2s;
+}
+.scroll-hint:hover { color: var(--gold); }
+
+/* ── Features ───────────────────────────────────────────── */
+.features { background: var(--bg-parchment); }
+
+.features-intro {
+  padding: 64px 24px 40px;
+  text-align: center;
+  border-bottom: 1px solid var(--border-parchment);
+}
+
+.section-label {
+  font-family: var(--font-display);
+  font-size: 10px;
+  letter-spacing: 3px;
+  text-transform: uppercase;
+  color: var(--text-label);
+  margin-bottom: 10px;
+}
+
+.features-intro h2 {
+  font-family: var(--font-display);
+  font-size: clamp(1.4rem, 3vw, 2rem);
+  color: var(--text-dark);
+  font-weight: 600;
+}
+
+.feature-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  gap: 0;
+  border-bottom: 1px solid var(--border-light);
+  background: var(--bg-parchment);
+}
+
+.feature-row:nth-child(even) { background: var(--bg-parchment-alt); }
+
+.feature-image {
+  padding: 48px 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.feature-image img {
+  box-shadow: 0 8px 32px rgba(42,31,10,0.18);
+  border: 1px solid var(--border-parchment);
+}
+
+.feature-text {
+  padding: 48px 56px 48px 24px;
+}
+
+.feature-row.reverse .feature-image { order: 2; }
+.feature-row.reverse .feature-text  { order: 1; padding: 48px 24px 48px 56px; }
+
+.feature-label {
+  font-family: var(--font-display);
+  font-size: 10px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: var(--text-label);
+  margin-bottom: 10px;
+}
+
+.feature-heading {
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--text-dark);
+  margin-bottom: 14px;
+  line-height: 1.3;
+}
+
+.feature-desc {
+  font-family: var(--font-body);
+  font-size: 1.05rem;
+  color: #4a3a1a;
+  line-height: 1.7;
+}
+
+/* Torch & Luck callout cards */
+.callout-row {
+  padding: 56px 40px;
+  background: var(--bg-parchment-alt);
+  border-bottom: 1px solid var(--border-light);
+  display: flex;
+  gap: 32px;
+  justify-content: center;
+}
+
+.callout-card {
+  background: var(--bg-parchment);
+  border: 1px solid var(--border-parchment);
+  border-radius: 6px;
+  padding: 32px 36px;
+  max-width: 320px;
+  text-align: center;
+}
+
+.callout-icon { font-size: 2rem; margin-bottom: 12px; }
+
+.callout-card h3 {
+  font-family: var(--font-display);
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-dark);
+  margin-bottom: 8px;
+}
+
+.callout-card p {
+  font-family: var(--font-body);
+  font-size: 0.95rem;
+  color: #4a3a1a;
+  line-height: 1.6;
+}
+
+/* ── System Support ─────────────────────────────────────── */
+.system-support {
+  background: var(--bg-dark-2);
+  border-top: 2px solid var(--border-dark);
+  border-bottom: 2px solid var(--border-dark);
+  padding: 48px 24px;
+  text-align: center;
+}
+
+.system-support .section-label { color: var(--gold); opacity: 0.7; }
+
+.system-support h2 {
+  font-family: var(--font-display);
+  font-size: 1.4rem;
+  color: var(--text-parchment);
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.system-support p {
+  font-family: var(--font-body);
+  color: var(--text-muted);
+  font-size: 1rem;
+}
+
+/* ── Publisher ──────────────────────────────────────────── */
+.publisher {
+  background: var(--bg-parchment);
+  border-bottom: 1px solid var(--border-parchment);
+  padding: 80px 24px;
+  text-align: center;
+}
+
+.publisher .section-label { margin-bottom: 14px; }
+
+.publisher h2 {
+  font-family: var(--font-display);
+  font-size: clamp(1.4rem, 3vw, 2rem);
+  color: var(--text-dark);
+  font-weight: 600;
+  margin-bottom: 20px;
+}
+
+.publisher p {
+  font-family: var(--font-body);
+  font-size: 1.1rem;
+  color: #4a3a1a;
+  line-height: 1.75;
+  max-width: 520px;
+  margin: 0 auto 32px;
+}
+
+.btn-secondary {
+  font-family: var(--font-display);
+  font-size: 12px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  background: var(--bg-dark);
+  color: var(--gold);
+  padding: 13px 30px;
+  border-radius: 3px;
+  font-weight: 600;
+  border: 1px solid var(--border-dark);
+  transition: background 0.2s;
+  display: inline-block;
+}
+.btn-secondary:hover { background: var(--bg-dark-2); }
+
+/* ── Footer ─────────────────────────────────────────────── */
+.footer {
+  background: var(--bg-dark);
+  border-top: 1px solid var(--border-dark);
+  padding: 28px 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.footer-left {
+  font-family: var(--font-display);
+  font-size: 11px;
+  letter-spacing: 1px;
+  color: #4a3a1a;
+}
+
+.footer-right { display: flex; gap: 20px; }
+
+.footer-right a {
+  font-family: var(--font-display);
+  font-size: 11px;
+  letter-spacing: 1px;
+  color: #4a3a1a;
+  transition: color 0.2s;
+}
+.footer-right a:hover { color: var(--gold); }
+
+/* ── Responsive ─────────────────────────────────────────── */
+@media (max-width: 768px) {
+  .feature-row,
+  .feature-row.reverse {
+    grid-template-columns: 1fr;
+  }
+  .feature-row.reverse .feature-image { order: 0; }
+  .feature-row.reverse .feature-text  { order: 0; }
+  .feature-image { padding: 32px 24px 0; }
+  .feature-text,
+  .feature-row.reverse .feature-text { padding: 24px 24px 40px; }
+  .callout-row { flex-direction: column; align-items: center; }
+  .footer { justify-content: center; text-align: center; }
+}