<?php $__env->startSection('content'); ?>

<!-- ━━━━━━━━ PAGE BANNER ━━━━━━━━
     Structure: eyebrow → H1 → sub → stat strip
     Mirrors about-banner and hero banner aesthetics exactly.
     Dot grid + accent line + ghost BG text retained.
-->
<section class="svc-banner d-none" id="services" aria-label="Services banner">
  <div class="svc-banner-dots" aria-hidden="true"></div>
  <div class="svc-banner-bg-text" aria-hidden="true">Services</div>

  <div class="container">
    <div class="row gy-5">
      <div class="col-lg-8 svc-banner-content">

        <div class="svc-eyebrow">
          <div class="svc-eyebrow-line"></div>
          What We Do
        </div>

        <h1 class="svc-h1">
          Software Built<br>
          for <span>Real</span><br>
          Problems.
        </h1>

        <p class="svc-banner-sub">
          From first concept to live product — we design, build, and maintain software that removes complexity, scales with your ambitions, and earns your users' trust.
        </p>

        <div class="svc-stat-strip" role="region" aria-label="Services summary">
          <div class="svc-stat">
            <span class="svc-stat-num">6</span>
            <span class="svc-stat-lbl">Core Services</span>
          </div>
          <div class="svc-stat">
            <span class="svc-stat-num">50+</span>
            <span class="svc-stat-lbl">Projects Delivered</span>
          </div>
          <div class="svc-stat">
            <span class="svc-stat-num">98%</span>
            <span class="svc-stat-lbl">On-Time Delivery</span>
          </div>
          <div class="svc-stat">
            <span class="svc-stat-num">7+</span>
            <span class="svc-stat-lbl">Years Experience</span>
          </div>
        </div>

      </div>
    </div>
  </div>
</section>


<!-- ━━━━━━━━ SERVICES OVERVIEW — LIGHT ━━━━━━━━
     Editorial two-column intro; mirrors overview-sec.
     Left: lead + body copy. Right: capability pills.
-->
<section class="svcov-sec d-none" aria-label="Services overview">
  <div class="container">
    <div class="row gy-5 align-items-center">

      <!-- Left: editorial copy -->
      <div class="col-lg-6" data-anim="fade-right">
        <div class="label-bw-lt">
          <i class="fas fa-layer-group"></i> Our Capabilities
        </div>
        <p class="svcov-lead">
          Full-service growth,<br>
          <span>delivered with precision.</span>
        </p>
        <p class="svcov-body">
          We cover every dimension of digital growth — from brand strategy and creative design through to performance marketing, SEO, AI automation, and product development. Every engagement is tailored to your goals, not resized from a template.
        </p>
        <p class="svcov-body mt-4">
          Our teams are lean by design. You get senior strategists and specialists on every project, with direct communication and no account-management layers in between.
        </p>
      </div>

      <!-- Right: capability pills -->
      <div class="col-lg-5 offset-lg-1" data-anim="fade-left">
        <div class="svcov-pills">
          <div class="svcov-pill">
            <div class="svcov-pill-icon"><i class="fas fa-chart-line"></i></div>
            <span class="svcov-pill-text">Digital Growth & Performance Marketing</span>
          </div>
          <div class="svcov-pill">
            <div class="svcov-pill-icon"><i class="fas fa-magnifying-glass-chart"></i></div>
            <span class="svcov-pill-text">SEO, GEO & AI Strategy</span>
          </div>
          <div class="svcov-pill">
            <div class="svcov-pill-icon"><i class="fas fa-robot"></i></div>
            <span class="svcov-pill-text">AI Optimisation for Businesses</span>
          </div>
          <div class="svcov-pill">
            <div class="svcov-pill-icon"><i class="fas fa-palette"></i></div>
            <span class="svcov-pill-text">Branding & Creative Design</span>
          </div>
          <div class="svcov-pill">
            <div class="svcov-pill-icon"><i class="fas fa-bullhorn"></i></div>
            <span class="svcov-pill-text">Social Media & Paid Advertising</span>
          </div>
          <div class="svcov-pill">
            <div class="svcov-pill-icon"><i class="fas fa-laptop-code"></i></div>
            <span class="svcov-pill-text">Web & Mobile Product Development</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>


<!-- ━━━━━━━━ SERVICE CARDS — DARK ━━━━━━━━
     3-column card grid on dark background.
     Each card: number badge → icon → title → body → feature list → link.
     Hover: top accent reveal, lift, dot grid overlay.
