@extends('layouts.app')

@section('title', 'Clients — A1 Movex Global Services')
@section('description', '450+ businesses worldwide trust A1 Movex for confidence, security and consistent value across their global logistics — see our commitments and credentials.')

@section('content')
<!-- ═══════════════════════════════════════════════════════════
     HERO
═══════════════════════════════════════════════════════════ -->
<section class="relative pt-28 pb-10 lg:pt-32 lg:pb-14 overflow-hidden bg-[#060c1b] text-white">
  <div class="absolute inset-0 hero-bg-zoom" style="background-image:url('https://images.unsplash.com/photo-1638262052640-82e94d64664a?auto=format&fit=crop&w=1600&q=80');background-size:cover;background-position:center"></div>
  <div class="absolute inset-0" style="background:linear-gradient(100deg, rgba(6,12,27,.93) 0%, rgba(6,12,27,.8) 45%, rgba(6,12,27,.55) 100%)"></div>
  <div class="absolute inset-0 grid-overlay-dark opacity-25"></div>
  <div class="relative z-10 max-w-[1400px] mx-auto px-6 sm:px-10">
    <div class="max-w-[640px] zoom-reveal">
      <nav class="flex items-center gap-1.5 sm:gap-2 mb-3 sm:mb-4 text-[9px] sm:text-[10px] font-semibold text-white/40 uppercase tracking-wide">
        <a href="{{ route('home') }}" class="hover:text-white/70 transition-colors duration-200">Home</a>
        <span class="text-white/25">/</span>
        <span class="text-white/60">Clients</span>
      </nav>
      <div class="inline-flex items-center gap-2.5 glass rounded-full px-4 py-1.5 mb-5">
        <span class="w-1.5 h-1.5 rounded-full bg-[#c8102e] animate-pulse flex-shrink-0"></span>
        <span class="text-[10px] font-semibold text-white/55 tracking-[0.2em] uppercase">Clients</span>
      </div>
      <div class="hero-heading-mask overflow-hidden">
        <h1 class="hero-heading font-display font-extrabold leading-[1.05] tracking-tight" style="font-size:clamp(1.75rem,3.4vw,2.75rem)">
          Customer <span class="text-gradient-red">commitments.</span>
        </h1>
      </div>
    </div>
  </div>

  <!-- Floating trust chip — desktop only -->
  <div class="hero-float-chip hidden lg:flex flex-col items-start glass rounded-2xl px-6 py-5 absolute right-10 xl:right-16 top-1/2 -translate-y-1/2 z-10">
    <span class="font-display font-black leading-none" style="font-size:1.9rem">450+</span>
    <span class="text-[11px] font-semibold text-white/55 uppercase tracking-wide mt-1.5">Worldwide Clients</span>
  </div>

  <!-- Scroll cue -->
  <div class="absolute bottom-6 sm:bottom-8 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center gap-2">
    <div class="relative" style="width:2px;height:30px;background:rgba(255,255,255,.3)">
      <span class="hero-scroll-dot absolute left-1/2 -translate-x-1/2 top-0 w-1.5 h-1.5 rounded-full bg-white"></span>
    </div>
    <span class="text-[9px] sm:text-[10px] font-semibold text-white/40 uppercase tracking-wide">Scroll</span>
  </div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     CUSTOMER COMMITMENTS + CREDENTIALS
