pre-agent: Add WRNexus nav item with corner close icon

src/pages/index.astro

@@ -191,8 +191,10 @@ const techStack = [
       <div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-secondary-900/50"></div>
     </div>
 
-    <div class="container-wrapper relative z-10 py-24">
-      <div class="max-w-5xl mx-auto text-center">
+    <div class="container-wrapper relative z-10 py-24 lg:py-32">
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
+        <!-- Left column — copy + CTAs -->
+        <div class="text-center lg:text-left">
         <!-- Trust badge -->
         <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 mb-8 opacity-0 animate-slide-up">
           <svg class="w-5 h-5 text-accent-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
@@ -202,17 +204,17 @@ const techStack = [
         </div>
 
         <!-- Main heading — benefit-led: outcome + audience -->
-        <h1 class="text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-bold text-white leading-[1.1] tracking-tight">
+        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white leading-[1.1] tracking-tight">
           <span class="block opacity-0 animate-slide-up" style="animation-delay: 0.2s;">Custom Software That</span>
           <span class="block opacity-0 animate-slide-up" style="animation-delay: 0.4s;">Powers <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 via-primary-300 to-accent-400">Enterprises &amp; Governments</span></span>
         </h1>
 
-        <p class="mt-8 text-xl sm:text-2xl text-secondary-200 max-w-3xl mx-auto opacity-0 animate-slide-up leading-relaxed" style="animation-delay: 0.6s;">
+        <p class="mt-6 text-lg sm:text-xl text-secondary-200 max-w-xl mx-auto lg:mx-0 opacity-0 animate-slide-up leading-relaxed" style="animation-delay: 0.6s;">
           We design, build, and run production-grade web, mobile, and ERP systems for startups, enterprises, and government bodies.
         </p>
 
         <!-- Dual CTA Buttons — action verb + clear secondary -->
-        <div class="mt-12 flex flex-wrap justify-center gap-4 opacity-0 animate-slide-up" style="animation-delay: 0.8s;">
+        <div class="mt-10 flex flex-wrap justify-center lg:justify-start gap-4 opacity-0 animate-slide-up" style="animation-delay: 0.8s;">
           <a
             href="/contact?source=hero"
             data-cta="hero-primary"
@@ -238,7 +240,7 @@ const techStack = [
 
         <!-- Tertiary click-to-call — one-tap dial for visitors who'd rather
              talk now. Min 48px tap target per WCAG 2.5.5 / Apple HIG. -->
-        <p class="mt-6 text-base sm:text-lg text-secondary-200 opacity-0 animate-slide-up flex flex-wrap items-center justify-center gap-x-2 gap-y-1" style="animation-delay: 0.85s;">
+        <p class="mt-6 text-base sm:text-lg text-secondary-200 opacity-0 animate-slide-up flex flex-wrap items-center justify-center lg:justify-start gap-x-2 gap-y-1" style="animation-delay: 0.85s;">
           <span>Prefer to talk now?</span>
           <a
             href="tel:+919561417403"
@@ -254,7 +256,7 @@ const techStack = [
         </p>
 
         <!-- Micro-trust line under CTAs -->
-        <p class="mt-6 text-sm sm:text-base text-secondary-300 opacity-0 animate-slide-up flex flex-wrap items-center justify-center gap-x-3 gap-y-2" style="animation-delay: 0.9s;" aria-label="Trust signals">
+        <p class="mt-6 text-sm sm:text-base text-secondary-300 opacity-0 animate-slide-up flex flex-wrap items-center justify-center lg:justify-start gap-x-3 gap-y-2" style="animation-delay: 0.9s;" aria-label="Trust signals">
           <span class="inline-flex items-center gap-2">
             <svg class="w-4 h-4 text-accent-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
               <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
@@ -266,14 +268,16 @@ const techStack = [
           <span class="hidden sm:inline text-secondary-500" aria-hidden="true">·</span>
           <span>No commitment</span>
         </p>
+        </div>
+        <!-- /Left column -->
 
-        <!-- Product preview — framed dashboard mock so the hero leads with a
+        <!-- Right column — framed dashboard mock so the hero leads with a
              concrete product visual, not text alone. The image is a polished
              placeholder UI (public/images/product-dashboard.svg); swap in a
              real product screenshot or screen-recording poster frame
              (≥1200×720, .webp/.png) at the same path — no template change
              needed. Explicit width/height keep CLS at zero while it loads. -->
-        <figure class="mt-16 sm:mt-20 max-w-4xl mx-auto opacity-0 animate-slide-up" style="animation-delay: 1s;">
+        <figure class="mt-4 lg:mt-0 w-full max-w-xl mx-auto lg:mx-0 lg:ml-auto opacity-0 animate-slide-up" style="animation-delay: 1s;">
           <div class="relative rounded-2xl border border-white/15 bg-white/5 backdrop-blur-sm shadow-2xl shadow-primary/20 overflow-hidden">
             <!-- Glow behind the frame -->
             <div class="absolute -inset-px rounded-2xl bg-gradient-to-tr from-primary-500/10 via-transparent to-accent-400/10 pointer-events-none" aria-hidden="true"></div>