docs(site): recalibrate brand tokens to the kit's Ocean & Deep Blue

The Docker brand kit's SVG fills use \`#2560FF\` (\"Ocean Blue\") and
\`#00153C\` (\"Deep Blue\"), not the \`#1D63ED\` / \`#09101F\` values I
introduced in 11b72ba. Subtle but visible on the home-page hero
gradient, the feature card hover, and the hand-drawn how-it-works
flow diagram \u2014 they were all in a slightly off shade of blue
compared to the official mark we now ship.

  \u2022 --blue-100..700 derived from \`#2560FF\` (was \`#1D63ED\`).
  \u2022 --navy-900..600 derived from \`#00153C\` (was \`#09101F\`).
  \u2022 Every hard-coded \`rgba(29,99,237, \u2026)\` rewritten to
    \`rgba(37,96,255, \u2026)\` (callout shadows, hero radial highlight,
    pain/with rows, ecosystem tiles, page-nav focus ring).
  \u2022 Hero gradient mid-stop bumped to \`#06204D\` (a token-aligned
    navy) and the light-theme variant to \`#133361\`.
  \u2022 Header glass background switched to \`rgba(0,21,60,0.85)\`.
  \u2022 \`how-it-works.svg\` strokes/fills updated to \`#2560FF\`.

The \`--docker-blue\` / \`--accent\` / \`--accent-hover\` aliases keep
working because they all resolve through the new --blue-500.

Reported by review of the docker-mark swap on #2793.

Author: dgageot

docs/assets/how-it-works.svg

@@ -6,20 +6,21 @@
    * Source: Docker design system / brand guidelines.
    * Use these tokens (rather than raw hex) when adding new styles. */
 
-  /* Primary blue scale */
-  --blue-100: #E5EFFE;
-  --blue-200: #BFD6FC;
-  --blue-300: #7AAAF7;
-  --blue-400: #4A8AF4;
-  --blue-500: #1D63ED;   /* Docker Blue — primary */
-  --blue-600: #0B5DD0;   /* hover */
-  --blue-700: #0A4DA8;   /* pressed */
-
-  /* Neutral / navy scale */
-  --navy-900: #09101F;
-  --navy-800: #0D1525;
-  --navy-700: #111827;
-  --navy-600: #1E293B;
+  /* Primary blue scale — calibrated to Docker's \"Ocean Blue\" #2560FF
+   * (the exact value used in the official brand kit's SVG fills). */
+  --blue-100: #E5EBFF;
+  --blue-200: #BFCEFF;
+  --blue-300: #7997FF;
+  --blue-400: #4A76FF;
+  --blue-500: #2560FF;   /* Ocean Blue — primary, from the official kit */
+  --blue-600: #1A4DD9;   /* hover */
+  --blue-700: #133FB3;   /* pressed */
+
+  /* Neutral / navy scale — \"Deep Blue\" anchors the dark theme */
+  --navy-900: #00153C;   /* Docker Deep Blue */
+  --navy-800: #06204D;
+  --navy-700: #0E2A60;
+  --navy-600: #1E3D7A;
 
   /* Accents */
   --moby-cyan:  #19B6E6;  /* Moby highlight */
@@ -54,7 +55,7 @@
 
   --accent: var(--blue-500);
   --accent-hover: var(--blue-400);
-  --accent-light: rgba(29,99,237,0.12);
+  --accent-light: rgba(37,96,255,0.12);
 
   --success: #34D399;
   --warning: #FBBF24;
@@ -144,7 +145,7 @@ body {
   padding: 0 24px;
   z-index: 100;
   backdrop-filter: blur(16px) saturate(180%);
-  background: rgba(9,16,31,0.8);
+  background: rgba(0,21,60,0.85);
 }
 [data-theme="light"] .header {
   background: rgba(250,251,252,0.85);
@@ -780,7 +781,7 @@ body {
 }
 .card:hover {
   border-color: var(--accent);
-  box-shadow: 0 0 20px rgba(29,99,237,0.1);
+  box-shadow: 0 0 20px rgba(37,96,255,0.1);
   transform: translateY(-2px);
   text-decoration: none;
 }
@@ -817,18 +818,18 @@ body {
 
 /* ===== Hero section (home page) ===== */
 .hero {
-  background: linear-gradient(145deg, var(--navy-900) 0%, #0D1D3A 40%, var(--blue-500) 100%);
+  background: linear-gradient(145deg, var(--navy-900) 0%, #06204D 40%, var(--blue-500) 100%);
   color: var(--text-on-hero);
   padding: 64px 48px;
   border-radius: var(--radius-lg);
   margin-bottom: 48px;
   text-align: center;
   position: relative;
   overflow: hidden;
-  border: 1px solid rgba(29,99,237,0.2);
+  border: 1px solid rgba(37,96,255,0.2);
 }
 [data-theme="light"] .hero {
-  background: linear-gradient(145deg, #0F172A 0%, #1E3A5F 40%, var(--blue-500) 100%);
+  background: linear-gradient(145deg, #0F172A 0%, #133361 40%, var(--blue-500) 100%);
 }
 .hero::before {
   content: '';
@@ -837,7 +838,7 @@ body {
   left: 0;
   right: 0;
   bottom: 0;
-  background: radial-gradient(ellipse at 70% 20%, rgba(29,99,237,0.3) 0%, transparent 60%);
+  background: radial-gradient(ellipse at 70% 20%, rgba(37,96,255,0.3) 0%, transparent 60%);
   pointer-events: none;
 }
 .hero h1 {
@@ -925,7 +926,7 @@ body {
   transition: border-color 0.2s;
 }
 .feature:hover {
-  border-color: rgba(29,99,237,0.3);
+  border-color: rgba(37,96,255,0.3);
 }
 .feature-icon {
   margin-bottom: 12px;
@@ -1039,8 +1040,8 @@ body {
   background: rgba(248, 113, 113, 0.03);
 }
 .compare-with {
-  border-color: rgba(29, 99, 237, 0.4);
-  background: rgba(29, 99, 237, 0.04);
+  border-color: rgba(37, 96, 255, 0.4);
+  background: rgba(37, 96, 255, 0.04);
 }
 .compare-label {
   font-size: 0.7rem;
@@ -1077,7 +1078,7 @@ body {
   transition: border-color 0.2s, transform 0.2s;
 }
 .usecase:hover {
-  border-color: rgba(29,99,237,0.4);
+  border-color: rgba(37,96,255,0.4);
   transform: translateY(-2px);
 }
 .usecase-icon {
@@ -1145,8 +1146,8 @@ body {
   font-style: italic;
 }
 .pain-fix {
-  background: rgba(29, 99, 237, 0.06);
-  border-color: rgba(29, 99, 237, 0.3);
+  background: rgba(37, 96, 255, 0.06);
+  border-color: rgba(37, 96, 255, 0.3);
   color: var(--text);
 }
 .pain-x,
@@ -1267,7 +1268,7 @@ body {
 }
 .page-nav a:hover {
   border-color: var(--accent);
-  box-shadow: 0 0 16px rgba(29,99,237,0.08);
+  box-shadow: 0 0 16px rgba(37,96,255,0.08);
   text-decoration: none;
 }
 .page-nav .nav-label {