docs(explanations): expand foundational software list

Author: khuyentran1401

docs/docs/explanations/nkp-architecture.mdx

@@ -34,9 +34,9 @@ rewriting the others.
 
 - **Nebari Operator**: the automation that deploys each Software Pack and
   connects it to the Foundational software.
-- **Foundational software**: shared services (TLS, login, traffic routing,
-  monitoring) plus continuous delivery from Git, all powering the operator
-  and every running pack.
+- **Foundational software**: shared services (secure connections, login,
+  traffic routing, monitoring, continuous delivery from Git) that power the
+  operator and every running pack.
 
 **Where it all runs**
 
@@ -48,8 +48,8 @@ rewriting the others.
 
 ### What's in the foundational layer
 
-- **cert-manager**: TLS automation. Let's Encrypt with cloud DNS solvers,
-  automatic renewal, wildcards.
+- **cert-manager**: keeps secure connections working. Automatically requests,
+  renews, and rotates HTTPS certificates for every domain in the cluster.
 - **Envoy Gateway**: routing on the Kubernetes Gateway API. Header- and
   weight-based routing, rate limiting, JWT validation.
 - **Keycloak**: OIDC provider with user federation, MFA, and SSO across

docs/static/img/explanations/_sources/nkp-architecture.html

@@ -120,12 +120,16 @@
               {/* Foundational software box */}
               <div style={{ alignItems: 'center', backgroundColor: '#FEF3C7', borderColor: '#B45309', borderRadius: '12px', borderStyle: 'solid', borderWidth: '1.5px', display: 'flex', flexDirection: 'column', gap: '8px', paddingBlock: '20px', paddingInline: '32px' }}>
                 <div style={{ color: '#0F1015', fontFamily: '"Poppins", system-ui, sans-serif', fontSize: '22px', fontWeight: 700, lineHeight: '28px' }}>Foundational software</div>
-                <div style={{ alignItems: 'center', display: 'flex', gap: '18px' }}>
+                <div style={{ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '14px', justifyContent: 'center' }}>
+                  <div style={{ color: '#475569', fontFamily: '"Poppins", system-ui, sans-serif', fontSize: '16px', lineHeight: '20px' }}>secure connections</div>
+                  <div style={{ backgroundColor: '#94A3B8', borderRadius: '50%', height: '4px', width: '4px' }} />
                   <div style={{ color: '#475569', fontFamily: '"Poppins", system-ui, sans-serif', fontSize: '16px', lineHeight: '20px' }}>login</div>
                   <div style={{ backgroundColor: '#94A3B8', borderRadius: '50%', height: '4px', width: '4px' }} />
-                  <div style={{ color: '#475569', fontFamily: '"Poppins", system-ui, sans-serif', fontSize: '16px', lineHeight: '20px' }}>routing</div>
+                  <div style={{ color: '#475569', fontFamily: '"Poppins", system-ui, sans-serif', fontSize: '16px', lineHeight: '20px' }}>traffic routing</div>
                   <div style={{ backgroundColor: '#94A3B8', borderRadius: '50%', height: '4px', width: '4px' }} />
                   <div style={{ color: '#475569', fontFamily: '"Poppins", system-ui, sans-serif', fontSize: '16px', lineHeight: '20px' }}>monitoring</div>
+                  <div style={{ backgroundColor: '#94A3B8', borderRadius: '50%', height: '4px', width: '4px' }} />
+                  <div style={{ color: '#475569', fontFamily: '"Poppins", system-ui, sans-serif', fontSize: '16px', lineHeight: '20px' }}>continuous delivery</div>
                 </div>
               </div>
             </div>