-->
<section class="srvcards-sec" id="service-listings" aria-label="Service listings">
  <div class="container">

    <div class="text-center mb-5" data-anim="fade-up">
      <div class="label-bw" style="display:inline-flex;">
        <i class="fas fa-grid-2"></i> Services
      </div>
      <h2 class="sec-h h-dk">Everything you need<br>to grow<span class="dark-text-grad"> your Business</span>.</h2>
      <p class="sec-p-dk mt-3" style="max-width:520px;margin-left:auto;margin-right:auto;">
        Six focused disciplines. One integrated team. Zero compromise on results.
      </p>
    </div>

    <div class="srv-grid">

      <!-- 01 Digital Growth & Performance Marketing -->
      <div class="srv-card" data-anim="fade-up" data-delay="100">
        <div class="srv-card-num">01</div>
        <div class="srv-icon"><i class="fas fa-chart-line"></i></div>
        <h3 class="srv-card-title">Digital Growth & Performance Marketing</h3>
        <p class="srv-card-body">
          Data-driven marketing strategies that turn traffic into revenue. We combine growth frameworks with conversion science to build sustainable pipelines — not just vanity metrics.
        </p>
        <ul class="srv-card-list">
          <li>Growth strategy & funnel design</li>
          <li>Conversion rate optimisation</li>
          <li>Analytics setup & reporting</li>
          <li>A/B testing & experimentation</li>
        </ul>
        <a href="<?php echo e(route('contact')); ?>" class="srv-card-link">
          Start a project <i class="fas fa-arrow-right"></i>
        </a>
      </div>

      <!-- 02 SEO, GEO & AI Strategy -->
      <div class="srv-card" data-anim="fade-up" data-delay="150">
        <div class="srv-card-num">02</div>
        <div class="srv-icon"><i class="fas fa-magnifying-glass-chart"></i></div>
        <h3 class="srv-card-title">SEO, GEO & AI Strategy</h3>
        <p class="srv-card-body">
          Visibility built for the modern search landscape — across traditional engines, AI-powered results, and geo-targeted discovery. We craft content and technical strategies that endure.
        </p>
        <ul class="srv-card-list">
          <li>Technical & on-page SEO</li>
          <li>AI search optimisation (AEO/GEO)</li>
          <li>Content strategy & creation</li>
          <li>Local & international SEO</li>
        </ul>
        <a href="<?php echo e(route('contact')); ?>" class="srv-card-link">
          Start a project <i class="fas fa-arrow-right"></i>
        </a>
      </div>

      <!-- 03 AI Optimisation for Businesses -->
      <div class="srv-card" data-anim="fade-up" data-delay="200">
        <div class="srv-card-num">03</div>
        <div class="srv-icon"><i class="fas fa-robot"></i></div>
        <h3 class="srv-card-title">AI Optimisation for Businesses</h3>
        <p class="srv-card-body">
          Practical AI integration that removes manual bottlenecks and creates competitive advantage. From intelligent chatbots to full workflow automation — we implement AI that actually works.
        </p>
        <ul class="srv-card-list">
          <li>AI integration & implementation</li>
          <li>Custom chatbots & virtual assistants</li>
          <li>Workflow & process automation</li>
          <li>AI APIs & third-party connectors</li>
        </ul>
        <a href="<?php echo e(route('contact')); ?>" class="srv-card-link">
          Start a project <i class="fas fa-arrow-right"></i>
        </a>
      </div>

      <!-- 04 Branding & Creative Design -->
      <div class="srv-card" data-anim="fade-up" data-delay="100">
        <div class="srv-card-num">04</div>
        <div class="srv-icon"><i class="fas fa-palette"></i></div>
        <h3 class="srv-card-title">Branding & Creative Design</h3>
        <p class="srv-card-body">
          Brand identities built to resonate and endure. We craft visual systems — from logo to digital touchpoints — that communicate your value clearly and consistently across every channel.
        </p>
        <ul class="srv-card-list">
          <li>Brand identity & strategy</li>
          <li>Logo design & visual systems</li>
          <li>Website design & UI</li>
          <li>Marketing collateral & assets</li>
        </ul>
        <a href="<?php echo e(route('contact')); ?>" class="srv-card-link">
          Start a project <i class="fas fa-arrow-right"></i>
        </a>
      </div>

      <!-- 05 Social Media & Paid Advertising -->
      <div class="srv-card" data-anim="fade-up" data-delay="150">
        <div class="srv-card-num">05</div>
        <div class="srv-icon"><i class="fas fa-bullhorn"></i></div>
        <h3 class="srv-card-title">Social Media & Paid Advertising</h3>
        <p class="srv-card-body">
          Paid and organic social strategies engineered for reach, engagement, and return. We manage your ad spend with rigorous targeting, creative testing, and transparent performance reporting.
        </p>
        <ul class="srv-card-list">
          <li>Facebook & Instagram ads</li>
          <li>Google Ads & search campaigns</li>
          <li>Campaign optimisation & scaling</li>
          <li>Social content & community management</li>
        </ul>
        <a href="<?php echo e(route('contact')); ?>" class="srv-card-link">
          Start a project <i class="fas fa-arrow-right"></i>
        </a>
      </div>

      <!-- 06 Web & Mobile Product Development -->
      <div class="srv-card" data-anim="fade-up" data-delay="200">
        <div class="srv-card-num">06</div>
        <div class="srv-icon"><i class="fas fa-laptop-code"></i></div>
        <h3 class="srv-card-title">Web & Mobile Product Development</h3>
        <p class="srv-card-body">
          End-to-end development of websites, SaaS platforms, and mobile apps — built clean, built fast, and built to scale. From landing page to enterprise product, we ship with precision.
        </p>
        <ul class="srv-card-list">
          <li>Websites & landing pages</li>
          <li>SaaS platform development</li>
          <li>iOS & Android mobile apps</li>
          <li>Performance & scalability engineering</li>
        </ul>
        <a href="<?php echo e(route('contact')); ?>" class="srv-card-link">
          Start a project <i class="fas fa-arrow-right"></i>
        </a>
      </div>

    </div>
  </div>
