diff --git a/app/static/css/style.css b/app/static/css/style.css
index 5c70296..b7b420c 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -1,16 +1,19 @@
 :root {
-  --bg: #e8efe9;
-  --bg-deep: #d5e2d8;
-  --ink: #12201a;
-  --ink-soft: #3d5248;
-  --accent: #0f7a4c;
-  --accent-hot: #e85d04;
-  --surface: rgba(255, 255, 255, 0.55);
-  --line: rgba(18, 32, 26, 0.12);
-  --radius: 18px;
-  --font-display: "Syne", sans-serif;
-  --font-body: "Manrope", sans-serif;
-  --shadow: 0 24px 60px rgba(18, 32, 26, 0.12);
+  --bg: #e8eef2;
+  --bg-2: #d7e3ea;
+  --ink: #0b1c24;
+  --ink-soft: #4a606c;
+  --accent: #0f7f86;
+  --accent-2: #d97706;
+  --signal: #c8f542;
+  --surface: rgba(255, 255, 255, 0.62);
+  --surface-strong: rgba(255, 255, 255, 0.82);
+  --line: rgba(11, 28, 36, 0.12);
+  --radius: 22px;
+  --font-display: "Bricolage Grotesque", sans-serif;
+  --font-body: "Figtree", sans-serif;
+  --shadow: 0 30px 80px rgba(11, 28, 36, 0.14);
+  --header-h: 72px;
 }
 
 *,