═══════════════════════════════════════════════════════════ -->
<section class="bg-white relative">
  <div class="max-w-[1400px] mx-auto px-6 sm:px-10">
    <div class="pt-24 lg:pt-36 pb-14 lg:pb-16 flex flex-col lg:flex-row lg:items-end lg:justify-between zoom-reveal">
      <div>
        <span class="section-label">Our Commitment</span>
        <h2 class="font-display font-extrabold text-[#0c1427] leading-[1.04] tracking-tight" style="font-size:clamp(2.8rem,5.5vw,5rem)">
          Confidence, security,<br/>every <span class="text-gradient-red">shipment.</span>
        </h2>
      </div>
      <p class="text-[#64748b] text-base lg:text-lg leading-relaxed max-w-sm mt-6 lg:mt-0 lg:mb-2">Our commitment to continuous improvement, customer satisfaction and the spirit of partnership has been the foundation of our growth and success.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 pb-24 lg:pb-32">
      <div class="credential-tile zoom-reveal bg-white rounded-2xl p-8 border border-[#e8ecf5] relative overflow-hidden">
        <span class="credential-accent-line absolute top-0 left-0 h-[3px] w-0 bg-[#c8102e]"></span>
        <div class="w-14 h-14 rounded-full flex items-center justify-center mb-5" style="background:rgba(200,16,46,.08)">
          <svg class="w-6 h-6 text-[#c8102e]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"/></svg>
        </div>
        <h3 class="font-display font-bold text-[#0c1427] text-xl mb-3">Industry Memberships</h3>
        <p class="text-sm text-[#64748b] leading-relaxed mb-5">We hold active memberships with the industry bodies that set the standard for freight forwarding practice in India.</p>
        <div class="flex flex-wrap gap-2">
          <span class="svc-tag-light">TIA India</span>
          <span class="svc-tag-light">FFFAI</span>
        </div>
      </div>
      <div class="credential-tile zoom-reveal bg-white rounded-2xl p-8 border border-[#e8ecf5] relative overflow-hidden">
        <span class="credential-accent-line absolute top-0 left-0 h-[3px] w-0 bg-[#c8102e]"></span>
        <div class="w-14 h-14 rounded-full flex items-center justify-center mb-5" style="background:rgba(200,16,46,.08)">
          <svg class="w-6 h-6 text-[#c8102e]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
        </div>
        <h3 class="font-display font-bold text-[#0c1427] text-xl mb-3">Full Insurance Coverage</h3>
        <p class="text-sm text-[#64748b] leading-relaxed mb-5">Every shipment we handle is backed by comprehensive coverage, so your cargo — and your business — is protected end to end.</p>
        <div class="flex flex-wrap gap-2">
          <span class="svc-tag-light">Surety Bond</span>
          <span class="svc-tag-light">Cargo Insurance</span>
          <span class="svc-tag-light">General Liability</span>
          <span class="svc-tag-light">Errors &amp; Omissions</span>
        </div>
      </div>
      <div class="credential-tile zoom-reveal bg-white rounded-2xl p-8 border border-[#e8ecf5] relative overflow-hidden">
        <span class="credential-accent-line absolute top-0 left-0 h-[3px] w-0 bg-[#c8102e]"></span>
        <div class="w-14 h-14 rounded-full flex items-center justify-center mb-5" style="background:rgba(200,16,46,.08)">
          <svg class="w-6 h-6 text-[#c8102e]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.306a11.95 11.95 0 015.814-5.518l2.74-1.22m0 0l-5.94-2.281m5.94 2.28l-2.28 5.941"/></svg>
        </div>
        <h3 class="font-display font-bold text-[#0c1427] text-xl mb-3">Consistent Value</h3>
        <p class="text-sm text-[#64748b] leading-relaxed mb-5">Competitive rates paired with dependable execution — the combination that has kept 450+ clients worldwide with us for the long term.</p>
        <div class="flex flex-wrap gap-2">
          <span class="svc-tag-light">Competitive Rates</span>
          <span class="svc-tag-light">100% Confidence</span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     STATS — "Cargo Manifest Strip" (same treatment as the service-detail
     "By The Numbers" section: dashed perforation dividers, "DATA POINT 0X"
     micro-labels, tabular counter numbers). Kept hardcoded here (not a
     loop) since these 4 stats are fixed, unlike per-service data — the
     stats-manifest-section/-strip/-block/-divider classes and counter-trigger
     hook are what wire up the shared JS in app.js.
