diff --git a/assets/header-banner-v2.svg b/assets/header-banner-v2.svg
index 3d3e823..7dd1086 100644
--- a/assets/header-banner-v2.svg
+++ b/assets/header-banner-v2.svg
@@ -1 +1,227 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 130"><defs><linearGradient id="bgGrad" x1="0%" x2="100%" y1="0%" y2="0%"><stop offset="0%" style="stop-color:#0f172a"/><stop offset="100%" style="stop-color:#0f172a"/></linearGradient><linearGradient id="textGrad" x1="0%" x2="100%" y1="0%" y2="0%"><stop offset="0%" style="stop-color:#fff"/><stop offset="50%" style="stop-color:#22d3ee"/><stop offset="100%" style="stop-color:#fff"/><animate attributeName="x1" dur="6s" repeatCount="indefinite" values="0%;100%;0%"/><animate attributeName="x2" dur="6s" repeatCount="indefinite" values="100%;200%;100%"/></linearGradient><linearGradient id="accentGrad" x1="0%" x2="100%" y1="0%" y2="0%"><stop offset="0%" style="stop-color:#06b6d4"/><stop offset="100%" style="stop-color:#f97316"/></linearGradient><linearGradient id="startGrad" x1="0%" x2="100%" y1="0%" y2="100%"><stop offset="0%" style="stop-color:#06b6d4"/><stop offset="100%" style="stop-color:#0891b2"/></linearGradient><linearGradient id="endGrad" x1="0%" x2="100%" y1="0%" y2="100%"><stop offset="0%" style="stop-color:#f97316"/><stop offset="100%" style="stop-color:#ea580c"/></linearGradient><filter id="glow" width="200%" height="200%" x="-50%" y="-50%"><feGaussianBlur result="coloredBlur" stdDeviation="3"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter><path id="leftFlowPath" d="M 88 65 L 200 65"/><path id="rightFlowPath" d="M 600 65 L 712 65"/></defs><rect width="800" height="130" fill="#0f172a" rx="8"/><g stroke="#1e293b" stroke-width="1"><line x1="0" x2="800" y1="43" y2="43"/><line x1="0" x2="800" y1="87" y2="87"/></g><line x1="88" x2="200" y1="65" y2="65" stroke="#06b6d4" stroke-linecap="round" stroke-width="3"/><line x1="88" x2="200" y1="65" y2="65" stroke="#22d3ee" stroke-dasharray="8 12" stroke-linecap="round" stroke-width="3"><animate attributeName="stroke-dashoffset" dur="4s" from="0" repeatCount="indefinite" to="-80"/></line><polygon fill="#22d3ee" points="200 65 188 58 188 72"/><g transform="translate(60, 65)"><circle r="28" fill="none" stroke="#0e7490" stroke-width="3"/><path fill="none" stroke="#67e8f9" stroke-dasharray="15 180" stroke-dashoffset="20" stroke-linecap="round" stroke-width="4" d="M -28,0 A 28,28 0 0,0 28,0" filter="url(#glow)"><animate attributeName="stroke-dashoffset" dur="4s" keyTimes="0;0.2;0.22;1" repeatCount="indefinite" values="20;-95;20;20"/><animate attributeName="opacity" dur="4s" keyTimes="0;0.19;0.2;0.98;1" repeatCount="indefinite" values="1;1;0;0;1"/></path><path fill="none" stroke="#67e8f9" stroke-dasharray="15 180" stroke-dashoffset="20" stroke-linecap="round" stroke-width="4" d="M -28,0 A 28,28 0 0,1 28,0" filter="url(#glow)"><animate attributeName="stroke-dashoffset" dur="4s" keyTimes="0;0.2;0.22;1" repeatCount="indefinite" values="20;-95;20;20"/><animate attributeName="opacity" dur="4s" keyTimes="0;0.19;0.2;0.98;1" repeatCount="indefinite" values="1;1;0;0;1"/></path><circle r="22" fill="#0f172a" stroke="#22d3ee" stroke-width="2"/><polygon fill="#22d3ee" points="-5 -8 -5 8 8 0" transform="translate(2,0)"/></g><text x="60" y="110" fill="#06b6d4" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="700" letter-spacing="1" text-anchor="middle">START</text><text x="400" y="50" fill="url(#textGrad)" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="34" font-weight="800" letter-spacing="-.5" text-anchor="middle">GitHub API Usage Tracker</text><text x="400" y="78" fill="#94a3b8" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="500" text-anchor="middle">Measure workflow API consumption with precision</text><rect width="320" height="4" x="240" y="92" fill="url(#accentGrad)" rx="2"/><line x1="600" x2="712" y1="65" y2="65" stroke="#f97316" stroke-linecap="round" stroke-width="3"/><line x1="600" x2="712" y1="65" y2="65" stroke="#fb923c" stroke-dasharray="8 12" stroke-linecap="round" stroke-width="3"><animate attributeName="stroke-dashoffset" dur="4s" from="0" repeatCount="indefinite" to="-80"/></line><polygon fill="#fb923c" points="612 65 600 58 600 72"/><g transform="translate(740, 65)"><circle r="28" fill="none" stroke="#9a3412" stroke-width="3"/><path fill="none" stroke="#fdba74" stroke-dasharray="15 180" stroke-dashoffset="20" stroke-linecap="round" stroke-width="4" d="M -28,0 A 28,28 0 0,0 28,0" filter="url(#glow)"><animate attributeName="stroke-dashoffset" dur="4s" keyTimes="0;0.6;0.8;0.82;1" repeatCount="indefinite" values="20;20;-95;20;20"/><animate attributeName="opacity" dur="4s" keyTimes="0;0.59;0.61;0.79;0.8;1" repeatCount="indefinite" values="0;0;1;1;0;0"/></path><path fill="none" stroke="#fdba74" stroke-dasharray="15 180" stroke-dashoffset="20" stroke-linecap="round" stroke-width="4" d="M -28,0 A 28,28 0 0,1 28,0" filter="url(#glow)"><animate attributeName="stroke-dashoffset" dur="4s" keyTimes="0;0.6;0.8;0.82;1" repeatCount="indefinite" values="20;20;-95;20;20"/><animate attributeName="opacity" dur="4s" keyTimes="0;0.59;0.61;0.79;0.8;1" repeatCount="indefinite" values="0;0;1;1;0;0"/></path><circle r="22" fill="#0f172a" stroke="#fb923c" stroke-width="2"/><polyline fill="none" stroke="#fb923c" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" points="-8 0 -2 6 10 -6"/></g><text x="740" y="110" fill="#f97316" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="700" letter-spacing="1" text-anchor="middle">END</text><circle r="5" fill="#67e8f9" filter="url(#glow)"><animateMotion calcMode="spline" dur="4s" keyPoints="0;0;1;1" keySplines="0 0 1 1;0.25 0.1 0.25 1;0 0 1 1" keyTimes="0;0.2;0.4;1" repeatCount="indefinite"><mpath href="#leftFlowPath"/></animateMotion><animate attributeName="opacity" dur="4s" keyTimes="0;0.18;0.22;0.38;0.42;1" repeatCount="indefinite" values="0;0;1;1;0;0"/></circle><circle r="5" fill="#fdba74" filter="url(#glow)"><animateMotion calcMode="spline" dur="4s" keyPoints="0;0;1;1" keySplines="0 0 1 1;0.25 0.1 0.25 1;0 0 1 1" keyTimes="0;0.4;0.6;1" repeatCount="indefinite"><mpath href="#rightFlowPath"/></animateMotion><animate attributeName="opacity" dur="4s" keyTimes="0;0.38;0.42;0.58;0.62;1" repeatCount="indefinite" values="0;0;1;1;0;0"/></circle></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 130">
+  <!--
+    ANIMATION IMPLEMENTATION NOTES
+    ==============================
+
+    This banner uses a synchronized 4-second animation cycle to create a continuous
+    "flow" effect from START to END, visualizing data moving through a pipeline.
+
+    KEY TECHNIQUES:
+
+    1. TRAVELING PULSE (ring charge effect)
+       - Each ring is split into two semicircle <path> arcs (top half, bottom half)
+       - stroke-dasharray="15 180" creates a 15px bright segment with a huge 180px gap
+       - The large gap prevents the dash pattern from repeating on the 88px arc
+       - stroke-dashoffset is animated to move the segment along the arc:
+         * offset=20: segment hidden before arc start
+         * offset=-95: segment hidden past arc end
+       - Opacity animation hides the segment during the instant "reset" jump,
+         preventing a visible backwards sweep
+
+    2. ORB MOTION (traveling particles)
+       - animateMotion with keyPoints/keyTimes controls WHEN the orb moves vs waits
+       - keyPoints="0;0;1;1" with keyTimes="0;0.2;0.4;1" means:
+         * 0-20% of cycle: orb waits at start (keyPoint 0)
+         * 20-40% of cycle: orb travels from start to end
+         * 40-100% of cycle: orb waits at end (keyPoint 1)
+       - Opacity animations make orbs visible only during their travel phase
+       - calcMode="spline" with easing curves creates smooth acceleration
+
+    3. SEQUENTIAL TIMING (unified 4s cycle)
+       - All animations share dur="4s" so they stay in sync
+       - Timeline phases (as percentage of cycle):
+         * 0-20%:   START ring pulse sweeps
+         * 20-40%:  Left orb travels (cyan)
+         * 40-60%:  Right orb travels (orange) - creates seamless continuation
+         * 60-80%:  END ring pulse sweeps
+         * 80-100%: Pause before restart
+
+    4. COLOR THEMING
+       - START side: Cyan palette (#06b6d4 base, #22d3ee mid, #67e8f9 bright)
+       - END side: Orange palette (#9a3412 base, #f97316 mid, #fdba74 bright)
+       - Gradient underline connects both themes visually
+  -->
+  <defs>
+    <!-- Solid dark background -->
+    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#0f172a"/>
+      <stop offset="100%" style="stop-color:#0f172a"/>
+    </linearGradient>
+
+    <!-- Title gradient - bright white to cyan -->
+    <linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#ffffff"/>
+      <stop offset="50%" style="stop-color:#22d3ee"/>
+      <stop offset="100%" style="stop-color:#ffffff"/>
+      <animate attributeName="x1" values="0%;100%;0%" dur="6s" repeatCount="indefinite"/>
+      <animate attributeName="x2" values="100%;200%;100%" dur="6s" repeatCount="indefinite"/>
+    </linearGradient>
+
+    <!-- Accent underline - cyan to orange -->
+    <linearGradient id="accentGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#06b6d4"/>
+      <stop offset="100%" style="stop-color:#f97316"/>
+    </linearGradient>
+
+    <!-- Start icon gradient -->
+    <linearGradient id="startGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#06b6d4"/>
+      <stop offset="100%" style="stop-color:#0891b2"/>
+    </linearGradient>
+
+    <!-- End icon gradient -->
+    <linearGradient id="endGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#f97316"/>
+      <stop offset="100%" style="stop-color:#ea580c"/>
+    </linearGradient>
+
+    <!-- Glow filter -->
+    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <!-- Flow paths -->
+    <!-- Left: starts from right edge of START ring (60+28=88) -->
+    <path id="leftFlowPath" d="M 88 65 L 200 65"/>
+    <!-- Right: ends at left edge of END ring (740-28=712) -->
+    <path id="rightFlowPath" d="M 600 65 L 712 65"/>
+  </defs>
+
+  <!-- Solid dark background -->
+  <rect width="800" height="130" fill="#0f172a" rx="8"/>
+
+  <!-- Subtle grid lines for texture -->
+  <g stroke="#1e293b" stroke-width="1">
+    <line x1="0" y1="43" x2="800" y2="43"/>
+    <line x1="0" y1="87" x2="800" y2="87"/>
+  </g>
+
+  <!-- === LEFT SIDE: Start indicator === -->
+
+  <!-- Flow line - solid and visible, starts at ring edge -->
+  <line x1="88" y1="65" x2="200" y2="65" stroke="#06b6d4" stroke-width="3" stroke-linecap="round"/>
+
+  <!-- Animated dashes on flow line - 4s cycle -->
+  <line x1="88" y1="65" x2="200" y2="65" stroke="#22d3ee" stroke-width="3" stroke-dasharray="8,12" stroke-linecap="round">
+    <animate attributeName="stroke-dashoffset" from="0" to="-80" dur="4s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- Arrow pointing right -->
+  <polygon points="200,65 188,58 188,72" fill="#22d3ee"/>
+
+  <!-- Start icon - solid filled circle with play symbol -->
+  <g transform="translate(60, 65)">
+    <!-- Outer ring (base) -->
+    <circle r="28" fill="none" stroke="#0e7490" stroke-width="3"/>
+
+    <!-- Traveling pulse - top half (left to right over top) -->
+    <!-- 4s cycle: pulse 0-0.2, orb travels 0.2-0.4, then idle while right side animates -->
+    <path d="M -28,0 A 28,28 0 0,0 28,0" fill="none" stroke="#67e8f9" stroke-width="4" stroke-linecap="round"
+          stroke-dasharray="15 180" stroke-dashoffset="20" filter="url(#glow)">
+      <animate attributeName="stroke-dashoffset" values="20;-95;20;20" keyTimes="0;0.2;0.22;1" dur="4s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="1;1;0;0;1" keyTimes="0;0.19;0.2;0.98;1" dur="4s" repeatCount="indefinite"/>
+    </path>
+
+    <!-- Traveling pulse - bottom half (left to right under bottom) -->
+    <path d="M -28,0 A 28,28 0 0,1 28,0" fill="none" stroke="#67e8f9" stroke-width="4" stroke-linecap="round"
+          stroke-dasharray="15 180" stroke-dashoffset="20" filter="url(#glow)">
+      <animate attributeName="stroke-dashoffset" values="20;-95;20;20" keyTimes="0;0.2;0.22;1" dur="4s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="1;1;0;0;1" keyTimes="0;0.19;0.2;0.98;1" dur="4s" repeatCount="indefinite"/>
+    </path>
+
+    <!-- Filled background -->
+    <circle r="22" fill="#0f172a" stroke="#22d3ee" stroke-width="2"/>
+
+    <!-- Play triangle icon -->
+    <polygon points="-5,-8 -5,8 8,0" fill="#22d3ee" transform="translate(2,0)"/>
+  </g>
+
+  <!-- Label -->
+  <text x="60" y="110" text-anchor="middle" fill="#06b6d4" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="700" letter-spacing="1">START</text>
+
+  <!-- === CENTER: Title === -->
+
+  <!-- Main title - bold white -->
+  <text x="400" y="50" text-anchor="middle" fill="url(#textGrad)"
+        font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+        font-size="34" font-weight="800" letter-spacing="-0.5">
+    GitHub API Usage Tracker
+  </text>
+
+  <!-- Subtitle - visible gray -->
+  <text x="400" y="78" text-anchor="middle" fill="#94a3b8"
+        font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+        font-size="14" font-weight="500">
+    Measure workflow API consumption with precision
+  </text>
+
+  <!-- Underline bar - solid and bright -->
+  <rect x="240" y="92" width="320" height="4" rx="2" fill="url(#accentGrad)"/>
+
+  <!-- === RIGHT SIDE: End indicator === -->
+
+  <!-- Flow line - solid and visible, ends at ring edge -->
+  <line x1="600" y1="65" x2="712" y2="65" stroke="#f97316" stroke-width="3" stroke-linecap="round"/>
+
+  <!-- Animated dashes on flow line - 4s cycle -->
+  <line x1="600" y1="65" x2="712" y2="65" stroke="#fb923c" stroke-width="3" stroke-dasharray="8,12" stroke-linecap="round">
+    <animate attributeName="stroke-dashoffset" from="0" to="-80" dur="4s" repeatCount="indefinite"/>
+  </line>
+
+  <!-- Arrow pointing right -->
+  <polygon points="612,65 600,58 600,72" fill="#fb923c"/>
+
+  <!-- End icon - solid filled circle with checkmark -->
+  <g transform="translate(740, 65)">
+    <!-- Outer ring (base) -->
+    <circle r="28" fill="none" stroke="#9a3412" stroke-width="3"/>
+
+    <!-- Traveling pulse - top half (left to right over top) -->
+    <!-- 4s cycle: idle 0-0.6, sweep 0.6-0.8, idle 0.8-1 -->
+    <path d="M -28,0 A 28,28 0 0,0 28,0" fill="none" stroke="#fdba74" stroke-width="4" stroke-linecap="round"
+          stroke-dasharray="15 180" stroke-dashoffset="20" filter="url(#glow)">
+      <animate attributeName="stroke-dashoffset" values="20;20;-95;20;20" keyTimes="0;0.6;0.8;0.82;1" dur="4s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.59;0.61;0.79;0.8;1" dur="4s" repeatCount="indefinite"/>
+    </path>
+
+    <!-- Traveling pulse - bottom half (left to right under bottom) -->
+    <path d="M -28,0 A 28,28 0 0,1 28,0" fill="none" stroke="#fdba74" stroke-width="4" stroke-linecap="round"
+          stroke-dasharray="15 180" stroke-dashoffset="20" filter="url(#glow)">
+      <animate attributeName="stroke-dashoffset" values="20;20;-95;20;20" keyTimes="0;0.6;0.8;0.82;1" dur="4s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.59;0.61;0.79;0.8;1" dur="4s" repeatCount="indefinite"/>
+    </path>
+
+    <!-- Filled background -->
+    <circle r="22" fill="#0f172a" stroke="#fb923c" stroke-width="2"/>
+
+    <!-- Checkmark icon -->
+    <polyline points="-8,0 -2,6 10,-6" fill="none" stroke="#fb923c" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+
+  <!-- Label -->
+  <text x="740" y="110" text-anchor="middle" fill="#f97316" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="700" letter-spacing="1">END</text>
+
+  <!-- Left orb - emits after START pulse, travels 0.2-0.4 of cycle -->
+  <circle r="5" fill="#67e8f9" filter="url(#glow)">
+    <!-- 4s cycle: wait 0-0.2, travel 0.2-0.4, wait 0.4-1 -->
+    <animateMotion dur="4s" repeatCount="indefinite" keyPoints="0;0;1;1" keyTimes="0;0.2;0.4;1" calcMode="spline" keySplines="0 0 1 1;0.25 0.1 0.25 1;0 0 1 1">
+      <mpath href="#leftFlowPath"/>
+    </animateMotion>
+    <!-- Visible only during travel (0.2-0.4) -->
+    <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.18;0.22;0.38;0.42;1" dur="4s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Right orb - continues the journey, travels 0.4-0.6 of cycle -->
+  <circle r="5" fill="#fdba74" filter="url(#glow)">
+    <!-- 4s cycle: wait 0-0.4, travel 0.4-0.6, wait 0.6-1 -->
+    <animateMotion dur="4s" repeatCount="indefinite" keyPoints="0;0;1;1" keyTimes="0;0.4;0.6;1" calcMode="spline" keySplines="0 0 1 1;0.25 0.1 0.25 1;0 0 1 1">
+      <mpath href="#rightFlowPath"/>
+    </animateMotion>
+    <!-- Visible only during travel (0.4-0.6), fade out as it arrives -->
+    <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.38;0.42;0.58;0.62;1" dur="4s" repeatCount="indefinite"/>
+  </circle>
+</svg>