<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<template id="__bundler_thumbnail" data-bg-color="#000000">
  <svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
    <rect width="1200" height="800" fill="#000000"/>
    <path d="M600 230 L760 300 L760 430 C760 540 690 615 600 650 C510 615 440 540 440 430 L440 300 Z" fill="none" stroke="#0b77c0" stroke-width="6"/>
    <path d="M600 320 L690 360 L690 432 C690 500 650 540 600 560 C550 540 510 500 510 432 L510 360 Z" fill="none" stroke="#ffffff" stroke-width="4" opacity="0.5"/>
  </svg>
</template>
<x-dc>
<helmet>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,200;9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap" rel="stylesheet">
<script src="./image-slot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<style>
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#000;color:#fff;font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(11,119,192,0.35)}
@keyframes scrollCue{0%,100%{transform:translateY(0);opacity:0.35}50%{transform:translateY(7px);opacity:1}}
@keyframes hsPulse{0%{transform:scale(1);opacity:0.8}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
@keyframes flipIn{0%{transform:rotateY(-82deg);opacity:0}55%{opacity:1}100%{transform:rotateY(0deg);opacity:1}}
@keyframes sheen{0%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}
.svc-row::-webkit-scrollbar{height:6px}
.svc-row::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:3px}
.svc-row::-webkit-scrollbar-track{background:transparent}
.fleet-track::-webkit-scrollbar{display:none}
.fleet-track{scrollbar-width:none;-ms-overflow-style:none}
@keyframes radarPulse{0%{transform:scale(0.5);opacity:0.55}100%{transform:scale(1.9);opacity:0}}
input::placeholder{color:rgba(255,255,255,0.32)}
</style>
</helmet>
<div ref="{{ rootRef }}" id="top" style="position:relative;background:#000;overflow-x:hidden">

<!-- ░░ HEADER ░░ -->
<header style="position:fixed;top:0;left:0;width:100%;z-index:100">
  <div style="position:absolute;inset:0;background:rgba(7,8,11,0.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,0.07);opacity:{{ headerBg }};transition:opacity 0.45s ease;pointer-events:none"></div>
  <div style="position:relative;max-width:1320px;margin:0 auto;padding:16px 44px;display:flex;align-items:center;justify-content:space-between;gap:24px">
    <a href="#top" style="display:flex;align-items:center;text-decoration:none;flex-shrink:0">
      <img src="assets/mainstay-logo.png" alt="Mainstay Bulletproof" style="height:30px;width:auto;display:block"/>
    </a>
    <nav style="display:flex;align-items:center;gap:26px;font-size:13.5px;font-weight:400;color:rgba(255,255,255,0.66)">
      <a href="#advantage" style="color:inherit;text-decoration:none;transition:color .25s" style-hover="color:#fff">About</a>
      <a href="#services" style="color:inherit;text-decoration:none;transition:color .25s" style-hover="color:#fff">Services</a>
      <a href="#fleet" style="color:inherit;text-decoration:none;transition:color .25s" style-hover="color:#fff">Vehicles</a>
      <a href="#protection" style="color:inherit;text-decoration:none;transition:color .25s" style-hover="color:#fff">Protection</a>
      <a href="#who" style="color:inherit;text-decoration:none;transition:color .25s" style-hover="color:#fff">Who We Protect</a>
      <a href="#contact" style="color:inherit;text-decoration:none;transition:color .25s" style-hover="color:#fff">Contact</a>
    </nav>
    <div style="display:flex;align-items:center;gap:14px;flex-shrink:0">
      <a href="tel:+234" style="display:flex;align-items:center;gap:7px;color:rgba(255,255,255,0.7);text-decoration:none;font-size:13px;transition:color .25s" style-hover="color:#fff">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z"/></svg>
        Call
      </a>
      <a href="#contact" style="display:inline-flex;align-items:center;background:{{ accent }};color:#fff;padding:11px 20px;border-radius:2px;font-size:13px;font-weight:500;letter-spacing:0.03em;text-decoration:none;transition:filter .3s ease,transform .3s ease;white-space:nowrap" style-hover="filter:brightness(1.13);transform:translateY(-1px)">Book a Consultation</a>
    </div>
  </div>
</header>

<!-- ░░ 1 · HERO ░░ -->
<section style="position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:flex-end;background:#000">
  <div ref="{{ heroRef }}" style="position:absolute;inset:-6%;will-change:transform">
    <img src="assets/suv.png" alt="Armored Land Cruiser LC300" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 44%"/>
  </div>
  <svg viewBox="0 0 100 116" style="position:absolute;right:-4%;top:8%;height:84%;opacity:0.05;pointer-events:none" fill="none" stroke="#fff" stroke-width="0.7"><path d="M50 4 L92 22 L92 56 C92 84 72 104 50 112 C28 104 8 84 8 56 L8 22 Z"/><path d="M50 28 L74 38 L74 58 C74 76 64 87 50 92 C36 87 26 76 26 58 L26 38 Z"/></svg>
  <div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0.06) 32%,rgba(0,0,0,0.9) 100%)"></div>
  <div style="position:absolute;inset:0;background:linear-gradient(95deg,rgba(0,0,0,0.86) 0%,rgba(0,0,0,0.28) 50%,transparent 76%)"></div>
  <div style="position:absolute;inset:0;background:rgba(0,0,0,0.42)"></div>
  <div style="position:relative;width:100%;max-width:1320px;margin:0 auto;padding:0 44px 96px">
    <div data-reveal style="max-width:880px">
      <span style="display:inline-block;font-size:12px;font-weight:500;letter-spacing:0.34em;text-transform:uppercase;color:{{ accent }}">Armored · B6</span>
      <h1 style="font-size:clamp(40px,6.4vw,86px);font-weight:200;line-height:1.04;letter-spacing:-0.022em;color:#fff;margin:20px 0 0">Armor Your Vehicle in Nigeria — <span style="font-weight:300;color:rgba(255,255,255,0.92)">B6-Level Protection, Built In-Country.</span></h1>
      <p style="margin:26px 0 0;max-width:560px;font-size:18px;line-height:1.62;color:rgba(255,255,255,0.66);font-weight:300">International-standard B6 armoring — engineered and completed in Nigeria, without the import wait.</p>
      <div style="display:flex;gap:14px;flex-wrap:wrap;margin-top:38px">
        <a href="#contact" style="display:inline-flex;align-items:center;gap:8px;background:{{ accent }};color:#fff;padding:16px 30px;border-radius:2px;font-size:14px;font-weight:500;letter-spacing:0.03em;text-decoration:none;transition:filter .3s ease,transform .3s ease" style-hover="filter:brightness(1.13);transform:translateY(-1px)">Book a Consultation</a>
        <a href="#advantage" style="display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.03);color:#fff;border:1px solid rgba(255,255,255,0.22);padding:15px 28px;border-radius:2px;font-size:14px;font-weight:400;letter-spacing:0.02em;text-decoration:none;transition:border-color .3s ease,background .3s ease" style-hover="border-color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.07)">Learn More</a>
      </div>
    </div>
  </div>
  <div style="position:absolute;left:44px;bottom:34px;display:flex;align-items:center;gap:10px;color:rgba(255,255,255,0.5);font-size:11px;letter-spacing:0.3em;text-transform:uppercase">
    <span style="display:inline-block;animation:scrollCue 2s ease-in-out infinite">↓</span> Scroll
  </div>
  <div style="position:absolute;right:44px;bottom:34px;display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border:1px solid rgba(255,255,255,0.16);border-radius:2px;background:rgba(0,0,0,0.35);backdrop-filter:blur(6px);font-size:12px;color:rgba(255,255,255,0.75);letter-spacing:0.04em">
    <span style="width:6px;height:6px;border-radius:50%;background:{{ accent }}"></span> Land Cruiser LC300 · VR/B6
  </div>
</section>

<!-- ░░ 2 · TRUST STRIP ░░ -->
<section style="background:#0a0b0e;border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06)">
  <div style="max-width:1320px;margin:0 auto;padding:26px 44px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap">
    <div style="display:flex;align-items:center;gap:26px;flex-wrap:wrap">
      <span style="color:{{ accent }};font-weight:500;font-size:15px;letter-spacing:0.02em">10+ Years</span>
      <span style="width:1px;height:16px;background:rgba(255,255,255,0.14)"></span>
      <span style="font-size:12px;font-weight:500;letter-spacing:0.26em;text-transform:uppercase;color:rgba(255,255,255,0.5)">CEN · NIJ · VPAM · STANAG</span>
    </div>
    <span style="font-size:13px;color:rgba(255,255,255,0.42);font-weight:300">Trusted across corporate, government &amp; security operations</span>
  </div>
</section>

<!-- ░░ 3 · IN-COUNTRY ADVANTAGE ░░ -->
<section id="advantage" style="background:#000;padding:128px 0">
  <div style="max-width:1320px;margin:0 auto;padding:0 44px">
    <div data-reveal style="max-width:760px">
      <span style="display:inline-block;font-size:12px;font-weight:500;letter-spacing:0.3em;text-transform:uppercase;color:rgba(255,255,255,0.4)">The Advantage</span>
      <h2 style="font-size:clamp(30px,4vw,50px);font-weight:200;line-height:1.12;letter-spacing:-0.018em;color:#fff;margin:20px 0 0">Skip the import delays. Get fully certified B6-level protection, right here in-country.</h2>
    </div>
    <div ref="{{ advRef }}" style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px">
      <div data-adv-card onMouseMove="{{ onAdvMove }}" onMouseLeave="{{ onAdvLeave }}" style="position:relative;min-height:380px;display:flex;flex-direction:column;justify-content:space-between;background:rgba(255,255,255,0.045);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:38px 34px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 20px 50px -30px rgba(0,0,0,0.8);transition:border-color .4s ease,box-shadow .4s ease;transform-style:preserve-3d;will-change:transform" style-hover="border-color:rgba(255,255,255,0.22);box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 28px 64px -28px rgba(0,0,0,0.9)">
        <div style="width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1)"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="6" width="19" height="12" rx="2"/><circle cx="12" cy="12" r="3"/><path d="M6 9.5v5M18 9.5v5"/></svg></div>
        <div>
          <span style="font-size:11px;font-weight:500;letter-spacing:0.24em;text-transform:uppercase;color:rgba(255,255,255,0.38)">Cost Efficiency</span>
          <div style="font-size:30px;font-weight:200;color:#fff;margin:14px 0 14px;letter-spacing:-0.01em">No import wait</div>
          <p style="font-size:15px;line-height:1.65;color:rgba(255,255,255,0.55);font-weight:300;margin:0">Local production removes duties, freight and customs delay from the equation.</p>
        </div>
      </div>
      <div data-adv-card onMouseMove="{{ onAdvMove }}" onMouseLeave="{{ onAdvLeave }}" style="position:relative;min-height:380px;display:flex;flex-direction:column;justify-content:space-between;background:rgba(255,255,255,0.045);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:38px 34px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 20px 50px -30px rgba(0,0,0,0.8);transition:border-color .4s ease,box-shadow .4s ease;transform-style:preserve-3d;will-change:transform" style-hover="border-color:rgba(255,255,255,0.22);box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 28px 64px -28px rgba(0,0,0,0.9)">
        <div style="width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1)"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12.5" r="8.5"/><path d="M12 8v4.5l3 2"/><path d="M9 2.5h6"/></svg></div>
        <div>
          <span style="font-size:11px;font-weight:500;letter-spacing:0.24em;text-transform:uppercase;color:rgba(255,255,255,0.38)">Accelerated Turnaround</span>
          <div style="font-size:42px;font-weight:300;color:{{ accent }};margin:14px 0 12px;letter-spacing:-0.02em">6–12 weeks</div>
          <p style="font-size:15px;line-height:1.65;color:rgba(255,255,255,0.55);font-weight:300;margin:0">From soft-skin to certified B6, completed and verifiable in-country.</p>
        </div>
      </div>
      <div data-adv-card onMouseMove="{{ onAdvMove }}" onMouseLeave="{{ onAdvLeave }}" style="position:relative;min-height:380px;display:flex;flex-direction:column;justify-content:space-between;background:rgba(255,255,255,0.045);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:38px 34px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 20px 50px -30px rgba(0,0,0,0.8);transition:border-color .4s ease,box-shadow .4s ease;transform-style:preserve-3d;will-change:transform" style-hover="border-color:rgba(255,255,255,0.22);box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 28px 64px -28px rgba(0,0,0,0.9)">
        <div style="width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1)"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 6.5a3.5 3.5 0 0 1-4.6 4.6l-5.2 5.2a1.6 1.6 0 0 0 2.3 2.3l5.2-5.2a3.5 3.5 0 0 0 4.6-4.6l-2 2-2-2 2-2Z"/></svg></div>
        <div>
          <span style="font-size:11px;font-weight:500;letter-spacing:0.24em;text-transform:uppercase;color:rgba(255,255,255,0.38)">After-Sale Maintenance</span>
          <div style="font-size:30px;font-weight:200;color:#fff;margin:14px 0 14px;letter-spacing:-0.01em">In-country support</div>
          <p style="font-size:15px;line-height:1.65;color:rgba(255,255,255,0.55);font-weight:300;margin:0">Servicing, recertification and parts stay close — protection that's maintained, not abandoned.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ░░ 4 · SERVICES (pinned horizontal) ░░ -->