═══════════════════════════════════════════════════════════ -->
<section class="bg-[#f5f7ff] relative overflow-hidden stats-manifest-section">
  <div class="absolute inset-0 grid-overlay"></div>
  <div class="relative z-10 max-w-[1400px] mx-auto px-6 sm:px-10">
    <div class="pt-24 lg:pt-36 pb-14 lg:pb-16 flex flex-col lg:flex-row lg:items-end lg:justify-between zoom-reveal">
      <div>
        <span class="section-label">Trusted Worldwide</span>
        <h2 class="font-display font-extrabold text-[#0c1427] leading-[1.04] tracking-tight" style="font-size:clamp(2.8rem,5.5vw,5rem)">
          Numbers that back<br/>the <span class="text-gradient-red">partnership.</span>
        </h2>
      </div>
      <p class="text-[#64748b] text-base lg:text-lg leading-relaxed max-w-sm mt-6 lg:mt-0 lg:mb-2">Client trust, measured — across years, awards, projects and continents.</p>
    </div>

    <!-- Route-line accent — one decorative touch, not repeated -->
    <div class="hidden lg:flex items-center gap-2 mb-3 zoom-reveal" style="width:140px">
      <span class="flex-1 border-t border-dashed" style="border-color:rgba(200,16,46,.4)"></span>
      <svg class="w-4 h-4 flex-shrink-0" style="color:rgba(200,16,46,.4)" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.77 59.77 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/>
      </svg>
    </div>

    <div class="stats-manifest-strip zoom-reveal bg-[#fafbff] border border-[#d6dcec] rounded-2xl overflow-hidden mb-24 lg:mb-32">
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">

        <div class="stat-manifest-block relative p-8 lg:p-10">
          <div class="stat-manifest-divider-v absolute top-0 bottom-0 right-0 pointer-events-none hidden sm:block lg:block"></div>
          <div class="stat-manifest-divider-h absolute left-0 right-0 bottom-0 pointer-events-none block sm:block lg:hidden"></div>
          <div class="flex items-center gap-2 mb-4">
            <span class="w-1.5 h-1.5 rounded-full bg-[#c8102e] animate-pulse flex-shrink-0"></span>
            <span class="text-[10px] uppercase tracking-[0.15em] text-[#94a3b8] font-semibold">Data Point 01</span>
          </div>
          <div class="stat-manifest-num font-display font-black text-[#c8102e] counter-trigger" style="font-size:clamp(2.75rem,3.6vw,3.25rem);line-height:1;font-variant-numeric:tabular-nums" data-target="450" data-suffix="+">450+</div>
          <div class="font-display font-bold text-[#0c1427] text-base mt-1.5">Worldwide Clients</div>
          <p class="text-sm text-[#64748b] leading-relaxed mt-1.5">Businesses across the globe rely on us for their logistics.</p>
        </div>

        <div class="stat-manifest-block relative p-8 lg:p-10">
          <div class="stat-manifest-divider-v absolute top-0 bottom-0 right-0 pointer-events-none hidden sm:hidden lg:block"></div>
          <div class="stat-manifest-divider-h absolute left-0 right-0 bottom-0 pointer-events-none block sm:block lg:hidden"></div>
          <div class="flex items-center gap-2 mb-4">
            <span class="w-1.5 h-1.5 rounded-full bg-[#c8102e] animate-pulse flex-shrink-0"></span>
            <span class="text-[10px] uppercase tracking-[0.15em] text-[#94a3b8] font-semibold">Data Point 02</span>
          </div>
          <div class="stat-manifest-num font-display font-black text-[#c8102e] counter-trigger" style="font-size:clamp(2.75rem,3.6vw,3.25rem);line-height:1;font-variant-numeric:tabular-nums" data-target="80" data-suffix="+">80+</div>
          <div class="font-display font-bold text-[#0c1427] text-base mt-1.5">World Awards</div>
          <p class="text-sm text-[#64748b] leading-relaxed mt-1.5">Recognition for service quality and operational excellence.</p>
        </div>

        <div class="stat-manifest-block relative p-8 lg:p-10">
          <div class="stat-manifest-divider-v absolute top-0 bottom-0 right-0 pointer-events-none hidden sm:block lg:block"></div>
          <div class="stat-manifest-divider-h absolute left-0 right-0 bottom-0 pointer-events-none block sm:hidden lg:hidden"></div>
          <div class="flex items-center gap-2 mb-4">
            <span class="w-1.5 h-1.5 rounded-full bg-[#c8102e] animate-pulse flex-shrink-0"></span>
            <span class="text-[10px] uppercase tracking-[0.15em] text-[#94a3b8] font-semibold">Data Point 03</span>
          </div>
          <div class="stat-manifest-num font-display font-black text-[#c8102e] counter-trigger" style="font-size:clamp(2.75rem,3.6vw,3.25rem);line-height:1;font-variant-numeric:tabular-nums" data-target="12" data-suffix="+">12+</div>
          <div class="font-display font-bold text-[#0c1427] text-base mt-1.5">Years Experience</div>
          <p class="text-sm text-[#64748b] leading-relaxed mt-1.5">A decade-plus of consistent, accountable execution.</p>
        </div>

        <div class="stat-manifest-block relative p-8 lg:p-10">
          <div class="stat-manifest-divider-v absolute top-0 bottom-0 right-0 pointer-events-none hidden sm:hidden lg:hidden"></div>
          <div class="stat-manifest-divider-h absolute left-0 right-0 bottom-0 pointer-events-none hidden sm:hidden lg:hidden"></div>
          <div class="flex items-center gap-2 mb-4">
            <span class="w-1.5 h-1.5 rounded-full bg-[#c8102e] animate-pulse flex-shrink-0"></span>
            <span class="text-[10px] uppercase tracking-[0.15em] text-[#94a3b8] font-semibold">Data Point 04</span>
          </div>
          <div class="stat-manifest-num font-display font-black text-[#c8102e] counter-trigger" style="font-size:clamp(2.75rem,3.6vw,3.25rem);line-height:1;font-variant-numeric:tabular-nums" data-target="2000" data-suffix="+">2,000+</div>
          <div class="font-display font-bold text-[#0c1427] text-base mt-1.5">Projects Completed</div>
          <p class="text-sm text-[#64748b] leading-relaxed mt-1.5">From routine shipments to complex project cargo.</p>
        </div>

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