</section>


<!-- ━━━━━━━━ HOW WE WORK — LIGHT ━━━━━━━━
     Zigzag step layout: left-right alternating with central spine.
     Collapses to stacked list on tablet/mobile.
     Uses borders, numbers, and icons — no colour.
-->
<section class="process-sec" id="process" aria-label="How we work">
  <div class="container">

    <div class="text-center mb-5" data-anim="fade-up">
      <div class="label-bw-lt" style="display:inline-flex;">
        <i class="fas fa-route"></i> How We Work
      </div>
      <h2 class="sec-h h-lt">A process built for<br>predictable <span class="light-text-grad">outcomes.</span></h2>
      <p class="sec-p-lt mt-3" style="max-width:480px;margin-left:auto;margin-right:auto;">
        Every engagement follows the same disciplined sequence — transparency at every step, no surprises at any gate.
      </p>
    </div>

    <div class="process-grid">

      <!-- Step 1 — LEFT -->
      <div class="process-step shaded left" data-anim="fade-right">
        <div class="process-step-num">Step 01</div>
        <div class="process-step-icon"><i class="fas fa-search"></i></div>
        <h3 class="process-step-title">Discovery & Scoping</h3>
        <p class="process-step-body">
          We start by listening. Deep-dive workshops to understand your users, constraints, and definition of success. Output: a crisp scope document and shared understanding before anything is estimated.
        </p>
      </div>

      <!-- Spine node 1 -->
      <div class="process-spine" aria-hidden="true">
        <div class="process-node active">01</div>
      </div>

      <!-- Placeholder right (empty to maintain grid) -->
      <div class="process-step right shaded hiddden-sec" aria-hidden="true" style="visibility:hidden;"></div>


      <!-- Placeholder left (empty) -->
      <div class="process-step left shaded hiddden-sec" aria-hidden="true" style="visibility:hidden;"></div>

      <!-- Spine node 2 -->
      <div class="process-spine" aria-hidden="true">
        <div class="process-node">02</div>
      </div>

      <!-- Step 2 — RIGHT -->
      <div class="process-step right shaded" data-anim="fade-left">
        <div class="process-step-num">Step 02</div>
        <div class="process-step-icon"><i class="fas fa-pencil-ruler"></i></div>
        <h3 class="process-step-title">Design & Architecture</h3>
        <p class="process-step-body">
          System design, data models, and UX wireframes — validated before engineering begins. We align on architecture decisions collaboratively, so the team moves fast with confidence later.
        </p>
      </div>


      <!-- Step 3 — LEFT -->
      <div class="process-step left shaded" data-anim="fade-right">
        <div class="process-step-num">Step 03</div>
        <div class="process-step-icon"><i class="fas fa-code-branch"></i></div>
        <h3 class="process-step-title">Iterative Development</h3>
        <p class="process-step-body">
          Two-week sprints with real output at every checkpoint. You review working software — not slide decks. Feedback loops are short, scope changes are managed transparently.
        </p>
      </div>

      <!-- Spine node 3 -->
      <div class="process-spine" aria-hidden="true">
        <div class="process-node">03</div>
      </div>

      <!-- Placeholder right -->
      <div class="process-step right hiddden-sec" aria-hidden="true" style="visibility:hidden;"></div>


      <!-- Placeholder left -->
      <div class="process-step left shaded hiddden-sec" aria-hidden="true" style="visibility:hidden;"></div>

      <!-- Spine node 4 -->
      <div class="process-spine" aria-hidden="true">
        <div class="process-node">04</div>
      </div>

      <!-- Step 4 — RIGHT -->
      <div class="process-step right shaded" data-anim="fade-left">
        <div class="process-step-num">Step 04</div>
        <div class="process-step-icon"><i class="fas fa-vial"></i></div>
        <h3 class="process-step-title">Quality Assurance</h3>
        <p class="process-step-body">
          Manual and automated testing across the full stack. Performance benchmarking, accessibility audits, and security review before anything reaches your users.
        </p>
      </div>


      <!-- Step 5 — LEFT -->
      <div class="process-step left shaded" data-anim="fade-right">
        <div class="process-step-num">Step 05</div>
        <div class="process-step-icon"><i class="fas fa-rocket"></i></div>
        <h3 class="process-step-title">Launch & Handover</h3>
        <p class="process-step-body">
          Zero-downtime deployments, runbooks, and documentation delivered as standard. Full knowledge transfer to your internal team — no dependency created.
        </p>
      </div>

      <!-- Spine node 5 -->
      <div class="process-spine" aria-hidden="true">
        <div class="process-node">05</div>
      </div>

      <!-- Placeholder right -->
      <div class="process-step right hiddden-sec" aria-hidden="true" style="visibility:hidden;"></div>


      <!-- Placeholder left -->
      <div class="process-step left shaded hiddden-sec" aria-hidden="true" style="visibility:hidden;"></div>

      <!-- Spine node 6 -->
      <div class="process-spine" aria-hidden="true">
        <div class="process-node">06</div>
      </div>

      <!-- Step 6 — RIGHT -->
      <div class="process-step right shaded" data-anim="fade-left">
        <div class="process-step-num">Step 06</div>
        <div class="process-step-icon"><i class="fas fa-shield-alt"></i></div>
        <h3 class="process-step-title">Support & Evolution</h3>
        <p class="process-step-body">
          Optional retainer-based support: monitoring, incident response, iterative improvements, and a dedicated point of contact who already knows your codebase.
        </p>
      </div>

    </div>
  </div>