<section id="services" style="background:#0a0b0e;padding:128px 0 0;border-top:1px solid rgba(255,255,255,0.05)">
  <div style="max-width:1320px;margin:0 auto;padding:0 44px">
    <div data-reveal style="display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap">
      <div>
        <span style="display:inline-block;font-size:12px;font-weight:500;letter-spacing:0.3em;text-transform:uppercase;color:rgba(255,255,255,0.4)">What We Do</span>
        <h2 style="font-size:clamp(30px,4vw,50px);font-weight:200;line-height:1.12;letter-spacing:-0.018em;color:#fff;margin:18px 0 0">Five lines of protected mobility.</h2>
        <p style="font-size:17px;line-height:1.7;color:rgba(255,255,255,0.55);font-weight:300;margin:18px 0 0;max-width:520px">From the first cut of armor to long-term servicing — every stage of protected mobility handled in-country, under one certified standard.</p>
      </div>
      <span style="display:inline-flex;align-items:center;gap:9px;font-size:12px;color:rgba(255,255,255,0.4);letter-spacing:0.14em;text-transform:uppercase">Scroll to reveal <span style="font-size:16px">→</span></span>
    </div>
  </div>
  <div ref="{{ svcWrap }}" class="svc-row" style="overflow:hidden;padding-bottom:128px">
    <div ref="{{ svcTrack }}" style="display:flex;gap:24px;width:max-content;padding:52px 44px 16px max(44px,calc((100vw - 1320px) / 2 + 44px));will-change:transform">
      <div data-i="0" onMouseEnter="{{ onSvcEnter }}" onMouseLeave="{{ onSvcLeave }}" style="flex:0 0 clamp(340px,42vw,540px);background:#111317;border:1px solid rgba(255,255,255,0.07);border-radius:4px;overflow:hidden;transition:border-color .4s ease,transform .4s ease" style-hover="border-color:rgba(255,255,255,0.2);transform:translateY(-5px)">
        <div style="position:relative;height:560px;background:linear-gradient(145deg,#14171c,#0a0c10);overflow:hidden">
          <svg viewBox="0 0 100 116" style="position:absolute;right:-10%;bottom:-22%;height:150%;opacity:0.06" fill="none" stroke="#fff" stroke-width="0.8"><path d="M50 4 L92 22 L92 56 C92 84 72 104 50 112 C28 104 8 84 8 56 L8 22 Z"/></svg>
          <span style="position:absolute;left:28px;bottom:18px;font-size:60px;font-weight:200;color:rgba(255,255,255,0.16);letter-spacing:-0.02em">01</span>
        </div>
        <div style="padding:30px 30px 32px">
          <h3 style="font-size:21px;font-weight:500;color:#fff;margin:0;letter-spacing:0.01em">Vehicle Production &amp; Armoring</h3>
          <p style="font-size:14.5px;line-height:1.6;color:rgba(255,255,255,0.5);font-weight:300;margin:14px 0 24px">Soft-skin to certified B6, engineered and completed in-country.</p>
          <span style="display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;letter-spacing:0.02em;color:{{ svcA0 }};transform:{{ svcT0 }};transition:color .3s ease,transform .3s ease">Build Your Armored Vehicle →</span>
        </div>
      </div>
      <div data-i="1" onMouseEnter="{{ onSvcEnter }}" onMouseLeave="{{ onSvcLeave }}" style="flex:0 0 clamp(340px,42vw,540px);background:#111317;border:1px solid rgba(255,255,255,0.07);border-radius:4px;overflow:hidden;transition:border-color .4s ease,transform .4s ease" style-hover="border-color:rgba(255,255,255,0.2);transform:translateY(-5px)">
        <div style="position:relative;height:560px;background:linear-gradient(145deg,#161a20,#0b0e12);overflow:hidden">
          <svg viewBox="0 0 100 116" style="position:absolute;right:-10%;bottom:-22%;height:150%;opacity:0.06" fill="none" stroke="#fff" stroke-width="0.8"><path d="M50 4 L92 22 L92 56 C92 84 72 104 50 112 C28 104 8 84 8 56 L8 22 Z"/></svg>
          <span style="position:absolute;left:28px;bottom:18px;font-size:60px;font-weight:200;color:rgba(255,255,255,0.16);letter-spacing:-0.02em">02</span>
        </div>
        <div style="padding:30px 30px 32px">
          <h3 style="font-size:21px;font-weight:500;color:#fff;margin:0;letter-spacing:0.01em">Armored Vehicle Sale</h3>
          <p style="font-size:14.5px;line-height:1.6;color:rgba(255,255,255,0.5);font-weight:300;margin:14px 0 24px">Certified, ready-to-deploy B6 platforms.</p>
          <span style="display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;letter-spacing:0.02em;color:{{ svcA1 }};transform:{{ svcT1 }};transition:color .3s ease,transform .3s ease">Secure Your Armored Vehicle →</span>
        </div>
      </div>
      <div data-i="2" onMouseEnter="{{ onSvcEnter }}" onMouseLeave="{{ onSvcLeave }}" style="flex:0 0 clamp(340px,42vw,540px);background:#111317;border:1px solid rgba(255,255,255,0.07);border-radius:4px;overflow:hidden;transition:border-color .4s ease,transform .4s ease" style-hover="border-color:rgba(255,255,255,0.2);transform:translateY(-5px)">
        <div style="position:relative;height:560px;background:linear-gradient(145deg,#121519,#090b0e);overflow:hidden">
          <svg viewBox="0 0 100 116" style="position:absolute;right:-10%;bottom:-22%;height:150%;opacity:0.06" fill="none" stroke="#fff" stroke-width="0.8"><path d="M50 4 L92 22 L92 56 C92 84 72 104 50 112 C28 104 8 84 8 56 L8 22 Z"/></svg>
          <span style="position:absolute;left:28px;bottom:18px;font-size:60px;font-weight:200;color:rgba(255,255,255,0.16);letter-spacing:-0.02em">03</span>
        </div>
        <div style="padding:30px 30px 32px">
          <h3 style="font-size:21px;font-weight:500;color:#fff;margin:0;letter-spacing:0.01em">Rental</h3>
          <p style="font-size:14.5px;line-height:1.6;color:rgba(255,255,255,0.5);font-weight:300;margin:14px 0 24px">Short and long-term protected mobility, on demand.</p>
          <span style="display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;letter-spacing:0.02em;color:{{ svcA2 }};transform:{{ svcT2 }};transition:color .3s ease,transform .3s ease">Request Rental Availability →</span>
        </div>
      </div>
      <div data-i="3" onMouseEnter="{{ onSvcEnter }}" onMouseLeave="{{ onSvcLeave }}" style="flex:0 0 clamp(340px,42vw,540px);background:#111317;border:1px solid rgba(255,255,255,0.07);border-radius:4px;overflow:hidden;transition:border-color .4s ease,transform .4s ease" style-hover="border-color:rgba(255,255,255,0.2);transform:translateY(-5px)">
        <div style="position:relative;height:560px;background:linear-gradient(145deg,#15181d,#0a0d11);overflow:hidden">
          <svg viewBox="0 0 100 116" style="position:absolute;right:-10%;bottom:-22%;height:150%;opacity:0.06" fill="none" stroke="#fff" stroke-width="0.8"><path d="M50 4 L92 22 L92 56 C92 84 72 104 50 112 C28 104 8 84 8 56 L8 22 Z"/></svg>
          <span style="position:absolute;left:28px;bottom:18px;font-size:60px;font-weight:200;color:rgba(255,255,255,0.16);letter-spacing:-0.02em">04</span>
        </div>
        <div style="padding:30px 30px 32px">
          <h3 style="font-size:21px;font-weight:500;color:#fff;margin:0;letter-spacing:0.01em">Servicing &amp; Maintenance</h3>
          <p style="font-size:14.5px;line-height:1.6;color:rgba(255,255,255,0.5);font-weight:300;margin:14px 0 24px">Keep certified protection at full integrity.</p>
          <span style="display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;letter-spacing:0.02em;color:{{ svcA3 }};transform:{{ svcT3 }};transition:color .3s ease,transform .3s ease">Schedule a Maintenance Inspection →</span>
        </div>
      </div>
      <div data-i="4" onMouseEnter="{{ onSvcEnter }}" onMouseLeave="{{ onSvcLeave }}" style="flex:0 0 clamp(340px,42vw,540px);background:#111317;border:1px solid rgba(255,255,255,0.07);border-radius:4px;overflow:hidden;transition:border-color .4s ease,transform .4s ease" style-hover="border-color:rgba(255,255,255,0.2);transform:translateY(-5px)">
        <div style="position:relative;height:560px;background:linear-gradient(145deg,#13161b,#090c0f);overflow:hidden">
          <svg viewBox="0 0 100 116" style="position:absolute;right:-10%;bottom:-22%;height:150%;opacity:0.06" fill="none" stroke="#fff" stroke-width="0.8"><path d="M50 4 L92 22 L92 56 C92 84 72 104 50 112 C28 104 8 84 8 56 L8 22 Z"/></svg>
          <span style="position:absolute;left:28px;bottom:18px;font-size:60px;font-weight:200;color:rgba(255,255,255,0.16);letter-spacing:-0.02em">05</span>
        </div>
        <div style="padding:30px 30px 32px">
          <h3 style="font-size:21px;font-weight:500;color:#fff;margin:0;letter-spacing:0.01em">Driver Training</h3>
          <p style="font-size:14.5px;line-height:1.6;color:rgba(255,255,255,0.5);font-weight:300;margin:14px 0 24px">Defensive and evasive driving for protected fleets.</p>
          <span style="display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;letter-spacing:0.02em;color:{{ svcA4 }};transform:{{ svcT4 }};transition:color .3s ease,transform .3s ease">Enquire About Driver Training →</span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ░░ 5 · THE PROOF — interactive ░░ -->
<section id="protection" style="background:#000;padding:128px 0">
  <div style="max-width:1320px;margin:0 auto;padding:0 44px">
    <div data-reveal style="max-width:760px">
      <span style="display:inline-block;font-size:12px;font-weight:500;letter-spacing:0.3em;text-transform:uppercase;color:rgba(255,255,255,0.4)">The Proof</span>
      <h2 style="font-size:clamp(28px,3.6vw,46px);font-weight:200;line-height:1.16;letter-spacing:-0.018em;color:#fff;margin:20px 0 0">Protection isn't added to the vehicle. It's engineered into every surface of it.</h2>
    </div>
    <div data-reveal data-reveal-delay="120" style="display:grid;grid-template-columns:1.7fr 1fr;gap:24px;margin-top:60px;align-items:stretch">
      <div onMouseMove="{{ onLight }}" style="position:relative;border:1px solid rgba(255,255,255,0.09);border-radius:4px;overflow:hidden;background:#06070a;aspect-ratio:16/10;min-height:380px">
        <img ref="{{ proofImg }}" src="assets/suv-side.png" alt="Armored Land Cruiser side profile" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;transform-origin:center;transition:transform .75s cubic-bezier(.16,1,.3,1)"/>
        <div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.18),rgba(0,0,0,0.55));pointer-events:none"></div>
        <div ref="{{ lightRef }}" style="position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen"></div>
        <sc-for list="{{ hotspots }}" as="hs" hint-placeholder-count="5">
          <button onClick="{{ hs.onClick }}" style="position:absolute;left:{{ hs.x }}%;top:{{ hs.y }}%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;border:1.5px solid {{ hs.ring }};background:{{ hs.dotBg }};cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;backdrop-filter:blur(3px);transition:transform .3s ease,border-color .3s ease,background .3s ease;z-index:3" style-hover="transform:translate(-50%,-50%) scale(1.18)">
            <span style="width:6px;height:6px;border-radius:50%;background:{{ hs.core }}"></span>
            <sc-if value="{{ pulse }}" hint-placeholder-val="{{ true }}"><span style="position:absolute;inset:-2px;border-radius:50%;border:1px solid {{ hs.pulseRing }};animation:hsPulse 2.6s ease-out infinite"></span></sc-if>
          </button>
        </sc-for>
        <button onClick="{{ onResetZoom }}" style="position:absolute;right:14px;top:14px;z-index:4;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid rgba(255,255,255,0.18);border-radius:2px;background:rgba(0,0,0,0.45);backdrop-filter:blur(6px);color:rgba(255,255,255,0.8);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;font-family:'DM Sans',sans-serif" style-hover="border-color:rgba(255,255,255,0.4);color:#fff">Reset view</button>
        <div style="position:absolute;left:18px;bottom:14px;z-index:3;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.55)">Tap a point to zoom in</div>
      </div>
      <div style="perspective:1400px">
        <div ref="{{ proofCard }}" style="height:100%;background:#1A1A1C;border:1px solid rgba(255,255,255,0.08);border-radius:4px;padding:34px 30px;display:flex;flex-direction:column;gap:18px;justify-content:center;transform-origin:center;backface-visibility:hidden">
          <span style="font-size:11px;font-weight:500;letter-spacing:0.24em;text-transform:uppercase;color:rgba(255,255,255,0.4)">{{ hs.idxLabel }}</span>
          <h3 style="font-size:27px;font-weight:300;color:#fff;margin:0;letter-spacing:-0.01em">{{ hs.label }}</h3>
          <span style="align-self:flex-start;display:inline-flex;align-items:center;padding:6px 13px;border:1px solid {{ accentRing }};border-radius:2px;background:{{ accentSoft }};color:#fff;font-size:12px;font-weight:500;letter-spacing:0.08em">{{ hs.rating }}</span>
          <p style="font-size:15.5px;line-height:1.68;color:rgba(255,255,255,0.62);font-weight:300;margin:0">{{ hs.desc }}</p>
          <div style="height:1px;background:rgba(255,255,255,0.08);margin-top:4px"></div>
          <p style="font-size:12.5px;line-height:1.6;color:rgba(255,255,255,0.4);font-weight:300;margin:0">Each point zooms the vehicle to that surface. The detail panel flips as the protective layer changes.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ░░ 6 · FLEET ░░ -->