<!-- ═══════════════════════════════════════════════════════════
     CAROUSEL — Customer Commitments philosophy statements
═══════════════════════════════════════════════════════════ -->
<section id="testimonials" class="bg-white py-24 lg:py-40 overflow-hidden">
  <div class="max-w-[1400px] mx-auto px-6 sm:px-10">

    <!-- Header + nav arrows -->
    <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between mb-14 zoom-reveal">
      <div>
        <span class="section-label">In Our Words</span>
        <h2 class="font-display font-extrabold text-[#0c1427] leading-[1.04] tracking-tight" style="font-size:clamp(2.6rem,5vw,4.8rem)">
          The philosophy behind<br/>every <span class="text-gradient-red">partnership.</span>
        </h2>
      </div>
      <div class="flex gap-3 mt-8 sm:mt-0 sm:mb-2">
        <button id="carousel-prev" aria-label="Previous" class="w-12 h-12 rounded-xl border border-[#e8ecf5] bg-white flex items-center justify-center text-[#64748b] hover:border-[#1a2d6e]/25 hover:text-[#1a2d6e] hover:shadow-[0_4px_16px_-4px_rgba(26,45,110,.12)] transition-all duration-200">
          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"/></svg>
        </button>
        <button id="carousel-next" aria-label="Next" class="w-12 h-12 rounded-xl border border-[#e8ecf5] bg-white flex items-center justify-center text-[#64748b] hover:border-[#1a2d6e]/25 hover:text-[#1a2d6e] hover:shadow-[0_4px_16px_-4px_rgba(26,45,110,.12)] transition-all duration-200">
          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg>
        </button>
      </div>
    </div>

    <!-- Carousel viewport -->
    <div class="overflow-hidden">
      <div id="carousel-track" class="flex gap-5">

        <!-- Slide 1: Our Commitment -->
        <div class="carousel-slide flex-shrink-0 w-full lg:w-[calc(50%-10px)]">
          <div class="testimonial-card p-10 sm:p-14 relative overflow-hidden">
            <blockquote class="font-display font-semibold text-[#0c1427] leading-snug mb-10 max-w-4xl" style="font-size:clamp(1.15rem,2.4vw,1.65rem)">
              "We are committed to providing each of our clients with 100% confidence and security, offering the most competitive rates and overall consistent value in the transportation and logistics marketplace."
            </blockquote>
            <div class="flex items-center gap-5">
              <div class="w-14 h-14 rounded-full flex items-center justify-center font-display font-black text-white text-xl flex-shrink-0" style="background:linear-gradient(135deg,#1a2d6e,#2d4db5)">C</div>
              <div>
                <div class="font-display font-bold text-[#0c1427] text-base">Our Commitment</div>
                <div class="text-sm text-[#94a3b8] mt-0.5">Movex Services Pvt. Ltd.</div>
              </div>
            </div>
            <svg class="absolute bottom-10 right-12 w-24 h-24 opacity-[0.04]" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/></svg>
          </div>
        </div>

        <!-- Slide 2: Our Philosophy -->
        <div class="carousel-slide flex-shrink-0 w-full lg:w-[calc(50%-10px)]">
          <div class="testimonial-card p-10 sm:p-14 relative overflow-hidden">
            <blockquote class="font-display font-semibold text-[#0c1427] leading-snug mb-10 max-w-4xl" style="font-size:clamp(1.15rem,2.4vw,1.65rem)">
              "Our commitment to continuous improvement, customer satisfaction and the spirit of partnership has been the foundation of our growth and success."
            </blockquote>
            <div class="flex items-center gap-5">
              <div class="w-14 h-14 rounded-full flex items-center justify-center font-display font-black text-white text-xl flex-shrink-0" style="background:linear-gradient(135deg,#c8102e,#8b0d20)">P</div>
              <div>
                <div class="font-display font-bold text-[#0c1427] text-base">Our Philosophy</div>
                <div class="text-sm text-[#94a3b8] mt-0.5">Movex Services Pvt. Ltd.</div>
              </div>
            </div>
            <svg class="absolute bottom-10 right-12 w-24 h-24 opacity-[0.04]" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/></svg>
          </div>
        </div>

        <!-- Slide 3: Our Mission -->
        <div class="carousel-slide flex-shrink-0 w-full lg:w-[calc(50%-10px)]">
          <div class="testimonial-card p-10 sm:p-14 relative overflow-hidden">
            <blockquote class="font-display font-semibold text-[#0c1427] leading-snug mb-10 max-w-4xl" style="font-size:clamp(1.15rem,2.4vw,1.65rem)">
              "To provide quality management in Global Logistics Solutions through excellence in innovation, productivity and service — offering real value to our customers and employees alike."
            </blockquote>
            <div class="flex items-center gap-5">
              <div class="w-14 h-14 rounded-full flex items-center justify-center font-display font-black text-white text-xl flex-shrink-0" style="background:linear-gradient(135deg,#1a2d6e,#2d4db5)">M</div>
              <div>
                <div class="font-display font-bold text-[#0c1427] text-base">Our Mission</div>
                <div class="text-sm text-[#94a3b8] mt-0.5">Movex Services Pvt. Ltd.</div>
              </div>
            </div>
            <svg class="absolute bottom-10 right-12 w-24 h-24 opacity-[0.04]" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/></svg>
          </div>
        </div>

      </div>
    </div>

    <!-- Dots -->
    <div id="carousel-dots" class="flex gap-2.5 justify-center mt-8">
      <button class="carousel-dot active" data-index="0" aria-label="Slide 1"></button>
      <button class="carousel-dot" data-index="1" aria-label="Slide 2"></button>
      <button class="carousel-dot" data-index="2" aria-label="Slide 3"></button>
    </div>

  </div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     CTA