@@ -29,9 +32,9 @@ body {
   color: var(--ink);
   font-family: var(--font-body);
   background:
-    radial-gradient(1200px 700px at 10% -10%, #c8e6d3 0%, transparent 55%),
-    radial-gradient(900px 600px at 100% 0%, #f4d6b8 0%, transparent 45%),
-    linear-gradient(165deg, var(--bg) 0%, var(--bg-deep) 100%);
+    radial-gradient(1000px 600px at 85% -10%, #b9d7e0 0%, transparent 55%),
+    radial-gradient(800px 500px at -10% 20%, #f3d9b0 0%, transparent 45%),
+    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
   line-height: 1.5;
 }
 
@@ -39,9 +42,9 @@ body {
   pointer-events: none;
   position: fixed;
   inset: 0;
-  opacity: 0.04;
   z-index: 0;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  opacity: 0.045;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 }
 
 .site-header,
@@ -52,27 +55,38 @@ main,
 }
 
 .site-header {
+  position: sticky;
+  top: 0;
+  z-index: 20;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
-  max-width: 1200px;
-  margin: 0 auto;
+  min-height: var(--header-h);
+  padding: 0.9rem clamp(1.2rem, 4vw, 3rem);
+  backdrop-filter: blur(14px);
+  background: rgba(232, 238, 242, 0.72);
+  border-bottom: 1px solid transparent;
+  transition: border-color 0.3s ease, background 0.3s ease;
+}
+
+.site-header.is-scrolled {
+  border-bottom-color: var(--line);
+  background: rgba(232, 238, 242, 0.9);
 }
 
 .brand {
   font-family: var(--font-display);
   font-weight: 800;
   font-size: 1.35rem;
-  letter-spacing: -0.03em;
+  letter-spacing: -0.04em;
   color: var(--ink);
   text-decoration: none;
 }
 
 .nav {
   display: flex;
-  gap: 1.4rem;
+  gap: 1.5rem;
 }
 
 .nav a,
@@ -84,64 +98,152 @@ main,
 }
 
 .header-cta {
-  color: var(--accent);
+  color: var(--ink);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
 }
 
 .cart-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 1.4rem;
-  height: 1.4rem;
-  margin-left: 0.25rem;
+  min-width: 1.35rem;
+  height: 1.35rem;
   padding: 0 0.35rem;
   border-radius: 999px;
-  background: var(--accent-hot);
-  color: #fff;
-  font-size: 0.75rem;
+  background: var(--ink);
+  color: var(--signal);
+  font-size: 0.72rem;
   font-weight: 700;
 }
 
+/* —— Hero: one full-bleed composition —— */
 .hero {
-  min-height: calc(100svh - 72px);
+  position: relative;
+  min-height: calc(100svh - var(--header-h));
   display: grid;
-  grid-template-columns: 1.05fr 0.95fr;
   align-items: end;
-  gap: clamp(1.5rem, 4vw, 3rem);
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: clamp(1rem, 3vw, 2rem) clamp(1.2rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
+  overflow: hidden;
+  margin: 0;
+  max-width: none;
+  padding: 0;
+}
+
+.hero-bg {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(120deg, rgba(11, 28, 36, 0.88) 0%, rgba(15, 127, 134, 0.72) 48%, rgba(217, 119, 6, 0.55) 100%),
+    radial-gradient(circle at 70% 35%, rgba(200, 245, 66, 0.35), transparent 28%);
+}
+
+.hero-mesh {
+  position: absolute;
+  inset: -10%;
+  background:
+    repeating-linear-gradient(
+      115deg,
+      transparent 0 26px,
+      rgba(255, 255, 255, 0.04) 26px 27px
+    ),
+    repeating-linear-gradient(
+      25deg,
+      transparent 0 34px,
+      rgba(11, 28, 36, 0.08) 34px 35px
+    );
+  animation: mesh-drift 22s linear infinite;
+}
+
+.hero-scan {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    180deg,
+    transparent 0%,
+    rgba(200, 245, 66, 0.08) 48%,
+    transparent 52%,
+    transparent 100%
+  );
+  background-size: 100% 220%;
+  animation: scan 7s ease-in-out infinite;
+}
+
+.hero-glyph {
+  position: absolute;
+  right: clamp(6%, 10vw, 14%);
+  top: 18%;
+  width: min(42vw, 420px);
+  aspect-ratio: 1;
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  border-radius: 50%;
+  animation: spin 28s linear infinite;
+}
+
+.hero-glyph span {
+  position: absolute;
+  width: 18%;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--signal);
+  top: 6%;
+  left: 41%;
+}
+
+.hero-glyph span:nth-child(2) {
+  top: auto;
+  bottom: 14%;
+  left: 12%;
+  width: 10%;
+  background: #fff;
+  animation: none;
+}
+
+.hero-glyph span:nth-child(3) {
+  top: 42%;
+  left: auto;
+  right: 8%;
+  width: 7%;
+  background: rgba(255, 255, 255, 0.7);
 }
 
 .hero-copy {
-  padding-bottom: clamp(1rem, 4vw, 3rem);
-  animation: rise 0.9s ease both;
+  position: relative;
+  z-index: 2;
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+  padding: clamp(2rem, 8vh, 5rem) clamp(1.2rem, 4vw, 3rem);
+  color: #f4fafb;
+  animation: rise 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 
 .brand-mark {
-  margin: 0 0 0.8rem;
+  margin: 0 0 0.7rem;
   font-family: var(--font-display);
-  font-size: clamp(2.8rem, 8vw, 5.5rem);
+  font-size: clamp(3.4rem, 12vw, 7.5rem);
   font-weight: 800;
-  letter-spacing: -0.05em;
-  line-height: 0.9;
-  color: var(--ink);
+  letter-spacing: -0.06em;
+  line-height: 0.86;
+  color: #fff;
+  text-wrap: balance;
 }
 
 .hero h1 {
-  margin: 0 0 1rem;
-  max-width: 14ch;
+  margin: 0 0 0.9rem;
+  max-width: 16ch;
   font-family: var(--font-display);
-  font-size: clamp(1.8rem, 4.2vw, 3rem);
+  font-size: clamp(1.7rem, 3.8vw, 2.8rem);
   font-weight: 700;
-  letter-spacing: -0.03em;
-  line-height: 1.05;
+  letter-spacing: -0.035em;
+  line-height: 1.08;
+  color: rgba(255, 255, 255, 0.94);
 }
 
 .hero-lead {
   margin: 0 0 1.8rem;
   max-width: 34ch;
-  color: var(--ink-soft);
+  color: rgba(244, 250, 251, 0.78);
   font-size: 1.08rem;
 }
 
@@ -157,12 +259,12 @@ main,
   justify-content: center;
   border: 0;
   border-radius: 999px;
-  padding: 0.85rem 1.35rem;
+  padding: 0.9rem 1.4rem;
   font: inherit;
   font-weight: 700;
   text-decoration: none;
   cursor: pointer;
-  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
+  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
 }
 
 .btn:hover {
@@ -176,19 +278,23 @@ main,
 }
 
 .btn-primary {
-  background: var(--ink);
-  color: #f4faf6;
+  background: var(--signal);
+  color: var(--ink);
 }
 
 .btn-ghost {
   background: transparent;
-  color: var(--ink);
-  box-shadow: inset 0 0 0 1.5px var(--line);
+  color: inherit;
+  box-shadow: inset 0 0 0 1.5px currentColor;
+}
+
+.hero .btn-ghost {
+  color: #fff;
 }
 
 .btn-small {
   padding: 0.55rem 1rem;
-  background: var(--accent);
+  background: var(--ink);
   color: #fff;
   font-size: 0.9rem;
 }
