@extends('layouts.app')

@section('title', 'A1 Movex Global Services — Trusted to Move the World')
@section('description', 'End-to-end global logistics — air, ocean and road freight across 50+ countries. Trusted since 2009.')

@section('content')
<!-- ═══════════════════════════════════════════════════════════
     HERO — stays dark, cinematic
═══════════════════════════════════════════════════════════ -->
<section id="hero" class="relative min-h-screen flex flex-col justify-center overflow-hidden grain bg-[#060c1b] text-white">
  <div class="absolute inset-0 grid-overlay-dark opacity-45"></div>
  <!-- Radial glows -->
  <div class="absolute -top-[20%] -left-[10%] w-[900px] h-[900px] rounded-full pointer-events-none" style="background:radial-gradient(circle,rgba(26,45,110,.35) 0%,transparent 70%)"></div>
  <div class="absolute -bottom-[15%] -right-[8%] w-[700px] h-[700px] rounded-full pointer-events-none" style="background:radial-gradient(circle,rgba(200,16,46,.14) 0%,transparent 70%)"></div>

  <!-- Logistics route-map visual — wrapped for zoom animation -->
  <div id="hero-visual" class="absolute right-0 top-1/2 -translate-y-1/2 w-[60vw] max-w-[860px] opacity-[0.14] pointer-events-none select-none hidden lg:block">
    <svg viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
      <!-- Globe wireframe -->
      <circle cx="400" cy="400" r="375" stroke="white" stroke-width="2"/>
      <circle cx="400" cy="400" r="290" stroke="white" stroke-width="1"/>
      <circle cx="400" cy="400" r="188" stroke="white" stroke-width=".7"/>
      <!-- Latitude lines -->
      <ellipse cx="400" cy="400" rx="375" ry="128" stroke="white" stroke-width="1"/>
      <ellipse cx="400" cy="400" rx="375" ry="252" stroke="white" stroke-width=".8"/>
      <ellipse cx="400" cy="400" rx="375" ry="362" stroke="white" stroke-width=".5"/>
      <!-- Meridians -->
      <ellipse cx="400" cy="400" rx="168" ry="375" stroke="white" stroke-width=".7"/>
      <ellipse cx="400" cy="400" rx="302" ry="375" stroke="white" stroke-width=".55"/>
      <!-- Equator + Prime Meridian -->
      <line x1="25" y1="400" x2="775" y2="400" stroke="white" stroke-width=".9"/>
      <line x1="400" y1="25" x2="400" y2="775" stroke="white" stroke-width=".9"/>
      <!-- Continents (simplified) -->
      <path d="M310 265 Q360 240 415 262 Q465 284 455 325 Q445 368 402 378 Q358 388 325 358 Q292 335 310 265Z" fill="#c8102e" opacity=".5"/>
      <path d="M465 298 Q496 282 518 302 Q540 322 524 350 Q508 378 481 368 Q454 358 458 332 Q462 312 465 298Z" fill="#c8102e" opacity=".5"/>
      <path d="M345 395 Q388 382 420 404 Q452 426 442 458 Q432 490 400 500 Q368 510 348 488 Q322 466 334 432 Q340 412 345 395Z" fill="#c8102e" opacity=".5"/>
      <path d="M245 342 Q268 322 295 338 Q322 354 312 386 Q302 418 275 424 Q248 430 236 402 Q222 372 245 342Z" fill="#c8102e" opacity=".5"/>
      <path d="M498 362 Q535 346 558 368 Q580 390 564 422 Q548 454 516 454 Q484 454 474 426 Q462 396 498 362Z" fill="#c8102e" opacity=".5"/>
      <!-- ── ROUTE NETWORK ── -->
      <!-- Mumbai → Dubai (solid, main corridor) -->
      <path d="M525 382 Q505 318 478 316" stroke="#c8102e" stroke-width="2.4"/>
      <!-- Dubai → London (dashed) -->
      <path d="M478 316 Q395 185 318 220" stroke="#c8102e" stroke-width="1.9" stroke-dasharray="7 4"/>
      <!-- London → New York (dashed, transatlantic) -->
      <path d="M318 220 Q228 138 152 275" stroke="#c8102e" stroke-width="1.8" stroke-dasharray="6 5"/>
      <!-- Singapore → Mumbai (solid) -->
      <path d="M596 452 Q562 415 525 382" stroke="#c8102e" stroke-width="2.2"/>
      <!-- Frankfurt → Singapore (long arc, dashed) -->
      <path d="M340 226 Q510 178 596 452" stroke="#c8102e" stroke-width="1.5" stroke-dasharray="5 5"/>
      <!-- New York → Frankfurt (dashed) -->
      <path d="M152 275 Q240 205 340 226" stroke="#c8102e" stroke-width="1.6" stroke-dasharray="6 4"/>
      <!-- ── CITY NODES ── -->
      <!-- Mumbai -->
      <circle cx="525" cy="382" r="5.5" fill="#c8102e"/>
      <circle cx="525" cy="382" r="11" stroke="#c8102e" stroke-width="1" fill="none" opacity=".38"/>
      <circle cx="525" cy="382" r="18" stroke="#c8102e" stroke-width=".5" fill="none" opacity=".14"/>
      <!-- Dubai -->
      <circle cx="478" cy="316" r="5" fill="#c8102e"/>
      <circle cx="478" cy="316" r="10" stroke="#c8102e" stroke-width="1" fill="none" opacity=".38"/>
      <!-- London -->
      <circle cx="318" cy="220" r="5" fill="#c8102e"/>
      <circle cx="318" cy="220" r="10" stroke="#c8102e" stroke-width="1" fill="none" opacity=".38"/>
      <circle cx="318" cy="220" r="16" stroke="#c8102e" stroke-width=".5" fill="none" opacity=".14"/>
      <!-- Singapore -->
      <circle cx="596" cy="452" r="5" fill="#c8102e"/>
      <circle cx="596" cy="452" r="10" stroke="#c8102e" stroke-width="1" fill="none" opacity=".38"/>
      <!-- New York -->
      <circle cx="152" cy="275" r="4.5" fill="#c8102e" opacity=".85"/>
      <circle cx="152" cy="275" r="9" stroke="#c8102e" stroke-width=".9" fill="none" opacity=".32"/>
      <!-- Frankfurt -->
      <circle cx="340" cy="226" r="4" fill="#c8102e" opacity=".85"/>
      <circle cx="340" cy="226" r="8" stroke="#c8102e" stroke-width=".9" fill="none" opacity=".32"/>
      <!-- ── CARGO PLANE on Mumbai→London route ── -->
      <g transform="translate(428,278) rotate(-52)">
        <path d="M0,-16 L3,-4 L16,-1 L16,3 L3,2 L4,14 L7,16 L0,18 L-7,16 L-4,14 L-3,2 L-16,3 L-16,-1 L-3,-4 Z" fill="#C2185B" opacity=".9"/>
      </g>
      <!-- ── CONTAINER SHIP on Singapore→Mumbai route ── -->
      <g transform="translate(556,418) rotate(-30)">
        <rect x="-20" y="-5" width="40" height="10" rx="2.5" fill="#C2185B" opacity=".82"/>
        <rect x="-11" y="-10" width="24" height="6" rx="1.5" fill="#C2185B" opacity=".65"/>
        <rect x="-8" y="-15" width="5" height="6" rx="1" fill="#C2185B" opacity=".55"/>
        <rect x="0" y="-15" width="5" height="6" rx="1" fill="#C2185B" opacity=".55"/>
        <rect x="8" y="-15" width="5" height="6" rx="1" fill="#C2185B" opacity=".55"/>
      </g>
      <!-- ── SMALL DOTS for minor ports ── -->
      <circle cx="220" cy="355" r="3" fill="#c8102e" opacity=".45"/>
      <circle cx="462" cy="490" r="2.5" fill="#c8102e" opacity=".38"/>
      <circle cx="390" cy="162" r="2.5" fill="#c8102e" opacity=".38"/>
      <circle cx="640" cy="310" r="2.5" fill="#c8102e" opacity=".35"/>
    </svg>
  </div>

  <!-- Hero content -->
  <div id="hero-content" class="relative z-20 max-w-[1400px] mx-auto px-6 sm:px-10 pt-28 pb-20 lg:pt-40 lg:pb-28 w-full">
    <div class="max-w-[900px]">
      <div id="hero-tag" class="inline-flex items-center gap-2.5 glass rounded-full px-5 py-2 mb-10 opacity-0">
        <span class="w-2 h-2 rounded-full bg-[#c8102e] animate-pulse flex-shrink-0"></span>
        <span class="text-[11px] font-semibold text-white/55 tracking-[0.2em] uppercase">A1 Movex Global Services</span>
      </div>

      <h1 id="hero-headline" class="font-display font-extrabold leading-[0.97] tracking-tight mb-8" style="font-size:clamp(3.4rem,8.5vw,7.8rem)">
        <span class="line-mask block"><span class="clip-word-inner block">Moving what</span></span>
        <span class="line-mask block mt-1"><span class="clip-word-inner block">matters, <span class="text-gradient-red">globally.</span></span></span>
      </h1>

      <p id="hero-sub" class="text-white/48 leading-relaxed max-w-[540px] mb-12 opacity-0 font-light" style="font-size:clamp(1rem,1.6vw,1.22rem)">End-to-end freight forwarding across air, ocean &amp; road — connecting businesses to 50+ countries with precision and zero compromises.</p>

      <div id="hero-ctas" class="flex flex-wrap gap-4 mb-20 opacity-0">
        <a href="#contact" class="btn-primary font-display font-bold text-white px-8 py-4 rounded-2xl flex items-center gap-2.5" style="font-size:clamp(.9rem,1.1vw,1rem)">
          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="#services" class="btn-ghost font-display font-semibold px-8 py-4 rounded-2xl" style="font-size:clamp(.9rem,1.1vw,1rem)">Explore Services</a>
      </div>

      <div id="hero-stats" class="flex flex-wrap gap-4 opacity-0">
        <div class="glass rounded-2xl px-6 py-4">
          <div class="font-display font-black text-white text-3xl counter-display" data-target="50" data-suffix="+">0</div>
          <div class="text-[11px] text-white/38 font-medium mt-1 tracking-wide">Countries served</div>
        </div>
        <div class="glass rounded-2xl px-6 py-4">
          <div class="font-display font-black text-white text-3xl counter-display" data-target="15000" data-suffix="+">0</div>
          <div class="text-[11px] text-white/38 font-medium mt-1 tracking-wide">Shipments delivered</div>
        </div>
        <div class="glass rounded-2xl px-6 py-4">
          <div class="font-display font-black text-white text-3xl">99.8<span class="text-white text-2xl">%</span></div>
          <div class="text-[11px] text-white/38 font-medium mt-1 tracking-wide">On-time delivery</div>
        </div>
        <div class="glass rounded-2xl px-6 py-4">
          <div class="font-display font-black text-white text-3xl counter-display" data-target="15" data-suffix="+ yrs">0</div>
          <div class="text-[11px] text-white/38 font-medium mt-1 tracking-wide">Industry experience</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Bottom dark vignette (keeps edge crisp, doesn't wash out stats) -->
  <div class="absolute bottom-0 inset-x-0 h-16 pointer-events-none z-5" style="background:linear-gradient(to bottom,transparent,rgba(6,12,27,.6))"></div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     MARQUEE — light
═══════════════════════════════════════════════════════════ -->
<div class="border-y py-[18px] overflow-hidden bg-white" style="border-color:#e8ecf5">
  <div class="marquee-track">
    <div class="flex items-center gap-12 pr-12 flex-shrink-0">
      <span class="text-[11px] font-bold tracking-[0.28em] uppercase text-[#1a2d6e]/55 whitespace-nowrap">Air Freight</span>
      <span class="text-[#c8102e]/55 text-base">&#9632;</span>
      <span class="text-[11px] font-bold tracking-[0.28em] uppercase text-[#1a2d6e]/55 whitespace-nowrap">Ocean Shipping</span>
      <span class="text-[#c8102e]/55 text-base">&#9632;</span>
      <span class="text-[11px] font-bold tracking-[0.28em] uppercase text-[#1a2d6e]/55 whitespace-nowrap">Customs Clearance</span>
      <span class="text-[#c8102e]/55 text-base">&#9632;</span>
      <span class="text-[11px] font-bold tracking-[0.28em] uppercase text-[#1a2d6e]/55 whitespace-nowrap">Warehousing</span>
      <span class="text-[#c8102e]/55 text-base">&#9632;</span>
      <span class="text-[11px] font-bold tracking-[0.28em] uppercase text-[#1a2d6e]/55 whitespace-nowrap">Road Transport</span>
      <span class="text-[#c8102e]/55 text-base">&#9632;</span>
      <span class="text-[11px] font-bold tracking-[0.28em] uppercase text-[#1a2d6e]/55 whitespace-nowrap">Trade Compliance</span>
      <span class="text-[#c8102e]/55 text-base">&#9632;</span>
      <span class="text-[11px] font-bold tracking-[0.28em] uppercase text-[#1a2d6e]/55 whitespace-nowrap">Supply Chain</span>
      <span class="text-[#c8102e]/55 text-base">&#9632;</span>
      <span class="text-[11px] font-bold tracking-[0.28em] uppercase text-[#1a2d6e]/55 whitespace-nowrap">Last Mile Delivery</span>
      <span class="text-[#c8102e]/55 text-base">&#9632;</span>
    </div>
    <div class="flex items-center gap-12 pr-12 flex-shrink-0" aria-hidden="true">
      <span class="text-[11px] font-bold tracking-[0.28em] uppercase text-[#1a2d6e]/55 whitespace-nowrap">Air Freight</span>
      <span class="text-[#c8102e]/55 text-base">&#9632;</span>
      <span class="text-[11px] font-bold tracking-[0.28em] uppercase text-[#1a2d6e]/55 whitespace-nowrap">Ocean Shipping</span>
      <span class="text-[#c8102e]/55 text-base">&#9632;</span>
      <span class="text-[11px] font-bold tracking-[0.28em] uppercase text-[#1a2d6e]/55 whitespace-nowrap">Customs Clearance</span>
      <span class="text-[#c8102e]/55 text-base">&#9632;</span>
      <span class="text-[11px] font-bold tracking-[0.28em] uppercase text-[#1a2d6e]/55 whitespace-nowrap">Warehousing</span>
      <span class="text-[#c8102e]/55 text-base">&#9632;</span>
      <span class="text-[11px] font-bold tracking-[0.28em] uppercase text-[#1a2d6e]/55 whitespace-nowrap">Road Transport</span>
      <span class="text-[#c8102e]/55 text-base">&#9632;</span>
      <span class="text-[11px] font-bold tracking-[0.28em] uppercase text-[#1a2d6e]/55 whitespace-nowrap">Trade Compliance</span>
      <span class="text-[#c8102e]/55 text-base">&#9632;</span>
      <span class="text-[11px] font-bold tracking-[0.28em] uppercase text-[#1a2d6e]/55 whitespace-nowrap">Supply Chain</span>
      <span class="text-[#c8102e]/55 text-base">&#9632;</span>
      <span class="text-[11px] font-bold tracking-[0.28em] uppercase text-[#1a2d6e]/55 whitespace-nowrap">Last Mile Delivery</span>
      <span class="text-[#c8102e]/55 text-base">&#9632;</span>
    </div>
  </div>
</div>

<!-- ═══════════════════════════════════════════════════════════
     SERVICES — card grid
═══════════════════════════════════════════════════════════ -->
<section id="services" class="bg-[#f5f7ff] relative">
  <div class="absolute inset-0 grid-overlay"></div>
  <div class="relative z-10 max-w-[1400px] mx-auto px-6 sm:px-10">

    <!-- Section header -->
    <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">What We Do</span>
        <h2 class="font-display font-extrabold text-[#0c1427] leading-[1.04] tracking-tight" style="font-size:clamp(2.8rem,5.5vw,5rem)">
          Every link in your<br/>supply chain, <span class="text-gradient-red">mastered.</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">Five integrated services, one accountable partner — from first mile to final delivery.</p>
    </div>

    <!-- Service showcase cards — stacked, driven by pinned scroll -->
    <div class="relative">

      <!-- 01 Air Freight -->
      <div class="service-card svc-cinematic rounded-2xl overflow-hidden relative group">
        <div class="svc-img absolute inset-0" style="background-image:url('https://images.unsplash.com/photo-1716718810773-d2a52b43602f?auto=format&fit=crop&w=1600&q=80')"></div>
        <div class="svc-overlay absolute inset-0"></div>
        <div class="relative z-10 flex flex-col justify-end h-full p-8 lg:p-10">
          <span class="text-[12px] font-bold tracking-[0.28em] uppercase text-[#c8102e] mb-3 block">01 — Air Freight</span>
          <h3 class="font-display font-bold text-white leading-tight mb-3" style="font-size:clamp(1.6rem,3vw,2.4rem)">Air Freight</h3>
          <p class="text-sm lg:text-[0.95rem] text-white/65 leading-relaxed mb-5 max-w-lg">Time-critical cargo to 100+ destinations. Same-day booking with priority and economy options, real-time AWB tracking at every checkpoint.</p>
          <div class="svc-tags flex flex-wrap gap-2 mb-6">
            <span class="svc-tag">Express</span>
            <span class="svc-tag">DGR Certified</span>
            <span class="svc-tag">Priority Booking</span>
            <span class="svc-tag">45+ Airlines</span>
          </div>
          <a href="#contact" class="inline-flex items-center gap-1.5 text-xs font-bold text-white/80 hover:text-[#c8102e] transition-colors duration-200">
            Enquire now <svg class="w-3.5 h-3.5 transition-transform duration-200 group-hover:translate-x-1" 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>
        </div>
      </div>

      <!-- 02 Ocean Freight -->
      <div class="service-card svc-cinematic rounded-2xl overflow-hidden relative group">
        <div class="svc-img absolute inset-0" style="background-image:url('https://images.unsplash.com/photo-1634638022845-1ab614a94128?auto=format&fit=crop&w=1600&q=80')"></div>
        <div class="svc-overlay absolute inset-0"></div>
        <div class="relative z-10 flex flex-col justify-end h-full p-8 lg:p-10">
          <span class="text-[12px] font-bold tracking-[0.28em] uppercase text-[#c8102e] mb-3 block">02 — Ocean Freight</span>
          <h3 class="font-display font-bold text-white leading-tight mb-3" style="font-size:clamp(1.6rem,3vw,2.4rem)">Ocean Freight</h3>
          <p class="text-sm lg:text-[0.95rem] text-white/65 leading-relaxed mb-5 max-w-lg">FCL &amp; LCL on all major trade lanes. Competitive rates through carrier partnerships, door-to-door container management and port-to-port visibility.</p>
          <div class="svc-tags flex flex-wrap gap-2 mb-6">
            <span class="svc-tag">FCL &amp; LCL</span>
            <span class="svc-tag">Breakbulk</span>
            <span class="svc-tag">Port-to-Port</span>
            <span class="svc-tag">30+ Carriers</span>
          </div>
          <a href="#contact" class="inline-flex items-center gap-1.5 text-xs font-bold text-white/80 hover:text-[#c8102e] transition-colors duration-200">
            Enquire now <svg class="w-3.5 h-3.5 transition-transform duration-200 group-hover:translate-x-1" 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>
        </div>
      </div>

      <!-- 03 Customs & Compliance -->
      <div class="service-card svc-cinematic rounded-2xl overflow-hidden relative group">
        <div class="svc-img absolute inset-0" style="background-image:url('https://images.unsplash.com/photo-1645736315000-6f788915923b?auto=format&fit=crop&w=1600&q=80')"></div>
        <div class="svc-overlay absolute inset-0"></div>
        <div class="relative z-10 flex flex-col justify-end h-full p-8 lg:p-10">
          <span class="text-[12px] font-bold tracking-[0.28em] uppercase text-[#c8102e] mb-3 block">03 — Customs &amp; Compliance</span>
          <h3 class="font-display font-bold text-white leading-tight mb-3" style="font-size:clamp(1.6rem,3vw,2.4rem)">Customs &amp; Compliance</h3>
          <p class="text-sm lg:text-[0.95rem] text-white/65 leading-relaxed mb-5 max-w-lg">Expert brokerage, HS classification and trade compliance — navigating regulatory complexity so your cargo moves uninterrupted across every corridor.</p>
          <div class="svc-tags flex flex-wrap gap-2 mb-6">
            <span class="svc-tag">Import / Export</span>
            <span class="svc-tag">HS Classification</span>
            <span class="svc-tag">Duty Drawback</span>
            <span class="svc-tag">Trade Compliance</span>
          </div>
          <a href="#contact" class="inline-flex items-center gap-1.5 text-xs font-bold text-white/80 hover:text-[#c8102e] transition-colors duration-200">
            Enquire now <svg class="w-3.5 h-3.5 transition-transform duration-200 group-hover:translate-x-1" 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>
        </div>
      </div>

      <!-- 04 Warehousing -->
      <div class="service-card svc-cinematic rounded-2xl overflow-hidden relative group">
        <div class="svc-img absolute inset-0" style="background-image:url('https://images.unsplash.com/photo-1685119166946-d4050647b0e3?auto=format&fit=crop&w=1600&q=80')"></div>
        <div class="svc-overlay absolute inset-0"></div>
        <div class="relative z-10 flex flex-col justify-end h-full p-8 lg:p-10">
          <span class="text-[12px] font-bold tracking-[0.28em] uppercase text-[#c8102e] mb-3 block">04 — Warehousing</span>
          <h3 class="font-display font-bold text-white leading-tight mb-3" style="font-size:clamp(1.6rem,3vw,2.4rem)">Warehousing &amp; Distribution</h3>
          <p class="text-sm lg:text-[0.95rem] text-white/65 leading-relaxed mb-5 max-w-lg">Strategic fulfillment centers with real-time inventory management, pick &amp; pack, cold-chain storage, and on-demand last-mile distribution.</p>
          <div class="svc-tags flex flex-wrap gap-2 mb-6">
            <span class="svc-tag">Cold Chain</span>
            <span class="svc-tag">WMS Tracking</span>
            <span class="svc-tag">Cross-Docking</span>
            <span class="svc-tag">Pick &amp; Pack</span>
          </div>
          <a href="#contact" class="inline-flex items-center gap-1.5 text-xs font-bold text-white/80 hover:text-[#c8102e] transition-colors duration-200">
            Enquire now <svg class="w-3.5 h-3.5 transition-transform duration-200 group-hover:translate-x-1" 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>
        </div>
      </div>

      <!-- 05 Ground Transport -->
      <div class="service-card svc-cinematic rounded-2xl overflow-hidden relative group">
        <div class="svc-img absolute inset-0" style="background-image:url('https://images.unsplash.com/photo-1742858492775-8f58f645aa12?auto=format&fit=crop&w=1600&q=80')"></div>
        <div class="svc-overlay absolute inset-0"></div>
        <div class="relative z-10 flex flex-col justify-end h-full p-8 lg:p-10">
          <span class="text-[12px] font-bold tracking-[0.28em] uppercase text-[#c8102e] mb-3 block">05 — Ground Transport</span>
          <h3 class="font-display font-bold text-white leading-tight mb-3" style="font-size:clamp(1.6rem,3vw,2.4rem)">Ground Transport</h3>
          <p class="text-sm lg:text-[0.95rem] text-white/65 leading-relaxed mb-5 max-w-lg">FTL &amp; LTL with GPS-tracked fleets across South Asia &amp; the Middle East — cross-border expertise and specialised over-dimensional loads.</p>
          <div class="svc-tags flex flex-wrap gap-2 mb-6">
            <span class="svc-tag">GPS Tracked</span>
            <span class="svc-tag">Cross-Border</span>
            <span class="svc-tag">FTL &amp; LTL</span>
            <span class="svc-tag">ODC Cargo</span>
          </div>
          <a href="#contact" class="inline-flex items-center gap-1.5 text-xs font-bold text-white/80 hover:text-[#c8102e] transition-colors duration-200">
            Enquire now <svg class="w-3.5 h-3.5 transition-transform duration-200 group-hover:translate-x-1" 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>
        </div>
      </div>

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

<!-- ═══════════════════════════════════════════════════════════
     WHY CHOOSE US — horizontal stat rows + text columns
═══════════════════════════════════════════════════════════ -->
<section id="why" class="bg-[#f5f7ff] relative overflow-hidden">
  <div class="absolute inset-0 grid-overlay"></div>
  <div class="relative z-10 max-w-[1400px] mx-auto px-6 sm:px-10 pt-16 lg:pt-20 pb-24 lg:pb-40">

    <!-- Header (mb-8, trimmed from mb-20 — was adding to the scroll distance before the
         pinned stat cards below engage; see main.js comment on the stat cards pin) -->
    <div class="grid lg:grid-cols-2 gap-10 mb-8 zoom-reveal">
      <div>
        <span class="section-label">Why Choose Us</span>
        <h2 class="font-display font-extrabold text-[#0c1427] leading-[1.04] tracking-tight" style="font-size:clamp(2.6rem,5vw,4.8rem)">
          The numbers tell<br/>the <span class="text-gradient-red">real story.</span>
        </h2>
      </div>
      <div class="flex items-end">
        <p class="text-[#64748b] text-base lg:text-lg leading-relaxed">Fifteen years of building trust through consistent execution — measured in on-time deliveries and shipments that arrive exactly as planned.</p>
      </div>
    </div>

    <!-- Stat cards — mobile/tablet: simple stacked grid, no positioning games. -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-24 lg:hidden">
      <div class="stat-card bg-white rounded-3xl border border-[#e8ecf5] overflow-hidden" style="box-shadow:0 20px 50px -20px rgba(26,45,110,.18)">
        <img src="{{ asset('images/world.webp') }}" alt="World map countries served" class="w-full h-32 object-cover"/>
        <div class="p-6">
          <div class="font-display font-black text-[#c8102e] counter-trigger" style="font-size:2.5rem;line-height:1;font-variant-numeric:tabular-nums" data-target="50" data-suffix="+">50+</div>
          <div class="font-display font-bold text-[#0c1427] text-base mt-2 mb-1.5">Countries Served</div>
          <p class="text-sm text-[#64748b] leading-relaxed mb-3">Active operations across Asia, Middle East, Europe &amp; Americas — 4 continents, one accountable team</p>
          <div class="text-[11px] text-[#c8102e]/70 uppercase tracking-[0.16em] font-medium">Asia · Middle East · Europe · Americas</div>
        </div>
      </div>
      <div class="stat-card bg-white rounded-3xl border border-[#e8ecf5] overflow-hidden" style="box-shadow:0 20px 50px -20px rgba(26,45,110,.18)">
        <img src="{{ asset('images/cargo-ship.webp') }}" alt="Cargo ship at sea" class="w-full h-32 object-cover"/>
        <div class="p-6">
          <div class="font-display font-black text-[#c8102e] counter-trigger" style="font-size:2.5rem;line-height:1;font-variant-numeric:tabular-nums" data-target="15000" data-suffix="+">15,000+</div>
          <div class="font-display font-bold text-[#0c1427] text-base mt-2 mb-1.5">Shipments Delivered</div>
          <p class="text-sm text-[#64748b] leading-relaxed mb-3">Across all modes since founding in 2009 — every shipment treated like the most important one</p>
          <div class="text-[11px] text-[#c8102e]/70 uppercase tracking-[0.16em] font-medium">Air · Ocean · Road · Customs</div>
        </div>
      </div>
      <div class="stat-card bg-white rounded-3xl border border-[#e8ecf5] overflow-hidden" style="box-shadow:0 20px 50px -20px rgba(26,45,110,.18)">
        <img src="{{ asset('images/clock-check.webp') }}" alt="On-time delivery clock" class="w-full h-32 object-cover"/>
        <div class="p-6">
          <div class="font-display font-black text-[#c8102e]" style="font-size:2.5rem;line-height:1">99.8%</div>
          <div class="font-display font-bold text-[#0c1427] text-base mt-2 mb-1.5">On-Time Delivery Rate</div>
          <p class="text-sm text-[#64748b] leading-relaxed mb-3">Industry-leading reliability across all modes — measured, published, and backed by client contracts</p>
          <div class="text-[11px] text-[#c8102e]/70 uppercase tracking-[0.16em] font-medium">ISO 9001:2015 Certified</div>
        </div>
      </div>
      <div class="stat-card bg-white rounded-3xl border border-[#e8ecf5] overflow-hidden" style="box-shadow:0 20px 50px -20px rgba(26,45,110,.18)">
        <img src="{{ asset('images/network-world.webp') }}" alt="Global network map" class="w-full h-32 object-cover"/>
        <div class="p-6">
          <div class="font-display font-black text-[#c8102e] counter-trigger" style="font-size:2.5rem;line-height:1;font-variant-numeric:tabular-nums" data-target="200" data-suffix="+">200+</div>
          <div class="font-display font-bold text-[#0c1427] text-base mt-2 mb-1.5">Partner Agents Worldwide</div>
          <p class="text-sm text-[#64748b] leading-relaxed mb-3">Spanning every major trade corridor — local knowledge with global scale, precisely when you need it</p>
          <div class="text-[11px] text-[#c8102e]/70 uppercase tracking-[0.16em] font-medium">50+ Countries</div>
        </div>
      </div>
    </div>

    <!-- Stat cards — desktop: scattered along a diagonal (bottom-right → top-left), animated
         in via scroll (see main.js). This block is PINNED while its animation plays — earlier it
         scrolled normally past the viewport, which meant card4 (top of the block) could end up
         scrolled behind the fixed navbar before card1's entrance had even finished. Pinning holds
         the whole block in view for the animation's scroll range, same fix pattern as the How It
         Works progress bar. lg:pt-24 clears the fixed navbar (~82px) with a small margin, trimmed
         down from pt-28 to pull the cards up and cut the empty space above them a bit.
         Cards are 240px wide, left positions are % (0/25.7/51.3/76.3, see each card's
         comment) so the diagonal stretches proportionally with the container at any
         viewport instead of the gap changing unevenly between cards. Still tight right
         at the lg (1024px) floor itself (~944px usable) where 4x240px cards mathematically
         can't all fit with a gap — see main.js comment for the exact numbers and that
         accepted tradeoff. -->
    <div class="hidden lg:block relative mb-24 lg:pt-24" id="why-stat-cards-desktop" style="height:600px">

      <!-- Card width is also % now (23.53%, was fixed 240px) — width and position
           scale together so the 4-card block always spans exactly the container's
           full width (card1's right edge lands at exactly 100%) at any viewport,
           with proportional ~1.96% gaps in between. See card 1's comment below for
           why position alone (fixed width) wasn't enough. -->
      <!-- Card 4: Partner Agents — top-left -->
      <div id="stat-card-4" class="stat-card absolute z-10 bg-white rounded-3xl border border-[#e8ecf5] overflow-hidden" style="top:0; left:0%; width:23.53%; box-shadow:0 20px 50px -20px rgba(26,45,110,.18)">
        <img src="{{ asset('images/network-world.webp') }}" alt="Global network map" class="w-full h-28 object-cover"/>
        <div class="p-5">
          <div class="font-display font-black text-[#c8102e] counter-trigger" style="font-size:2.25rem;line-height:1;font-variant-numeric:tabular-nums" data-target="200" data-suffix="+">200+</div>
          <div class="font-display font-bold text-[#0c1427] text-base mt-2 mb-1.5">Partner Agents Worldwide</div>
          <p class="text-sm text-[#64748b] leading-relaxed mb-3">Spanning every major trade corridor — local knowledge with global scale, precisely when you need it</p>
          <div class="text-[11px] text-[#c8102e]/70 uppercase tracking-[0.16em] font-medium">50+ Countries</div>
        </div>
      </div>

      <!-- Card 3: On-Time Delivery Rate — diagonal step 2 -->
      <div id="stat-card-3" class="stat-card absolute z-20 bg-white rounded-3xl border border-[#e8ecf5] overflow-hidden" style="top:90px; left:25.49%; width:23.53%; box-shadow:0 20px 50px -20px rgba(26,45,110,.18)">
        <img src="{{ asset('images/clock-check.webp') }}" alt="On-time delivery clock" class="w-full h-28 object-cover"/>
        <div class="p-5">
          <div class="font-display font-black text-[#c8102e]" style="font-size:2.25rem;line-height:1">99.8%</div>
          <div class="font-display font-bold text-[#0c1427] text-base mt-2 mb-1.5">On-Time Delivery Rate</div>
          <p class="text-sm text-[#64748b] leading-relaxed mb-3">Industry-leading reliability across all modes — measured, published, and backed by client contracts</p>
          <div class="text-[11px] text-[#c8102e]/70 uppercase tracking-[0.16em] font-medium">ISO 9001:2015 Certified</div>
        </div>
      </div>

      <!-- Card 2: Shipments Delivered — diagonal step 3 -->
      <div id="stat-card-2" class="stat-card absolute z-30 bg-white rounded-3xl border border-[#e8ecf5] overflow-hidden" style="top:180px; left:50.98%; width:23.53%; box-shadow:0 20px 50px -20px rgba(26,45,110,.18)">
        <img src="{{ asset('images/cargo-ship.webp') }}" alt="Cargo ship at sea" class="w-full h-28 object-cover"/>
        <div class="p-5">
          <div class="font-display font-black text-[#c8102e] counter-trigger" style="font-size:2.25rem;line-height:1;font-variant-numeric:tabular-nums" data-target="15000" data-suffix="+">15,000+</div>
          <div class="font-display font-bold text-[#0c1427] text-base mt-2 mb-1.5">Shipments Delivered</div>
          <p class="text-sm text-[#64748b] leading-relaxed mb-3">Across all modes since founding in 2009 — every shipment treated like the most important one</p>
          <div class="text-[11px] text-[#c8102e]/70 uppercase tracking-[0.16em] font-medium">Air · Ocean · Road · Customs</div>
        </div>
      </div>

      <!-- Card 1: Countries Served — bottom-right. Width 23.53% + 3 gaps of ~1.96%
           = 4×23.53 + 3×1.96 = 100%, so this card's right edge lands exactly at
           the container's right edge (left:76.47%) at every viewport width, no
           residual margin. Earlier attempts: fixed px left-steps + right:0 for
           this card kept it flush right but made the gap before it grow unbounded
           on wide screens (huge gap, others stayed a fixed 20px); switching that
           right:0 to a fixed 780px step fixed the gap but then left a stray empty
           margin to the right of this card instead, since the block's total width
           no longer grew with the container. Scaling width % together with
           position % avoids both — the block always exactly fills the container. -->
      <div id="stat-card-1" class="stat-card absolute z-40 bg-white rounded-3xl border border-[#e8ecf5] overflow-hidden" style="bottom:0; left:76.47%; width:23.53%; box-shadow:0 20px 50px -20px rgba(26,45,110,.18)">
        <img src="{{ asset('images/world.webp') }}" alt="World map countries served" class="w-full h-28 object-cover"/>
        <div class="p-5">
          <div class="font-display font-black text-[#c8102e] counter-trigger" style="font-size:2.25rem;line-height:1;font-variant-numeric:tabular-nums" data-target="50" data-suffix="+">50+</div>
          <div class="font-display font-bold text-[#0c1427] text-base mt-2 mb-1.5">Countries Served</div>
          <p class="text-sm text-[#64748b] leading-relaxed mb-3">Active operations across Asia, Middle East, Europe &amp; Americas — 4 continents, one accountable team</p>
          <div class="text-[11px] text-[#c8102e]/70 uppercase tracking-[0.16em] font-medium">Asia · Middle East · Europe · Americas</div>
        </div>
      </div>

    </div>

    <!-- Capabilities: interactive showcase (desktop/tablet — md and up) -->
    <div class="why-showcase zoom-reveal hidden md:grid relative lg:grid-cols-[240px_280px_1fr] gap-10 lg:gap-14 items-center bg-white rounded-[2rem] border border-[#e8ecf5] p-8 sm:p-12 lg:p-16">

      <!-- Left: vertical label list -->
      <div class="why-label-list flex flex-row lg:flex-col flex-wrap gap-x-7 gap-y-3 lg:gap-y-5">
        <button type="button" class="why-label-item active font-display text-base lg:text-lg text-left" data-index="0">24/7 Dedicated Support</button>
        <button type="button" class="why-label-item font-display text-base lg:text-lg text-left" data-index="1">Real-Time Visibility</button>
        <button type="button" class="why-label-item font-display text-base lg:text-lg text-left" data-index="2">ISO 9001:2015 Certified</button>
        <button type="button" class="why-label-item font-display text-base lg:text-lg text-left" data-index="3">Competitive Pricing</button>
        <button type="button" class="why-label-item font-display text-base lg:text-lg text-left" data-index="4">Scalable Operations</button>
        <button type="button" class="why-label-item font-display text-base lg:text-lg text-left" data-index="5">Trusted 15+ Years</button>
      </div>

      <!-- Center: image frame -->
      <div class="why-icon-frame relative mx-auto w-full max-w-[260px] aspect-square rounded-[1.75rem] bg-[#f5f7ff] border border-[#e8ecf5] shadow-[0_25px_70px_-30px_rgba(26,45,110,.25)] overflow-hidden">
        <div class="why-icon-item active" data-index="0">
          <img class="why-icon w-full h-full object-cover rounded-[1.75rem]" src="{{ asset('images/support.webp') }}" alt="24/7 Dedicated Support" loading="lazy"/>
        </div>
        <div class="why-icon-item" data-index="1">
          <img class="why-icon w-full h-full object-cover rounded-[1.75rem]" src="{{ asset('images/realtime-monitoring.webp') }}" alt="Real-Time Visibility" loading="lazy"/>
        </div>
        <div class="why-icon-item" data-index="2">
          <img class="why-icon w-full h-full object-cover rounded-[1.75rem]" src="{{ asset('images/iso.webp') }}" alt="ISO 9001:2015 Certified" loading="lazy"/>
        </div>
        <div class="why-icon-item" data-index="3">
          <img class="why-icon w-full h-full object-cover rounded-[1.75rem]" src="{{ asset('images/competitive-pricing.webp') }}" alt="Competitive Pricing" loading="lazy"/>
        </div>
        <div class="why-icon-item" data-index="4">
          <img class="why-icon w-full h-full object-cover rounded-[1.75rem]" src="{{ asset('images/scalable-operations.webp') }}" alt="Scalable Operations" loading="lazy"/>
        </div>
        <div class="why-icon-item" data-index="5">
          <img class="why-icon w-full h-full object-cover rounded-[1.75rem]" src="{{ asset('images/trusted-0experience.webp') }}" alt="Trusted 15+ Years" loading="lazy"/>
        </div>
      </div>

      <!-- Right: active item detail -->
      <div class="why-detail relative">
        <div class="why-detail-item active" data-index="0">
          <div class="why-detail-eyebrow text-[11px] font-bold text-[#c8102e] tracking-[0.28em] uppercase mb-4">01 — 24/7 Dedicated Support</div>
          <h3 class="why-detail-text font-display font-extrabold text-[#0c1427] leading-[1.2]" style="font-size:clamp(1.5rem,2.4vw,2.2rem)">A real logistics specialist on your account — available around the clock, not a ticket queue.</h3>
        </div>
        <div class="why-detail-item" data-index="1">
          <div class="why-detail-eyebrow text-[11px] font-bold text-[#c8102e] tracking-[0.28em] uppercase mb-4">02 — Real-Time Visibility</div>
          <h3 class="why-detail-text font-display font-extrabold text-[#0c1427] leading-[1.2]" style="font-size:clamp(1.5rem,2.4vw,2.2rem)">Live tracking with proactive milestone alerts — you know before you ask.</h3>
        </div>
        <div class="why-detail-item" data-index="2">
          <div class="why-detail-eyebrow text-[11px] font-bold text-[#c8102e] tracking-[0.28em] uppercase mb-4">03 — ISO 9001:2015 Certified</div>
          <h3 class="why-detail-text font-display font-extrabold text-[#0c1427] leading-[1.2]" style="font-size:clamp(1.5rem,2.4vw,2.2rem)">Every process globally audited. Quality is not a promise here — it is documented.</h3>
        </div>
        <div class="why-detail-item" data-index="3">
          <div class="why-detail-eyebrow text-[11px] font-bold text-[#c8102e] tracking-[0.28em] uppercase mb-4">04 — Competitive Pricing</div>
          <h3 class="why-detail-text font-display font-extrabold text-[#0c1427] leading-[1.2]" style="font-size:clamp(1.5rem,2.4vw,2.2rem)">Volume contracts with 45+ airlines and 30+ carriers passed directly to you.</h3>
        </div>
        <div class="why-detail-item" data-index="4">
          <div class="why-detail-eyebrow text-[11px] font-bold text-[#c8102e] tracking-[0.28em] uppercase mb-4">05 — Scalable Operations</div>
          <h3 class="why-detail-text font-display font-extrabold text-[#0c1427] leading-[1.2]" style="font-size:clamp(1.5rem,2.4vw,2.2rem)">From single shipments to full annual logistics contracts — we scale with your business.</h3>
        </div>
        <div class="why-detail-item" data-index="5">
          <div class="why-detail-eyebrow text-[11px] font-bold text-[#c8102e] tracking-[0.28em] uppercase mb-4">06 — Trusted 15+ Years</div>
          <h3 class="why-detail-text font-display font-extrabold text-[#0c1427] leading-[1.2]" style="font-size:clamp(1.5rem,2.4vw,2.2rem)">Thousands of businesses across 4 continents trust A1 Movex as their logistics backbone.</h3>
        </div>
      </div>

      <!-- Counter indicator -->
      <div class="why-counter absolute bottom-6 right-6 lg:bottom-8 lg:right-8 w-14 h-14 rounded-full bg-white border border-[#e8ecf5] shadow-sm flex items-center justify-center">
        <span class="font-display font-bold text-sm"><span class="why-counter-current text-[#c8102e]">1</span><span class="text-[#94a3b8]">/6</span></span>
      </div>
    </div>

    <!-- Capabilities: static stacked list (mobile — below md, no scroll interactivity) -->
    <div class="why-mobile-list md:hidden flex flex-col gap-4">
      <div class="zoom-reveal bg-white rounded-2xl p-6 border border-[#e8ecf5] flex gap-4 items-start">
        <div class="w-12 h-12 rounded-xl bg-[#f5f7ff] flex items-center justify-center flex-shrink-0">
          <svg class="w-6 h-6 text-[#c8102e]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"/></svg>
        </div>
        <div>
          <h4 class="font-display font-bold text-[#0c1427] text-base mb-1.5">24/7 Dedicated Support</h4>
          <p class="text-sm text-[#64748b] leading-relaxed">A real logistics specialist on your account — available around the clock, not a ticket queue.</p>
        </div>
      </div>
      <div class="zoom-reveal bg-white rounded-2xl p-6 border border-[#e8ecf5] flex gap-4 items-start">
        <div class="w-12 h-12 rounded-xl bg-[#f5f7ff] flex items-center justify-center flex-shrink-0">
          <svg class="w-6 h-6 text-[#c8102e]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/></svg>
        </div>
        <div>
          <h4 class="font-display font-bold text-[#0c1427] text-base mb-1.5">Real-Time Visibility</h4>
          <p class="text-sm text-[#64748b] leading-relaxed">Live tracking with proactive milestone alerts — you know before you ask.</p>
        </div>
      </div>
      <div class="zoom-reveal bg-white rounded-2xl p-6 border border-[#e8ecf5] flex gap-4 items-start">
        <div class="w-12 h-12 rounded-xl bg-[#f5f7ff] flex items-center justify-center flex-shrink-0">
          <svg class="w-6 h-6 text-[#c8102e]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6"><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>
        <div>
          <h4 class="font-display font-bold text-[#0c1427] text-base mb-1.5">ISO 9001:2015 Certified</h4>
          <p class="text-sm text-[#64748b] leading-relaxed">Every process globally audited. Quality is not a promise here — it is documented.</p>
        </div>
      </div>
      <div class="zoom-reveal bg-white rounded-2xl p-6 border border-[#e8ecf5] flex gap-4 items-start">
        <div class="w-12 h-12 rounded-xl bg-[#f5f7ff] flex items-center justify-center flex-shrink-0">
          <svg class="w-6 h-6 text-[#c8102e]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        </div>
        <div>
          <h4 class="font-display font-bold text-[#0c1427] text-base mb-1.5">Competitive Pricing</h4>
          <p class="text-sm text-[#64748b] leading-relaxed">Volume contracts with 45+ airlines and 30+ carriers passed directly to you.</p>
        </div>
      </div>
      <div class="zoom-reveal bg-white rounded-2xl p-6 border border-[#e8ecf5] flex gap-4 items-start">
        <div class="w-12 h-12 rounded-xl bg-[#f5f7ff] flex items-center justify-center flex-shrink-0">
          <svg class="w-6 h-6 text-[#c8102e]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/></svg>
        </div>
        <div>
          <h4 class="font-display font-bold text-[#0c1427] text-base mb-1.5">Scalable Operations</h4>
          <p class="text-sm text-[#64748b] leading-relaxed">From single shipments to full annual logistics contracts — we scale with your business.</p>
        </div>
      </div>
      <div class="zoom-reveal bg-white rounded-2xl p-6 border border-[#e8ecf5] flex gap-4 items-start">
        <div class="w-12 h-12 rounded-xl bg-[#f5f7ff] flex items-center justify-center flex-shrink-0">
          <svg class="w-6 h-6 text-[#c8102e]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        </div>
        <div>
          <h4 class="font-display font-bold text-[#0c1427] text-base mb-1.5">Trusted 15+ Years</h4>
          <p class="text-sm text-[#64748b] leading-relaxed">Thousands of businesses across 4 continents trust A1 Movex as their logistics backbone.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     HOW IT WORKS — header + full-width 4-column step row
═══════════════════════════════════════════════════════════ -->
<section id="process" class="bg-[#f5f7ff] relative overflow-hidden">
  <div class="absolute inset-0 grid-overlay"></div>
  <div class="relative z-10 max-w-[1400px] mx-auto px-6 sm:px-10 py-24 lg:py-40">

    <!-- Header -->
    <div class="max-w-2xl mb-16 lg:mb-20">
      <span class="section-label">How It Works</span>
      <h2 class="font-display font-extrabold text-[#0c1427] leading-[1.04] tracking-tight mb-6" style="font-size:clamp(2.6rem,4.5vw,4.2rem)">
        Enquiry to delivery<br/>in <span class="text-gradient-red">four steps.</span>
      </h2>
      <p class="text-[#64748b] text-base lg:text-lg leading-relaxed mb-10 max-w-md">Fifteen years of experience distilled into a process that is fast, transparent, and built to handle the unexpected.</p>
      <a href="#contact" class="btn-primary inline-flex items-center gap-2.5 font-display font-bold text-white px-7 py-3.5 rounded-xl text-sm">
        Start a Shipment
        <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>
    </div>

    <!-- Pinned interactive block: progress bar + steps row.
         Kept separate from the header above so the pin engages only once this
         (viewport-sized) block reaches the top — the header scrolls normally first.
         md:pt-40 clears the fixed navbar (~82px) plus the puck's glow bleed (~62px
         above the line) so the floating object never sits behind the navbar. -->
    <div id="process-pin-target" class="md:pt-40">

    <!-- Progress bar (md+ only — mobile shows the steps as a plain static list) -->
    <div class="process-progress-track mb-14 lg:mb-16 hidden md:block" id="process-progress-track">
      <div class="process-progress-fill" id="process-progress-fill"></div>
      <div class="process-progress-dots">
        <span class="process-progress-dot active"></span>
        <span class="process-progress-dot"></span>
        <span class="process-progress-dot"></span>
        <span class="process-progress-dot"></span>
      </div>
      <div class="process-progress-puck" id="process-progress-puck" style="left:0%">
        <div class="process-progress-puck-glow"></div>
        <div class="process-progress-puck-box">
          <!-- Enquiry: document/form -->
          <svg class="process-puck-icon active" data-step="0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/>
          </svg>
          <!-- Proposal: checklist -->
          <svg class="process-puck-icon" data-step="1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/>
          </svg>
          <!-- Execution: gear -->
          <svg class="process-puck-icon" data-step="2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"/>
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
          </svg>
          <!-- Delivery: checkmark -->
          <svg class="process-puck-icon" data-step="3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- Steps row -->
    <div class="process-row grid grid-cols-1 lg:grid-cols-4 divide-y lg:divide-y-0 lg:divide-x divide-[#1a2d6e]/10" id="process-row">

      <!-- Step 01 -->
      <div class="process-step-v active process-col py-8 first:pt-0 last:pb-0 lg:py-0 lg:px-9 lg:first:pl-0 lg:last:pr-0">
        <div class="font-display font-black text-[#1a2d6e]/22 text-[2.75rem] leading-none mb-6">01</div>
        <div class="text-[11px] font-bold text-[#c8102e]/60 tracking-[0.22em] uppercase mb-2">Enquiry</div>
        <h3 class="font-display font-bold text-[#0c1427] text-xl mb-3">Submit your enquiry</h3>
        <p class="text-sm text-[#64748b] leading-relaxed">Share origin, destination, cargo type and timeline. Our team reviews within 2 hours and reaches out with initial options.</p>
      </div>

      <!-- Step 02 -->
      <div class="process-step-v process-col py-8 first:pt-0 last:pb-0 lg:py-0 lg:px-9 lg:first:pl-0 lg:last:pr-0">
        <div class="font-display font-black text-[#1a2d6e]/22 text-[2.75rem] leading-none mb-6">02</div>
        <div class="text-[11px] font-bold text-[#c8102e]/60 tracking-[0.22em] uppercase mb-2">Proposal</div>
        <h3 class="font-display font-bold text-[#0c1427] text-xl mb-3">Receive your tailored proposal</h3>
        <p class="text-sm text-[#64748b] leading-relaxed">A custom plan — routing options, transit times, and transparent all-in pricing. No hidden fees, no surprises.</p>
      </div>

      <!-- Step 03 -->
      <div class="process-step-v process-col py-8 first:pt-0 last:pb-0 lg:py-0 lg:px-9 lg:first:pl-0 lg:last:pr-0">
        <div class="font-display font-black text-[#1a2d6e]/22 text-[2.75rem] leading-none mb-6">03</div>
        <div class="text-[11px] font-bold text-[#c8102e]/60 tracking-[0.22em] uppercase mb-2">Execution</div>
        <h3 class="font-display font-bold text-[#0c1427] text-xl mb-3">We handle everything</h3>
        <p class="text-sm text-[#64748b] leading-relaxed">Pickup, documentation, customs clearance, and carrier booking — we manage every detail from origin to destination.</p>
      </div>

      <!-- Step 04 -->
      <div class="process-step-v process-col py-8 first:pt-0 last:pb-0 lg:py-0 lg:px-9 lg:first:pl-0 lg:last:pr-0">
        <div class="font-display font-black text-[#c8102e]/30 text-[2.75rem] leading-none mb-6">04</div>
        <div class="text-[11px] font-bold text-[#c8102e]/60 tracking-[0.22em] uppercase mb-2">Delivery</div>
        <h3 class="font-display font-bold text-[#0c1427] text-xl mb-3">Delivered. Confirmed.</h3>
        <p class="text-sm text-[#64748b] leading-relaxed">Real-time tracking, proactive exception alerts, and a signed POD delivered to your inbox. Every time.</p>
      </div>

    </div>

    </div>
    <!-- /process-pin-target -->

  </div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     GLOBAL REACH — dark section (contrast break), no card grid
═══════════════════════════════════════════════════════════ -->
<section id="reach" class="bg-[#060c1b] relative overflow-hidden grain">
  <div class="absolute inset-0 grid-overlay-dark opacity-35"></div>
  <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[500px] pointer-events-none" style="background:radial-gradient(ellipse at center top,rgba(26,45,110,.3) 0%,transparent 65%)"></div>

  <div class="relative z-10 max-w-[1400px] mx-auto px-6 sm:px-10 py-24 lg:py-40">

    <!-- Header -->
    <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between mb-16 zoom-reveal">
      <div>
        <span class="section-label-dark section-label">Global Footprint</span>
        <h2 class="font-display font-extrabold text-white leading-[1.04] tracking-tight" style="font-size:clamp(2.6rem,5vw,4.8rem)">
          Wherever business<br/>takes you, <span class="text-gradient-red">we're there.</span>
        </h2>
      </div>
      <p class="text-white/42 text-base leading-relaxed max-w-xs mt-6 lg:mt-0 lg:mb-2">Active across every major trade corridor — from Mumbai to Manchester, Singapore to Sao Paulo.</p>
    </div>

    <!-- Interactive world map + stats panel. Map uses public/world.svg (real
         country geometry) as the base; marker positions are left/top % against
         the map's own aspect ratio (2000:857), so they track the map at any
         viewport width — never fixed px. Bubble diameter (--bubble-size, set
         in main.js) is proportional to data-value on a sqrt scale.
         Layout: map + stats side-by-side on wide screens (stats as a narrow
         vertical column beside the map), stacking to a 2x2 grid below the
         map on mobile/tablet via flex-col + grid-cols-2. -->
    <div class="flex flex-col lg:flex-row gap-8 lg:gap-6 items-stretch">
    <div class="reach-map-panel relative flex-1 min-w-0 rounded-[2rem] border border-white/[0.07] bg-white/[0.02] zoom-reveal" style="aspect-ratio:2000/857">
      <img src="{{ asset('world.svg') }}" alt="World map — regions we serve" class="absolute inset-0 w-full h-full object-contain opacity-80 pointer-events-none select-none" draggable="false"/>

      <!-- India, China & SE Asia — 20 -->
      <div class="reach-marker" data-region="asia-pacific" data-value="20" style="left:76%; top:39%">
        <div class="reach-marker-inner">
          <div class="reach-bubble">
            <span class="reach-connector"></span>
            <div class="reach-label">
              <span class="reach-label-number counter-trigger" data-target="20" data-suffix="">20</span> — India, China &amp; SE Asia
            </div>
          </div>
        </div>
      </div>

      <!-- UAE, KSA & East Africa — 12 -->
      <div class="reach-marker" data-region="middle-east-africa" data-value="12" style="left:62%; top:45%">
        <div class="reach-marker-inner">
          <div class="reach-bubble">
            <span class="reach-connector"></span>
            <div class="reach-label">
              <span class="reach-label-number counter-trigger" data-target="12" data-suffix="">12</span> — UAE, KSA &amp; East Africa
            </div>
          </div>
        </div>
      </div>

      <!-- Germany, UK & Benelux — 10 -->
      <div class="reach-marker" data-region="europe" data-value="10" style="left:50%; top:20%">
        <div class="reach-marker-inner">
          <div class="reach-bubble">
            <span class="reach-connector"></span>
            <div class="reach-label">
              <span class="reach-label-number counter-trigger" data-target="10" data-suffix="">10</span> — Germany, UK &amp; Benelux
            </div>
          </div>
        </div>
      </div>

      <!-- USA, Canada & Brazil — 8 -->
      <div class="reach-marker" data-region="americas" data-value="8" style="left:21%; top:27%">
        <div class="reach-marker-inner">
          <div class="reach-bubble">
            <span class="reach-connector"></span>
            <div class="reach-label">
              <span class="reach-label-number counter-trigger" data-target="8" data-suffix="">8</span> — USA, Canada &amp; Brazil
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Stats column (Option B) — narrow vertical side panel next to the map
         on lg+ screens; 2x2 grid stacked below the map on mobile/tablet. -->
    <div class="reach-stats-side grid grid-cols-2 lg:grid-cols-1 gap-px lg:w-[210px] shrink-0 rounded-2xl overflow-hidden border border-white/[0.07] bg-white/[0.07]">
      <div class="reach-stat bg-[#0a1226] py-7 px-5 lg:flex-1 lg:flex lg:flex-col lg:justify-center text-center lg:text-left">
        <div class="font-display font-black text-white mb-1 counter-trigger" style="font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1" data-target="200" data-suffix="+">0+</div>
        <div class="text-[10px] font-semibold text-white/40 uppercase tracking-[0.16em]">Partner Agents</div>
      </div>
      <div class="reach-stat bg-[#0a1226] py-7 px-5 lg:flex-1 lg:flex lg:flex-col lg:justify-center text-center lg:text-left">
        <div class="font-display font-black text-white mb-1 counter-trigger" style="font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1" data-target="8" data-suffix="+">0+</div>
        <div class="text-[10px] font-semibold text-white/40 uppercase tracking-[0.16em]">Own Offices</div>
      </div>
      <div class="reach-stat bg-[#0a1226] py-7 px-5 lg:flex-1 lg:flex lg:flex-col lg:justify-center text-center lg:text-left">
        <div class="font-display font-black text-white mb-1 counter-trigger" style="font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1" data-target="45" data-suffix="+">0+</div>
        <div class="text-[10px] font-semibold text-white/40 uppercase tracking-[0.16em]">Airline Partners</div>
      </div>
      <div class="reach-stat bg-[#0a1226] py-7 px-5 lg:flex-1 lg:flex lg:flex-col lg:justify-center text-center lg:text-left">
        <div class="font-display font-black text-white mb-1 counter-trigger" style="font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1" data-target="30" data-suffix="+">0+</div>
        <div class="text-[10px] font-semibold text-white/40 uppercase tracking-[0.16em]">Ocean Carriers</div>
      </div>
    </div>
    </div>
  </div>
</section>

<!-- ═══════════════════════════════════════════════════════════
     TESTIMONIALS — carousel
═══════════════════════════════════════════════════════════ -->
<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">Client Stories</span>
        <h2 class="font-display font-extrabold text-[#0c1427] leading-[1.04] tracking-tight" style="font-size:clamp(2.6rem,5vw,4.8rem)">
          Trusted by businesses<br/>that cannot afford <span class="text-gradient-red">to fail.</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: Rahul Mehta -->
        <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">
            <div class="flex gap-1 mb-8">
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
            </div>
            <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)">
              "A1 Movex transformed our entire import operation. What used to take three weeks from origin now consistently clears in under ten days. Their customs team alone has saved us enormous time and operational cost."
            </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)">R</div>
              <div>
                <div class="font-display font-bold text-[#0c1427] text-base">Rahul Mehta</div>
                <div class="text-sm text-[#94a3b8] mt-0.5">VP Supply Chain — Apex Manufacturing 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: Sanjana Krishnan -->
        <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">
            <div class="flex gap-1 mb-8">
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
            </div>
            <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 ship perishable pharmaceutical goods — there is zero tolerance for error. A1 Movex cold-chain team has not missed a single delivery window in two years. That is the kind of partner you simply do not replace."
            </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)">S</div>
              <div>
                <div class="font-display font-bold text-[#0c1427] text-base">Sanjana Krishnan</div>
                <div class="text-sm text-[#94a3b8] mt-0.5">Head of Logistics — Delta Pharma Solutions</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: Arjun Nair -->
        <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">
            <div class="flex gap-1 mb-8">
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
              <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
            </div>
            <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)">
              "Their ocean freight rates to the EU were 18% below what we were paying. But the real value is the communication — we always know exactly where our cargo is, and they flag issues before we even ask."
            </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)">A</div>
              <div>
                <div class="font-display font-bold text-[#0c1427] text-base">Arjun Nair</div>
                <div class="text-sm text-[#94a3b8] mt-0.5">Director of Trade — Orbis Exports 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 — dark, dramatic