═══════════════════════════════════════════════════════════ -->
<section class="relative py-12 lg:py-16 overflow-hidden grain cta-bg">
  <div class="absolute inset-0 grid-overlay-dark opacity-28"></div>
  <div class="absolute right-[-2%] top-1/2 -translate-y-1/2 font-display font-black leading-none text-white/[0.022] pointer-events-none select-none hidden xl:block" style="font-size:18vw">A1</div>
  <div class="relative z-10 max-w-[1400px] mx-auto px-6 sm:px-10 text-center zoom-reveal">
    <div class="inline-flex items-center gap-2.5 glass rounded-full px-4 py-1.5 mb-6">
      <span class="w-1.5 h-1.5 rounded-full bg-[#c8102e] animate-pulse flex-shrink-0"></span>
      <span class="text-[10px] font-semibold text-white/48 tracking-[0.2em] uppercase">Ready to Ship?</span>
    </div>
    <h2 class="font-display font-extrabold text-white leading-[0.97] tracking-tight mb-5" style="font-size:clamp(2.4rem,5.5vw,5.5rem)">
      Let's move the world<br/>together.
    </h2>
    <p class="text-white/42 leading-relaxed mb-8 max-w-lg mx-auto font-light" style="font-size:clamp(.95rem,1.4vw,1.1rem)">Get a tailored logistics proposal in under 24 hours — no obligations, just a clear plan and an honest price.</p>
    <div class="flex flex-col sm:flex-row gap-3 justify-center">
      <a href="{{ route('contact') }}" class="btn-primary font-display font-bold text-white px-8 py-4 rounded-xl flex items-center justify-center gap-2.5 text-base">
        Get a Free Quote
        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
      </a>
      <a href="tel:+911142630977" class="btn-ghost font-display font-semibold px-8 py-4 rounded-xl flex items-center justify-center gap-2.5 text-base">
        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"/></svg>
        Speak to a Specialist
      </a>
    </div>
  </div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     FOOTER
═══════════════════════════════════════════════════════════ -->
@endsection