<section id="fleet" style="background:#0a0b0e;padding:128px 0;border-top:1px solid rgba(255,255,255,0.05)">
  <div style="max-width:1320px;margin:0 auto;padding:0 44px">
    <div data-reveal>
      <span style="display:inline-block;font-size:12px;font-weight:500;letter-spacing:0.3em;text-transform:uppercase;color:rgba(255,255,255,0.4)">The Fleet</span>
      <h2 style="font-size:clamp(30px,4vw,50px);font-weight:200;line-height:1.12;letter-spacing:-0.018em;color:#fff;margin:18px 0 0">Real platforms. Engineered to B6.</h2>
      <p style="font-size:17px;line-height:1.7;color:rgba(255,255,255,0.55);font-weight:300;margin:18px 0 0;max-width:560px">The vehicles you already trust, rebuilt to certified ballistic standard — armor integrated into the platform, not bolted on after.</p>
    </div>
    <div data-reveal data-reveal-delay="120" onMouseEnter="{{ onFleetPause }}" onMouseLeave="{{ onFleetResume }}" style="position:relative;margin-top:56px">
      <div ref="{{ fleetTrack }}" class="fleet-track" style="display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:auto;padding-bottom:4px">
        <div data-i="0" onMouseEnter="{{ onFleetEnter }}" onMouseLeave="{{ onFleetLeave }}" style="flex:0 0 clamp(300px,31.5%,400px);scroll-snap-align:start;position:relative;background:#111317;border:1px solid rgba(255,255,255,0.07);border-radius:4px;overflow:hidden;transition:border-color .4s ease" style-hover="border-color:rgba(255,255,255,0.2)">
          <div style="position:relative;height:264px;overflow:hidden">
            <img src="assets/suv.png" alt="Land Cruiser LC300" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%;transition:transform .7s cubic-bezier(.16,1,.3,1)" style-hover="transform:scale(1.06)"/>
            <div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.1),rgba(17,19,23,0.55));pointer-events:none"></div>
          </div>
          <span style="position:absolute;top:16px;left:16px;z-index:2;padding:5px 11px;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);border:1px solid {{ accentRing }};border-radius:2px;font-size:11px;font-weight:600;letter-spacing:0.1em;color:#fff">B6</span>
          <div style="padding:24px 24px 26px">
            <h3 style="font-size:20px;font-weight:500;color:#fff;margin:0">Land Cruiser LC300</h3>
            <p style="font-size:13px;color:rgba(255,255,255,0.48);font-weight:300;margin:10px 0 20px;letter-spacing:0.02em">VR6 / B6 · 5 seats · armored monocoque</p>
            <span style="display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:{{ fleetA0 }};transition:color .3s ease">View platform →</span>
          </div>
        </div>
        <div data-i="1" onMouseEnter="{{ onFleetEnter }}" onMouseLeave="{{ onFleetLeave }}" style="flex:0 0 clamp(300px,31.5%,400px);scroll-snap-align:start;position:relative;background:#111317;border:1px solid rgba(255,255,255,0.07);border-radius:4px;overflow:hidden;transition:border-color .4s ease" style-hover="border-color:rgba(255,255,255,0.2)">
          <div style="position:relative;height:264px;overflow:hidden">
            <div style="position:absolute;inset:0;background:radial-gradient(120% 110% at 60% 30%,#16191f,#090b0e)"></div>
            <image-slot id="fleet-2" shape="rect" placeholder="Drop Lexus LX600 photo" style="position:absolute;inset:0;width:100%;height:100%"></image-slot>
          </div>
          <span style="position:absolute;top:16px;left:16px;z-index:2;padding:5px 11px;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);border:1px solid {{ accentRing }};border-radius:2px;font-size:11px;font-weight:600;letter-spacing:0.1em;color:#fff">B6</span>
          <div style="padding:24px 24px 26px">
            <h3 style="font-size:20px;font-weight:500;color:#fff;margin:0">Lexus LX600</h3>
            <p style="font-size:13px;color:rgba(255,255,255,0.48);font-weight:300;margin:10px 0 20px;letter-spacing:0.02em">VR6 / B6 · 5 seats · executive cabin</p>
            <span style="display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:{{ fleetA1 }};transition:color .3s ease">View platform →</span>
          </div>
        </div>
        <div data-i="2" onMouseEnter="{{ onFleetEnter }}" onMouseLeave="{{ onFleetLeave }}" style="flex:0 0 clamp(300px,31.5%,400px);scroll-snap-align:start;position:relative;background:#111317;border:1px solid rgba(255,255,255,0.07);border-radius:4px;overflow:hidden;transition:border-color .4s ease" style-hover="border-color:rgba(255,255,255,0.2)">
          <div style="position:relative;height:264px;overflow:hidden">
            <div style="position:absolute;inset:0;background:radial-gradient(120% 110% at 60% 30%,#171a20,#090b0e)"></div>
            <image-slot id="fleet-3" shape="rect" placeholder="Drop Toyota Hilux photo" style="position:absolute;inset:0;width:100%;height:100%"></image-slot>
          </div>
          <span style="position:absolute;top:16px;left:16px;z-index:2;padding:5px 11px;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);border:1px solid {{ accentRing }};border-radius:2px;font-size:11px;font-weight:600;letter-spacing:0.1em;color:#fff">B6</span>
          <div style="padding:24px 24px 26px">
            <h3 style="font-size:20px;font-weight:500;color:#fff;margin:0">Toyota Hilux</h3>
            <p style="font-size:13px;color:rgba(255,255,255,0.48);font-weight:300;margin:10px 0 20px;letter-spacing:0.02em">VR6 / B6 · 5 seats · utility platform</p>
            <span style="display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:{{ fleetA2 }};transition:color .3s ease">View platform →</span>
          </div>
        </div>
        <div data-i="3" onMouseEnter="{{ onFleetEnter }}" onMouseLeave="{{ onFleetLeave }}" style="flex:0 0 clamp(300px,31.5%,400px);scroll-snap-align:start;position:relative;background:#111317;border:1px solid rgba(255,255,255,0.07);border-radius:4px;overflow:hidden;transition:border-color .4s ease" style-hover="border-color:rgba(255,255,255,0.2)">
          <div style="position:relative;height:264px;overflow:hidden">
            <img src="assets/suv-side.png" alt="Land Cruiser LC200" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;transition:transform .7s cubic-bezier(.16,1,.3,1)" style-hover="transform:scale(1.06)"/>
            <div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.1),rgba(17,19,23,0.55));pointer-events:none"></div>
          </div>
          <span style="position:absolute;top:16px;left:16px;z-index:2;padding:5px 11px;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);border:1px solid {{ accentRing }};border-radius:2px;font-size:11px;font-weight:600;letter-spacing:0.1em;color:#fff">B6</span>
          <div style="padding:24px 24px 26px">
            <h3 style="font-size:20px;font-weight:500;color:#fff;margin:0">Land Cruiser LC200</h3>
            <p style="font-size:13px;color:rgba(255,255,255,0.48);font-weight:300;margin:10px 0 20px;letter-spacing:0.02em">VR6 / B6 · 7 seats · proven chassis</p>
            <span style="display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:{{ fleetA3 }};transition:color .3s ease">View platform →</span>
          </div>
        </div>
        <div data-i="4" onMouseEnter="{{ onFleetEnter }}" onMouseLeave="{{ onFleetLeave }}" style="flex:0 0 clamp(300px,31.5%,400px);scroll-snap-align:start;position:relative;background:#111317;border:1px solid rgba(255,255,255,0.07);border-radius:4px;overflow:hidden;transition:border-color .4s ease" style-hover="border-color:rgba(255,255,255,0.2)">
          <div style="position:relative;height:264px;overflow:hidden">
            <div style="position:absolute;inset:0;background:radial-gradient(120% 110% at 60% 30%,#181b22,#090b0e)"></div>
            <image-slot id="fleet-5" shape="rect" placeholder="Drop Ford F-150 photo" style="position:absolute;inset:0;width:100%;height:100%"></image-slot>
          </div>
          <span style="position:absolute;top:16px;left:16px;z-index:2;padding:5px 11px;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);border:1px solid {{ accentRing }};border-radius:2px;font-size:11px;font-weight:600;letter-spacing:0.1em;color:#fff">B6</span>
          <div style="padding:24px 24px 26px">
            <h3 style="font-size:20px;font-weight:500;color:#fff;margin:0">Ford F-150</h3>
            <p style="font-size:13px;color:rgba(255,255,255,0.48);font-weight:300;margin:10px 0 20px;letter-spacing:0.02em">VR6 / B6 · 5 seats · full-size pickup</p>
            <span style="display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:{{ fleetA4 }};transition:color .3s ease">View platform →</span>
          </div>
        </div>
        <div data-i="5" onMouseEnter="{{ onFleetEnter }}" onMouseLeave="{{ onFleetLeave }}" style="flex:0 0 clamp(300px,31.5%,400px);scroll-snap-align:start;position:relative;background:#111317;border:1px solid rgba(255,255,255,0.07);border-radius:4px;overflow:hidden;transition:border-color .4s ease" style-hover="border-color:rgba(255,255,255,0.2)">
          <div style="position:relative;height:264px;overflow:hidden">
            <div style="position:absolute;inset:0;background:radial-gradient(120% 110% at 60% 30%,#16191f,#090b0e)"></div>
            <image-slot id="fleet-6" shape="rect" placeholder="Drop Toyota Coaster photo" style="position:absolute;inset:0;width:100%;height:100%"></image-slot>
          </div>
          <span style="position:absolute;top:16px;left:16px;z-index:2;padding:5px 11px;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);border:1px solid {{ accentRing }};border-radius:2px;font-size:11px;font-weight:600;letter-spacing:0.1em;color:#fff">B6</span>
          <div style="padding:24px 24px 26px">
            <h3 style="font-size:20px;font-weight:500;color:#fff;margin:0">Toyota Coaster</h3>
            <p style="font-size:13px;color:rgba(255,255,255,0.48);font-weight:300;margin:10px 0 20px;letter-spacing:0.02em">VR6 / B6 · 22 seats · armored shuttle</p>
            <span style="display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:{{ fleetA5 }};transition:color .3s ease">View platform →</span>
          </div>
        </div>
      </div>
      <button onClick="{{ onFleetPrev }}" aria-label="Previous" style="position:absolute;left:-22px;top:132px;transform:translateY(-50%);z-index:4;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,0.16);background:rgba(10,11,14,0.86);backdrop-filter:blur(8px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:border-color .3s ease,background .3s ease" style-hover="border-color:rgba(255,255,255,0.45);background:rgba(20,22,27,0.95)">←</button>
      <button onClick="{{ onFleetNext }}" aria-label="Next" style="position:absolute;right:-22px;top:132px;transform:translateY(-50%);z-index:4;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,0.16);background:rgba(10,11,14,0.86);backdrop-filter:blur(8px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:border-color .3s ease,background .3s ease" style-hover="border-color:rgba(255,255,255,0.45);background:rgba(20,22,27,0.95)">→</button>
    </div>
    <p data-reveal style="font-size:13px;color:rgba(255,255,255,0.38);font-weight:300;margin:34px 0 0;letter-spacing:0.02em">Also armored — Lexus LX570 · Camry · Mercedes G-Class · CIT Van · Coaster Bus</p>
  </div>
</section>