═══════════════════════════════════════════════════════════ -->
<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="#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:+910000000000" 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>

<!-- ═══════════════════════════════════════════════════════════
     CONTACT — light tinted
═══════════════════════════════════════════════════════════ -->
<section id="contact" class="bg-[#f5f7ff] py-24 lg:py-40">
  <div class="max-w-[1400px] mx-auto px-6 sm:px-10">
    <div class="grid lg:grid-cols-[1fr_1.1fr] gap-16 lg:gap-24 items-start">
      <div class="zoom-reveal">
        <img src="{{ asset('logo.webp') }}" alt="A1 Movex Global Services" class="h-12 w-auto mb-10"/>
        <h2 class="font-display font-extrabold text-[#0c1427] leading-[1.04] tracking-tight mb-5" style="font-size:clamp(2rem,4vw,3.2rem)">
          Let's move something<br/><span style="color:#1a2d6e">great together.</span>
        </h2>
        <p class="text-[#64748b] text-base leading-relaxed mb-12">A dedicated logistics specialist responds within 24 hours with a custom proposal — no templates, no automated replies.</p>
        <div class="space-y-5">
          <a href="mailto:info@a1movex.com" class="flex items-center gap-4 group">
            <div class="w-12 h-12 rounded-2xl flex items-center justify-center flex-shrink-0 transition-colors" style="background:rgba(26,45,110,.07)">
              <svg class="w-5 h-5" style="color:#1a2d6e" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.7"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/></svg>
            </div>
            <div>
              <div class="text-xs text-[#94a3b8] font-semibold tracking-wide mb-0.5">Email us</div>
              <span class="text-sm font-bold group-hover:text-[#c8102e] transition-colors" style="color:#1a2d6e">info@a1movex.com</span>
            </div>
          </a>
          <a href="tel:+910000000000" class="flex items-center gap-4 group">
            <div class="w-12 h-12 rounded-2xl flex items-center justify-center flex-shrink-0" style="background:rgba(26,45,110,.07)">
              <svg class="w-5 h-5" style="color:#1a2d6e" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.7"><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>
            </div>
            <div>
              <div class="text-xs text-[#94a3b8] font-semibold tracking-wide mb-0.5">Call us</div>
              <span class="text-sm font-bold group-hover:text-[#c8102e] transition-colors" style="color:#1a2d6e">+91 XXXX XXX XXX</span>
            </div>
          </a>
          <div class="flex items-start gap-4">
            <div class="w-12 h-12 rounded-2xl flex items-center justify-center flex-shrink-0" style="background:rgba(26,45,110,.07)">
              <svg class="w-5 h-5" style="color:#1a2d6e" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.7"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/></svg>
            </div>
            <div>
              <div class="text-xs text-[#94a3b8] font-semibold tracking-wide mb-0.5">Headquarters</div>
              <span class="text-sm font-bold" style="color:#1a2d6e">Mumbai, India — Global Operations</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Form -->
      <div class="bg-white rounded-3xl p-8 lg:p-10 border zoom-reveal" style="box-shadow:0 4px 48px -12px rgba(26,45,110,.09);border-color:rgba(26,45,110,.07)">
        <form class="space-y-5" onsubmit="return false">
          <div class="grid sm:grid-cols-2 gap-4">
            <div>
              <label class="text-xs font-semibold text-[#94a3b8] tracking-wide mb-2 block">First Name</label>
              <input type="text" placeholder="Rahul" class="w-full px-4 py-3.5 rounded-xl border text-sm text-[#0c1427] placeholder-[#cbd5e1] outline-none transition-all contact-input" style="border-color:rgba(26,45,110,.14)"/>
            </div>
            <div>
              <label class="text-xs font-semibold text-[#94a3b8] tracking-wide mb-2 block">Last Name</label>
              <input type="text" placeholder="Mehta" class="w-full px-4 py-3.5 rounded-xl border text-sm text-[#0c1427] placeholder-[#cbd5e1] outline-none transition-all contact-input" style="border-color:rgba(26,45,110,.14)"/>
            </div>
          </div>
          <div>
            <label class="text-xs font-semibold text-[#94a3b8] tracking-wide mb-2 block">Company</label>
            <input type="text" placeholder="Apex Manufacturing Ltd." class="w-full px-4 py-3.5 rounded-xl border text-sm text-[#0c1427] placeholder-[#cbd5e1] outline-none transition-all contact-input" style="border-color:rgba(26,45,110,.14)"/>
          </div>
          <div class="grid sm:grid-cols-2 gap-4">
            <div>
              <label class="text-xs font-semibold text-[#94a3b8] tracking-wide mb-2 block">Email</label>
              <input type="email" placeholder="you@company.com" class="w-full px-4 py-3.5 rounded-xl border text-sm text-[#0c1427] placeholder-[#cbd5e1] outline-none transition-all contact-input" style="border-color:rgba(26,45,110,.14)"/>
            </div>
            <div>
              <label class="text-xs font-semibold text-[#94a3b8] tracking-wide mb-2 block">Service Needed</label>
              <select class="w-full px-4 py-3.5 rounded-xl border text-sm text-[#64748b] outline-none transition-all bg-white appearance-none contact-input" style="border-color:rgba(26,45,110,.14)">
                <option value="">Select a service</option>
                <option>Air Freight</option>
                <option>Ocean Freight</option>
                <option>Road Transport</option>
                <option>Customs &amp; Compliance</option>
                <option>Warehousing</option>
                <option>End-to-end Solution</option>
              </select>
            </div>
          </div>
          <div>
            <label class="text-xs font-semibold text-[#94a3b8] tracking-wide mb-2 block">Tell us about your shipment</label>
            <textarea rows="4" placeholder="Origin, destination, cargo type, weight, timeline..." class="w-full px-4 py-3.5 rounded-xl border text-sm text-[#0c1427] placeholder-[#cbd5e1] outline-none transition-all resize-none contact-input" style="border-color:rgba(26,45,110,.14)"></textarea>
          </div>
          <button type="submit" class="btn-primary w-full font-display font-bold text-white py-4 rounded-xl text-base flex items-center justify-center gap-2.5">
            Send Enquiry
            <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>
          </button>
          <p class="text-center text-xs text-[#94a3b8]">We respond within 24 hours &middot; No spam, ever</p>
        </form>
      </div>
    </div>
  </div>
</section>

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