</section>


<!-- ━━━━━━━━ WHY CHOOSE OUR SERVICES — DARK ━━━━━━━━
     Mirrors why-sec from About page exactly.
     Left: headline + lead + numbered strength list.
     Right: framed stat panel.
-->
<section class="srvwhy-sec" id="why-us" aria-label="Why choose our services">
  <div class="srvwhy-bg-text" aria-hidden="true">Why Us</div>
  <div class="container position-relative" style="z-index:2;">

    <div class="row gy-5 align-items-center">

      <!-- Left: argument list -->
      <div class="col-lg-6" data-anim="fade-right">
        <div class="label-bw">
          <i class="fas fa-award"></i> Why Choose NexaTech
        </div>
        <h2 class="srvwhy-headline">
          Engineering you <br>
          can <span>count on.</span>
        </h2>
        <p class="srvwhy-lead">
          There is no shortage of software agencies. The shortage is in agencies that take ownership — of quality, of timelines, of outcomes.
        </p>

        <ul class="srvwhy-list">
          <li>
            <span class="srvwhy-list-num"><i class="fas fa-bullseye"></i></span>
            <div class="srvwhy-list-text">
              <strong>Results-Driven Approach</strong>
              Focused on measurable business growth. Every strategy, campaign, and deliverable is tied to real outcomes — not activity.
            </div>
          </li>
          <li>
            <span class="srvwhy-list-num"><i class="fas fa-robot"></i></span>
            <div class="srvwhy-list-text">
              <strong>AI-Powered Strategy</strong>
              Using modern AI tools and automation to move faster, reduce costs, and unlock opportunities your competitors haven't found yet.
            </div>
          </li>
          <li>
            <span class="srvwhy-list-num"><i class="fas fa-layer-group"></i></span>
            <div class="srvwhy-list-text">
              <strong>End-to-End Digital Expertise</strong>
              Marketing, branding, and product development — all under one roof. No handoff gaps, no misaligned messaging, no wasted spend.
            </div>
          </li>
          <li>
            <span class="srvwhy-list-num"><i class="fas fa-microchip"></i></span>
            <div class="srvwhy-list-text">
              <strong>Technology-Focused Team</strong>
              Experts in both strategy and technology. We don't just advise — we build, implement, and optimise everything we recommend.
            </div>
          </li>
        </ul>
      </div>

      <!-- Right: framed stat panel — mirrors why-frame -->
      <div class="col-lg-5 offset-lg-1" data-anim="fade-left">
        <div class="srvwhy-frame">

          <div class="srvwhy-frame-stat">
            <div class="srvwhy-frame-num">98%</div>
            <div class="srvwhy-frame-label">Client Satisfaction Rate</div>
            <p class="srvwhy-frame-desc">Measured across all completed engagements over 7 years.</p>
          </div>

          <div class="srvwhy-frame-stat">
            <div class="srvwhy-frame-num">100%</div>
            <div class="srvwhy-frame-label">Transparent Pricing</div>
            <p class="srvwhy-frame-desc">No hidden fees, no scope creep billed without discussion.</p>
          </div>

          <div class="srvwhy-frame-stat">
            <div class="srvwhy-frame-num">&lt; 48h</div>
            <div class="srvwhy-frame-label">Average Response Time</div>
            <p class="srvwhy-frame-desc">For all support and critical incident tickets on active retainers.</p>
          </div>

          <div class="why-frame-divider" style="margin-top:.5rem;"></div>

          <!-- Reuse why-frame-row pattern from global styles -->
          <div class="why-frame-row">
            <div class="why-frame-icon"><i class="fas fa-star"></i></div>
            <div>
              <div class="why-frame-row-title">Enterprise-grade output</div>
              <div class="why-frame-row-sub">Quality that holds up under scrutiny and scale</div>
            </div>
          </div>
          <div class="why-frame-row">
            <div class="why-frame-icon"><i class="fas fa-lock"></i></div>
            <div>
              <div class="why-frame-row-title">NDA & IP protection as standard</div>
              <div class="why-frame-row-sub">Your ideas, fully protected from day one</div>
            </div>
          </div>
          <div class="why-frame-row">
            <div class="why-frame-icon"><i class="fas fa-users"></i></div>
            <div>
              <div class="why-frame-row-title">Dedicated project team</div>
              <div class="why-frame-row-sub">One team, one codebase, full context maintained</div>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</section>