<!-- ░░ 7 · STANDARDS — scroll-built armor cross-section ░░ -->
<section ref="{{ stdRef }}" style="position:relative;background:#000;height:340vh">
  <div ref="{{ stdStage }}" style="position:absolute;top:0;left:0;width:100%;height:100vh;overflow:hidden;display:flex;align-items:center;will-change:transform">
    <img src="assets/suv-side.png" alt="Armored vehicle cross-section" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;opacity:0.5"/>
    <div style="position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0.96) 0%,rgba(0,0,0,0.74) 44%,rgba(0,0,0,0.5) 72%,rgba(0,0,0,0.78) 100%)"></div>
    <div style="position:absolute;inset:0;background:radial-gradient(130% 120% at 50% 50%,transparent 40%,rgba(0,0,0,0.7) 100%)"></div>
    <div style="position:relative;z-index:3;width:100%;max-width:1320px;margin:0 auto;padding:0 44px;display:grid;grid-template-columns:1.02fr 0.98fr;gap:56px;align-items:center">
      <div>
        <span style="display:inline-block;font-size:12px;font-weight:500;letter-spacing:0.3em;text-transform:uppercase;color:{{ accent }}">Anatomy of Protection</span>
        <h2 style="font-size:clamp(30px,3.8vw,52px);font-weight:200;line-height:1.1;letter-spacing:-0.02em;color:#fff;margin:18px 0 0;max-width:520px">Five layers between you and the threat.</h2>
        <div style="margin-top:34px;max-width:430px">
          <div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px">
            <span style="font-size:11px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.45)">Protection envelope</span>
            <span style="font-size:13px;font-weight:500;color:{{ accent }};font-variant-numeric:tabular-nums">{{ protectPct }}</span>
          </div>
          <div style="height:3px;width:100%;background:rgba(255,255,255,0.1);border-radius:3px;overflow:hidden">
            <div style="height:100%;width:{{ protectPct }};background:{{ accent }};border-radius:3px;transition:width .6s cubic-bezier(.16,1,.3,1)"></div>
          </div>
        </div>
        <div style="margin-top:40px;min-height:178px;border-top:1px solid rgba(255,255,255,0.1);padding-top:26px">
          <div style="display:flex;align-items:flex-start;gap:20px">
            <span style="font-size:46px;font-weight:200;line-height:0.9;color:{{ accent }};letter-spacing:-0.02em;font-variant-numeric:tabular-nums">{{ activeLayer.n }}</span>
            <div>
              <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap">
                <h3 style="font-size:26px;font-weight:300;color:#fff;margin:0;letter-spacing:-0.01em">{{ activeLayer.name }}</h3>
                <span style="padding:4px 11px;border:1px solid {{ accentRing }};border-radius:2px;background:{{ accentSoft }};font-size:11px;font-weight:500;letter-spacing:0.06em;color:#fff">{{ activeLayer.spec }}</span>
              </div>
              <p style="font-size:15.5px;line-height:1.66;color:rgba(255,255,255,0.66);font-weight:300;margin:14px 0 0;max-width:440px">{{ activeLayer.desc }}</p>
            </div>
          </div>
        </div>
        <div style="display:flex;gap:9px;flex-wrap:wrap;margin-top:34px">
          <span style="padding:7px 14px;border:1px solid rgba(255,255,255,0.18);border-radius:2px;font-size:11px;font-weight:500;letter-spacing:0.1em;color:rgba(255,255,255,0.72)">VPAM</span>
          <span style="padding:7px 14px;border:1px solid rgba(255,255,255,0.18);border-radius:2px;font-size:11px;font-weight:500;letter-spacing:0.1em;color:rgba(255,255,255,0.72)">NIJ</span>
          <span style="padding:7px 14px;border:1px solid rgba(255,255,255,0.18);border-radius:2px;font-size:11px;font-weight:500;letter-spacing:0.1em;color:rgba(255,255,255,0.72)">CEN</span>
          <span style="padding:7px 14px;border:1px solid rgba(255,255,255,0.18);border-radius:2px;font-size:11px;font-weight:500;letter-spacing:0.1em;color:rgba(255,255,255,0.72)">STANAG</span>
        </div>
      </div>
      <div style="display:flex;flex-direction:column;gap:11px;align-items:flex-start">
        <span style="font-size:11px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.38);margin-bottom:6px">Outer → Inner · tap a layer</span>
        <sc-for list="{{ layers }}" as="ly" hint-placeholder-count="5">
          <button onClick="{{ ly.onClick }}" style="width:{{ ly.plateW }};min-width:280px;display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:4px;cursor:pointer;text-align:left;background:{{ ly.plateBg }};border:1px solid {{ ly.plateBorder }};opacity:{{ ly.plateOpacity }};transform:{{ ly.plateShift }};transition:background .5s ease,border-color .5s ease,opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)">
            <span style="width:9px;height:9px;border-radius:50%;flex-shrink:0;background:{{ ly.dotBg }};border:1.5px solid {{ ly.dotBorder }};transition:background .4s ease,border-color .4s ease"></span>
            <span style="font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;color:{{ ly.numColor }};transition:color .4s ease">{{ ly.n }}</span>
            <span style="font-size:16px;font-weight:300;letter-spacing:-0.01em;color:{{ ly.nameColor }};transition:color .4s ease">{{ ly.name }}</span>
          </button>
        </sc-for>
      </div>
    </div>
  </div>
</section>

<!-- ░░ 8 · WHO WE PROTECT ░░ -->
<section id="who" style="background:#0a0b0e;padding:128px 0;border-top:1px solid rgba(255,255,255,0.05)">
  <div style="max-width:1320px;margin:0 auto;padding:0 44px">
    <div data-reveal style="max-width:620px">
      <span style="display:inline-block;font-size:12px;font-weight:500;letter-spacing:0.3em;text-transform:uppercase;color:rgba(255,255,255,0.4)">Who We Protect</span>
      <h2 style="font-size:clamp(30px,4vw,50px);font-weight:200;line-height:1.12;letter-spacing:-0.018em;color:#fff;margin:18px 0 0">Protection, matched to your exposure.</h2>
    </div>
    <div data-reveal data-reveal-delay="100" style="margin-top:52px;border-top:1px solid rgba(255,255,255,0.1)">
      <sc-for list="{{ audiences }}" as="aud" hint-placeholder-count="3">
        <div style="border-bottom:1px solid rgba(255,255,255,0.1)">
          <button onClick="{{ aud.onClick }}" style="width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 0;background:none;border:none;cursor:pointer;text-align:left">
            <span style="font-size:clamp(22px,2.4vw,30px);font-weight:300;letter-spacing:-0.01em;color:{{ aud.titleColor }};transition:color .35s ease">{{ aud.title }}</span>
            <span style="font-size:26px;font-weight:200;color:rgba(255,255,255,0.6);line-height:1;flex-shrink:0">{{ aud.sign }}</span>
          </button>
          <div style="overflow:hidden;max-height:{{ aud.maxH }};opacity:{{ aud.op }};transition:max-height .55s cubic-bezier(.16,1,.3,1),opacity .4s ease">
            <div style="display:grid;grid-template-columns:1.4fr 1fr;gap:32px;padding:0 0 36px;align-items:center">
              <div>
                <p style="font-size:17px;line-height:1.65;color:rgba(255,255,255,0.66);font-weight:300;margin:0 0 24px;max-width:480px">{{ aud.line }}</p>
                <a href="#contact" style="display:inline-flex;align-items:center;gap:8px;color:{{ accent }};font-size:14px;font-weight:500;text-decoration:none" style-hover="gap:12px">{{ aud.cta }} →</a>
              </div>
              <div style="position:relative;height:190px;border-radius:4px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);background:radial-gradient(120% 120% at 60% 30%,#181b21,#0a0c10)">
                <img src="assets/suv.png" alt="{{ aud.title }}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:{{ aud.imgPos }};filter:{{ aud.imgFilter }}"/>
                <div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.15),rgba(10,12,16,0.55))"></div>
              </div>
            </div>
          </div>
        </div>
      </sc-for>
    </div>
  </div>
</section>

<!-- ░░ 9 · CORE VALUES ░░ -->
<section style="background:#000;padding:120px 0">
  <div style="max-width:1320px;margin:0 auto;padding:0 44px">
    <div data-reveal style="display:grid;grid-template-columns:repeat(4,1fr);gap:18px">
      <div data-val-card onMouseMove="{{ onValMove }}" onMouseLeave="{{ onValLeave }}" style="position:relative;overflow:hidden;background:#0a0b0e;border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:30px 26px 28px;min-height:288px;display:flex;flex-direction:column;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.16,1,.3,1),border-color .4s ease,box-shadow .55s ease;will-change:transform" style-hover="border-color:rgba(255,255,255,0.22);box-shadow:0 28px 64px -32px rgba(0,0,0,0.92)">
        <div data-val-glow style="position:absolute;left:0;top:0;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,{{ accentSoft }} 0%,transparent 68%);transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity .45s ease"></div>
        <div data-val-bar style="position:absolute;top:0;left:0;height:2px;width:100%;background:{{ accent }};transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.16,1,.3,1)"></div>
        <div style="position:relative;z-index:2;display:flex;flex-direction:column;height:100%">
          <div style="display:flex;align-items:flex-start;justify-content:space-between">
            <span data-val-num style="font-size:13px;font-weight:600;letter-spacing:0.12em;color:rgba(255,255,255,0.3);transition:color .4s ease">01</span>
            <div data-val-icon style="width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);transition:transform .55s cubic-bezier(.16,1,.3,1),background .4s ease,border-color .4s ease"><svg width="22" height="22" viewBox="0 0 28 28" fill="none" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3 L24 7 V14 C24 21 19 25 14 26 C9 25 4 21 4 14 V7 Z"/><path d="M10 14 l3 3 l5-6"/></svg></div>
          </div>
          <h3 style="font-size:20px;font-weight:400;color:#fff;margin:auto 0 12px;letter-spacing:-0.005em;line-height:1.25">Safety as a Standard</h3>
          <p style="font-size:14px;line-height:1.6;color:rgba(255,255,255,0.5);font-weight:300;margin:0">Protection is never optional and never partial.</p>
          <span data-val-arrow style="display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:{{ accent }};margin-top:18px;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1)">Learn more →</span>
        </div>
      </div>
      <div data-val-card onMouseMove="{{ onValMove }}" onMouseLeave="{{ onValLeave }}" style="position:relative;overflow:hidden;background:#0a0b0e;border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:30px 26px 28px;min-height:288px;display:flex;flex-direction:column;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.16,1,.3,1),border-color .4s ease,box-shadow .55s ease;will-change:transform" style-hover="border-color:rgba(255,255,255,0.22);box-shadow:0 28px 64px -32px rgba(0,0,0,0.92)">
        <div data-val-glow style="position:absolute;left:0;top:0;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,{{ accentSoft }} 0%,transparent 68%);transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity .45s ease"></div>
        <div data-val-bar style="position:absolute;top:0;left:0;height:2px;width:100%;background:{{ accent }};transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.16,1,.3,1)"></div>
        <div style="position:relative;z-index:2;display:flex;flex-direction:column;height:100%">
          <div style="display:flex;align-items:flex-start;justify-content:space-between">
            <span data-val-num style="font-size:13px;font-weight:600;letter-spacing:0.12em;color:rgba(255,255,255,0.3);transition:color .4s ease">02</span>
            <div data-val-icon style="width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);transition:transform .55s cubic-bezier(.16,1,.3,1),background .4s ease,border-color .4s ease"><svg width="22" height="22" viewBox="0 0 28 28" fill="none" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="14" cy="14" r="11"/><path d="M3 14 h22 M14 3 c4 4 4 18 0 22 c-4-4-4-18 0-22"/></svg></div>
          </div>
          <h3 style="font-size:20px;font-weight:400;color:#fff;margin:auto 0 12px;letter-spacing:-0.005em;line-height:1.25">Global Calibre, Local Expertise</h3>
          <p style="font-size:14px;line-height:1.6;color:rgba(255,255,255,0.5);font-weight:300;margin:0">International standards, delivered in-country.</p>
          <span data-val-arrow style="display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:{{ accent }};margin-top:18px;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1)">Learn more →</span>
        </div>
      </div>
      <div data-val-card onMouseMove="{{ onValMove }}" onMouseLeave="{{ onValLeave }}" style="position:relative;overflow:hidden;background:#0a0b0e;border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:30px 26px 28px;min-height:288px;display:flex;flex-direction:column;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.16,1,.3,1),border-color .4s ease,box-shadow .55s ease;will-change:transform" style-hover="border-color:rgba(255,255,255,0.22);box-shadow:0 28px 64px -32px rgba(0,0,0,0.92)">
        <div data-val-glow style="position:absolute;left:0;top:0;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,{{ accentSoft }} 0%,transparent 68%);transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity .45s ease"></div>
        <div data-val-bar style="position:absolute;top:0;left:0;height:2px;width:100%;background:{{ accent }};transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.16,1,.3,1)"></div>
        <div style="position:relative;z-index:2;display:flex;flex-direction:column;height:100%">
          <div style="display:flex;align-items:flex-start;justify-content:space-between">
            <span data-val-num style="font-size:13px;font-weight:600;letter-spacing:0.12em;color:rgba(255,255,255,0.3);transition:color .4s ease">03</span>
            <div data-val-icon style="width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);transition:transform .55s cubic-bezier(.16,1,.3,1),background .4s ease,border-color .4s ease"><svg width="22" height="22" viewBox="0 0 28 28" fill="none" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="14" cy="14" r="10.5"/><circle cx="14" cy="14" r="5.5"/><circle cx="14" cy="14" r="1.4" fill="#fff"/></svg></div>
          </div>
          <h3 style="font-size:20px;font-weight:400;color:#fff;margin:auto 0 12px;letter-spacing:-0.005em;line-height:1.25">Client-Centric Solutions</h3>
          <p style="font-size:14px;line-height:1.6;color:rgba(255,255,255,0.5);font-weight:300;margin:0">Built around each client's real exposure.</p>
          <span data-val-arrow style="display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:{{ accent }};margin-top:18px;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1)">Learn more →</span>
        </div>
      </div>
      <div data-val-card onMouseMove="{{ onValMove }}" onMouseLeave="{{ onValLeave }}" style="position:relative;overflow:hidden;background:#0a0b0e;border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:30px 26px 28px;min-height:288px;display:flex;flex-direction:column;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.16,1,.3,1),border-color .4s ease,box-shadow .55s ease;will-change:transform" style-hover="border-color:rgba(255,255,255,0.22);box-shadow:0 28px 64px -32px rgba(0,0,0,0.92)">
        <div data-val-glow style="position:absolute;left:0;top:0;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,{{ accentSoft }} 0%,transparent 68%);transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity .45s ease"></div>
        <div data-val-bar style="position:absolute;top:0;left:0;height:2px;width:100%;background:{{ accent }};transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.16,1,.3,1)"></div>
        <div style="position:relative;z-index:2;display:flex;flex-direction:column;height:100%">
          <div style="display:flex;align-items:flex-start;justify-content:space-between">
            <span data-val-num style="font-size:13px;font-weight:600;letter-spacing:0.12em;color:rgba(255,255,255,0.3);transition:color .4s ease">04</span>
            <div data-val-icon style="width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);transition:transform .55s cubic-bezier(.16,1,.3,1),background .4s ease,border-color .4s ease"><svg width="22" height="22" viewBox="0 0 28 28" fill="none" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3 L6 16 h6 l-1 9 l9-13 h-6 z"/></svg></div>
          </div>
          <h3 style="font-size:20px;font-weight:400;color:#fff;margin:auto 0 12px;letter-spacing:-0.005em;line-height:1.25">Operational Agility</h3>
          <p style="font-size:14px;line-height:1.6;color:rgba(255,255,255,0.5);font-weight:300;margin:0">Responsive turnaround when timing matters.</p>
          <span data-val-arrow style="display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:{{ accent }};margin-top:18px;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1)">Learn more →</span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ░░ 10 · OPERATING FOOTPRINT ░░ -->
