feat(services): apply CRO improvements (audit points 7–11)

- Replace generic H1 with outcome-led headline ("Custom software for
  enterprises and governments — shipped in weeks, not quarters.")
- Rewrite each service description to lead with the outcome and end
  with the tech stack
- Reorder service cards so Government IT and ERP/Enterprise lead,
  before Web/Mobile
- Add "What's included" label above each pricing tier's bullet list
  (Most Popular badge on Professional retained)
- Unify CTAs to one primary ("Get my free proposal") + one secondary
  ("See our work" → /portfolio)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/pages/services.astro

@@ -6,12 +6,58 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 import SEO from '../components/SEO.astro';
 
 // Service data with extended details
+// Order is intentional: Government IT and ERP/Enterprise lead (highest-value
+// outcomes), followed by Web, Mobile, Design, and Consulting.
 const services = [
+  {
+    id: 'government-systems',
+    title: 'Government IT Solutions',
+    shortDescription: 'Digitize public services across districts with secure, audit-ready systems citizens actually trust. Built on Spring Boot + Astro + PostgreSQL.',
+    fullDescription: 'Serve more citizens with fewer queues. We build secure, compliant systems that are already live across 11+ districts handling critical public services — digital records, real-time reporting, and 99.9% uptime under strict security standards. Built on Spring Boot, Astro, Golang, PostgreSQL, and MySQL.',
+    icon: 'government',
+    features: [
+      'Smart city solutions (SCMS)',
+      'Multi-district deployment',
+      'Secure & compliant architecture',
+      'Digital record keeping',
+      'Real-time reporting dashboards',
+      'High availability infrastructure',
+    ],
+    techStack: ['Spring Boot', 'Astro', 'Golang', 'PostgreSQL', 'MySQL'],
+    stats: { projects: '3+', districts: '11+', uptime: '99.9%' },
+    gradient: 'from-red-500 to-orange-700',
+    bgLight: 'bg-red-50',
+    iconColor: 'text-red-500',
+    accentBorder: 'border-red-500',
+    tagBg: 'bg-red-100 text-red-700',
+  },
+  {
+    id: 'erp-solutions',
+    title: 'ERP & Enterprise Systems',
+    shortDescription: 'Replace 5 spreadsheets with one system your team actually uses. Built on Spring Boot + Angular.',
+    fullDescription: 'Replace scattered spreadsheets and manual handoffs with one system your team actually uses. From university management to personnel administration, we ship ERP platforms that handle complex workflows, role-based access, and 20,000+ users without breaking a sweat. Built on Spring Boot, Angular, Next.js, MySQL, and PostgreSQL.',
+    icon: 'enterprise',
+    features: [
+      'Custom ERP development',
+      'University management systems',
+      'Personnel management platforms',
+      'Role-based access control',
+      'Dashboard & reporting',
+      'Multi-tenant architecture',
+    ],
+    techStack: ['Spring Boot', 'Angular', 'Next.js', 'MySQL', 'PostgreSQL'],
+    stats: { deployments: '5+', users: '20,000+', districts: '11' },
+    gradient: 'from-purple-500 to-indigo-700',
+    bgLight: 'bg-purple-50',
+    iconColor: 'text-purple-500',
+    accentBorder: 'border-purple-500',
+    tagBg: 'bg-purple-100 text-purple-700',
+  },
   {
     id: 'web-development',
     title: 'Web Development',
-    shortDescription: 'Custom web applications built with Angular, React, Next.js, Astro, and Spring Boot.',
-    fullDescription: 'From responsive websites to complex web applications, we deliver high-performance solutions using Angular, React, Next.js, and Astro on the frontend with Spring Boot and Golang backends. Our web solutions are optimized for speed, security, and SEO.',
+    shortDescription: 'Turn visitors into customers with fast, SEO-ready web apps that load in under 2 seconds. Built on Angular, React, Next.js + Spring Boot.',
+    fullDescription: 'Turn visitors into customers with web apps that load in under 2 seconds and rank on day one. From responsive sites to complex SPAs, we deliver high-performance, secure, SEO-ready solutions tuned for conversion. Built on Angular, React, Next.js, and Astro with Spring Boot and Golang backends.',
     icon: 'web',
     features: [
       'Custom web application development',
@@ -32,8 +78,8 @@ const services = [
   {
     id: 'mobile-development',
     title: 'Mobile App Development',
-    shortDescription: 'Cross-platform mobile apps with Expo (React Native) for iOS and Android.',
-    fullDescription: 'We build cross-platform mobile applications using Expo and React Native, delivering native-like performance on both iOS and Android. Our mobile apps feature offline-first architecture, push notifications, and seamless backend integration.',
+    shortDescription: 'Put your business in every customer\'s pocket with one app for iOS and Android. Built on Expo + React Native.',
+    fullDescription: 'Put your business in every customer\'s pocket with one codebase for iOS and Android. We ship cross-platform apps with native-like performance, offline-first architecture, push notifications, and seamless backend integration — published to both stores. Built on Expo, React Native, Spring Boot, and PostgreSQL.',
     icon: 'mobile',
     features: [
       'Expo / React Native development',
@@ -51,55 +97,11 @@ const services = [
     accentBorder: 'border-green-500',
     tagBg: 'bg-green-100 text-green-700',
   },
-  {
-    id: 'erp-solutions',
-    title: 'ERP & Enterprise Systems',
-    shortDescription: 'Custom ERP, CRM, and management systems for enterprises and institutions.',
-    fullDescription: 'We design and build custom ERP solutions tailored to your organization. From university management systems to police administration platforms, our enterprise solutions handle complex workflows, role-based access, and large-scale data management.',
-    icon: 'enterprise',
-    features: [
-      'Custom ERP development',
-      'University management systems',
-      'Personnel management platforms',
-      'Role-based access control',
-      'Dashboard & reporting',
-      'Multi-tenant architecture',
-    ],
-    techStack: ['Spring Boot', 'Angular', 'Next.js', 'MySQL', 'PostgreSQL'],
-    stats: { deployments: '5+', users: '20,000+', districts: '11' },
-    gradient: 'from-purple-500 to-indigo-700',
-    bgLight: 'bg-purple-50',
-    iconColor: 'text-purple-500',
-    accentBorder: 'border-purple-500',
-    tagBg: 'bg-purple-100 text-purple-700',
-  },
-  {
-    id: 'government-systems',
-    title: 'Government IT Solutions',
-    shortDescription: 'Scalable technology solutions for government departments and smart city initiatives.',
-    fullDescription: 'We partner with government bodies to deliver secure, scalable, and compliant technology solutions. Our systems are deployed across multiple districts and handle critical public services with high availability and strict security standards.',
-    icon: 'government',
-    features: [
-      'Smart city solutions (SCMS)',
-      'Multi-district deployment',
-      'Secure & compliant architecture',
-      'Digital record keeping',
-      'Real-time reporting dashboards',
-      'High availability infrastructure',
-    ],
-    techStack: ['Astro', 'Golang', 'Spring Boot', 'PostgreSQL', 'MySQL'],
-    stats: { projects: '3+', districts: '11+', uptime: '99.9%' },
-    gradient: 'from-red-500 to-orange-700',
-    bgLight: 'bg-red-50',
-    iconColor: 'text-red-500',
-    accentBorder: 'border-red-500',
-    tagBg: 'bg-red-100 text-red-700',
-  },
   {
     id: 'ui-ux-design',
     title: 'UI/UX Design',
-    shortDescription: 'Modern, responsive UI/UX design with TailwindCSS and design systems.',
-    fullDescription: 'We create intuitive, accessible, and visually appealing user interfaces. Our design process includes wireframing, prototyping, usability testing, and implementation with TailwindCSS and modern component libraries.',
+    shortDescription: 'Win trust in the first 5 seconds with interfaces that convert and meet WCAG. Built on TailwindCSS + Figma.',
+    fullDescription: 'Win trust in the first 5 seconds with interfaces that are intuitive, accessible, and on-brand. Our process — wireframing, prototyping, and usability testing — turns into pixel-perfect, WCAG-compliant builds with dark mode out of the box. Built on TailwindCSS, Figma, CSS3, and HTML5.',
     icon: 'design',
     features: [
       'Responsive web design',
@@ -120,8 +122,8 @@ const services = [
   {
     id: 'it-consulting',
     title: 'IT Consulting & DevOps',
-    shortDescription: 'Technical consulting, cloud deployment, CI/CD pipelines, and DevOps services.',
-    fullDescription: 'We help organizations optimize their technology infrastructure with expert consulting, cloud migration, CI/CD pipeline setup, and DevOps best practices. From architecture review to production deployment, we ensure your systems run efficiently.',
+    shortDescription: 'Ship faster and sleep better with automated deploys and 99.9% uptime. Built on Docker, Nginx + GitHub Actions.',
+    fullDescription: 'Ship faster and sleep better. We optimize your infrastructure with expert consulting, cloud migration, CI/CD automation, and DevOps best practices — taking you from architecture review to a production deployment that just runs. Built on Docker, Nginx, Linux, Git, and GitHub Actions.',
     icon: 'consulting',
     features: [
       'Architecture review & consulting',
@@ -329,9 +331,9 @@ const processSteps = [
           Our Services
         </span>
         <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
-          Solutions That
+          Custom software for enterprises and governments —
           <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 via-primary-300 to-accent-400">
-            Power Growth
+            shipped in weeks, not quarters.
           </span>
         </h1>
         <p class="text-lg sm:text-xl text-secondary-300 max-w-2xl mx-auto mb-10 leading-relaxed">
@@ -723,10 +725,10 @@ const processSteps = [
 
       <div class="mt-10 text-center">
         <a
-          href="/contact"
+          href="/portfolio"
           class="inline-flex items-center gap-2 text-primary-600 hover:text-primary-700 font-semibold text-sm transition-colors duration-200 group"
         >
-          Start your success story
+          See our work
           <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 group-hover:translate-x-1 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
           </svg>
@@ -780,6 +782,9 @@ const processSteps = [
               </div>
             </div>
 
+            <p class={`text-xs font-semibold uppercase tracking-wider mb-3 ${tier.highlighted ? 'text-secondary-400' : 'text-secondary-400 dark:text-secondary-500'}`}>
+              What's included
+            </p>
             <ul class="space-y-3 mb-8 flex-1">
               {tier.features.map((feature) => (
                 <li class="flex items-start gap-3">
@@ -892,10 +897,10 @@ const processSteps = [
           </svg>
         </a>
         <a
-          href="/about"
+          href="/portfolio"
           class="inline-flex items-center justify-center px-8 py-4 border-2 border-white/40 text-white font-semibold rounded-xl hover:bg-white/10 hover:border-white/60 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600"
         >
-          Learn About Us
+          See our work
         </a>
       </div>