@@ -198,54 +304,11 @@ main,
   font-size: 0.85rem;
 }
 
-.hero-visual {
-  position: relative;
-  min-height: min(62vh, 560px);
-  animation: fade-in 1.1s ease 0.15s both;
-}
-
-.hero-plane {
-  position: absolute;
-  inset: 0;
-  background:
-    linear-gradient(135deg, rgba(15, 122, 76, 0.85), rgba(18, 32, 26, 0.92)),
-    repeating-linear-gradient(
-      -18deg,
-      transparent 0 18px,
-      rgba(255, 255, 255, 0.05) 18px 19px
-    );
-  clip-path: polygon(8% 0, 100% 0, 100% 88%, 0 100%);
-  box-shadow: var(--shadow);
-}
-
-.hero-orbit {
-  position: absolute;
-  width: 42%;
-  aspect-ratio: 1;
-  right: 12%;
-  top: 18%;
-  border: 1px solid rgba(255, 255, 255, 0.35);
-  border-radius: 50%;
-  animation: spin 18s linear infinite;
-}
-
-.hero-orbit::after {
-  content: "";
-  position: absolute;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: #f4d6b8;
-  top: 8%;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
 section,
 .page-section {
   max-width: 1200px;
   margin: 0 auto;
-  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.2rem, 4vw, 3rem);
+  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.2rem, 4vw, 3rem);
 }
 
 .page-section.narrow {
@@ -260,8 +323,8 @@ section,
 .section-head h3 {
   margin: 0 0 0.35rem;
   font-family: var(--font-display);
-  font-size: clamp(1.8rem, 3vw, 2.4rem);
-  letter-spacing: -0.03em;
+  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
+  letter-spacing: -0.04em;
 }
 
 .section-head p {
@@ -274,33 +337,40 @@ section,
   margin: 0;
   padding: 0;
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 1rem;
+  gap: 0;
 }
 
 .category-link {
-  display: block;
-  padding: 1.2rem 1rem;
+  display: grid;
+  grid-template-columns: 3.5rem 1fr 1.4fr;
+  gap: 1rem;
+  align-items: baseline;
+  padding: 1.25rem 0;
   text-decoration: none;
   color: inherit;
-  border-top: 2px solid var(--ink);
-  transition: background 0.2s ease;
+  border-top: 1px solid var(--line);
+  transition: padding 0.25s ease, background 0.25s ease;
 }
 
 .category-link:hover {
-  background: var(--surface);
+  padding-left: 0.6rem;
+}
+
+.category-index {
+  font-family: var(--font-display);
+  font-weight: 800;
+  color: var(--accent);
 }
 
 .category-name {
-  display: block;
   font-family: var(--font-display);
   font-weight: 700;
-  margin-bottom: 0.35rem;
+  font-size: 1.25rem;
+  letter-spacing: -0.02em;
 }
 
 .category-desc {
   color: var(--ink-soft);
-  font-size: 0.92rem;
 }
 
 .featured-rail {
@@ -320,40 +390,77 @@ section,
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: var(--surface);
-  backdrop-filter: blur(10px);
-  border: 1px solid var(--line);
   border-radius: var(--radius);
+  background: var(--surface);
+  border: 1px solid var(--line);
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
 }
 
-.product-media {
-  display: block;
-  min-height: 140px;
-  background: linear-gradient(135deg, #0f7a4c, #1b4332);
+.product:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow);
 }
 
-.product-media.tall {
-  min-height: 360px;
+.product-media,
+.product-stage,
+.cart-thumb {
+  position: relative;
+  display: grid;
+  place-items: center;
+  min-height: 160px;
+  text-decoration: none;
+  overflow: hidden;
+  background: #0b1c24;
 }
 
-.gradient-mint .product-media {
-  background: linear-gradient(135deg, #2d6a4f, #95d5b2);
+.product-media::before,
+.product-stage::before,
+.cart-thumb::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.22), transparent 40%),
+    linear-gradient(145deg, var(--tone-a), var(--tone-b));
 }
 
-.gradient-coral .product-media {
-  background: linear-gradient(135deg, #e85d04, #f4a261);
+.tone-mint {
+  --tone-a: #0f7f86;
+  --tone-b: #1b4332;
 }
 
-.gradient-ink .product-media {
-  background: linear-gradient(135deg, #12201a, #40916c);
+.tone-coral {
+  --tone-a: #d97706;
+  --tone-b: #9a3412;
 }
 
-.gradient-sand .product-media {
-  background: linear-gradient(135deg, #bc6c25, #e9c46a);
+.tone-ink {
+  --tone-a: #0b1c24;
+  --tone-b: #0f7f86;
+}
+
+.tone-sand {
+  --tone-a: #b45309;
+  --tone-b: #f59e0b;
+}
+
+.product-mark {
+  position: relative;
+  z-index: 1;
+  font-family: var(--font-display);
+  font-weight: 800;
+  font-size: 3.4rem;
+  letter-spacing: -0.06em;
+  color: rgba(255, 255, 255, 0.92);
+  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+}
+
+.product-mark.xl {
+  font-size: clamp(5rem, 14vw, 9rem);
 }
 
 .product-body {
-  padding: 1.1rem 1.15rem 1.2rem;
+  padding: 1.15rem 1.2rem 1.25rem;
   display: flex;
   flex-direction: column;
   gap: 0.55rem;
@@ -363,7 +470,7 @@ section,
 .product-body h3 {
   margin: 0;
   font-family: var(--font-display);
-  font-size: 1.15rem;
+  font-size: 1.18rem;
   letter-spacing: -0.02em;
 }
 
@@ -379,10 +486,11 @@ section,
 }
 
 .product-tag {
-  font-size: 0.78rem !important;
+  margin: 0;
+  font-size: 0.75rem !important;
   font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.06em;
   color: var(--accent) !important;
 }
 
@@ -392,17 +500,18 @@ section,
   align-items: center;
   justify-content: space-between;
   gap: 0.8rem;
-  padding-top: 0.6rem;
+  padding-top: 0.7rem;
 }
 
 .price {
   font-family: var(--font-display);
   font-weight: 800;
   font-size: 1.2rem;
+  letter-spacing: -0.02em;
 }
 
 .price.big {
-  font-size: 1.6rem;
+  font-size: 1.7rem;
 }
 
 .steps {
@@ -411,11 +520,11 @@ section,
   padding: 0;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 1.4rem;
+  gap: 1.5rem;
 }
 
 .steps li {
-  padding-top: 1rem;
+  padding-top: 1.1rem;
   border-top: 2px solid var(--ink);
 }
 
@@ -423,13 +532,14 @@ section,
   display: block;
   font-family: var(--font-display);
   font-weight: 800;
-  color: var(--accent-hot);
-  margin-bottom: 0.6rem;
+  color: var(--accent-2);
+  margin-bottom: 0.55rem;
 }
 
 .steps h3 {
   margin: 0 0 0.4rem;
   font-family: var(--font-display);
+  letter-spacing: -0.02em;
 }
 
 .steps p {
@@ -440,15 +550,34 @@ section,
 .site-footer {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 2rem clamp(1.2rem, 4vw, 3rem) 3rem;
+  padding: 2.5rem clamp(1.2rem, 4vw, 3rem) 3rem;
   border-top: 1px solid var(--line);
 }
 
+.footer-grid {
+  display: flex;
+  justify-content: space-between;
+  gap: 2rem;
+  flex-wrap: wrap;
+}
+
 .footer-brand {
   font-family: var(--font-display);
   font-weight: 800;
-  font-size: 1.4rem;
-  margin-bottom: 0.4rem;
+  font-size: 1.6rem;
+  letter-spacing: -0.04em;
+  margin-bottom: 0.35rem;
+}
+
+.footer-links {
+  display: flex;
+  gap: 1.2rem;
+}
+
+.footer-links a {
+  color: var(--ink-soft);
+  text-decoration: none;
+  font-weight: 600;
 }
 
 .site-footer p {
@@ -457,14 +586,14 @@ section,
 }
 
 .footer-copy {
-  margin-top: 1rem !important;
+  margin-top: 1.4rem !important;
   font-size: 0.9rem;
 }
 
 .reveal {
   opacity: 0;
-  transform: translateY(18px);
-  transition: opacity 0.55s ease, transform 0.55s ease;
+  transform: translateY(22px);
+  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .reveal.is-visible {
@@ -472,11 +601,18 @@ section,
   transform: none;
 }
 
-.empty {
-  grid-column: 1 / -1;
+.empty,
+.empty-state {
   color: var(--ink-soft);
 }
 
+.empty-state {
+  display: grid;
+  gap: 1rem;
+  justify-items: start;
+  padding: 2rem 0;
+}
+
 .back-link {
   display: inline-block;
   margin-bottom: 1.2rem;
@@ -487,20 +623,30 @@ section,
 
 .product-layout {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1.05fr 0.95fr;
   gap: 2rem;
-  align-items: start;
+  align-items: stretch;
+}
+
+.product-stage {
+  min-height: 420px;
+  border-radius: var(--radius);
 }
 
 .product-info h1 {
   margin: 0 0 0.8rem;
   font-family: var(--font-display);
-  font-size: clamp(1.8rem, 4vw, 2.6rem);
-  letter-spacing: -0.03em;
+  font-size: clamp(2rem, 4vw, 3rem);
+  letter-spacing: -0.04em;
+  line-height: 1.05;
 }
 
 .lead {
-  font-size: 1.05rem;
+  font-size: 1.08rem;
+  color: var(--ink-soft);
+}
+
+.body-copy {
   color: var(--ink-soft);
 }
 
@@ -538,10 +684,10 @@ textarea,
 select {
   width: 100%;
   border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: 0.7rem 0.85rem;
+  border-radius: 14px;
+  padding: 0.75rem 0.9rem;
   font: inherit;
-  background: rgba(255, 255, 255, 0.7);
+  background: var(--surface-strong);
   color: var(--ink);
 }
 
@@ -579,20 +725,22 @@ select {
   width: 100%;
   border-collapse: collapse;
   background: var(--surface);
+  border-radius: var(--radius);
+  overflow: hidden;
 }
 
 .data-table th,
 .data-table td {
   text-align: left;
-  padding: 0.85rem 0.75rem;
+  padding: 0.9rem 0.8rem;
   border-bottom: 1px solid var(--line);
   vertical-align: top;
 }
 
 .data-table th {
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   text-transform: uppercase;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.05em;
   color: var(--ink-soft);
 }
 
@@ -601,6 +749,39 @@ select {
   font-size: 0.9rem;
 }
 
+.cart-list {
+  display: grid;
+  gap: 0.8rem;
+}
+
+.cart-row {
+  display: grid;
+  grid-template-columns: 72px 1.4fr 0.7fr auto 0.7fr auto;
+  gap: 0.9rem;
+  align-items: center;
+  padding: 0.75rem;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 18px;
+}
+
+.cart-thumb {
+  width: 72px;
+  min-height: 72px;
+  border-radius: 14px;
+}
+
+.cart-thumb .product-mark {
+  font-size: 1.6rem;
+}
+
+.cart-info a {
+  color: inherit;
+  font-weight: 700;
+  text-decoration: none;
+  font-family: var(--font-display);
+}
+
 .cart-summary {
   display: flex;
   flex-wrap: wrap;
@@ -608,6 +789,8 @@ select {
   align-items: center;
   gap: 1rem;
   margin-top: 1.5rem;
+  padding-top: 1.2rem;
+  border-top: 1px solid var(--line);
 }
 
 .checkout-list {
@@ -620,23 +803,23 @@ select {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
-  padding: 0.7rem 0;
+  padding: 0.85rem 0;
   border-bottom: 1px solid var(--line);
 }
 
 .flash {
-  padding: 0.85rem 1rem;
-  border-radius: 12px;
+  padding: 0.9rem 1rem;
+  border-radius: 14px;
   font-weight: 600;
 }
 
 .flash.error {
-  background: rgba(232, 93, 4, 0.12);
+  background: rgba(217, 119, 6, 0.14);
   color: #9a3412;
 }
 
 .flash.ok {
-  background: rgba(15, 122, 76, 0.12);
+  background: rgba(15, 127, 134, 0.12);
   color: var(--accent);
 }
 
@@ -649,33 +832,35 @@ select {
 .codes pre,
 pre.codes {
   margin: 0.5rem 0 0;
-  padding: 0.9rem 1rem;
-  border-radius: 12px;
-  background: #12201a;
-  color: #e8efe9;
+  padding: 1rem 1.1rem;
+  border-radius: 14px;
+  background: var(--ink);
+  color: var(--signal);
   overflow-x: auto;
   font-size: 0.95rem;
 }
 
 .admin-body {
   background:
-    radial-gradient(900px 500px at 0% 0%, #c8e6d3 0%, transparent 50%),
-    linear-gradient(165deg, #e8efe9, #d5e2d8);
+    radial-gradient(900px 500px at 0% 0%, #b9d7e0 0%, transparent 50%),
+    linear-gradient(165deg, var(--bg), var(--bg-2));
+  font-family: var(--font-body);
 }
 
 .admin-shell {
   display: grid;
-  grid-template-columns: 220px 1fr;
+  grid-template-columns: 240px 1fr;
   min-height: 100vh;
 }
 
 .admin-nav {
   display: flex;
   flex-direction: column;
-  gap: 0.85rem;
-  padding: 1.4rem 1.1rem;
+  gap: 0.9rem;
+  padding: 1.5rem 1.2rem;
   border-right: 1px solid var(--line);
-  background: rgba(255, 255, 255, 0.35);
+  background: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(10px);
 }
 
 .admin-nav a {
@@ -685,13 +870,18 @@ pre.codes {
 }
 
 .admin-main {
-  padding: 1.5rem clamp(1rem, 3vw, 2rem);
+  padding: 1.6rem clamp(1rem, 3vw, 2rem);
 }
 
 .admin-login {
   margin-top: 12vh;
 }
 
+.admin-login h1 {
+  font-family: var(--font-display);
+  letter-spacing: -0.04em;
+}
+
 .admin-stats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -700,9 +890,10 @@ pre.codes {
 }
 
 .stat {
-  padding: 1rem;
+  padding: 1.1rem;
   border-top: 2px solid var(--ink);
   background: var(--surface);
+  border-radius: 0 0 16px 16px;
 }
 
 .stat-label {
@@ -714,7 +905,8 @@ pre.codes {
 
 .stat strong {
   font-family: var(--font-display);
-  font-size: 1.5rem;
+  font-size: 1.55rem;
+  letter-spacing: -0.03em;
 }
 
 .row-head {
@@ -754,7 +946,7 @@ pre.codes {
 @keyframes rise {
   from {
     opacity: 0;
-    transform: translateY(24px);
+    transform: translateY(28px);
   }
   to {
     opacity: 1;
@@ -762,12 +954,22 @@ pre.codes {
   }
 }
 
-@keyframes fade-in {
+@keyframes mesh-drift {
   from {
-    opacity: 0;
+    transform: translate3d(0, 0, 0);
   }
   to {
-    opacity: 1;
+    transform: translate3d(-40px, 24px, 0);
+  }
+}
+
+@keyframes scan {
+  0%,
+  100% {
+    background-position: 0 -40%;
+  }
+  50% {
+    background-position: 0 140%;
   }
 }
 
@@ -778,33 +980,30 @@ pre.codes {
 }
 
 @media (max-width: 960px) {
-  .hero,
   .product-layout,
   .admin-shell,
-  .admin-stats {
+  .admin-stats,
+  .featured-rail,
+  .product-grid,
+  .steps,
+  .category-link,
+  .cart-row {
     grid-template-columns: 1fr;
   }
 
-  .hero {
-    min-height: auto;
-  }
-
-  .hero-visual {
-    min-height: 280px;
-    order: -1;
-  }
-
-  .category-list,
-  .featured-rail,
-  .product-grid,
-  .steps {
-    grid-template-columns: 1fr 1fr;
+  .hero-glyph {
+    width: min(58vw, 280px);
+    opacity: 0.7;
   }
 
   .admin-nav {
     border-right: 0;
     border-bottom: 1px solid var(--line);
   }
+
+  .category-link {
+    gap: 0.35rem;
+  }
 }
 
 @media (max-width: 720px) {
@@ -812,14 +1011,26 @@ pre.codes {
     display: none;
   }
 
-  .category-list,
-  .featured-rail,
+  .brand-mark {
+    font-size: clamp(3rem, 16vw, 4.4rem);
+  }
+
   .product-grid,
   .steps {
     grid-template-columns: 1fr;
   }
+}
 
-  .brand-mark {
-    font-size: clamp(2.4rem, 12vw, 3.4rem);
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition: none !important;
+  }
+
+  .reveal {
+    opacity: 1;
+    transform: none;
   }
 }
diff --git a/app/static/js/main.js b/app/static/js/main.js
index 9a8616b..b9f3311 100644
--- a/app/static/js/main.js
+++ b/app/static/js/main.js
@@ -1,16 +1,25 @@
 (() => {
+  const header = document.querySelector(".site-header");
+  const onScroll = () => {
+    if (!header) return;
+    header.classList.toggle("is-scrolled", window.scrollY > 12);
+  };
+  onScroll();
+  window.addEventListener("scroll", onScroll, { passive: true });
+
   const reveals = document.querySelectorAll(".reveal");
   if ("IntersectionObserver" in window) {
     const observer = new IntersectionObserver(
       (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            entry.target.classList.add("is-visible");
-            observer.unobserve(entry.target);
-          }
+        entries.forEach((entry, index) => {
+          if (!entry.isIntersecting) return;
+          const el = entry.target;
+          el.style.transitionDelay = `${Math.min(index * 0.04, 0.2)}s`;
+          el.classList.add("is-visible");
+          observer.unobserve(el);
         });
       },
-      { threshold: 0.15 }
+      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
     );
     reveals.forEach((el) => observer.observe(el));
   } else {
diff --git a/app/templates/admin/base.html b/app/templates/admin/base.html
index 5158590..e6fd005 100644
--- a/app/templates/admin/base.html
+++ b/app/templates/admin/base.html
@@ -7,7 +7,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Syne:wght@500;700;800&family=Manrope:wght@400;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link rel="stylesheet" href="/static/css/style.css" />
diff --git a/app/templates/admin/login.html b/app/templates/admin/login.html
index 3c2dccc..cab2bae 100644
--- a/app/templates/admin/login.html
+++ b/app/templates/admin/login.html
@@ -7,7 +7,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Manrope:wght@400;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Figtree:wght@400;600;700&display=swap"
       rel="stylesheet"
     />
     <link rel="stylesheet" href="/static/css/style.css" />
diff --git a/app/templates/base.html b/app/templates/base.html
index 1b7e48e..8f7c177 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -11,7 +11,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Syne:wght@500;700;800&family=Manrope:wght@400;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link rel="stylesheet" href="/static/css/style.css" />
@@ -26,14 +26,23 @@
         <a href="/#how">Как купить</a>
       </nav>
       <a class="header-cta cart-link" href="/cart">
-        Корзина{% if cart_count %} <span class="cart-badge">{{ cart_count }}</span>{% endif %}
+        Корзина{% if cart_count %}<span class="cart-badge">{{ cart_count }}</span>{% endif %}
       </a>
     </header>
     <main>{% block content %}{% endblock %}</main>
     <footer class="site-footer" id="support">
-      <div class="footer-brand">{{ app_name }}</div>
-      <p>Цифровые товары с мгновенной выдачей. Вопросы: support@pitopn.shop</p>
-      <p class="footer-copy">© {{ app_name }} 2026</p>
+      <div class="footer-grid">
+        <div>
+          <div class="footer-brand">{{ app_name }}</div>
+          <p>Цифровые товары с мгновенной выдачей.</p>
+        </div>
+        <div class="footer-links">
+          <a href="/#catalog">Каталог</a>
+          <a href="/lookup">Мой заказ</a>
+          <a href="/cart">Корзина</a>
+        </div>
+      </div>
+      <p class="footer-copy">© {{ app_name }} 2026 · support@pitopn.shop</p>
     </footer>
     <script src="/static/js/main.js" defer></script>
   </body>
diff --git a/app/templates/cart.html b/app/templates/cart.html
index 138b0a6..0a3dc56 100644
--- a/app/templates/cart.html
+++ b/app/templates/cart.html
@@ -9,44 +9,31 @@
   </div>
 
   {% if not items %}
-  <p class="empty">Корзина пуста. <a href="/#catalog">Перейти в каталог</a></p>
+  <div class="empty-state">
+    <p>Корзина пуста</p>
+    <a class="btn btn-primary" href="/#catalog">Перейти в каталог</a>
+  </div>
   {% else %}
-  <div class="table-wrap">
-    <table class="data-table">
-      <thead>
-        <tr>
-          <th>Товар</th>
-          <th>Цена</th>
-          <th>Кол-во</th>
-          <th>Сумма</th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for item in items %}
-        <tr>
-          <td>
-            <a href="/product/{{ item.product.slug }}">{{ item.product.title }}</a>
-            <div class="muted">В наличии: {{ item.stock }}</div>
-          </td>
-          <td>{{ item.product.price | rub }}</td>
-          <td>
-            <form method="post" action="/cart/update" class="inline-form">
-              <input type="hidden" name="product_id" value="{{ item.product.id }}" />
-              <input type="number" name="quantity" min="0" max="{{ item.stock }}" value="{{ item.quantity }}" />
-              <button class="btn btn-ghost btn-tiny" type="submit">OK</button>
-            </form>
-          </td>
-          <td>{{ item.line_total | rub }}</td>
-          <td>
-            <form method="post" action="/cart/remove/{{ item.product.id }}">
-              <button class="btn btn-ghost btn-tiny" type="submit">Удалить</button>
-            </form>
-          </td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
+  <div class="cart-list">
+    {% for item in items %}
+    <article class="cart-row tone-{{ item.product.image_gradient }}">
+      <div class="cart-thumb"><span class="product-mark">{{ item.product.title[:1] }}</span></div>
+      <div class="cart-info">
+        <a href="/product/{{ item.product.slug }}">{{ item.product.title }}</a>
+        <div class="muted">В наличии: {{ item.stock }}</div>
+      </div>
+      <div class="cart-price">{{ item.product.price | rub }}</div>
+      <form method="post" action="/cart/update" class="inline-form">
+        <input type="hidden" name="product_id" value="{{ item.product.id }}" />
+        <input type="number" name="quantity" min="0" max="{{ item.stock }}" value="{{ item.quantity }}" />
+        <button class="btn btn-ghost btn-tiny" type="submit">OK</button>
+      </form>
+      <div class="cart-line">{{ item.line_total | rub }}</div>
+      <form method="post" action="/cart/remove/{{ item.product.id }}">
+        <button class="btn btn-ghost btn-tiny" type="submit">Удалить</button>
+      </form>
+    </article>
+    {% endfor %}
   </div>
   <div class="cart-summary">
     <div class="price big">Итого: {{ total | rub }}</div>
diff --git a/app/templates/index.html b/app/templates/index.html
index ef43f06..19cc456 100644
--- a/app/templates/index.html
+++ b/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>
diff --git a/app/templates/product.html b/app/templates/product.html
index 24fd248..d37937c 100644
--- a/app/templates/product.html
+++ b/app/templates/product.html
@@ -5,15 +5,15 @@
 <section class="page-section product-page">
   <a class="back-link" href="/#catalog">← К каталогу</a>
   <div class="product-layout">
-    <div class="product-hero-media gradient-{{ product.image_gradient }}">
-      <div class="product-media tall"></div>
+    <div class="product-stage tone-{{ product.image_gradient }}">
+      <span class="product-mark xl">{{ product.title[:1] }}</span>
     </div>
     <div class="product-info">
       <p class="product-tag">{{ product.delivery_note }}</p>
       <h1>{{ product.title }}</h1>
       <p class="lead">{{ product.short_description }}</p>
-      <p>{{ product.description }}</p>
-      <p class="stock-line">В наличии: {{ stock }} шт.</p>
+      <p class="body-copy">{{ product.description }}</p>
+      <p class="stock-line">В наличии: <strong>{{ stock }}</strong> шт.</p>
       <div class="buy-row">
         <span class="price big">{{ product.price | rub }}</span>
         <form method="post" action="/cart/add/{{ product.id }}" class="inline-form">