design: стекло-bento карточки, дисплейный шрифт, живой ambient

- карточки: полупрозрачный градиент + backdrop-blur + inset-подсветка +
  глубокие тени + верхняя градиентная кромка (эффект стекла над aurora)
- Plus Jakarta Sans для заголовков/крупных чисел (выразительнее Inter)
- космическая indigo/aurora палитра, третий ореол глубины
- микро-интеракции (hover-подъём, press-scale) + prefers-reduced-motion

app/globals.css

@@ -173,10 +173,16 @@ html, body {
   font-feature-settings: "tnum", "zero";
 }
 .num-display {
-  letter-spacing: -0.02em;
+  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
+  letter-spacing: -0.03em;
   font-weight: 800;
-  line-height: 0.95;
+  line-height: 0.92;
 }
+/* Дисплейный шрифт для заголовков/крупных элементов — выразительнее Inter */
+h1, h2, h3, .display, .num-display, .eyebrow {
+  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
+}
+h1, h2, h3 { letter-spacing: -0.02em; }
 
 /* ——————————————————————————————
    Grain overlay
@@ -260,34 +266,78 @@ html, body {
 }
 
 /* ——————————————————————————————
-   Cards
+   Cards — премиальное стекло-bento с глубиной
+   Полупрозрачный градиент + backdrop-blur поверх живого ambient,
+   тонкая градиентная кромка сверху (inset highlight) и мягкая внешняя тень.
    —————————————————————————————— */
-.card {
+.card,
-  background: var(--surface-1);
+.card-raised,
+.card-hero,
+.glass-card {
+  position: relative;
+  background:
+    linear-gradient(160deg,
+      color-mix(in srgb, var(--surface-2) 82%, transparent) 0%,
+      color-mix(in srgb, var(--surface-1) 78%, transparent) 100%);
   border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
+  -webkit-backdrop-filter: blur(18px) saturate(1.3);
-  box-shadow: var(--shadow-sm);
+  backdrop-filter: blur(18px) saturate(1.3);
+  box-shadow:
+    var(--shadow-md),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.015);
+  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
+              box-shadow 0.22s ease, border-color 0.22s ease;
 }
-.card-raised {
+.light .card,
-  background: var(--surface-1);
+.light .card-raised,
-  border: 1px solid var(--border-subtle);
+.light .card-hero,
-  border-radius: var(--radius-lg);
+.light .glass-card {
-  box-shadow: var(--shadow-md);
+  background:
+    linear-gradient(160deg,
+      rgba(255, 255, 255, 0.9) 0%,
+      rgba(255, 255, 255, 0.72) 100%);
+  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.6);
 }
+.card { border-radius: var(--radius-lg); }
+.card-raised { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.08); }
 .card-hero {
-  background: var(--surface-1);
-  border: 1px solid var(--border-subtle);
   border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+/* Верхняя градиентная кромка — «свет» на стекле сверху */
+.card-hero::before,
+.card-raised::before {
+  content: '';
+  position: absolute;
+  inset: 0 0 auto 0;
+  height: 1px;
+  border-radius: inherit;
+  background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
+  opacity: 0.8;
+  pointer-events: none;
+}
+/* Интерактивные карточки (те, что кликаются) — лёгкий подъём/масштаб */
+button.card, button.card-raised, a.card, [role="button"].card,
+.card-interactive {
+  cursor: pointer;
+}
+button.card:active, .card-interactive:active {
+  transform: scale(0.985);
+}
+@media (hover: hover) {
+  .card-interactive:hover {
+    transform: translateY(-2px);
+    border-color: var(--border-strong);
+    box-shadow: var(--shadow-lg), 0 0 24px -8px var(--accent-glow),
+                inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  }
 }
 
 /* Focus-card styling — for the context-aware hero */
 .focus-card {
   position: relative;
-  background: var(--surface-1);
-  border: 1px solid var(--border-subtle);
   border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-lg);
   overflow: hidden;
 }
 .focus-card-accent::before {
@@ -307,13 +357,10 @@ html, body {
   pointer-events: none;
 }
 
-.glass-card {
+.glass-card { border-radius: var(--radius-lg); }
-  background: var(--surface-1);
+@media (hover: hover) {
-  border: 1px solid var(--border-subtle);
+  .glass-card:hover { border-color: var(--border-strong); }
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-sm);
 }
-.glass-card:hover { background: var(--surface-hover); }
 
 /* ——— Смелые опциональные утилиты (opt-in, раскладку не меняют) ——— */
 /* Светящаяся рамка-акцент для избранных карточек */
@@ -448,3 +495,16 @@ button:focus-visible {
 .light.weather-bg-snow    { --accent-glow: rgba(125, 211, 252, 0.22); }
 .light.weather-bg-thunder { --accent-glow: rgba(109, 40, 217, 0.14); }
 .light.weather-bg-night   { --accent-glow: rgba(55, 48, 163, 0.14); }
+
+/* ——————————————————————————————
+   Reduced motion — уважаем системную настройку (a11y)
+   —————————————————————————————— */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+  }
+  .bg-ambient::before, .bg-ambient::after, .bg-ambient .aurora-3 { animation: none; }
+  .card-interactive:hover { transform: none; }
+}

app/layout.tsx

@@ -26,7 +26,7 @@ export default function RootLayout({
         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
-        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap" rel="stylesheet" />
       </head>
       <body className="antialiased">{children}</body>
     </html>