Up to Bloom v0.23

public/css/app.css

@@ -382,6 +382,99 @@ h1, h2, h3 {
     margin: 0;
 }
 
+/* ---------- Screenshots (landing page) ---------- */
+
+.screenshots-section {
+    max-width: 980px;
+    margin: 0 auto;
+    padding: 0 var(--space-5) var(--space-8);
+}
+
+.screenshots-header {
+    text-align: center;
+    margin-bottom: var(--space-6);
+}
+
+.screenshots-header h2 {
+    font-size: var(--font-2xl);
+    margin-bottom: var(--space-2);
+}
+
+.screenshots-header p {
+    color: var(--text-muted);
+    font-size: var(--font-md);
+    max-width: 620px;
+    margin: 0 auto;
+}
+
+.screenshot-gallery {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-4);
+    animation: fade-up 600ms var(--ease-out) both;
+}
+
+.screenshot-main {
+    width: 100%;
+    aspect-ratio: 16 / 10;
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow-lg);
+    background: var(--surface);
+}
+
+.screenshot-main img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.screenshot-thumbs {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+}
+
+.screenshot-thumb {
+    width: 84px;
+    height: 56px;
+    padding: 0;
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    border: 2px solid var(--border);
+    background: none;
+    cursor: pointer;
+    opacity: 0.55;
+    transition: opacity var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
+}
+
+.screenshot-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.screenshot-thumb:hover {
+    opacity: 0.85;
+    transform: translateY(-2px);
+}
+
+.screenshot-thumb.active {
+    opacity: 1;
+    border-color: var(--accent);
+}
+
+.screenshot-caption {
+    color: var(--text-muted);
+    font-size: var(--font-sm);
+    margin: 0;
+}
+
 /* ---------- Page docs / self-hosting ---------- */
 
 .docs-list {