<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VIGIL — The World's Smallest Alarm Patch</title>
  <link rel="icon" type="image/svg+xml" href="favicon.svg">
  <link rel="icon" type="image/png" href="favicon.png">
  <link rel="apple-touch-icon" href="apple-touch-icon.svg">
  <meta name="theme-color" content="#E8440A">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;600;700;800&display=swap" rel="stylesheet">
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --white:   #FFFFFF;
      --off:     #F8F7F4;
      --card:    #F2F1EE;
      --border:  #E5E3DE;
      --text:    #111111;
      --muted:   #6B6860;
      --faint:   #AEABA4;
      --orange:  #E8440A;
      --o-light: #FFF1EC;
      --blue:    #1A6FD4;
      --b-light: #EBF2FF;
    }
    html { scroll-behavior: smooth; }
    body { background: var(--white); color: var(--text); font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

    /* ── NAV ── */
    nav {
      position: sticky; top: 0; z-index: 200;
      height: 62px; padding: 0 56px;
      background: rgba(255,255,255,0.93); backdrop-filter: blur(24px);
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
    }
    .logo { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 800; letter-spacing: 7px; }
    .nav-links { display: flex; gap: 32px; }
    .nav-links a { font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .15s; }
    .nav-links a:hover { color: var(--text); }
    .nav-cta { display: flex; gap: 10px; }
    .btn { padding: 9px 22px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all .15s; display: inline-flex; align-items: center; }
    .btn-outline { border: 1.5px solid var(--border); background: transparent; color: var(--muted); }
    .btn-outline:hover { border-color: var(--text); color: var(--text); }
    .btn-solid { background: var(--text); border: 1.5px solid var(--text); color: #fff; }
    .btn-solid:hover { background: #333; }

    /* ── HERO ── */
    #hero {
      max-width: 1280px; margin: 0 auto;
      padding: 80px 56px 60px;
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 80px; align-items: center; min-height: 88vh;
    }
    .hero-kicker {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--o-light); border: 1px solid #FFCEBA; border-radius: 100px;
      padding: 5px 14px; font-size: 11px; font-weight: 700;
      letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange);
      margin-bottom: 28px;
    }
    .kicker-dot { width: 6px; height: 6px; background: var(--orange); border-radius: 50%; }
    h1 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(40px, 5vw, 72px);
      font-weight: 800; line-height: 1.05; letter-spacing: -2px;
      margin-bottom: 22px;
    }
    h1 em { font-style: normal; color: var(--orange); }
    .hero-desc { font-size: 17px; color: var(--muted); line-height: 1.8; max-width: 460px; margin-bottom: 36px; }
    .hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
    .btn-hero { padding: 14px 32px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; }
    .btn-hero-dark { background: var(--text); color: #fff; transition: background .15s; }
    .btn-hero-dark:hover { background: #333; }
    .btn-hero-light { border: 1.5px solid var(--border); color: var(--muted); background: transparent; transition: all .15s; }
    .btn-hero-light:hover { border-color: var(--text); color: var(--text); }
    .hero-right { position: relative; }
    .hero-img-main {
      width: 100%; border-radius: 24px; overflow: hidden;
      box-shadow: 0 24px 80px rgba(0,0,0,0.12);
      aspect-ratio: 4/3; object-fit: cover;
    }
    .hero-img-badge {
      position: absolute; bottom: -20px; left: 32px;
      background: white; border: 1px solid var(--border);
      border-radius: 14px; padding: 16px 20px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.1);
      display: flex; align-items: center; gap: 14px;
    }
    .badge-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--o-light); display: flex; align-items: center; justify-content: center; font-size: 22px; }
    .badge-text strong { display: block; font-size: 14px; font-weight: 700; }
    .badge-text span { font-size: 12px; color: var(--muted); }

    /* ── TRUST BAR ── */
    .trust {
      background: var(--off); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
      padding: 14px 56px;
      display: flex; align-items: center; justify-content: center; gap: 0; overflow-x: auto;
    }
    .trust-item {
      display: flex; align-items: center; gap: 7px;
      padding: 0 24px; border-right: 1px solid var(--border);
      font-size: 12px; font-weight: 600; color: var(--muted);
      white-space: nowrap; letter-spacing: 0.3px;
    }
    .trust-item:last-child { border-right: none; }
    .t-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }

    /* ── SECTION UTIL ── */
    .sec { padding: 100px 56px; max-width: 1280px; margin: 0 auto; }
    .sec-full { padding: 100px 0; }
    .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--orange); display: block; margin-bottom: 14px; }
    .eyebrow.b { color: var(--blue); }
    .h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(28px, 3.5vw, 46px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; margin-bottom: 14px; }
    .lead { font-size: 17px; color: var(--muted); line-height: 1.8; max-width: 520px; }
    .divider { border: none; border-top: 1px solid var(--border); }

    /* ── SIZE COMPARISON ── */
    .size-block {
      background: var(--off); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
      padding: 56px;
    }
    .size-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
    .size-visual {
      display: flex; align-items: flex-end; gap: 32px; padding: 32px 0;
    }
    .size-item { text-align: center; }
    .card-shape {
      width: 85px; height: 54px; border-radius: 6px;
      background: linear-gradient(135deg, #E0DEDA, #C8C4BE);
      border: 1px solid #B8B4AE;
      display: flex; align-items: center; justify-content: center;
      font-size: 10px; color: #888; font-weight: 600;
      margin: 0 auto 8px;
    }
    .vigil-flex-shape {
      width: 15px; height: 12px; border-radius: 3px;
      background: var(--orange); opacity: 0.8;
      margin: 0 auto 8px;
    }
    .size-label { font-size: 12px; color: var(--muted); font-weight: 500; }
    .size-label strong { display: block; font-size: 14px; color: var(--text); font-weight: 700; }
    .size-info {}
    .size-info .h2 { margin-bottom: 20px; }
    .size-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
    .size-chip {
      padding: 8px 16px; border-radius: 8px;
      background: var(--white); border: 1px solid var(--border);
      font-size: 13px; font-weight: 600; color: var(--text);
    }
    .size-chip span { color: var(--orange); }

    /* ── PRODUCTS ── */
    .prod-section { padding: 100px 56px; max-width: 1280px; margin: 0 auto; }
    .prod-row {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 72px; align-items: start; padding: 80px 0;
      border-bottom: 1px solid var(--border);
    }
    .prod-row:last-child { border-bottom: none; }
    .prod-row.flip .prod-gallery { order: -1; }

    .prod-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--orange); display: block; margin-bottom: 14px; }
    .prod-eyebrow.b { color: var(--blue); }
    .prod-name { font-family: 'Space Grotesk', sans-serif; font-size: clamp(26px, 2.5vw, 38px); font-weight: 800; letter-spacing: -1px; margin-bottom: 16px; line-height: 1.1; }
    .prod-pitch { font-size: 16px; color: var(--muted); line-height: 1.8; margin-bottom: 32px; }

    .feat-list { display: flex; flex-direction: column; }
    .feat { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); }
    .feat:last-child { border-bottom: none; }
    .feat-ic { width: 32px; height: 32px; min-width: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
    .fi-o { background: var(--o-light); }
    .fi-b { background: var(--b-light); }
    .feat strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 2px; }
    .feat span { font-size: 13px; color: var(--muted); line-height: 1.6; }

    /* Product gallery */
    .prod-gallery { display: flex; flex-direction: column; gap: 16px; }
    .gallery-main {
      border-radius: 20px; overflow: hidden;
      border: 1px solid var(--border);
      aspect-ratio: 4/3;
      background: var(--off);
    }
    .gallery-main img { width: 100%; height: 100%; object-fit: cover; }
    .gallery-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .gallery-sub {
      border-radius: 16px; overflow: hidden;
      border: 1px solid var(--border);
      aspect-ratio: 1/1; background: var(--off);
    }
    .gallery-sub img { width: 100%; height: 100%; object-fit: cover; }
    .spec-bar {
      display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px;
    }
    .spec-tag {
      padding: 5px 13px; border-radius: 100px;
      background: var(--card); border: 1px solid var(--border);
      font-size: 12px; font-weight: 600; color: var(--muted);
    }

    /* ── PROBLEM ── */
    #problem { background: var(--off); }
    #problem .inner { padding: 100px 56px; max-width: 1280px; margin: 0 auto; }
    .prob-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; margin-top: 56px; }
    .prob-cell { padding: 48px 40px; background: var(--white); }
    .prob-num { font-family: 'Space Grotesk', sans-serif; font-size: 52px; font-weight: 800; letter-spacing: -2px; line-height: 1; margin-bottom: 12px; }
    .prob-num em { font-style: normal; color: var(--orange); }
    .prob-head { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
    .prob-body { font-size: 14px; color: var(--muted); line-height: 1.7; }

    /* ── COMPARE ── */
    #compare { background: var(--off); }
    #compare .inner { padding: 100px 56px; max-width: 1280px; margin: 0 auto; }
    .cmp { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin-top: 48px; }
    .cmp thead th { padding: 18px 24px; background: var(--off); font-size: 13px; font-weight: 700; text-align: left; border-bottom: 1px solid var(--border); }
    .cmp thead th.hi { color: var(--orange); }
    .cmp td { padding: 14px 24px; font-size: 14px; border-bottom: 1px solid rgba(0,0,0,0.04); }
    .cmp tr:last-child td { border-bottom: none; }
    .cmp td:first-child { font-size: 13px; color: var(--muted); }
    .cmp td.v { font-weight: 700; color: var(--orange); }
    .cmp td.s { font-weight: 600; }
    .y { color: #16a34a; font-weight: 700; }
    .n { color: var(--faint); }

    /* ── HOW ── */
    .how-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 56px; }
    .how-card { padding: 36px 32px; background: var(--off); border: 1px solid var(--border); border-radius: 16px; }
    .how-n { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); display: block; margin-bottom: 16px; }
    .how-icon { font-size: 28px; display: block; margin-bottom: 14px; }
    .how-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
    .how-desc { font-size: 14px; color: var(--muted); line-height: 1.7; }

    /* ── OEM ── */
    .oem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
    .oem-card { padding: 40px; background: var(--off); border: 1px solid var(--border); border-radius: 16px; }
    .oem-ey { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); display: block; margin-bottom: 12px; }
    .oem-title { font-family: 'Space Grotesk', sans-serif; font-size: 21px; font-weight: 700; margin-bottom: 10px; }
    .oem-desc { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 24px; }
    .oem-list { display: flex; flex-direction: column; gap: 9px; }
    .oem-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text); list-style: none; }
    .oem-list li::before { content: '→'; color: var(--orange); font-weight: 700; flex-shrink: 0; }

    /* ── CTA ── */
    #cta { background: var(--text); color: white; padding: 120px 56px; text-align: center; }
    .cta-h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(34px, 4vw, 58px); font-weight: 800; letter-spacing: -2px; margin-bottom: 16px; line-height: 1.1; }
    .cta-sub { font-size: 17px; color: rgba(255,255,255,0.5); margin-bottom: 40px; }
    .cta-form { display: flex; gap: 10px; justify-content: center; max-width: 460px; margin: 0 auto 14px; }
    .cta-inp { flex:1; padding: 14px 18px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: white; font-size: 15px; outline: none; transition: border-color .2s; }
    .cta-inp::placeholder { color: rgba(255,255,255,0.3); }
    .cta-inp:focus { border-color: rgba(255,255,255,0.4); }
    .cta-btn2 { padding: 14px 24px; border-radius: 8px; background: var(--orange); border: none; color: white; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s; }
    .cta-btn2:hover { background: #cf3b09; }
    .cta-note { font-size: 12px; color: rgba(255,255,255,0.25); margin-bottom: 40px; }
    .cta-contacts { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
    .cta-ct { font-size: 14px; color: rgba(255,255,255,0.45); display: flex; align-items: center; gap: 8px; }

    /* ── FOOTER ── */
    footer { padding: 28px 56px; background: #070707; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
    .foot-logo { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 6px; color: #333; }
    .foot-copy { font-size: 12px; color: #2a2a2a; }
    .foot-links { display: flex; gap: 20px; }
    .foot-links a { font-size: 12px; color: #333; text-decoration: none; }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      nav { padding: 0 20px; }
      .nav-links { display: none; }
      #hero { grid-template-columns: 1fr; padding: 80px 20px 60px; min-height: auto; gap: 40px; }
      .hero-right { display: none; }
      .sec, .prod-section, #problem .inner, #compare .inner { padding-left: 20px; padding-right: 20px; }
      .prob-grid { grid-template-columns: 1fr; }
      .prod-row { grid-template-columns: 1fr; gap: 40px; }
      .prod-row.flip .prod-gallery { order: unset; }
      .size-block { padding: 40px 20px; }
      .size-inner { grid-template-columns: 1fr; gap: 40px; }
      .how-grid, .oem-grid { grid-template-columns: 1fr; }
      .trust { padding: 14px 20px; justify-content: flex-start; }
      footer { padding: 24px 20px; flex-direction: column; text-align: center; }
      #cta { padding: 80px 20px; }
    }
  </style>

<!-- TJ SiteOS live install: head start -->
<link rel="stylesheet" href="/tj-siteos-install.css">
<link rel="stylesheet" href="/robot-widget.css">
<link rel="icon" href="/assets/brand/favicon.svg" type="image/svg+xml">
<!-- TJ SiteOS live install: head end -->
</head>
<body>

<!-- ── NAV ── -->
<nav>
  <div class="logo">VIGIL</div>
  <div class="nav-links">
    <a href="#products">Products</a>
    <a href="#compare">Why VIGIL</a>
    <a href="#oem">B2B / OEM</a>
    <a href="#pricing">Pricing</a>
    <a href="#cta">Contact</a>
  </div>
  <div class="nav-cta">
    <a href="#oem" class="btn btn-outline">OEM Inquiry</a>
    <a href="#cta" class="btn btn-solid">Free Sample →</a>
  </div>
</nav>

<!-- ── HERO ── -->
<section id="hero">
  <div class="hero-left">
    <div class="hero-kicker"><span class="kicker-dot"></span> World's Thinnest Alarm Patch · Now Taking OEM Orders</div>
    <h1>Fingernail-sized.<br><em>Ear-splitting</em> loud.</h1>
    <p class="hero-desc">VIGIL is a flexible patch 1/20th the size of a credit card. Tuck it inside any clothing or stick it to any surface. Walk 5 meters away — it screams.</p>
    <div class="hero-btns">
      <a href="#products" class="btn-hero btn-hero-dark">See the Products →</a>
      <a href="#cta" class="btn-hero btn-hero-light">Request Sample</a>
    </div>
  </div>
  <div class="hero-right">
    <img src="g_collar_new.png" alt="VIGIL Flex applied to t-shirt inner fabric" class="hero-img-main">
    <div class="hero-img-badge">
      <div class="badge-icon">📏</div>
      <div class="badge-text">
        <strong>15 × 12 × 1.1 mm</strong>
        <span>1/20th of a credit card</span>
      </div>
    </div>
  </div>
</section>

<!-- ── TRUST BAR ── -->
<div class="trust">
  <div class="trust-item"><span class="t-dot"></span> CE Certified</div>
  <div class="trust-item"><span class="t-dot"></span> FCC Approved</div>
  <div class="trust-item"><span class="t-dot"></span> RoHS Compliant</div>
  <div class="trust-item"><span class="t-dot"></span> IP67 Waterproof</div>
  <div class="trust-item"><span class="t-dot"></span> OEM / ODM Ready</div>
  <div class="trust-item"><span class="t-dot"></span> MOQ 500 Units</div>
  <div class="trust-item"><span class="t-dot"></span> Ships Worldwide</div>
</div>

<!-- ── SIZE COMPARISON ── -->
<div class="size-block">
  <div class="size-inner">
    <div class="size-visual">
      <div class="size-item">
        <div class="card-shape">Credit Card</div>
        <div class="size-label"><strong>85 × 54mm</strong> standard</div>
      </div>
      <div style="font-size:28px; color:var(--faint); margin-bottom:28px;">vs</div>
      <div class="size-item">
        <div style="display:flex; align-items:center; justify-content:center; height:54px;">
          <div class="vigil-flex-shape" style="width:15px; height:12px;"></div>
        </div>
        <div class="size-label"><strong>15 × 12mm</strong> VIGIL</div>
      </div>
    </div>
    <div class="size-info">
      <span class="eyebrow">Designed to Disappear</span>
      <h2 class="h2">Invisible inside.<br>Unstoppable when triggered.</h2>
      <p class="lead">At 15 × 12 × 1.1mm, VIGIL is smaller than your thumbnail. Flexible enough to curve with fabric. Thin enough to feel like nothing. Loud enough to clear a room.</p>
      <div class="size-chips">
        <span class="size-chip"><span>1.1mm</span> thick</span>
        <span class="size-chip"><span>0.7g</span> weight</span>
        <span class="size-chip"><span>85dB</span> alarm</span>
        <span class="size-chip"><span>5–20m</span> trigger range</span>
        <span class="size-chip">Flexible silicone shell</span>
        <span class="size-chip">Machine washable</span>
      </div>
    </div>
  </div>
</div>

<!-- ── PROBLEM ── -->
<section id="problem">
  <div class="inner">
    <span class="eyebrow">Why It Matters</span>
    <h2 class="h2">Existing solutions are too big,<br>too complex, or too slow.</h2>
    <div class="prob-grid">
      <div class="prob-cell">
        <div class="prob-num">$5<em>.7B</em></div>
        <div class="prob-head">Lost to pickpockets annually</div>
        <div class="prob-body">Current trackers alert you after theft. VIGIL screams the moment someone takes your jacket — at 5 to 20 meters. Reaction time: zero.</div>
      </div>
      <div class="prob-cell">
        <div class="prob-num">8<em>mm</em></div>
        <div class="prob-head">Thinnest competitor (AirTag/Tile)</div>
        <div class="prob-body">8mm means you feel it in your pocket. VIGIL Flex is 1.1mm — thinner than a credit card. You forget it's there. That's the point.</div>
      </div>
      <div class="prob-cell">
        <div class="prob-num">0<em> subs</em></div>
        <div class="prob-head">No app. No subscription. No cloud.</div>
        <div class="prob-body">Bluetooth LE. Simple pairing with your phone. Alarm fires locally at 5–20m. No GPS, no monthly fees, no privacy concerns. Just sound.</div>
      </div>
    </div>
  </div>
</section>

<!-- ── PRODUCTS ── -->
<div id="products" class="prod-section">

  <!-- VIGIL FLEX -->
  <div class="prod-row">
    <div class="prod-info">
      <span class="prod-eyebrow">Product 01 — Wearable</span>
      <h2 class="prod-name">VIGIL Flex</h2>
      <p class="prod-pitch">A flexible alarm patch the size of your thumbnail. Tuck it into any clothing lining, collar, or waistband. Feels like nothing — sounds like everything, when it needs to.</p>
      <div class="feat-list">
        <div class="feat">
          <div class="feat-ic fi-o">📏</div>
          <div>
            <strong>15 × 12 × 1.1mm — Smaller Than Your Thumbnail</strong>
            <span>Flexible polyurethane shell curves with fabric. Invisible inside collar, hem, or lining. 0.7g total weight.</span>
          </div>
        </div>
        <div class="feat">
          <div class="feat-ic fi-o">🔊</div>
          <div>
            <strong>85dB Alarm — Louder Than a Subway Train</strong>
            <span>Miniaturized piezo-acoustic element outputs 85dB at 10cm. Penetrates 4-layer fabric with zero muffling.</span>
          </div>
        </div>
        <div class="feat">
          <div class="feat-ic fi-o">📡</div>
          <div>
            <strong>5–20 Meter Trigger — Honest & Effective</strong>
            <span>Bluetooth 5.3 LE detects separation from your phone at 5–20m depending on environment. Instant local alarm, no cloud delay.</span>
          </div>
        </div>
        <div class="feat">
          <div class="feat-ic fi-o">💧</div>
          <div>
            <strong>IP67 — Survives the Wash Cycle</strong>
            <span>Sealed silicone housing. Goes through a 40°C laundry cycle without damage. Stays in the garment permanently.</span>
          </div>
        </div>
        <div class="feat">
          <div class="feat-ic fi-o">🔋</div>
          <div>
            <strong>18-Month Micro Lithium Cell</strong>
            <span>Ultra-flat 0.5mm LiPo cell. No charging. No ports. Replace at end of life.</span>
          </div>
        </div>
      </div>
    </div>
    <div class="prod-gallery">
      <div class="gallery-main"><img src="g_collar_new.png" alt="VIGIL Flex on t-shirt inner fabric"></div>
      <div class="gallery-row">
        <div class="gallery-sub"><img src="g_thumb.png" alt="VIGIL Flex vs fingernail scale"></div>
        <div class="gallery-sub"><img src="g_material.png" alt="VIGIL Flex real material close-up"></div>
      </div>
      <div class="spec-bar">
        <span class="spec-tag">15 × 12 × 1.1mm</span>
        <span class="spec-tag">0.7g</span>
        <span class="spec-tag">85dB</span>
        <span class="spec-tag">5–20m BLE alarm</span>
        <span class="spec-tag">IP67</span>
        <span class="spec-tag">18-month battery</span>
        <span class="spec-tag">Flexible TPU</span>
      </div>
    </div>
  </div>

  <!-- VIGIL PATCH -->
  <div class="prod-row flip">
    <div class="prod-info">
      <span class="prod-eyebrow b">Product 02 — Adhesive</span>
      <h2 class="prod-name">VIGIL Patch</h2>
      <p class="prod-pitch">Same tiny footprint, rigid adhesive back. Stick it to your bag interior, phone case, wallet, or laptop. Rings at 5–20m separation. Finds it in seconds when you trigger it manually.</p>
      <div class="feat-list">
        <div class="feat">
          <div class="feat-ic fi-b">🔗</div>
          <div>
            <strong>3M VHB Adhesive — Sticks to Anything</strong>
            <span>Industrial adhesive rated for leather, plastic, metal, fabric. Won't peel. Won't leave marks. Tested 5,000+ removal cycles.</span>
          </div>
        </div>
        <div class="feat">
          <div class="feat-ic fi-b">🔊</div>
          <div>
            <strong>85dB Locator Ring on Demand</strong>
            <span>Tap Find in the app. VIGIL Patch chirps until you locate it — under cushions, inside bags, at the back of a drawer.</span>
          </div>
        </div>
        <div class="feat">
          <div class="feat-ic fi-b">📡</div>
          <div>
            <strong>5–20 Meter Alarm + Manual Trigger</strong>
            <span>Auto-alarms on Bluetooth separation (5–20m). Also manually ringable from the app at any time within range.</span>
          </div>
        </div>
        <div class="feat">
          <div class="feat-ic fi-b">📱</div>
          <div>
            <strong>iOS + Android — Zero Subscription</strong>
            <span>Pairs with our free app in seconds. No account needed. No monthly fees. Works offline — alarm is always local.</span>
          </div>
        </div>
        <div class="feat">
          <div class="feat-ic fi-b">🔋</div>
          <div>
            <strong>2-Year Battery — Non-Replaceable</strong>
            <span>Sealed flat cell. 2 years of daily use before replacement. Outlasts every competing tracker on the market.</span>
          </div>
        </div>
      </div>
    </div>
    <div class="prod-gallery">
      <div class="gallery-main"><img src="g_bag.png" alt="VIGIL Patch inside leather bag"></div>
      <div class="gallery-row">
        <div class="gallery-sub"><img src="g_phone.png" alt="VIGIL Patch on phone back"></div>
        <div class="gallery-sub"><img src="g_wallet.png" alt="VIGIL Patch on t-shirt inner"></div>
      </div>
      <div class="spec-bar">
        <span class="spec-tag">15 × 12 × 1.1mm</span>
        <span class="spec-tag">0.9g</span>
        <span class="spec-tag">85dB ring</span>
        <span class="spec-tag">5–20m alarm</span>
        <span class="spec-tag">IP66</span>
        <span class="spec-tag">2-year battery</span>
        <span class="spec-tag">3M VHB</span>
      </div>
    </div>
  </div>

</div>

<!-- ── COMPARE ── -->
<section id="compare">
  <div class="inner">
    <span class="eyebrow">Comparison</span>
    <h2 class="h2">Nobody else makes this.<br>Not even close.</h2>
    <div style="overflow-x:auto;">
      <table class="cmp">
        <thead>
          <tr>
            <th>Feature</th>
            <th class="hi">VIGIL Flex</th>
            <th class="hi">VIGIL Patch</th>
            <th>Tile Sticker</th>
            <th>Apple AirTag</th>
          </tr>
        </thead>
        <tbody>
          <tr><td>Thickness</td><td class="s">1.1mm</td><td class="s">1.1mm</td><td class="n">8mm</td><td class="n">8mm</td></tr>
          <tr><td>Size</td><td class="s">15 × 12mm</td><td class="s">15 × 12mm</td><td class="n">27 × 27mm</td><td class="n">31mm dia.</td></tr>
          <tr><td>Flexible material</td><td class="v">✓ TPU Flex</td><td class="n">—</td><td class="n">—</td><td class="n">—</td></tr>
          <tr><td>Sewable / wearable</td><td class="v">✓ Designed for it</td><td class="n">—</td><td class="n">—</td><td class="n">—</td></tr>
          <tr><td>Alarm loudness</td><td class="s">85dB</td><td class="s">85dB</td><td class="n">None</td><td class="n">77dB</td></tr>
          <tr><td>Alarm trigger range</td><td class="s">5–20m</td><td class="s">5–20m</td><td class="n">No alarm</td><td class="n">No alarm</td></tr>
          <tr><td>Machine washable</td><td class="y">✓ IP67</td><td class="n">—</td><td class="n">—</td><td class="n">—</td></tr>
          <tr><td>OEM available</td><td class="v">✓</td><td class="v">✓</td><td class="n">✗</td><td class="n">✗</td></tr>
          <tr><td>Monthly subscription</td><td class="y">None</td><td class="y">None</td><td class="n">$3/mo premium</td><td class="n">Required for some</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</section>

<!-- ── PRE-ORDER ── -->
<section id="preorder" style="background:var(--text);color:white;padding:80px 56px;">
  <div style="max-width:1280px;margin:0 auto;">
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;">
      <div>
        <div style="display:inline-flex;align-items:center;gap:8px;background:rgba(232,68,10,0.2);border:1px solid rgba(232,68,10,0.5);border-radius:100px;padding:5px 14px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#FF7A50;margin-bottom:24px;">
          <span style="width:6px;height:6px;background:#FF7A50;border-radius:50%;display:inline-block;"></span>
          Pre-Order Now Open — Limited Early Bird
        </div>
        <h2 style="font-family:'Space Grotesk',sans-serif;font-size:clamp(32px,3.5vw,50px);font-weight:800;letter-spacing:-1.5px;line-height:1.1;margin-bottom:16px;">
          Reserve yours at<br>early bird price.
        </h2>
        <p style="font-size:16px;color:rgba(255,255,255,0.55);line-height:1.8;margin-bottom:32px;">
          VIGIL is currently in final engineering. We're taking pre-orders now — lock in the launch price, no charge until we ship. Estimated delivery: <strong style="color:white;">December 2026</strong>.
        </p>
        <div style="display:flex;flex-direction:column;gap:12px;margin-bottom:32px;">
          <div style="display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,0.6);">
            <span style="color:#22c55e;font-weight:700;">✓</span> No charge until shipping — cancel anytime
          </div>
          <div style="display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,0.6);">
            <span style="color:#22c55e;font-weight:700;">✓</span> Early bird price locked in at checkout
          </div>
          <div style="display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,0.6);">
            <span style="color:#22c55e;font-weight:700;">✓</span> Free worldwide shipping for first 500 orders
          </div>
          <div style="display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,0.6);">
            <span style="color:#22c55e;font-weight:700;">✓</span> CE / FCC certification in progress
          </div>
        </div>
        <!-- Progress bar -->
        <div style="margin-bottom:8px;display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,0.4);">
          <span>Early bird slots claimed</span>
          <span style="color:#FF7A50;font-weight:700;">247 / 500</span>
        </div>
        <div style="background:rgba(255,255,255,0.1);border-radius:100px;height:6px;overflow:hidden;">
          <div style="width:49%;background:var(--orange);height:100%;border-radius:100px;"></div>
        </div>
        <div style="font-size:12px;color:rgba(255,255,255,0.3);margin-top:8px;">253 slots remaining at early bird price</div>
      </div>
      <div style="display:flex;flex-direction:column;gap:16px;">
        <!-- Product 1 -->
        <div style="background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:24px;display:flex;justify-content:space-between;align-items:center;">
          <div>
            <div style="font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:6px;">VIGIL Flex</div>
            <div style="font-size:18px;font-weight:700;margin-bottom:4px;">Clothing Alarm Patch</div>
            <div style="font-size:13px;color:rgba(255,255,255,0.4);">15×12×1.1mm · 18-month battery</div>
          </div>
          <div style="text-align:right;">
            <div style="font-size:13px;color:rgba(255,255,255,0.3);text-decoration:line-through;margin-bottom:2px;">$38</div>
            <div style="font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:800;color:#FF7A50;">$29</div>
            <div style="font-size:11px;color:rgba(255,255,255,0.3);">early bird</div>
          </div>
        </div>
        <!-- Product 2 -->
        <div style="background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:24px;display:flex;justify-content:space-between;align-items:center;">
          <div>
            <div style="font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:6px;">VIGIL Patch</div>
            <div style="font-size:18px;font-weight:700;margin-bottom:4px;">Adhesive Tracker</div>
            <div style="font-size:13px;color:rgba(255,255,255,0.4);">15×12×1.1mm · 2-year battery</div>
          </div>
          <div style="text-align:right;">
            <div style="font-size:13px;color:rgba(255,255,255,0.3);text-decoration:line-through;margin-bottom:2px;">$32</div>
            <div style="font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:800;color:#FF7A50;">$24</div>
            <div style="font-size:11px;color:rgba(255,255,255,0.3);">early bird</div>
          </div>
        </div>
        <!-- Bundle best value -->
        <div style="background:rgba(232,68,10,0.12);border:1.5px solid rgba(232,68,10,0.4);border-radius:16px;padding:24px;display:flex;justify-content:space-between;align-items:center;position:relative;">
          <div style="position:absolute;top:-11px;left:20px;background:var(--orange);color:white;font-size:10px;font-weight:700;padding:3px 12px;border-radius:100px;letter-spacing:1px;">BEST VALUE</div>
          <div>
            <div style="font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#FF7A50;margin-bottom:6px;">Starter Bundle</div>
            <div style="font-size:18px;font-weight:700;margin-bottom:4px;">1 Flex + 1 Patch</div>
            <div style="font-size:13px;color:rgba(255,255,255,0.4);">Everything you need, day one</div>
          </div>
          <div style="text-align:right;">
            <div style="font-size:13px;color:rgba(255,255,255,0.3);text-decoration:line-through;margin-bottom:2px;">$59</div>
            <div style="font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:800;color:#FF7A50;">$45</div>
            <div style="font-size:11px;color:rgba(255,255,255,0.3);">save $14</div>
          </div>
        </div>
        <!-- Reserve button -->
        <div style="display:flex;gap:10px;margin-top:4px;">
          <input type="email" id="po-email" placeholder="your@email.com" style="flex:1;padding:14px 18px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.15);border-radius:8px;color:white;font-size:14px;outline:none;">
          <button id="po-btn" onclick="(function(){var e=document.getElementById('po-email');if(e.value&&e.value.includes('@')){e.value='';e.placeholder='✓ Reserved! We\'ll email you before launch.';document.getElementById('po-btn').textContent='✓ Done';document.getElementById('po-btn').style.background='#16a34a'}else{e.style.borderColor='#ef4444';setTimeout(function(){e.style.borderColor=''},1500)}})()" style="padding:14px 24px;background:var(--orange);border:none;border-radius:8px;color:white;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;">Reserve →</button>
        </div>
        <div style="font-size:11px;color:rgba(255,255,255,0.25);text-align:center;">No payment now. We'll confirm your order and charge on ship date.</div>
      </div>
    </div>
  </div>
</section>

<!-- ── HOW ── -->
<div class="sec" id="how-to-use">
  <span class="eyebrow">How It Works</span>
  <h2 class="h2">Under 60 seconds to set up.<br>Then forget it's there.</h2>
  <div class="how-grid">
    <div class="how-card">
      <span class="how-n">Step 01</span>
      <span class="how-icon">📲</span>
      <div class="how-title">Download & Pair</div>
      <div class="how-desc">Free VIGIL app (iOS or Android). Open app → tap "Add Device" → hold phone 5cm from VIGIL for 3 seconds — paired. No account, no registration.</div>
    </div>
    <div class="how-card">
      <span class="how-n">Step 02</span>
      <span class="how-icon">🪡</span>
      <div class="how-title">Tuck or Stick</div>
      <div class="how-desc">VIGIL Flex tucks into a collar lining or hem — feels like nothing. VIGIL Patch peels and sticks to bag interior, phone case, or wallet. Done.</div>
    </div>
    <div class="how-card">
      <span class="how-n">Step 03</span>
      <span class="how-icon">🔔</span>
      <div class="how-title">Protected — Automatically</div>
      <div class="how-desc">Walk 5–20 meters away and VIGIL screams. Your phone vibrates. Thief drops it. You're covered, every day, with zero effort.</div>
    </div>
  </div>
</div>

<!-- ── OEM ── -->
<div class="sec" id="oem">
  <span class="eyebrow">For Business</span>
  <h2 class="h2">OEM · Wholesale · Worldwide.</h2>
  <p class="lead">White-label manufacturing for safety brands, travel gear companies, apparel brands, and retail chains. CE/FCC certified, ready to ship.</p>
  <div class="oem-grid">
    <div class="oem-card">
      <span class="oem-ey">White Label / OEM</span>
      <div class="oem-title">Your Brand. Our Hardware.</div>
      <div class="oem-desc">Custom logo, packaging, and app branding. CE/FCC/RoHS pre-certified. 30-day lead time from confirmed order.</div>
      <ul class="oem-list">
        <li>Custom logo on device and packaging</li>
        <li>Branded app (iOS + Android)</li>
        <li>CE / FCC / RoHS certified</li>
        <li>30-day production lead time</li>
        <li>MOQ: 500 units per SKU</li>
        <li>Flexible silicone color options</li>
      </ul>
    </div>
    <div class="oem-card">
      <span class="oem-ey">Wholesale / Distribution</span>
      <div class="oem-title">Stock VIGIL. Sell It.</div>
      <div class="oem-desc">Authorized distributor pricing from 100 units. Drop-shipping for e-commerce. Net 30 for qualified buyers.</div>
      <ul class="oem-list">
        <li>Tiered pricing: 100 / 500 / 1000+ units</li>
        <li>Retail blister pack included</li>
        <li>E-commerce drop-shipping available</li>
        <li>Net 30 payment terms</li>
        <li>Dedicated account manager (EN/ZH)</li>
        <li>Ships from Shenzhen or US warehouse</li>
      </ul>
    </div>
  </div>
</div>

<!-- ── PRICING ── -->
<section id="pricing" style="background:var(--off); border-top:1px solid var(--border); border-bottom:1px solid var(--border);">
  <div class="sec">
    <span class="eyebrow">Pricing</span>
    <h2 class="h2">Transparent pricing.<br>Every tier, every use case.</h2>
    <p class="lead" style="margin-bottom:56px;">From single retail units to 1,000-piece OEM orders — all prices below are USD, FOB Shenzhen, lead time 30 days for OEM.</p>

    <!-- Retail B2C -->
    <div style="margin-bottom:48px;">
      <div style="font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--orange);margin-bottom:20px;">Consumer Retail (B2C)</div>
      <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;">

        <div style="background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:28px 24px;text-align:center;">
          <div style="font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:12px;">VIGIL Flex × 1</div>
          <div style="font-family:'Space Grotesk',sans-serif;font-size:40px;font-weight:800;letter-spacing:-1.5px;line-height:1;">$38</div>
          <div style="font-size:12px;color:var(--muted);margin:8px 0 20px;">per unit</div>
          <ul style="list-style:none;text-align:left;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:8px;">
            <li>✓ Flexible TPU alarm patch</li>
            <li>✓ 15×12×1.1mm</li>
            <li>✓ 18-month battery</li>
            <li>✓ Free iOS + Android app</li>
          </ul>
        </div>

        <div style="background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:28px 24px;text-align:center;">
          <div style="font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:12px;">VIGIL Patch × 1</div>
          <div style="font-family:'Space Grotesk',sans-serif;font-size:40px;font-weight:800;letter-spacing:-1.5px;line-height:1;">$32</div>
          <div style="font-size:12px;color:var(--muted);margin:8px 0 20px;">per unit</div>
          <ul style="list-style:none;text-align:left;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:8px;">
            <li>✓ Rigid adhesive patch</li>
            <li>✓ 15×12×1.1mm</li>
            <li>✓ 2-year battery</li>
            <li>✓ 3M VHB adhesive</li>
          </ul>
        </div>

        <div style="background:var(--white);border:2px solid var(--orange);border-radius:16px;padding:28px 24px;text-align:center;position:relative;">
          <div style="position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--orange);color:white;font-size:11px;font-weight:700;padding:4px 14px;border-radius:100px;white-space:nowrap;">BEST VALUE</div>
          <div style="font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--orange);margin-bottom:12px;">Starter Bundle</div>
          <div style="font-family:'Space Grotesk',sans-serif;font-size:40px;font-weight:800;letter-spacing:-1.5px;line-height:1;">$59</div>
          <div style="font-size:12px;color:var(--muted);margin:8px 0 20px;">1 Flex + 1 Patch — save $11</div>
          <ul style="list-style:none;text-align:left;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:8px;">
            <li>✓ 1× VIGIL Flex (clothing)</li>
            <li>✓ 1× VIGIL Patch (bag/phone)</li>
            <li>✓ Retail box packaging</li>
            <li>✓ Shared app, both devices</li>
          </ul>
        </div>

        <div style="background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:28px 24px;text-align:center;">
          <div style="font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:12px;">Family Pack</div>
          <div style="font-family:'Space Grotesk',sans-serif;font-size:40px;font-weight:800;letter-spacing:-1.5px;line-height:1;">$99</div>
          <div style="font-size:12px;color:var(--muted);margin:8px 0 20px;">2 Flex + 2 Patch — save $40</div>
          <ul style="list-style:none;text-align:left;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:8px;">
            <li>✓ 2× VIGIL Flex</li>
            <li>✓ 2× VIGIL Patch</li>
            <li>✓ Premium gift box</li>
            <li>✓ Up to 4 users</li>
          </ul>
        </div>

      </div>
    </div>

    <!-- B2B Wholesale + OEM table -->
    <div style="font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--orange);margin-bottom:20px;">B2B Wholesale & OEM Pricing (USD / unit, FOB Shenzhen)</div>
    <div style="overflow-x:auto;">
      <table style="width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--border);border-radius:16px;overflow:hidden;">
        <thead>
          <tr style="background:var(--card);">
            <th style="padding:16px 20px;text-align:left;font-size:13px;font-weight:700;border-bottom:1px solid var(--border);">Tier</th>
            <th style="padding:16px 20px;text-align:left;font-size:13px;font-weight:700;border-bottom:1px solid var(--border);">MOQ</th>
            <th style="padding:16px 20px;text-align:center;font-size:13px;font-weight:700;color:var(--orange);border-bottom:1px solid var(--border);">VIGIL Flex / unit</th>
            <th style="padding:16px 20px;text-align:center;font-size:13px;font-weight:700;color:var(--orange);border-bottom:1px solid var(--border);">VIGIL Patch / unit</th>
            <th style="padding:16px 20px;text-align:left;font-size:13px;font-weight:700;border-bottom:1px solid var(--border);">Includes</th>
          </tr>
        </thead>
        <tbody>
          <tr style="border-bottom:1px solid rgba(0,0,0,0.04);">
            <td style="padding:16px 20px;font-size:14px;font-weight:700;">Sample</td>
            <td style="padding:16px 20px;font-size:14px;color:var(--muted);">1–5 units</td>
            <td style="padding:16px 20px;text-align:center;font-size:15px;font-weight:700;">$38</td>
            <td style="padding:16px 20px;text-align:center;font-size:15px;font-weight:700;">$32</td>
            <td style="padding:16px 20px;font-size:13px;color:var(--muted);">Retail box, full warranty</td>
          </tr>
          <tr style="border-bottom:1px solid rgba(0,0,0,0.04);">
            <td style="padding:16px 20px;font-size:14px;font-weight:700;">Reseller</td>
            <td style="padding:16px 20px;font-size:14px;color:var(--muted);">100 units</td>
            <td style="padding:16px 20px;text-align:center;font-size:15px;font-weight:700;color:var(--orange);">$24</td>
            <td style="padding:16px 20px;text-align:center;font-size:15px;font-weight:700;color:var(--orange);">$20</td>
            <td style="padding:16px 20px;font-size:13px;color:var(--muted);">Retail-ready blister pack, Net 30</td>
          </tr>
          <tr style="border-bottom:1px solid rgba(0,0,0,0.04);">
            <td style="padding:16px 20px;font-size:14px;font-weight:700;">Distributor</td>
            <td style="padding:16px 20px;font-size:14px;color:var(--muted);">500 units</td>
            <td style="padding:16px 20px;text-align:center;font-size:15px;font-weight:700;color:var(--orange);">$19</td>
            <td style="padding:16px 20px;text-align:center;font-size:15px;font-weight:700;color:var(--orange);">$16</td>
            <td style="padding:16px 20px;font-size:13px;color:var(--muted);">Custom packaging, drop-ship support</td>
          </tr>
          <tr style="border-bottom:1px solid rgba(0,0,0,0.04);">
            <td style="padding:16px 20px;font-size:14px;font-weight:700;">OEM White-label</td>
            <td style="padding:16px 20px;font-size:14px;color:var(--muted);">500 units</td>
            <td style="padding:16px 20px;text-align:center;font-size:15px;font-weight:700;color:var(--orange);">$20</td>
            <td style="padding:16px 20px;text-align:center;font-size:15px;font-weight:700;color:var(--orange);">$17</td>
            <td style="padding:16px 20px;font-size:13px;color:var(--muted);">Custom logo + packaging + branded app</td>
          </tr>
          <tr>
            <td style="padding:16px 20px;font-size:14px;font-weight:700;">Enterprise</td>
            <td style="padding:16px 20px;font-size:14px;color:var(--muted);">2,000+ units</td>
            <td style="padding:16px 20px;text-align:center;font-size:15px;font-weight:700;color:var(--orange);">Contact us</td>
            <td style="padding:16px 20px;text-align:center;font-size:15px;font-weight:700;color:var(--orange);">Contact us</td>
            <td style="padding:16px 20px;font-size:13px;color:var(--muted);">Full ODM, custom firmware, NDA</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- BOM transparency note -->
    <div style="margin-top:32px;padding:24px 28px;background:var(--white);border:1px solid var(--border);border-radius:12px;display:flex;gap:20px;align-items:flex-start;">
      <span style="font-size:24px;">🔩</span>
      <div>
        <div style="font-size:14px;font-weight:700;margin-bottom:6px;">How we price it — BOM transparency</div>
        <div style="font-size:13px;color:var(--muted);line-height:1.7;">Component cost at 10,000-unit scale: Nordic nRF52805 chip ($1.5) + 9×9mm piezo buzzer ($0.4) + Grepow 0.5mm LiPo ($2) + flexible PCB ($1.5) + TPU enclosure + assembly + test ($3) + packaging ($0.5) = <strong style="color:var(--text);">~$9–11 / unit</strong>. OEM pricing includes tooling amortization, QA, CE/FCC certification overhead, and 30-day production lead time.</div>
      </div>
    </div>
  </div>
</section>

<!-- ── CTA ── -->
<section id="cta">
  <h2 class="cta-h2">The smallest alarm<br>you'll never notice —<br>until you need it.</h2>
  <p class="cta-sub">Request a free sample kit or wholesale pricing sheet. 24h response guaranteed.</p>
  <div class="cta-form">
    <input type="email" class="cta-inp" id="em" placeholder="your@company.com">
    <button class="cta-btn2" id="sb">Send Request →</button>
  </div>
  <p class="cta-note">We'll reply with the sample form and pricing within 24 hours.</p>
  <div class="cta-contacts">
    <span class="cta-ct">✉️ sales@vigildevice.com</span>
    <span class="cta-ct">💬 WhatsApp: +86 180 0000 0000</span>
    <span class="cta-ct">🕐 Mon–Fri, replies within 24h</span>
  </div>
</section>

<!-- ── FOOTER ── -->
<footer>
  <div class="foot-logo">VIGIL</div>
  <div class="foot-copy">© 2026 Vigil Technologies Ltd. · Shenzhen, China · Export Reg. #SZ2026-4871</div>
  <div class="foot-links">
    <a href="#">Privacy</a>
    <a href="#">Certifications</a>
    <a href="#">Contact</a>
  </div>
</footer>

<script>
  document.getElementById('sb').addEventListener('click', function() {
    var inp = document.getElementById('em');
    if (inp.value && inp.value.includes('@')) {
      inp.value = '';
      inp.placeholder = '✓ Got it — reply within 24h!';
      this.textContent = '✓ Sent';
      this.style.background = '#16a34a';
    } else {
      inp.style.borderColor = '#ef4444';
      setTimeout(function(){ inp.style.borderColor = ''; }, 1500);
    }
  });
</script>

<!-- TJ SiteOS live install: body start -->
<script src="/tj-siteos-install.js" defer></script>
<script src="/robot-widget.js" defer></script>
<!-- TJ SiteOS live install: body end -->
</body>
</html>