<section style="background:#0a0b0e;padding:128px 0;border-top:1px solid rgba(255,255,255,0.05)">
  <div style="max-width:1320px;margin:0 auto;padding:0 44px">
    <div data-reveal>
      <span style="display:inline-block;font-size:12px;font-weight:500;letter-spacing:0.3em;text-transform:uppercase;color:rgba(255,255,255,0.4)">National Reach</span>
      <h2 style="font-size:clamp(30px,4vw,50px);font-weight:200;line-height:1.12;letter-spacing:-0.018em;color:#fff;margin:18px 0 0">Built where you operate.</h2>
    </div>
    <div data-reveal data-reveal-delay="120" style="display:grid;grid-template-columns:1.05fr 0.95fr;gap:24px;margin-top:56px;align-items:stretch">
      <div style="position:relative;overflow:hidden;border:1px solid rgba(255,255,255,0.1);border-radius:14px;background:radial-gradient(120% 130% at 78% 18%,#13161c 0%,#080a0d 60%);padding:44px 42px;display:flex;flex-direction:column;justify-content:space-between;min-height:420px">
        <div style="position:absolute;right:-90px;top:-90px;width:360px;height:360px;pointer-events:none">
          <div style="position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,0.06)"></div>
          <div style="position:absolute;inset:48px;border-radius:50%;border:1px solid rgba(255,255,255,0.05)"></div>
          <div style="position:absolute;inset:96px;border-radius:50%;border:1px solid rgba(255,255,255,0.04)"></div>
          <div style="position:absolute;left:50%;top:50%;width:140px;height:140px;margin:-70px 0 0 -70px;border-radius:50%;border:1px solid {{ accentRing }};animation:radarPulse 3.4s ease-out infinite"></div>
          <div style="position:absolute;left:50%;top:50%;width:140px;height:140px;margin:-70px 0 0 -70px;border-radius:50%;border:1px solid {{ accentRing }};animation:radarPulse 3.4s ease-out infinite 1.7s"></div>
          <div style="position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:{{ accent }};box-shadow:0 0 18px 3px {{ accentRing }}"></div>
        </div>
        <div style="position:relative;z-index:2">
          <span style="font-size:11px;font-weight:500;letter-spacing:0.24em;text-transform:uppercase;color:{{ accent }}">{{ activeLoc.idxLabel }}</span>
          <h3 style="font-size:clamp(38px,4.4vw,54px);font-weight:200;color:#fff;margin:16px 0 0;letter-spacing:-0.02em">{{ activeLoc.name }}</h3>
          <p style="font-size:17px;line-height:1.6;color:rgba(255,255,255,0.62);font-weight:300;margin:14px 0 0;max-width:340px">{{ activeLoc.role }}</p>
        </div>
        <div style="position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;padding-top:28px;border-top:1px solid rgba(255,255,255,0.1)">
          <div>
            <span style="display:block;font-size:10px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.38)">Function</span>
            <span style="display:block;font-size:14px;font-weight:400;color:#fff;margin-top:8px;line-height:1.35">{{ activeLoc.fn }}</span>
          </div>
          <div>
            <span style="display:block;font-size:10px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.38)">Coverage</span>
            <span style="display:block;font-size:14px;font-weight:400;color:#fff;margin-top:8px;line-height:1.35">{{ activeLoc.coverage }}</span>
          </div>
          <div>
            <span style="display:block;font-size:10px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.38)">Response</span>
            <span style="display:block;font-size:14px;font-weight:400;color:{{ accent }};margin-top:8px;line-height:1.35">{{ activeLoc.response }}</span>
          </div>
        </div>
      </div>
      <div style="position:relative;display:flex;flex-direction:column;gap:12px;justify-content:center">
        <div style="position:absolute;left:39px;top:38px;bottom:38px;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,0.14) 12%,rgba(255,255,255,0.14) 88%,transparent);pointer-events:none"></div>
        <sc-for list="{{ locations }}" as="loc" hint-placeholder-count="3">
          <button onClick="{{ loc.onClick }}" style="position:relative;z-index:2;display:flex;align-items:center;gap:18px;width:100%;text-align:left;background:{{ loc.rowBg }};border:1px solid {{ loc.rowBorder }};border-radius:12px;padding:22px 24px;cursor:pointer;transition:background .4s ease,border-color .4s ease,transform .4s cubic-bezier(.16,1,.3,1)" style-hover="transform:translateX(4px)">
            <span style="width:{{ loc.dot }};height:{{ loc.dot }};border-radius:50%;flex-shrink:0;background:{{ loc.nodeBg }};box-shadow:0 0 0 6px {{ loc.glow }};transition:all .35s ease"></span>
            <span style="flex:1;min-width:0">
              <span style="display:block;font-size:18px;font-weight:400;letter-spacing:-0.01em;color:{{ loc.labelColor }};transition:color .35s ease">{{ loc.name }}</span>
              <span style="display:block;font-size:13px;font-weight:300;color:{{ loc.roleColor }};margin-top:4px;transition:color .35s ease">{{ loc.role }}</span>
            </span>
            <span style="font-size:12px;font-weight:600;letter-spacing:0.1em;color:{{ loc.idxColor }};transition:color .35s ease">{{ loc.idx }}</span>
          </button>
        </sc-for>
      </div>
    </div>
  </div>
</section>

<!-- ░░ 11 · RESPONSIBILITY CTA CARD ░░ -->
<section style="background:#000;padding:120px 0">
  <div style="max-width:1320px;margin:0 auto;padding:0 44px">
    <div data-reveal onMouseMove="{{ onCtaMove }}" onMouseLeave="{{ onCtaLeave }}" style="position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,0.1);background:radial-gradient(120% 130% at 12% 16%,#13161c 0%,#080a0d 62%);min-height:460px;display:grid;grid-template-columns:1.08fr 0.92fr">
      <div style="position:relative;z-index:3;padding:66px 56px;display:flex;flex-direction:column;justify-content:center">
        <span style="display:inline-block;font-size:12px;font-weight:500;letter-spacing:0.34em;text-transform:uppercase;color:{{ accent }}">The Responsibility</span>
        <p style="font-size:clamp(28px,3.4vw,44px);font-weight:200;line-height:1.2;letter-spacing:-0.015em;color:#fff;margin:22px 0 0;max-width:520px">When protection becomes your responsibility, it should be <span style="color:{{ accent }};font-weight:300">engineered, not improvised.</span></p>
        <p style="font-size:16px;line-height:1.62;color:rgba(255,255,255,0.6);font-weight:300;margin:24px 0 0;max-width:440px">Speak with our team and we'll match a certified B6 platform to your real exposure — handled in strict confidence.</p>
        <div style="display:flex;gap:14px;flex-wrap:wrap;margin-top:38px">
          <a href="#contact" style="display:inline-flex;align-items:center;gap:9px;background:{{ accent }};color:#fff;padding:16px 30px;border-radius:3px;font-size:14px;font-weight:500;letter-spacing:0.03em;text-decoration:none;transition:filter .3s ease,transform .3s ease" style-hover="filter:brightness(1.13);transform:translateY(-1px)">Book a Consultation <span style="font-size:16px">→</span></a>
          <a href="tel:+234" style="display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.04);color:#fff;border:1px solid rgba(255,255,255,0.22);padding:15px 28px;border-radius:3px;font-size:14px;font-weight:400;letter-spacing:0.02em;text-decoration:none;transition:border-color .3s ease,background .3s ease" style-hover="border-color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.08)">Talk to our team</a>
        </div>
      </div>
      <div style="position:relative;overflow:hidden">
        <img ref="{{ ctaImg }}" src="assets/suv-side.png" alt="Armored vehicle" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;will-change:transform;transition:transform .4s ease-out"/>
        <div style="position:absolute;inset:0;background:linear-gradient(90deg,#0a0b0e 0%,rgba(10,11,14,0.55) 26%,rgba(10,11,14,0.12) 55%,transparent 80%)"></div>
        <div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,13,0.4),transparent 30%,transparent 70%,rgba(8,10,13,0.5))"></div>
        <div style="position:absolute;right:-70px;top:-70px;width:240px;height:240px;pointer-events:none">
          <div style="position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,0.06)"></div>
          <div style="position:absolute;inset:40px;border-radius:50%;border:1px solid rgba(255,255,255,0.05)"></div>
          <div style="position:absolute;left:50%;top:50%;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;border:1px solid {{ accentRing }};animation:radarPulse 3.6s ease-out infinite"></div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ░░ 12 · CLOSING CTA + CONTACT ░░ -->
