design: градиентный погодный hero, заметные стеклянные карточки, живой ambient

- погода-hero: насыщенный indigo/violet градиент, крупная анимация справа
  (убирает воид), температура 100px, стеклянные чипы деталей
- карточки заметно светлее (surface-3 glass) — явно поднимаются над фоном
- ambient крупнее и насыщеннее (indigo/cyan/violet) — фон живой, не чёрный

app/page.tsx

@@ -503,69 +503,77 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
         {/* Hero weather card */}
         {weather ? (
           <div
-            className="card-hero"
+            className="card-hero card-interactive"
             onClick={() => weather?.forecast?.[0] && setSelectedDay(weather.forecast[0])}
             style={{
-              padding: '24px 26px',
+              padding: 0,
               display: 'flex', flexDirection: 'column',
               position: 'relative', overflow: 'hidden',
-              cursor: 'pointer',
+              cursor: 'pointer', minHeight: 232,
             }}
           >
-            {/* Decorative animation, large, behind */}
+            {/* Насыщенный градиентный фон-hero (тема «Космо») */}
             <div style={{
-              position: 'absolute', top: -24, right: -12,
-              opacity: 0.14, pointerEvents: 'none',
+              position: 'absolute', inset: 0, pointerEvents: 'none',
+              background: 'linear-gradient(135deg, #4f46e5 0%, #7c3aed 48%, #2563eb 100%)',
+              opacity: 0.92,
+            }} />
+            {/* Мягкое свечение сверху-справа для глубины */}
+            <div style={{
+              position: 'absolute', top: -80, right: -60, width: 320, height: 320,
+              borderRadius: '50%', pointerEvents: 'none',
+              background: 'radial-gradient(circle, rgba(255,255,255,0.25), transparent 62%)',
+            }} />
+            {/* Крупная погодная анимация — заполняет правую часть */}
+            <div style={{
+              position: 'absolute', top: -14, right: 2,
+              opacity: 0.95, pointerEvents: 'none',
+              filter: 'drop-shadow(0 8px 24px rgba(0,0,0,0.25))',
             }}>
-              <WeatherAnimation condition={weather.desc} size={180} />
-            </div>
-
-            <div className="eyebrow" style={{ marginBottom: 10, position: 'relative', zIndex: 1 }}>
-              Сейчас
+              <WeatherAnimation condition={weather.desc} size={168} />
             </div>
 
             <div style={{
-              display: 'flex', alignItems: 'center', gap: 14,
-              position: 'relative', zIndex: 1, marginBottom: 8,
+              position: 'relative', zIndex: 1,
+              padding: '24px 28px', display: 'flex', flexDirection: 'column', height: '100%',
             }}>
+              <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.75)', marginBottom: 6 }}>
+                Сейчас
+              </div>
+
               <div className="num-display" style={{
-                fontSize: 76, color: 'var(--text-primary)',
+                fontSize: 100, color: '#fff', lineHeight: 0.9,
+                textShadow: '0 4px 24px rgba(0,0,0,0.28)',
               }}>
                 {weather.temp}°
               </div>
-              <WeatherAnimation condition={weather.desc} size={60} />
-            </div>
 
-            <div style={{
-              fontSize: 17, color: 'var(--text-primary)', fontWeight: 600,
-              position: 'relative', zIndex: 1, marginBottom: 16,
-              textTransform: 'capitalize',
-            }}>
-              {weather.desc}
-            </div>
+              <div style={{
+                fontSize: 19, color: '#fff', fontWeight: 700,
+                marginTop: 6, textTransform: 'capitalize',
+                textShadow: '0 2px 12px rgba(0,0,0,0.25)',
+              }}>
+                {weather.desc}
+              </div>
 
-            <div style={{
-              display: 'flex', gap: 22, flexWrap: 'wrap',
-              marginTop: 'auto', position: 'relative', zIndex: 1,
-            }}>
-              {weather.feelsLike && (
-                <div>
-                  <div className="eyebrow">Ощущается</div>
-                  <div className="num" style={{ fontSize: 16, color: 'var(--text-primary)', fontWeight: 700, marginTop: 3 }}>{weather.feelsLike}°</div>
-                </div>
-              )}
-              {weather.humidity && (
-                <div>
-                  <div className="eyebrow">Влажность</div>
-                  <div className="num" style={{ fontSize: 16, color: 'var(--text-primary)', fontWeight: 700, marginTop: 3 }}>{weather.humidity}</div>
-                </div>
-              )}
-              {weather.windSpeed && (
-                <div>
-                  <div className="eyebrow">Ветер</div>
-                  <div className="num" style={{ fontSize: 16, color: 'var(--text-primary)', fontWeight: 700, marginTop: 3 }}>{weather.windSpeed}</div>
-                </div>
-              )}
+              {/* Стеклянные чипы деталей */}
+              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 'auto', paddingTop: 20 }}>
+                {[
+                  weather.feelsLike && { label: 'Ощущается', value: `${weather.feelsLike}°` },
+                  weather.humidity && { label: 'Влажность', value: `${weather.humidity}` },
+                  weather.windSpeed && { label: 'Ветер', value: `${weather.windSpeed}` },
+                ].filter(Boolean).map((chip: any) => (
+                  <div key={chip.label} style={{
+                    padding: '9px 15px', borderRadius: 14,
+                    background: 'rgba(255,255,255,0.14)',
+                    border: '1px solid rgba(255,255,255,0.2)',
+                    backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',
+                  }}>
+                    <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.7)' }}>{chip.label}</div>
+                    <div className="num" style={{ fontSize: 17, color: '#fff', fontWeight: 800, marginTop: 2 }}>{chip.value}</div>
+                  </div>
+                ))}
+              </div>
             </div>
           </div>
         ) : (