Upload 6 files

assets/styles.css

@@ -21,12 +21,16 @@ p, li, div {
 }
 
 /* Override for specific elements that should be left-aligned */
-h1, h2, h3, h4, h5, h6, 
 .btn-primary, .btn-secondary, .btn-ghost,
 .tab, .chip, .metric-value, .metric-label {
   text-align: left;
 }
 
+/* Ensure h2 headers in section headers are centered */
+.section-header h2 {
+  text-align: center !important;
+}
+
 /* Add proper margins to main content */
 .container {
   margin-left: auto;
@@ -216,7 +220,16 @@ 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-20 lg:py-32; }
+.section { @apply py-16 lg:py-24; }
+
+/* Reduce gap specifically between Architecture and Training sections */
+#architecture {
+  padding-bottom: 2rem !important;
+}
+
+#training {
+  padding-top: 2rem !important;
+}
 .container { @apply max-w-7xl mx-auto px-4; }
 .section-header h2 { 
   @apply text-3xl lg:text-4xl font-extrabold; 
@@ -309,19 +322,67 @@ pre.mermaid {
   display: flex;
   justify-content: center;
   align-items: center;
+  min-height: 300px;
 }
 
 pre.mermaid svg {
   max-width: 100%;
   height: auto;
+  margin: 0 auto;
+  display: block;
+}
+
+/* Ensure Mermaid diagrams are properly centered */
+.diagram {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.diagram pre.mermaid {
+  width: 100%;
+  max-width: 100%;
 }
 .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; }
+.avatar { 
+  @apply rounded-2xl bg-slate-800 border border-white/10 p-6 text-center font-semibold; 
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  min-width: 120px;
+  min-height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
-/* Team section centering */
+.avatar::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.2), transparent);
+  transition: left 0.6s ease;
+}
+
+.avatar:hover::before {
+  left: 100%;
+}
+
+.avatar:hover {
+  transform: translateY(-4px);
+  border-color: rgba(129, 140, 248, 0.4);
+  box-shadow: 0 10px 25px rgba(129, 140, 248, 0.2);
+  background: linear-gradient(135deg, rgba(129, 140, 248, 0.1), rgba(168, 85, 247, 0.1));
+}
+
+/* Team section centering and enhanced styling */
 #team .container {
   text-align: center;
 }
@@ -330,6 +391,33 @@ pre.mermaid svg {
   justify-content: center;
   justify-items: center;
 }
+
+#team .section-header p {
+  font-size: 1.25rem;
+  font-weight: 600;
+  background: linear-gradient(135deg, #818cf8, #a855f7, #ec4899);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: gradientShift 3s ease-in-out infinite;
+  text-shadow: 0 0 20px rgba(129, 140, 248, 0.3);
+  margin-bottom: 2rem;
+  position: relative;
+  display: inline-block;
+}
+
+#team .section-header p::after {
+  content: '';
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60px;
+  height: 3px;
+  background: linear-gradient(90deg, #818cf8, #a855f7, #ec4899);
+  border-radius: 2px;
+  animation: pulseGlow 2s ease-in-out infinite;
+}
 /* Enhanced shadow and animation utilities */
 .shadow-glow { 
   box-shadow: var(--shadow-glow);