bank landing: compact GOA shop sample box

configs/bank-landing/index.html

@@ -445,6 +445,82 @@
       text-align: center;
     }
     footer a { color: #e8c878; }
+
+    /* Compact GOA shop teaser */
+    .shop-box {
+      background: rgba(18, 28, 28, 0.55);
+      border: 1px solid rgba(232, 168, 56, 0.32);
+      border-radius: 16px;
+      padding: 1rem 1.05rem 1.1rem;
+      margin: 0 0 1.35rem;
+    }
+    .shop-box h2 {
+      margin: 0 0 0.25rem;
+      font-size: 0.78rem;
+      font-weight: 700;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--muted);
+      text-align: center;
+    }
+    .shop-box .shop-lead {
+      margin: 0 0 0.75rem;
+      text-align: center;
+      font-size: 0.88rem;
+      color: var(--muted);
+    }
+    .shop-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0.5rem;
+    }
+    @media (min-width: 420px) {
+      .shop-grid { grid-template-columns: 1fr 1fr 1fr; }
+    }
+    .shop-item {
+      background: rgba(0, 0, 0, 0.28);
+      border: 1px solid rgba(232, 168, 56, 0.18);
+      border-radius: 12px;
+      padding: 0.55rem 0.5rem 0.6rem;
+      text-align: center;
+      min-width: 0;
+    }
+    .shop-item .emoji {
+      display: block;
+      font-size: 1.35rem;
+      line-height: 1.2;
+      margin-bottom: 0.2rem;
+    }
+    .shop-item .name {
+      display: block;
+      font-size: 0.78rem;
+      font-weight: 700;
+      color: #fff6e8;
+      line-height: 1.25;
+    }
+    .shop-item .price {
+      display: block;
+      margin-top: 0.2rem;
+      font-size: 0.8rem;
+      font-weight: 750;
+      color: #5eead4;
+      font-variant-numeric: tabular-nums;
+    }
+    .shop-foot {
+      margin: 0.75rem 0 0;
+      text-align: center;
+    }
+    .shop-foot a {
+      display: inline-block;
+      text-decoration: none;
+      font-size: 0.85rem;
+      font-weight: 700;
+      color: #1a1208;
+      background: linear-gradient(135deg, #f0c86a, #c47a18);
+      padding: 0.45rem 0.9rem;
+      border-radius: 10px;
+    }
+    .shop-foot a:hover { filter: brightness(1.06); }
   </style>
   <base href="/intro/" />
   <script src="/intro/qrcode.min.js"></script>
@@ -459,6 +535,47 @@
       </p>
     </header>
 
+    <!-- ========== GOA shop samples ========== -->
+    <aside class="shop-box" aria-labelledby="shop-title">
+      <h2 id="shop-title">GOA shop · samples</h2>
+      <p class="shop-lead">Spend GOA at the merchant — a few examples</p>
+      <div class="shop-grid">
+        <div class="shop-item">
+          <span class="emoji" aria-hidden="true">🪐</span>
+          <span class="name">Orbit sticker pack</span>
+          <span class="price">GOA:2</span>
+        </div>
+        <div class="shop-item">
+          <span class="emoji" aria-hidden="true">☕</span>
+          <span class="name">Nebula coffee</span>
+          <span class="price">GOA:5</span>
+        </div>
+        <div class="shop-item">
+          <span class="emoji" aria-hidden="true">🎧</span>
+          <span class="name">Voidwave playlist</span>
+          <span class="price">GOA:8</span>
+        </div>
+        <div class="shop-item">
+          <span class="emoji" aria-hidden="true">🧢</span>
+          <span class="name">Comet cap</span>
+          <span class="price">GOA:15</span>
+        </div>
+        <div class="shop-item">
+          <span class="emoji" aria-hidden="true">🛸</span>
+          <span class="name">Shuttle day pass</span>
+          <span class="price">GOA:25</span>
+        </div>
+        <div class="shop-item">
+          <span class="emoji" aria-hidden="true">📡</span>
+          <span class="name">Beacon badge</span>
+          <span class="price">GOA:3</span>
+        </div>
+      </div>
+      <p class="shop-foot">
+        <a href="https://taler.hacktivism.ch/intro/">Merchant · taler.hacktivism.ch →</a>
+      </p>
+    </aside>
+
     <!-- ========== LIVE STATS ========== -->
     <section class="stats" id="stats" aria-labelledby="stats-title" hidden>
       <h2 id="stats-title">GOA flow</h2>