Upd UI

assets/styles.css

@@ -216,10 +216,71 @@ section {
   @apply inline-flex items-center justify-center w-10 h-10 rounded-xl bg-slate-800 hover:bg-slate-700 border border-white/10 transition;
 }
 .icon { width: 20px; height: 20px; }
-.section { @apply py-16 lg:py-24; }
+.section { @apply py-20 lg:py-32; }
 .container { @apply max-w-7xl mx-auto px-4; }
-.section-header h2 { @apply text-3xl lg:text-4xl font-extrabold; }
-.section-header p { @apply text-slate-300 mt-2; }
+.section-header h2 { 
+  @apply text-3xl lg:text-4xl font-extrabold; 
+  position: relative;
+  display: inline-block;
+  background: linear-gradient(135deg, #f1f5f9 0%, #818cf8 50%, #f1f5f9 100%);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: gradientShift 3s ease-in-out infinite;
+  text-shadow: 0 0 30px rgba(129, 140, 248, 0.3);
+}
+
+.section-header h2::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, #818cf8, #a855f7, #ec4899);
+  border-radius: 0.5rem;
+  padding: 0.25rem;
+  z-index: -1;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  animation: pulseGlow 2s ease-in-out infinite;
+}
+
+.section-header h2:hover::before {
+  opacity: 0.1;
+}
+
+@keyframes gradientShift {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+@keyframes pulseGlow {
+  0%, 100% {
+    box-shadow: 0 0 20px rgba(129, 140, 248, 0.2);
+  }
+  50% {
+    box-shadow: 0 0 40px rgba(129, 140, 248, 0.4);
+  }
+}
+.section-header p { 
+  @apply text-slate-300 mt-4; 
+  font-size: 1.125rem;
+  line-height: 1.6;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 3rem;
+}
 .card {
   @apply rounded-2xl bg-slate-900/60 border border-white/10 backdrop-blur;
 }
@@ -242,12 +303,33 @@ section {
 .tab.active { @apply bg-indigo-500/20 border-indigo-400/40 text-indigo-200; }
 .diagram { @apply hidden; }
 .diagram.visible { @apply block; }
-pre.mermaid { @apply rounded-2xl bg-slate-900/70 border border-white/10 p-4 overflow-auto; }
+pre.mermaid { 
+  @apply rounded-2xl bg-slate-900/70 border border-white/10 p-4 overflow-auto; 
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+pre.mermaid svg {
+  max-width: 100%;
+  height: auto;
+}
 .metric { @apply bg-slate-900/60 border border-white/10 rounded-2xl p-6 text-center; }
 .metric-value { @apply text-4xl font-extrabold text-indigo-300; }
 .metric-label { @apply text-slate-400 mt-1; }
 .list { @apply list-disc pl-5 space-y-1 text-slate-300; }
 .avatar { @apply rounded-2xl bg-slate-800 border border-white/10 p-6 text-center font-semibold; }
+
+/* Team section centering */
+#team .container {
+  text-align: center;
+}
+
+#team .grid {
+  justify-content: center;
+  justify-items: center;
+}
 /* Enhanced shadow and animation utilities */
 .shadow-glow { 
   box-shadow: var(--shadow-glow);
@@ -553,8 +635,8 @@ pre.mermaid:hover {
   }
   
   .section {
-    padding-top: 3rem;
-    padding-bottom: 3rem;
+    padding-top: 4rem;
+    padding-bottom: 4rem;
   }
   
   .section-header h2 {
@@ -684,8 +766,8 @@ pre.mermaid:hover {
   }
   
   .section {
-    padding-top: 2rem;
-    padding-bottom: 2rem;
+    padding-top: 3rem;
+    padding-bottom: 3rem;
   }
   
   .section-header h2 {

index.html

@@ -39,22 +39,14 @@
   <!-- Lucide Icons -->
   <script src="https://unpkg.com/lucide@latest"></script>
   <!-- Mermaid -->
-  <script type="module">
-    try {
-      import('https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs').then(mermaid => {
-        mermaid.default.initialize({ 
-          startOnLoad: true, 
-          theme: 'dark', 
-          securityLevel: 'loose',
-          fontFamily: 'Inter, sans-serif'
-        });
-        console.log('Mermaid initialized successfully');
-      }).catch(error => {
-        console.warn('Mermaid failed to load:', error);
-      });
-    } catch (error) {
-      console.warn('Mermaid import failed:', error);
-    }
+  <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+  <script>
+    mermaid.initialize({ 
+      startOnLoad: true, 
+      theme: 'dark', 
+      securityLevel: 'loose',
+      fontFamily: 'Inter, sans-serif'
+    });
   </script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>