<section id="contact" style="position:relative;background:#000;padding:88px 0;overflow:hidden">
  <svg viewBox="0 0 100 116" style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:120%;opacity:0.04;pointer-events:none" fill="none" stroke="#fff" stroke-width="0.5"><path d="M50 4 L92 22 L92 56 C92 84 72 104 50 112 C28 104 8 84 8 56 L8 22 Z"/><path d="M50 28 L74 38 L74 58 C74 76 64 87 50 92 C36 87 26 76 26 58 L26 38 Z"/></svg>
  <div style="position:relative;max-width:1080px;margin:0 auto;padding:0 44px">
    <div data-reveal style="text-align:center;max-width:620px;margin:0 auto">
      <span style="display:inline-block;font-size:12px;font-weight:500;letter-spacing:0.34em;text-transform:uppercase;color:{{ accent }}">Start Here</span>
      <h2 style="font-size:clamp(32px,4.4vw,56px);font-weight:200;line-height:1.1;letter-spacing:-0.02em;color:#fff;margin:18px 0 0">Discretion starts with a conversation.</h2>
      <p style="font-size:15px;color:rgba(255,255,255,0.5);font-weight:300;margin:18px 0 0">Confidential handling · 24-hour response.</p>
    </div>
    <div data-reveal data-reveal-delay="120" style="display:grid;grid-template-columns:1.2fr 0.8fr;gap:28px;margin-top:42px;align-items:start">
      <div style="background:#111317;border:1px solid rgba(255,255,255,0.08);border-radius:5px;padding:30px 30px">
        <sc-if value="{{ submitted }}" hint-placeholder-val="{{ false }}">
          <div style="display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:40px 0">
            <span style="width:54px;height:54px;border-radius:50%;border:1px solid {{ accentRing }};background:{{ accentSoft }};display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px">✓</span>
            <h3 style="font-size:24px;font-weight:300;color:#fff;margin:0">Request received.</h3>
            <p style="font-size:15px;line-height:1.6;color:rgba(255,255,255,0.6);font-weight:300;margin:0;max-width:340px">We'll respond within 24 hours, handled in strict confidence. For immediate enquiries, call or WhatsApp us directly.</p>
          </div>
        </sc-if>
        <sc-if value="{{ notSubmitted }}" hint-placeholder-val="{{ true }}">
          <form onSubmit="{{ onSubmit }}">
            <span style="font-size:11px;font-weight:500;letter-spacing:0.24em;text-transform:uppercase;color:rgba(255,255,255,0.4)">Confidential Consultation</span>
            <div style="display:flex;flex-direction:column;gap:12px;margin-top:18px">
              <div>
                <label style="display:block;font-size:12px;color:rgba(255,255,255,0.55);margin-bottom:6px;letter-spacing:0.04em">Name *</label>
                <input type="text" value="{{ nameVal }}" onChange="{{ onName }}" placeholder="Full name" style="width:100%;background:#0a0c0f;border:1px solid rgba(255,255,255,0.12);border-radius:3px;padding:11px 14px;color:#fff;font-size:15px;font-family:'DM Sans',sans-serif;outline:none;transition:border-color .3s ease" style-focus="border-color:{{ accent }}"/>
              </div>
              <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
                <div>
                  <label style="display:block;font-size:12px;color:rgba(255,255,255,0.55);margin-bottom:6px;letter-spacing:0.04em">Email *</label>
                  <input type="email" value="{{ emailVal }}" onChange="{{ onEmail }}" placeholder="you@company.com" style="width:100%;background:#0a0c0f;border:1px solid rgba(255,255,255,0.12);border-radius:3px;padding:11px 14px;color:#fff;font-size:15px;font-family:'DM Sans',sans-serif;outline:none;transition:border-color .3s ease" style-focus="border-color:{{ accent }}"/>
                </div>
                <div>
                  <label style="display:block;font-size:12px;color:rgba(255,255,255,0.55);margin-bottom:6px;letter-spacing:0.04em">Phone *</label>
                  <input type="tel" value="{{ phoneVal }}" onChange="{{ onPhone }}" placeholder="+234 ..." style="width:100%;background:#0a0c0f;border:1px solid rgba(255,255,255,0.12);border-radius:3px;padding:11px 14px;color:#fff;font-size:15px;font-family:'DM Sans',sans-serif;outline:none;transition:border-color .3s ease" style-focus="border-color:{{ accent }}"/>
                </div>
              </div>
              <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
                <div>
                  <label style="display:block;font-size:12px;color:rgba(255,255,255,0.55);margin-bottom:6px;letter-spacing:0.04em">Type</label>
                  <select value="{{ typeVal }}" onChange="{{ onType }}" style="width:100%;background:#0a0c0f;border:1px solid rgba(255,255,255,0.12);border-radius:3px;padding:11px 14px;color:#fff;font-size:15px;font-family:'DM Sans',sans-serif;outline:none;transition:border-color .3s ease;appearance:none" style-focus="border-color:{{ accent }}">
                    <option value="" style="background:#111317">Select…</option>
                    <option value="individual" style="background:#111317">Individual</option>
                    <option value="corporate" style="background:#111317">Corporate</option>
                    <option value="government" style="background:#111317">Government</option>
                  </select>
                </div>
                <div>
                  <label style="display:block;font-size:12px;color:rgba(255,255,255,0.55);margin-bottom:6px;letter-spacing:0.04em">Location</label>
                  <input type="text" value="{{ locationVal }}" onChange="{{ onLocation }}" placeholder="City / country" style="width:100%;background:#0a0c0f;border:1px solid rgba(255,255,255,0.12);border-radius:3px;padding:11px 14px;color:#fff;font-size:15px;font-family:'DM Sans',sans-serif;outline:none;transition:border-color .3s ease" style-focus="border-color:{{ accent }}"/>
                </div>
              </div>
              <div>
                <label style="display:block;font-size:12px;color:rgba(255,255,255,0.55);margin-bottom:6px;letter-spacing:0.04em">Service interest</label>
                <select value="{{ serviceVal }}" onChange="{{ onService }}" style="width:100%;background:#0a0c0f;border:1px solid rgba(255,255,255,0.12);border-radius:3px;padding:11px 14px;color:#fff;font-size:15px;font-family:'DM Sans',sans-serif;outline:none;transition:border-color .3s ease;appearance:none" style-focus="border-color:{{ accent }}">
                  <option value="" style="background:#111317">Select a service…</option>
                  <option value="production" style="background:#111317">Vehicle Production &amp; Armoring</option>
                  <option value="sale" style="background:#111317">Armored Vehicle Sale</option>
                  <option value="rental" style="background:#111317">Rental</option>
                  <option value="maintenance" style="background:#111317">Servicing &amp; Maintenance</option>
                  <option value="training" style="background:#111317">Driver Training</option>
                  <option value="unsure" style="background:#111317">Not sure yet</option>
                </select>
              </div>
              <label style="display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:13px;color:rgba(255,255,255,0.55);line-height:1.5">
                <input type="checkbox" checked="{{ privacyVal }}" onChange="{{ onPrivacy }}" style="margin-top:2px;width:16px;height:16px;accent-color:{{ accent }};flex-shrink:0"/>
                I consent to confidential handling under the Privacy Policy.
              </label>
              <label style="display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:13px;color:rgba(255,255,255,0.55);line-height:1.5">
                <input type="checkbox" checked="{{ termsVal }}" onChange="{{ onTerms }}" style="margin-top:2px;width:16px;height:16px;accent-color:{{ accent }};flex-shrink:0"/>
                I accept the Terms of engagement.
              </label>
              <sc-if value="{{ formError }}" hint-placeholder-val="">
                <p style="font-size:13px;color:#e0715f;margin:0">{{ formError }}</p>
              </sc-if>
              <button type="submit" style="width:100%;background:{{ accent }};color:#fff;border:none;border-radius:3px;padding:14px;font-size:14px;font-weight:500;letter-spacing:0.03em;font-family:'DM Sans',sans-serif;cursor:pointer;transition:filter .3s ease;margin-top:2px" style-hover="filter:brightness(1.13)">Request a Confidential Consultation</button>
            </div>
          </form>
        </sc-if>
      </div>
      <div style="display:flex;flex-direction:column;gap:12px">
        <a href="tel:+234" style="display:flex;align-items:center;gap:14px;padding:18px 22px;background:#0d0f13;border:1px solid rgba(255,255,255,0.08);border-radius:4px;text-decoration:none;transition:border-color .3s ease" style-hover="border-color:rgba(255,255,255,0.22)">
          <span style="width:40px;height:40px;border-radius:50%;background:{{ accentSoft }};display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z"/></svg></span>
          <div><div style="font-size:14px;font-weight:500;color:#fff">Call directly</div><div style="font-size:13px;color:rgba(255,255,255,0.45);font-weight:300">Immediate enquiries</div></div>
        </a>
        <a href="https://wa.me/234" style="display:flex;align-items:center;gap:14px;padding:18px 22px;background:#0d0f13;border:1px solid rgba(255,255,255,0.08);border-radius:4px;text-decoration:none;transition:border-color .3s ease" style-hover="border-color:rgba(255,255,255,0.22)">
          <span style="width:40px;height:40px;border-radius:50%;background:{{ accentSoft }};display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="18" height="18" viewBox="0 0 24 24" fill="#fff"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm5.8 14.16c-.25.69-1.44 1.32-1.98 1.36-.53.05-.53.42-3.35-.7-2.82-1.11-4.6-3.97-4.74-4.16-.14-.19-1.13-1.5-1.13-2.86 0-1.36.71-2.03.96-2.31.25-.28.55-.35.73-.35.18 0 .37 0 .53.01.17.01.4-.06.62.48.25.59.81 2 .88 2.14.07.14.11.31.02.5-.09.19-.14.31-.27.47-.14.16-.29.36-.41.48-.14.14-.28.29-.12.57.16.28.71 1.17 1.53 1.9 1.05.94 1.94 1.23 2.22 1.37.28.14.44.12.6-.07.18-.19.69-.81.87-1.09.18-.28.37-.23.62-.14.25.09 1.6.76 1.87.9.28.14.46.21.53.32.07.12.07.66-.18 1.35Z"/></svg></span>
          <div><div style="font-size:14px;font-weight:500;color:#fff">WhatsApp</div><div style="font-size:13px;color:rgba(255,255,255,0.45);font-weight:300">Message our team</div></div>
        </a>
        <a href="mailto:hello@mainstaybulletproof.com" style="display:flex;align-items:center;gap:14px;padding:18px 22px;background:#0d0f13;border:1px solid rgba(255,255,255,0.08);border-radius:4px;text-decoration:none;transition:border-color .3s ease" style-hover="border-color:rgba(255,255,255,0.22)">
          <span style="width:40px;height:40px;border-radius:50%;background:{{ accentSoft }};display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></svg></span>
          <div><div style="font-size:14px;font-weight:500;color:#fff">Email</div><div style="font-size:13px;color:rgba(255,255,255,0.45);font-weight:300">Confidential correspondence</div></div>
        </a>
      </div>
    </div>
  </div>
</section>

<!-- ░░ 13 · FOOTER ░░ -->
<footer style="position:relative;background:#000;border-top:1px solid rgba(255,255,255,0.07);padding:76px 0 40px;overflow:hidden">
  <svg viewBox="0 0 100 116" style="position:absolute;right:-2%;bottom:-40%;height:170%;opacity:0.035;pointer-events:none" fill="none" stroke="#fff" stroke-width="0.5"><path d="M50 4 L92 22 L92 56 C92 84 72 104 50 112 C28 104 8 84 8 56 L8 22 Z"/></svg>
  <div style="position:relative;max-width:1320px;margin:0 auto;padding:0 44px">
    <div style="display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px">
      <div>
        <a href="#top" style="display:inline-flex;align-items:center;text-decoration:none">
          <img src="assets/mainstay-logo.png" alt="Mainstay Bulletproof" style="height:28px;width:auto;display:block"/>
        </a>
        <p style="font-size:14px;line-height:1.65;color:rgba(255,255,255,0.45);font-weight:300;margin:20px 0 0;max-width:300px">International-standard B6 armoring, engineered and completed in Nigeria.</p>
      </div>
      <div>
        <h4 style="font-size:11px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin:0 0 18px">Locations</h4>
        <div style="display:flex;flex-direction:column;gap:11px;font-size:14px;color:rgba(255,255,255,0.6);font-weight:300">
          <span>Lagos</span><span>Abuja</span><span>Asaba</span>
        </div>
      </div>
      <div>
        <h4 style="font-size:11px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin:0 0 18px">Services</h4>
        <div style="display:flex;flex-direction:column;gap:11px;font-size:14px">
          <a href="#services" style="color:rgba(255,255,255,0.6);text-decoration:none;font-weight:300;transition:color .25s" style-hover="color:#fff">Production &amp; Armoring</a>
          <a href="#services" style="color:rgba(255,255,255,0.6);text-decoration:none;font-weight:300;transition:color .25s" style-hover="color:#fff">Sale</a>
          <a href="#services" style="color:rgba(255,255,255,0.6);text-decoration:none;font-weight:300;transition:color .25s" style-hover="color:#fff">Rental</a>
          <a href="#services" style="color:rgba(255,255,255,0.6);text-decoration:none;font-weight:300;transition:color .25s" style-hover="color:#fff">Maintenance</a>
          <a href="#services" style="color:rgba(255,255,255,0.6);text-decoration:none;font-weight:300;transition:color .25s" style-hover="color:#fff">Driver Training</a>
        </div>
      </div>
      <div>
        <h4 style="font-size:11px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin:0 0 18px">Get in touch</h4>
        <div style="display:flex;flex-direction:column;gap:11px;font-size:14px;color:rgba(255,255,255,0.6);font-weight:300;margin-bottom:22px">
          <span>+234 000 000 0000</span>
          <span>hello@mainstaybulletproof.com</span>
        </div>
        <a href="#contact" style="display:inline-flex;align-items:center;background:{{ accent }};color:#fff;padding:13px 22px;border-radius:2px;font-size:13px;font-weight:500;letter-spacing:0.03em;text-decoration:none;transition:filter .3s ease" style-hover="filter:brightness(1.13)">Book a Consultation</a>
      </div>
    </div>
    <div style="display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:56px;padding-top:26px;border-top:1px solid rgba(255,255,255,0.07)">
      <span style="font-size:12.5px;color:rgba(255,255,255,0.35);font-weight:300">© Mainstay Bulletproof</span>
      <div style="display:flex;gap:24px;font-size:12.5px">
        <a href="#" style="color:rgba(255,255,255,0.4);text-decoration:none;font-weight:300;transition:color .25s" style-hover="color:#fff">Terms</a>
        <a href="#" style="color:rgba(255,255,255,0.4);text-decoration:none;font-weight:300;transition:color .25s" style-hover="color:#fff">Privacy</a>
        <a href="#" style="color:rgba(255,255,255,0.4);text-decoration:none;font-weight:300;transition:color .25s" style-hover="color:#fff">Cookies</a>
      </div>
    </div>
  </div>
