Refresh storefront design with full-bleed hero and new type system

Co-authored-by: Cursor <cursoragent@cursor.com>

app/templates/index.html

@@ -2,20 +2,21 @@
 
 {% block content %}
 <section class="hero">
-  <div class="hero-copy">
-    <p class="brand-mark">{{ app_name }}</p>
-    <h1>Цифровые товары без ожидания</h1>
-    <p class="hero-lead">
-      Ключи, софт и подарочные карты — оплатил и сразу получил код.
-    </p>
-    <div class="hero-actions">
-      <a class="btn btn-primary" href="#catalog">Смотреть каталог</a>
-      <a class="btn btn-ghost" href="/lookup">Найти заказ</a>
+  <div class="hero-bg" aria-hidden="true">
+    <div class="hero-mesh"></div>
+    <div class="hero-scan"></div>
+    <div class="hero-glyph">
+      <span></span><span></span><span></span>
     </div>
   </div>
-  <div class="hero-visual" aria-hidden="true">
-    <div class="hero-plane"></div>
-    <div class="hero-orbit"></div>
+  <div class="hero-copy">
+    <p class="brand-mark">{{ app_name }}</p>
+    <h1>Код приходит сразу после оплаты</h1>
+    <p class="hero-lead">Ключи, софт и карты пополнения с автоматической выдачей.</p>
+    <div class="hero-actions">
+      <a class="btn btn-primary" href="#catalog">Открыть каталог</a>
+      <a class="btn btn-ghost" href="/lookup">Найти заказ</a>
+    </div>
   </div>
 </section>
 
@@ -26,8 +27,9 @@
   </div>
   <ul class="category-list">
     {% for category in categories %}
-    <li>
+    <li class="reveal">
       <a class="category-link" href="#catalog">
+        <span class="category-index">0{{ loop.index }}</span>
         <span class="category-name">{{ category.name }}</span>
         <span class="category-desc">{{ category.description }}</span>
       </a>
@@ -39,14 +41,16 @@
 <section class="catalog" id="catalog">
   <div class="section-head">
     <h2>Каталог</h2>
-    <p>Популярные позиции с автоматической выдачей</p>
+    <p>Позиции с мгновенной выдачей цифрового кода</p>
   </div>
 
   {% if featured %}
   <div class="featured-rail" aria-label="Избранное">
     {% for product in featured %}
-    <article class="product product-featured gradient-{{ product.image_gradient }} reveal">
-      <a class="product-media" href="/product/{{ product.slug }}"></a>
+    <article class="product product-featured tone-{{ product.image_gradient }} reveal">
+      <a class="product-media" href="/product/{{ product.slug }}">
+        <span class="product-mark">{{ product.title[:1] }}</span>
+      </a>
       <div class="product-body">
         <p class="product-tag">{{ product.delivery_note }}</p>
         <h3><a href="/product/{{ product.slug }}">{{ product.title }}</a></h3>
@@ -67,8 +71,10 @@
 
   <div class="product-grid">
     {% for product in products %}
-    <article class="product gradient-{{ product.image_gradient }} reveal">
-      <a class="product-media" href="/product/{{ product.slug }}"></a>
+    <article class="product tone-{{ product.image_gradient }} reveal">
+      <a class="product-media" href="/product/{{ product.slug }}">
+        <span class="product-mark">{{ product.title[:1] }}</span>
+      </a>
       <div class="product-body">
         <p class="product-tag">{{ product.delivery_note }}</p>
         <h3><a href="/product/{{ product.slug }}">{{ product.title }}</a></h3>
@@ -95,17 +101,17 @@
     <p>Три шага до цифрового кода</p>
   </div>
   <ol class="steps">
-    <li>
+    <li class="reveal">
       <span class="step-num">01</span>
       <h3>Выберите товар</h3>
       <p>Добавьте ключ, подписку или карту в корзину.</p>
     </li>
-    <li>
+    <li class="reveal">
       <span class="step-num">02</span>
       <h3>Оформите заказ</h3>
-      <p>Укажите email — туда привязывается выдача.</p>
+      <p>Укажите email — к нему привязывается выдача.</p>
     </li>
-    <li>
+    <li class="reveal">
       <span class="step-num">03</span>
       <h3>Получите сразу</h3>
       <p>Коды открываются на странице заказа мгновенно.</p>