<!-- ━━━━━━━━ CTA ━━━━━━━━
     Mirrors .cta-sec from Home / .about-cta-sec from About.
     Rotating rings, white btn-pri, ghost btn-ghost.
-->
<section class="srvcta-sec" id="contact" aria-label="Call to action">
  <div class="cta-ring-a" aria-hidden="true"></div>
  <div class="cta-ring-b" aria-hidden="true"></div>
  <div class="container">
    <div class="label-bw" data-anim="blur-in" style="display:inline-flex;">
      <i class="fas fa-arrow-right"></i> Start a Project
    </div>
    <h2 class="cta-headline" data-anim="fade-up" data-delay="100">
      Tell us what you're building.<br>
      <span>We'll tell you how we can help.</span>
    </h2>
    <div class="d-flex gap-3 justify-content-center flex-wrap" data-anim="fade-up" data-delay="200">
      <a href="<?php echo e(route('contact')); ?>" class="btn-pri ripple-host">
        Get in Touch <i class="fas fa-arrow-right" style="font-size:.8rem"></i>
      </a>
      <a href="#service-listings" class="btn-ghost">See All Services</a>
    </div>
  </div>
</section>

<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script src="<?php echo e(asset('js/services.js')); ?>"></script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/demoserver22/public_html/nexatech/dev/resources/views/pages/services.blade.php ENDPATH**/ ?>