</footer>

</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;accentColor&quot;:{&quot;editor&quot;:&quot;color&quot;,&quot;default&quot;:&quot;#0B77C0&quot;,&quot;tsType&quot;:&quot;string&quot;,&quot;options&quot;:[&quot;#0B77C0&quot;,&quot;#C8A24B&quot;,&quot;#8E2B2B&quot;,&quot;#3E7C5A&quot;]},&quot;motionLevel&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;default&quot;:&quot;Cinematic&quot;,&quot;tsType&quot;:&quot;string&quot;,&quot;options&quot;:[&quot;Cinematic&quot;,&quot;Minimal&quot;,&quot;Off&quot;]},&quot;hotspotPulse&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;}}">
class Component extends DCLogic {
  state = {
    scrolled: false,
    activeHotspot: 0,
    activeLayer: 0,
    hoveredService: -1,
    hoveredFleet: -1,
    openAudience: 0,
    activeLocation: 1,
    form: { name: '', email: '', phone: '', type: '', location: '', service: '', privacy: false, terms: false },
    submitted: false,
    formError: ''
  };

  heroRef = React.createRef();
  lightRef = React.createRef();
  rootRef = React.createRef();
  advRef = React.createRef();
  svcWrap = React.createRef();
  svcTrack = React.createRef();
  proofImg = React.createRef();
  proofCard = React.createRef();
  ctaImg = React.createRef();
  fleetTrack = React.createRef();
  stdRef = React.createRef();
  stdStage = React.createRef();
  zoomIdx = -1;

  _level() { return this.props.motionLevel || 'Cinematic'; }

  _rgba(hex, a) {
    let h = String(hex || '#0B77C0').replace('#', '');
    if (h.length === 3) h = h.split('').map(c => c + c).join('');
    const n = parseInt(h, 16);
    return 'rgba(' + ((n >> 16) & 255) + ',' + ((n >> 8) & 255) + ',' + (n & 255) + ',' + a + ')';
  }

  _hotData() {
    return [
      { label: 'Transparent Armor', rating: 'B6 · VR6', desc: '21-layer ballistic glass, 38–42mm, overlapped to the frame so there is no exposed edge.', x: 39, y: 31 },
      { label: 'Ballistic Door Panels', rating: 'VPAM VR7', desc: 'Hardened ballistic steel backed by aramid composite, with overlapping coverage at every shut line.', x: 47, y: 53 },
      { label: 'Pillar Reinforcement', rating: 'B6', desc: 'A, B and C pillars sealed so the protective envelope has no bypass between the glass and body.', x: 56, y: 32 },
      { label: 'Floor Blast Lining', rating: 'STANAG', desc: 'Fragmentation and blast-mitigation lining carried beneath the cabin floor.', x: 50, y: 67 },
      { label: 'Continuous Roof', rating: 'B6', desc: 'Full ballistic roof coverage carried across the cabin with no weak seam.', x: 55, y: 18 }
    ];
  }

  componentDidMount() {
    const level = this._level();
    const prefersReduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const motionOff = level === 'Off' || prefersReduce;
    const ac = this.props.accentColor || '#0B77C0';

    this._onScroll = () => {
      const y = window.scrollY || 0;
      const sc = y > 40;
      if (sc !== this.state.scrolled) this.setState({ scrolled: sc });
      if (!motionOff && level === 'Cinematic' && this.heroRef.current) {
        const o = Math.min(y, 900);
        this.heroRef.current.style.transform = 'scale(' + (1 + o / 9000) + ') translateY(' + (o * 0.06) + 'px)';
      }
      if (this._revealCheck) this._revealCheck();
      this._pinStandards();
    };
    window.addEventListener('scroll', this._onScroll, { passive: true });
    this._onResize = () => this._pinStandards();
    window.addEventListener('resize', this._onResize, { passive: true });

    const root = this.rootRef.current;
    if (root && !motionOff) {
      const els = [...root.querySelectorAll('[data-reveal]')];
      const hidden = [];
      els.forEach(el => {
        el.style.transition = 'opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1)';
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight * 0.95 && r.bottom > 0) {
          el.style.opacity = '1';
          el.style.transform = 'none';
        } else {
          el.style.opacity = '0';
          el.style.transform = 'translateY(30px)';
          hidden.push(el);
        }
      });
      this._revealCheck = () => {
        for (let i = hidden.length - 1; i >= 0; i--) {
          const el = hidden[i];
          const r = el.getBoundingClientRect();
          if (r.top < window.innerHeight * 0.9 && r.bottom > 0) {
            el.style.transitionDelay = (el.getAttribute('data-reveal-delay') || '0') + 'ms';
            el.style.opacity = '1';
            el.style.transform = 'none';
            hidden.splice(i, 1);
          }
        }
      };
      requestAnimationFrame(() => requestAnimationFrame(this._revealCheck));
      setTimeout(this._revealCheck, 500);
      window.addEventListener('load', this._revealCheck);
    }

    this.initGsap();
    requestAnimationFrame(() => this._pinStandards());
    setTimeout(() => this._pinStandards(), 400);
  }

  initGsap() {
    const level = this._level();
    const prefersReduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const motionOff = level === 'Off' || prefersReduce;
    if (motionOff) { if (this.svcWrap.current) this.svcWrap.current.style.overflowX = 'auto'; return; }
    let tries = 0;
    const tick = () => {
      if (window.gsap && window.ScrollTrigger) { this._setupGsap(); return; }
      if (tries++ > 70) { if (this.svcWrap.current) this.svcWrap.current.style.overflowX = 'auto'; return; }
      setTimeout(tick, 80);
    };
    tick();
  }

  _setupGsap() {
    const g = window.gsap;
    g.registerPlugin(window.ScrollTrigger);

    // About / Advantage cards — staggered reveal on scroll
    if (this.advRef.current) {
      const cards = this.advRef.current.querySelectorAll('[data-adv-card]');
      g.from(cards, {
        y: 64, opacity: 0, duration: 0.95, ease: 'power3.out', stagger: 0.13,
        scrollTrigger: { trigger: this.advRef.current, start: 'top 80%' }
      });
    }

    // Services — pinned horizontal scroll (2 cards visible, rest revealed)
    const wrap = this.svcWrap.current, track = this.svcTrack.current;
    if (wrap && track) {
      const dist = () => Math.max(0, track.scrollWidth - window.innerWidth);
      g.to(track, {
        x: () => -dist(), ease: 'none',
        scrollTrigger: {
          trigger: wrap, start: 'top top', end: () => '+=' + dist(),
          scrub: 0.6, pin: true, anticipatePin: 1, invalidateOnRefresh: true
        }
      });
    }
    setTimeout(() => window.ScrollTrigger && window.ScrollTrigger.refresh(), 250);
    window.addEventListener('load', () => window.ScrollTrigger && window.ScrollTrigger.refresh());
    this._startFleetAuto();
  }

  _startFleetAuto() {
    this._stopFleetAuto();
    this._fleetTimer = setInterval(() => {
      const t = this.fleetTrack.current;
      if (!t || this._fleetPaused) return;
      const max = t.scrollWidth - t.clientWidth;
      if (max <= 0) return;
      const card = (t.firstElementChild ? t.firstElementChild.getBoundingClientRect().width : 300) + 20;
      if (t.scrollLeft >= max - 4) this._fleetTweenTo(0);
      else this._fleetTweenTo(Math.min(max, t.scrollLeft + card));
    }, 3200);
  }
  _stopFleetAuto() { if (this._fleetTimer) { clearInterval(this._fleetTimer); this._fleetTimer = null; } }
  onFleetPause = () => { this._fleetPaused = true; };
  onFleetResume = () => { this._fleetPaused = false; };

  componentWillUnmount() {
    window.removeEventListener('scroll', this._onScroll);
    if (this._onResize) window.removeEventListener('resize', this._onResize);
    this._stopFleetAuto();
    if (this._io) this._io.disconnect();
    if (this._sio) this._sio.disconnect();
    if (window.ScrollTrigger) window.ScrollTrigger.getAll().forEach(t => t.kill());
  }

  onLight = (e) => {
    if (this._level() !== 'Cinematic') return;
    const el = this.lightRef.current;
    if (!el) return;
    const r = e.currentTarget.getBoundingClientRect();
    const ac = this.props.accentColor || '#0B77C0';
    el.style.background = 'radial-gradient(440px circle at ' + (e.clientX - r.left) + 'px ' + (e.clientY - r.top) + 'px, ' + this._rgba(ac, 0.16) + ', transparent 62%)';
  };

  _pinStandards() {
    const sec = this.stdRef.current, stage = this.stdStage.current;
    if (!sec || !stage) return;
    const vh = window.innerHeight;
    const pinDur = sec.offsetHeight - vh;
    if (pinDur <= 0) return;
    const into = -sec.getBoundingClientRect().top;
    if (into <= 0) {
      if (stage.style.position !== 'absolute' || stage.style.top !== '0px') { stage.style.position = 'absolute'; stage.style.top = '0px'; }
    } else if (into >= pinDur) {
      stage.style.position = 'absolute'; stage.style.top = pinDur + 'px';
    } else {
      stage.style.position = 'fixed'; stage.style.top = '0px';
    }
    const p = Math.min(1, Math.max(0, into / pinDur));
    const idx = Math.min(4, Math.floor(p * 5 + 0.0001));
    if (idx !== this.state.activeLayer) this.setState({ activeLayer: idx });
  }

  onLayerJump = (i) => {
    const sec = this.stdRef.current;
    if (!sec) return;
    const secTop = sec.getBoundingClientRect().top + window.scrollY;
    const pinDur = sec.offsetHeight - window.innerHeight;
    const top = secTop + ((i + 0.5) / 5) * pinDur;
    window.scrollTo({ top, behavior: 'smooth' });
  };

  onHotspot = (i) => {
    const same = this.zoomIdx === i;
    this.setState({ activeHotspot: i });
    // Flip the detail card
    const card = this.proofCard.current;
    if (card && this._level() !== 'Off') {
      card.style.animation = 'none';
      void card.offsetWidth;
      card.style.animation = 'flipIn .62s cubic-bezier(.16,1,.3,1) both';
    }
    // Zoom the image toward the clicked point (toggle off if same)
    const img = this.proofImg.current;
    const h = this._hotData()[i];
    if (img && h) {
      if (same) { img.style.transformOrigin = 'center'; img.style.transform = 'scale(1)'; this.zoomIdx = -1; }
      else { img.style.transformOrigin = h.x + '% ' + h.y + '%'; img.style.transform = 'scale(2.3)'; this.zoomIdx = i; }
    }
  };

  _fleetTweenTo(target) {
    const t = this.fleetTrack.current;
    if (!t) return;
    const start = t.scrollLeft;
    const dist = target - start;
    if (Math.abs(dist) < 1) return;
    const dur = 520;
    const t0 = performance.now();
    const ease = (p) => 1 - Math.pow(1 - p, 3);
    t.style.scrollSnapType = 'none';
    cancelAnimationFrame(this._fleetRaf);
    const tick = (now) => {
      const p = Math.min(1, (now - t0) / dur);
      t.scrollLeft = start + dist * ease(p);
      if (p < 1) this._fleetRaf = requestAnimationFrame(tick);
      else t.style.scrollSnapType = 'x proximity';
    };
    this._fleetRaf = requestAnimationFrame(tick);
  }
  _fleetScroll(dir) {
    const t = this.fleetTrack.current;
    if (!t) return;
    const max = t.scrollWidth - t.clientWidth;
    const step = t.clientWidth * 0.72;
    this._fleetTweenTo(Math.max(0, Math.min(max, t.scrollLeft + dir * step)));
  }
  onFleetPrev = () => { this._fleetPaused = true; this._fleetScroll(-1); };
  onFleetNext = () => { this._fleetPaused = true; this._fleetScroll(1); };

  onResetZoom = () => {
    const img = this.proofImg.current;
    if (img) { img.style.transform = 'scale(1)'; img.style.transformOrigin = 'center'; }
    this.zoomIdx = -1;
  };

  onAdvMove = (e) => {
    if (this._level() === 'Off') return;
    const el = e.currentTarget;
    const r = el.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width - 0.5;
    const py = (e.clientY - r.top) / r.height - 0.5;
    el.style.transform = 'perspective(900px) rotateX(' + (-py * 6) + 'deg) rotateY(' + (px * 7) + 'deg) translateY(-4px)';
  };
  onAdvLeave = (e) => { e.currentTarget.style.transform = 'none'; };

  onValMove = (e) => {
    const el = e.currentTarget;
    const r = el.getBoundingClientRect();
    const x = e.clientX - r.left, y = e.clientY - r.top;
    const glow = el.querySelector('[data-val-glow]');
    if (glow) { glow.style.left = x + 'px'; glow.style.top = y + 'px'; glow.style.opacity = '1'; }
    const bar = el.querySelector('[data-val-bar]'); if (bar) bar.style.transform = 'scaleX(1)';
    const num = el.querySelector('[data-val-num]'); if (num) num.style.color = this.props.accentColor || '#0B77C0';
    const icon = el.querySelector('[data-val-icon]'); if (icon) { icon.style.transform = 'translateY(-3px) scale(1.06)'; icon.style.background = this._rgba(this.props.accentColor || '#0B77C0', 0.16); icon.style.borderColor = this._rgba(this.props.accentColor || '#0B77C0', 0.5); }
    const arrow = el.querySelector('[data-val-arrow]'); if (arrow) { arrow.style.opacity = '1'; arrow.style.transform = 'translateY(0)'; }
    if (this._level() !== 'Off') {
      const px = x / r.width - 0.5, py = y / r.height - 0.5;
      el.style.transform = 'perspective(900px) rotateX(' + (-py * 5) + 'deg) rotateY(' + (px * 5) + 'deg) translateY(-6px)';
    }
  };
  onValLeave = (e) => {
    const el = e.currentTarget;
    el.style.transform = 'none';
    const glow = el.querySelector('[data-val-glow]'); if (glow) glow.style.opacity = '0';
    const bar = el.querySelector('[data-val-bar]'); if (bar) bar.style.transform = 'scaleX(0)';
    const num = el.querySelector('[data-val-num]'); if (num) num.style.color = 'rgba(255,255,255,0.3)';
    const icon = el.querySelector('[data-val-icon]'); if (icon) { icon.style.transform = 'none'; icon.style.background = 'rgba(255,255,255,0.05)'; icon.style.borderColor = 'rgba(255,255,255,0.1)'; }
    const arrow = el.querySelector('[data-val-arrow]'); if (arrow) { arrow.style.opacity = '0'; arrow.style.transform = 'translateY(6px)'; }
  };

  onCtaMove = (e) => {
    if (this._level() === 'Off' || !this.ctaImg.current) return;
    const r = e.currentTarget.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width - 0.5;
    const py = (e.clientY - r.top) / r.height - 0.5;
    this.ctaImg.current.style.transform = 'scale(1.06) translate(' + (px * -18) + 'px,' + (py * -12) + 'px)';
  };
  onCtaLeave = () => { if (this.ctaImg.current) this.ctaImg.current.style.transform = 'scale(1) translate(0,0)'; };

  _set(field) {
    return (e) => {
      const v = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
      this.setState({ form: { ...this.state.form, [field]: v }, formError: '' });
    };
  }

  onSubmit = (e) => {
    e.preventDefault();
    const f = this.state.form;
    if (!(f.name || '').trim()) { this.setState({ formError: 'Please enter your name.' }); return; }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email)) { this.setState({ formError: 'Enter a valid email address.' }); return; }
    if ((f.phone || '').replace(/\D/g, '').length < 7) { this.setState({ formError: 'Enter a valid phone number.' }); return; }
    if (!f.privacy || !f.terms) { this.setState({ formError: 'Please accept the privacy and terms to continue.' }); return; }
    this.setState({ submitted: true });
  };

  renderVals() {
    const s = this.state;
    const ac = this.props.accentColor || '#0B77C0';
    const pulse = (this.props.hotspotPulse !== false) && this._level() !== 'Off';

    const HOT = this._hotData();
    const hotspots = HOT.map((h, i) => {
      const active = i === s.activeHotspot;
      return {
        ...h, onClick: () => this.onHotspot(i),
        ring: active ? ac : 'rgba(255,255,255,0.55)',
        dotBg: active ? this._rgba(ac, 0.22) : 'rgba(10,11,14,0.55)',
        core: active ? ac : '#ffffff',
        pulseRing: active ? this._rgba(ac, 0.7) : 'rgba(255,255,255,0.32)'
      };
    });
    const a = HOT[s.activeHotspot] || HOT[0];
    const hs = { label: a.label, rating: a.rating, desc: a.desc, idxLabel: 'Component 0' + (s.activeHotspot + 1) + ' / 05' };

    const LAYER = [
      { n: '01', name: 'Ballistic Steel', spec: 'AR-class core', desc: 'Structural ballistic core, formed and welded to the body line for full perimeter coverage.' },
      { n: '02', name: 'Aramid Composite', spec: 'Multi-ply laminate', desc: 'Layered aramid laminate captures spall and fragmentation behind the steel before it reaches the cabin.' },
      { n: '03', name: 'Transparent Armor', spec: '38–42mm glass', desc: '21-layer ballistic glass matched to the body rating, overlapped to the frame with no exposed edge.' },
      { n: '04', name: 'Anti-Spall Liner', spec: 'Interior shield', desc: 'Polycarbonate inner shield that contains secondary fragments inside the protective envelope.' },
      { n: '05', name: 'Structural Reinforcement', spec: 'Uprated to spec', desc: 'Suspension, brakes, hinges and mounts uprated to carry the added mass without losing composure.' }
    ];
    const al = Math.min(s.activeLayer || 0, LAYER.length - 1);
    const layers = LAYER.map((l, i) => ({
      ...l,
      active: i === al,
      onClick: () => this.onLayerJump(i),
      plateBg: i === al ? this._rgba(ac, 0.16) : (i <= al ? 'rgba(255,255,255,0.055)' : 'rgba(255,255,255,0.02)'),
      plateBorder: i === al ? ac : (i <= al ? 'rgba(255,255,255,0.2)' : 'rgba(255,255,255,0.08)'),
      plateOpacity: i <= al ? 1 : 0.42,
      plateShift: i === al ? 'translateX(14px)' : 'translateX(0)',
      plateW: (62 + i * 8) + '%',
      numColor: i <= al ? ac : 'rgba(255,255,255,0.3)',
      nameColor: i <= al ? '#fff' : 'rgba(255,255,255,0.45)',
      dotBg: i <= al ? ac : 'transparent',
      dotBorder: i <= al ? ac : 'rgba(255,255,255,0.3)'
    }));
    const activeLayer = LAYER[al];
    const protectPct = Math.round(((al + 1) / LAYER.length) * 100) + '%';
    const stdSteps = LAYER.map((l, i) => ({ i }));

    const AUD = [
      { title: 'Corporate', line: 'Discreet executive mobility for leadership and visiting personnel — protection that never signals exposure.', cta: 'Speak to our team', slotId: 'who-corporate', imgPh: 'Drop a corporate image', imgPos: 'center 42%', imgFilter: 'brightness(0.85) contrast(1.05)' },
      { title: 'Government & Public Sector', line: 'Protected transport for officials, agencies and security operations, delivered to standard.', cta: 'Discuss requirements', slotId: 'who-government', imgPh: 'Drop a government image', imgPos: 'center 38%', imgFilter: 'brightness(0.7) contrast(1.1)' },
      { title: 'Private Clients', line: 'Confidential protection for individuals and families who value discretion above all.', cta: 'Arrange a private consultation', slotId: 'who-private', imgPh: 'Drop a private-client image', imgPos: 'center 52%', imgFilter: 'brightness(0.62) saturate(0.9) contrast(1.12)' }
    ];
    const audiences = AUD.map((au, i) => {
      const open = i === s.openAudience;
      return {
        ...au, onClick: () => this.setState({ openAudience: open ? -1 : i }),
        maxH: open ? '420px' : '0px', op: open ? 1 : 0, sign: open ? '–' : '+',
        titleColor: open ? '#ffffff' : 'rgba(255,255,255,0.62)'
      };
    });

    const values = [
      { n: '01', title: 'Safety as a Standard', desc: 'Protection is never optional and never partial.' },
      { n: '02', title: 'Global Calibre, Local Expertise', desc: 'International standards, delivered in-country.' },
      { n: '03', title: 'Client-Centric Solutions', desc: "Built around each client's real exposure." },
      { n: '04', title: 'Operational Agility', desc: 'Responsive turnaround when timing matters.' }
    ];

    const LOC = [
      { name: 'Lagos', role: 'Production & armoring hub.', fn: 'Production & Armoring', coverage: 'South-West', response: '24h' },
      { name: 'Abuja', role: 'Central operations & client liaison.', fn: 'Operations & Liaison', coverage: 'Federal Capital', response: '24h' },
      { name: 'Asaba', role: 'Regional service & support point.', fn: 'Service & Support', coverage: 'South-South', response: '48h' }
    ];
    const locations = LOC.map((l, i) => {
      const active = i === s.activeLocation;
      return {
        ...l, idx: '0' + (i + 1), onClick: () => this.setState({ activeLocation: i }),
        nodeBg: active ? ac : 'rgba(255,255,255,0.5)',
        dot: active ? '14px' : '10px',
        glow: active ? this._rgba(ac, 0.4) : 'rgba(255,255,255,0.04)',
        labelColor: active ? '#ffffff' : 'rgba(255,255,255,0.7)',
        roleColor: active ? this._rgba(ac, 0.85) : 'rgba(255,255,255,0.4)',
        rowBg: active ? this._rgba(ac, 0.08) : 'rgba(255,255,255,0.015)',
        rowBorder: active ? this._rgba(ac, 0.4) : 'rgba(255,255,255,0.08)',
        idxColor: active ? ac : 'rgba(255,255,255,0.25)'
      };
    });
    const activeLoc = { ...(LOC[s.activeLocation] || LOC[0]), idxLabel: 'Location 0' + ((s.activeLocation || 0) + 1) + ' / 03' };

    const svcCol = (i) => i === s.hoveredService ? ac : 'rgba(255,255,255,0.42)';
    const svcShift = (i) => i === s.hoveredService ? 'translateX(5px)' : 'none';
    const fleetCol = (i) => i === s.hoveredFleet ? ac : 'rgba(255,255,255,0.42)';

    return {
      rootRef: this.rootRef, heroRef: this.heroRef, lightRef: this.lightRef,
      advRef: this.advRef, svcWrap: this.svcWrap, svcTrack: this.svcTrack,
      proofImg: this.proofImg, proofCard: this.proofCard, ctaImg: this.ctaImg, fleetTrack: this.fleetTrack, stdRef: this.stdRef, stdStage: this.stdStage,
      headerBg: s.scrolled ? 1 : 0,
      accent: ac, accentSoft: this._rgba(ac, 0.16), accentRing: this._rgba(ac, 0.5),
      onLight: this.onLight, onResetZoom: this.onResetZoom,
      onAdvMove: this.onAdvMove, onAdvLeave: this.onAdvLeave,
      onValMove: this.onValMove, onValLeave: this.onValLeave,
      onCtaMove: this.onCtaMove, onCtaLeave: this.onCtaLeave,
      onSvcEnter: (e) => this.setState({ hoveredService: +e.currentTarget.dataset.i }),
      onSvcLeave: () => this.setState({ hoveredService: -1 }),
      onFleetEnter: (e) => this.setState({ hoveredFleet: +e.currentTarget.dataset.i }),
      onFleetLeave: () => this.setState({ hoveredFleet: -1 }),
      onFleetPrev: this.onFleetPrev, onFleetNext: this.onFleetNext,
      onFleetPause: this.onFleetPause, onFleetResume: this.onFleetResume,
      svcA0: svcCol(0), svcA1: svcCol(1), svcA2: svcCol(2), svcA3: svcCol(3), svcA4: svcCol(4),
      svcT0: svcShift(0), svcT1: svcShift(1), svcT2: svcShift(2), svcT3: svcShift(3), svcT4: svcShift(4),
      fleetA0: fleetCol(0), fleetA1: fleetCol(1), fleetA2: fleetCol(2), fleetA3: fleetCol(3), fleetA4: fleetCol(4), fleetA5: fleetCol(5),
      hotspots, pulse, hs,
      layers, activeLayer, protectPct, stdSteps, audiences, values, locations, activeLoc,
      emailVal: s.form.email, phoneVal: s.form.phone, serviceVal: s.form.service,
      nameVal: s.form.name, typeVal: s.form.type, locationVal: s.form.location,
      onName: this._set('name'), onType: this._set('type'), onLocation: this._set('location'),
      privacyVal: s.form.privacy, termsVal: s.form.terms,
      onEmail: this._set('email'), onPhone: this._set('phone'), onService: this._set('service'),
      onPrivacy: this._set('privacy'), onTerms: this._set('terms'),
      onSubmit: this.onSubmit, submitted: s.submitted, notSubmitted: !s.submitted, formError: s.formError
    };
  }
}
</script>
</body>
</html>
