about section spacing, NaN % fix

frontend/vehicles.html

@@ -362,10 +362,10 @@
     <main class="flex-1 flex flex-col h-full min-w-0 p-4 gap-4">
 
         <!-- TAB: About -->
-        <div id="tab-about" class="hidden flex-1 min-h-0 overflow-y-auto px-12 py-12">
-            <div class="max-w-4xl mx-auto bg-black border border-slate-800 rounded-[2.5rem] p-12 shadow-2xl space-y-12">
-                <div class="text-center pb-12 border-b border-slate-900">
-                    <p class="text-[13px] font-montserrat font-medium italic leading-relaxed max-w-2xl mx-auto"
+        <div id="tab-about" class="hidden flex-1 min-h-0 overflow-y-auto">
+            <div class="h-full bg-black border border-slate-800 rounded-xl p-8 shadow-2xl space-y-10">
+                <div class="text-center">
+                    <p class="text-[13px] font-montserrat font-bold italic leading-relaxed max-w-3xl mx-auto"
                         style="color:#a89f97">
                         &ldquo;Traffic data has always existed on Indian roads &mdash; in the movement of every vehicle,
                         every crossing, every congested junction.
@@ -374,7 +374,7 @@
                     </p>
                 </div>
 
-                <div class="space-y-6 leading-relaxed text-sm text-center" style="color:#a89f97">
+                <div class="space-y-6 leading-relaxed text-sm text-center max-w-5xl mx-auto" style="color:#a89f97">
                     <p>
                         UrbanFlow is a computer vision system purpose-built for traffic analysis on Indian roads.
                         It processes video footage and returns structured outputs &mdash; vehicle counts by class,
@@ -386,7 +386,7 @@
                         and transport infrastructure assessment. Footage is submitted, inference runs in the cloud,
                         and results are returned as structured KPI outputs and downloadable reports.
                     </p>
-                    <div class="grid grid-cols-3 gap-8 pt-8 text-left border-t border-slate-900">
+                    <div class="grid grid-cols-3 gap-8 pt-8 text-left border-t border-slate-900 max-w-5xl mx-auto">
                         <div class="space-y-4">
                             <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">What It Does</h4>
                             <ul class="text-xs space-y-3 pl-1">
@@ -791,13 +791,22 @@
         // =========== Rolling Counter ===========
         function animateValue(obj, start, end, duration) {
             let startTimestamp = null;
+            const isPct = typeof end === 'string' && end.includes('%');
+            const endNum = isPct ? parseFloat(end) : end;
+            const startNum = parseFloat(start) || 0;
+
             const step = (timestamp) => {
                 if (!startTimestamp) startTimestamp = timestamp;
                 const progress = Math.min((timestamp - startTimestamp) / duration, 1);
-                // easeOutQuad
                 const ease = progress * (2 - progress);
-                const current = Math.floor(ease * (end - start) + start);
-                obj.innerText = typeof end === 'string' && end.includes('%') ? current + '%' : current;
+                const current = ease * (endNum - startNum) + startNum;
+                
+                if (isPct) {
+                    obj.innerText = current.toFixed(1) + '%';
+                } else {
+                    obj.innerText = Math.floor(current);
+                }
+
                 if (progress < 1) {
                     window.requestAnimationFrame(step);
                 } else {