<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="netlify-site-id" content="73347d82-34b3-4d78-ba33-e5143422f8cf">
  <link rel="canonical" href="https://leadideal.com/">
  <link rel="alternate" hreflang="en" href="https://leadideal.com/">
  <link rel="alternate" hreflang="he" href="https://leadideal.com/he/">
  <link rel="alternate" hreflang="x-default" href="https://leadideal.com/">
  <script>
    (function () {
      const cookieMaxAge = 60 * 60 * 24 * 30;
      const botRe = /bot|crawler|spider|slurp|bingpreview|facebookexternalhit|whatsapp|telegrambot|linkedinbot|discordbot/i;

      function readCookie(name) {
        const match = document.cookie.match(new RegExp('(?:^|; )' + name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '=([^;]*)'));
        return match ? decodeURIComponent(match[1]) : '';
      }

      function normalizeVariant(value) {
        const normalized = String(value || '').trim().toLowerCase();
        if (!normalized) return '';
        if (['pilot', 'v3', 'treatment', 'test', 'on', 'true', '1'].includes(normalized)) return 'pilot';
        if (['v2', 'control', 'off', 'false', '0'].includes(normalized)) return 'v2';
        return '';
      }

      function applyVariant(variant, source) {
        if (!variant) return '';
        document.cookie = 'li_variant=' + variant + '; path=/; max-age=' + cookieMaxAge + '; SameSite=Lax';
        document.documentElement.dataset.landingVariant = variant;
        window.LEADIDEAL_LANDING_CONTEXT = { variant: variant, source: source || 'unknown' };
        return variant;
      }

      function syncVariantFromSearch(search) {
        const params = new URLSearchParams(typeof search === 'string' ? search : window.location.search);
        const explicitVariant = normalizeVariant(
          params.get('li_variant') || params.get('variant') || params.get('pilot')
        );
        if (!explicitVariant) return '';
        return applyVariant(explicitVariant, 'query');
      }

      window.LeadIdealVariant = {
        normalizeVariant: normalizeVariant,
        readCookie: readCookie,
        applyVariant: applyVariant,
        syncVariantFromSearch: syncVariantFromSearch
      };

      if (window.location.pathname !== '/' && window.location.pathname !== '/index.html') return;
      if (botRe.test(navigator.userAgent || '')) return;

      if (syncVariantFromSearch(window.location.search)) {
        return;
      }

      const existingVariant = normalizeVariant(readCookie('li_variant'));
      if (existingVariant) {
        applyVariant(existingVariant, 'cookie');
      }
    })();
  </script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="robots" content="index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1">
  <meta name="description"
    content="LeadIdeal delivers your ideal B2B leads, vetted and ready, without the GTM-platform bloat. Human-verified US prospect lists for agencies, MSPs, and B2B service teams. Start with a $49 paid sample of 15 contacts.">
  <meta name="theme-color" content="#0066CC">

  <title>Your Ideal B2B Leads. Vetted. Ready. No Platform Required. | LeadIdeal</title>

  <!-- Open Graph -->
  <meta property="og:title" content="Your Ideal B2B Leads. Vetted. Ready. No Platform Required. | LeadIdeal">
  <meta property="og:description"
    content="Skip the all-in-one GTM sprawl. LeadIdeal hand-verifies the US contacts you would actually call this week and delivers them as a CRM-ready CSV. Start with a $49 paid sample of 15 contacts.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://leadideal.com/">
  <meta property="og:locale" content="en_US">
  <meta property="og:locale:alternate" content="he_IL">
  <meta property="og:image" content="https://leadideal.com/v2/assets/images/og-image-high-readability.png">
  <meta property="og:image:alt" content="LeadIdeal US custom prospecting offer card - 100% human-verified">
  <meta property="og:site_name" content="LeadIdeal">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Your Ideal B2B Leads. Vetted. Ready. No Platform Required. | LeadIdeal">
  <meta name="twitter:description"
    content="Skip the all-in-one GTM sprawl. LeadIdeal hand-verifies the US contacts you would actually call this week and delivers them as a CRM-ready CSV. Start with a $49 paid sample of 15 contacts.">
  <meta name="twitter:image" content="https://leadideal.com/v2/assets/images/og-image-high-readability.png">
  <meta name="twitter:image:alt" content="LeadIdeal US custom prospecting offer card - 100% human-verified">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Clarity -->
  <script type="text/javascript">
    (function (c, l, a, r, i, t, y) {
      c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments); };
      t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i;
      y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
    })(window, document, "clarity", "script", "w7bdtyftmw");
  </script>

  <!-- CSS is handled by Tailwind CDN below and custom.css at the end of the body -->
  <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
  <link rel="dns-prefetch" href="https://www.googletagmanager.com">
  <link rel="dns-prefetch" href="https://www.paypal.com">

  <!-- Favicons -->
  <link rel="icon" href="/v2/assets/images/brand/favicon.ico" sizes="any">
  <link rel="icon" type="image/png" href="/v2/assets/images/brand/icon-32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="/v2/assets/images/brand/icon-16.png" sizes="16x16">
  <link rel="apple-touch-icon" href="/v2/assets/images/brand/icon-180.png">

  <!-- Font Awesome 6 — with CDN fallback -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
    integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" onerror="document.documentElement.classList.add('no-fa')">

  <!-- Tailwind CSS CDN — with inline critical fallback -->
  <script src="https://cdn.tailwindcss.com" onerror="document.documentElement.classList.add('no-tw')"></script>

  <!-- Critical inline CSS — renders above-fold even if CDN/external CSS fails -->
  <style id="critical-css">
    body {
      margin: 0;
      font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      line-height: 1.5;
      color: #1f2937;
      background: #f9fafb
    }

    img,
    svg {
      max-width: 100%;
      height: auto;
      display: block
    }

    .no-tw * {
      box-sizing: border-box
    }

    .no-tw .container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 1rem
    }

    .no-tw header {
      background: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
      position: relative;
      z-index: 40
    }

    .no-tw nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 4rem
    }

    .no-tw .hero {
      background: linear-gradient(135deg, #0066CC 0%, #004499 100%);
      color: #fff;
      padding: 5rem 1rem;
      text-align: center
    }

    .hero-title-balance .bg-gradient-to-r,
    .hero-title-balance [style*="background-image"] {
      background-image: linear-gradient(to right, #4ade80, #93c5fd);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent
    }

    .no-tw footer {
      background: #111827;
      color: #d1d5db;
      padding: 3rem 1rem
    }

    .no-tw .bg-gray-50 {
      background: #f9fafb
    }

    .no-tw .bg-white {
      background: #fff
    }

    .no-tw .text-white {
      color: #fff
    }

    .no-tw .text-center {
      text-align: center
    }

    .no-tw .hidden {
      display: none
    }

    .no-fa .fa,
    .no-fa .fas,
    .no-fa .far,
    .no-fa .fab,
    .no-fa [class^="fa-"] {
      font-family: inherit !important
    }

    .no-fa .fa-check::before {
      content: '\2713'
    }

    .no-fa .fa-shield::before,
    .no-fa .fa-shield-halved::before {
      content: '\1F6E1'
    }

    .no-fa .fa-clock::before {
      content: '\23F0'
    }

    .no-fa .fa-envelope::before {
      content: '\2709'
    }

    .no-fa .fa-phone::before {
      content: '\260E'
    }
  </style>

  <!-- Promo Config (single source of truth) -->

  <!-- Custom CSS (absolute path for /v2/ context) -->
  <link rel="stylesheet" href="/v2/assets/css/custom.css?v=8" onerror="console.warn('custom.css failed to load')">
  <script src="/v2/assets/js/lucide.min.js" defer></script>
  <script src="/v2/assets/js/locale-config.js?v=6"></script>

  <!-- Google Analytics + Google Ads -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-E1F21SHSJJ"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'G-E1F21SHSJJ');
    gtag('config', 'AW-11467670933');
  </script>

  <script type="text/javascript">
    (function (c, l, a, r, i, t, y) {
      c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments); };
      t = l.createElement(r);
      t.async = 1;
      t.src = "https://www.clarity.ms/tag/" + i;
      y = l.getElementsByTagName(r)[0];
      y.parentNode.insertBefore(t, y);
    })(window, document, "clarity", "script", "w7bdtyftmw");
  </script>

  <script src="/v2/assets/js/analytics-funnel.js?v=1" defer></script>
  <script src="/assets/js/elite-dropdown.js?v=1" defer></script>
  <script src="/assets/js/lib-auth.js?v=20260415A" defer></script>

  <!-- Cookie Sync for Variant Switching -->
  <script>
    (function () {
      const urlParams = new URLSearchParams(window.location.search);
      const v = String(urlParams.get('v') || urlParams.get('variant') || urlParams.get('li_variant') || '').toLowerCase();
      if (v === 'v1' || v === 'v2') {
        document.cookie = "ab_variant=" + v + "; path=/; max-age=" + (60 * 60 * 24 * 30);
      }
      if (window.LeadIdealVariant && typeof window.LeadIdealVariant.syncVariantFromSearch === 'function') {
        window.LeadIdealVariant.syncVariantFromSearch(window.location.search);
      }
    })();
  </script>

  <!-- UTM Parameter Tracking for Email Campaigns (V2) -->
  <script>
    (function () {
      const urlParams = new URLSearchParams(window.location.search);
      const utmParams = {
        utm_source: urlParams.get('utm_source'),
        utm_medium: urlParams.get('utm_medium'),
        utm_campaign: urlParams.get('utm_campaign'),
        utm_content: urlParams.get('utm_content')
      };

      if (utmParams.utm_source || utmParams.utm_campaign) {
        if (typeof gtag !== 'undefined') {
          gtag('event', 'email_click', {
            event_category: 'Email Campaign',
            event_label: utmParams.utm_campaign || 'unknown',
            utm_source: utmParams.utm_source,
            utm_medium: utmParams.utm_medium,
            utm_campaign: utmParams.utm_campaign,
            utm_content: utmParams.utm_content,
            variant: 'v2'
          });
          console.log('✅ Email click tracked (V2):', utmParams);
        }

        try {
          sessionStorage.setItem('utm_params', JSON.stringify(utmParams));
        } catch (e) {
          console.warn('SessionStorage not available:', e);
        }
      }
    })();
  </script>


  <!-- Capture Google Ads click ID (gclid) for conversion tracking -->
  <script>
    (function () {
      var params = new URLSearchParams(window.location.search);
      var gclid = params.get('gclid');
      if (gclid) {
        localStorage.setItem('gads_gclid', gclid);
        localStorage.setItem('gads_gclid_ts', Date.now().toString());
      }
    })();
  </script>

  <!-- Payment Configuration -->
  <script>
    window.PAYMENT_CONFIG = {
      paypal_client_id: 'AbBx4_YH_AcqOm6sUSeFDJu6bF37QNRFc6uuWk0yg5DlKVHJeI5Hg1vYVlskMsG7i9iMwF8ilkOqsxhM',
      stripe_publishable_key: '' // Add when Stripe is ready
    };
  </script>

  <!-- Application UI Logic -->
  <script>
    (function () {
      const urlParams = new URLSearchParams(window.location.search);
      const promoCode = urlParams.get('promo') || urlParams.get('promo_token') || '';
      if (promoCode) {
        sessionStorage.setItem('url_promo_code', promoCode.toUpperCase());
        console.log('[Promo] Stored promo code from URL:', promoCode);
      }

      // scrollToPackages helper
      window.scrollToPackages = function () {
        const packagesSection = document.getElementById('packages');
        if (packagesSection) {
          const headerOffset = 80;
          const elementPosition = packagesSection.getBoundingClientRect().top;
          const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
          window.scrollTo({ top: offsetPosition, behavior: 'smooth' });
        }
      };

      // Focused lane selection — pre-fills the active ICP and scrolls to the paid sample
      window.selectNichePack = function (nicheSlug) {
        const nicheMap = {
          marketing: { industry: 'Marketing Agencies & Services' },
          technology: { industry: 'Technology & SaaS' },
          construction: { industry: 'Construction & Contractors' },
        };
        const niche = nicheMap[nicheSlug];
        if (!niche) return;

        sessionStorage.setItem('search_industry', niche.industry);
        sessionStorage.setItem('search_location', niche.location);
        localStorage.setItem('lead_industry', niche.industry);
        localStorage.setItem('lead_location', niche.location);

        const industryInput = document.getElementById('industry-input');
        const locationInput = document.getElementById('location-input');
        if (industryInput) industryInput.value = niche.industry;
        if (locationInput) locationInput.value = niche.location;

        const nichePack = window.LeadIdealPricing && window.LeadIdealPricing.getNichePack
          ? window.LeadIdealPricing.getNichePack(nicheSlug)
          : null;

        if (nichePack && typeof selectPackage === 'function') {
          selectPackage({
            id: nichePack.id,
            package_id: nichePack.id,
            name: nichePack.name,
            amount: nichePack.price,
            original_amount: null,
            lead_count: nichePack.leads,
            description: nichePack.name,
            include_phone: true,
            is_promo: false,
            badge: 'Ready-Made Pack'
          });
          return;
        }

        window.scrollToPackages();
      };
    })();

    // Mobile Menu & Navigation Logic
    (function () {
      const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
      let last              Focus =                            on getFocusableElements(con          ) {             if        ontainer) return [];
        retur        ray.from(contai          erySelectorAll(focusableSelector)).filter((element) => {
          return element.offsetParent !== null && getComputedStyle(element).visibility !== 'hidden';
        });
      }

      function setMobileMenuState(isOpen) {
        const overlay = document.getElementById('mobile-nav-overlay');
        const btn = document.getElementById('mobile-menu-btn');
        if (!overlay || !btn) return;

        overlay.classList.toggle('active', isOpen);
        overlay.hidden = !isOpen;
        overlay.setAttribute('aria-hidden', isOpen ? 'false' : 'true');
        btn.classList.toggle('active', isOpen);
        btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
        btn.setAttribute('aria-label', isOpen ? (btn.dataset.closeLabel || 'Close menu') : (btn.dataset.openLabel || 'Open menu'));
        document.body.style.overflow = isOpen ? 'hidden' : '';

        if (isOpen) {
          lastMobileMenuFocus = document.activeElement;
          requestAnimationFrame(() => {
            const firstFocusable = getFocusableElements(overlay)[0];
            if (firstFocusable) firstFocusable.focus();
          });
        } else if (lastMobileMenuFocus && typeof lastMobileMenuFocus.focus === 'function') {
          lastMobileMenuFocus.focus();
          lastMobileMenuFocus = null;
        }
      }

      window.toggleMobileMenu = function () {
        const overlay = document.getElementById('mobile-nav-overlay');
        setMobileMenuState(!(overlay && overlay.classList.contains('active')));
      };

      window.closeMobileMenu = function () {
        setMobileMenuState(false);
      };

      document.addEventListener('keydown', (event) => {
        const overlay = document.getElementById('mobile-nav-overlay');
        if (!overlay || !overlay.classList.contains('active')) return;

        if (event.key === 'Escape') {
          event.preventDefault();
          closeMobileMenu();
          return;
        }

        if (event.key === 'Tab') {
          const focusable = getFocusableElements(overlay);
          if (!focusable.length) return;

          const first = focusable[0];
          const last = focusable[focusable.length - 1];
          if (event.shiftKey && document.activeElement === first) {
            event.preventDefault();
            last.focus();
          } else if (!event.shiftKey && document.activeElement === last) {
            event.preventDefault();
            first.focus();
          }
        }
      }, true);
    })();
  </script>

  <script>
    // Interaction Listeners
    document.addEventListener('DOMContentLoaded', () => {
      const btn = document.getElementById('mobile-menu-btn');
      if (btn) btn.addEventListener('click', toggleMobileMenu);

      document.addEventListener('click', (e) => {
        // Close if clicking a link
        if (e.target.closest('#mobile-nav-overlay a')) {
          closeMobileMenu();
        }
        // Close if clicking overlay backdrop (outside the menu container)
        const overlay = document.getElementById('mobile-nav-overlay');
        const btn = document.getElementById('mobile-menu-btn');
        if (overlay && overlay.classList.contains('active') &&
          !overlay.querySelector('.mobile-menu-container').contains(e.target) &&
          !btn.contains(e.target)) {
          closeMobileMenu();
        }
      });
    });
  </script>

  <!-- Payment config loaded dynamically from backend by payment.js -->
  <style>
    .lang-switch {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.9);
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 0.85rem;
      text-decoration: none;
      color: #2563eb;
      border: 1px solid #e5e7eb;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      transition: background .2s, color .2s;
      white-space: nowrap;
    }

    .lang-switch:hover {
      background: #2563eb;
      color: white;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 2rem;
    }

    /* Mobile Overlay (Hidden on Desktop) */
    #mobile-nav-overlay {
      display: none;
    }

    .mobile-menu-toggle {
      display: none;
    }

    .hero-copy-shell {
      max-width: 72rem;
      margin: 0 auto;
    }

    .hero-title-balance,
    .hero-subtitle-balance {
      text-wrap: balance;
    }

    /* Hero corner badges (audience left, offer right) */
    .hero-corner-badges {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.6rem 0.8rem;
      margin: 0 auto 1.5rem;
      max-width: 100%;
    }

    .hero-corner-badges--cta {
      margin: 0;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    /* Ensure hero search box (and its dropdown menus) sit above the CTA badge row */
    .hero-search-box {
      position: relative;
      z-index: 30;
    }

    .hero-corner-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.45rem 0.85rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.14);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: #dbeafe;
      font-size: 0.78rem;
      line-height: 1.15;
      box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.6);
      transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
    }

    .hero-corner-badge:hover {
      transform: translateY(-1px);
      border-color: rgba(255, 255, 255, 0.28);
      background: rgba(255, 255, 255, 0.09);
    }

    .hero-corner-badge__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 999px;
      background: linear-gradient(135deg, #4ade80, #93c5fd);
      color: #0f172a;
      font-size: 0.72rem;
      flex: 0 0 auto;
    }

    .hero-corner-badge--right .hero-corner-badge__icon {
      background: linear-gradient(135deg, #fbbf24, #f97316);
      color: #1f2937;
    }

    .hero-corner-badge__text {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      line-height: 1.1;
    }

    .hero-corner-badge__label {
      font-size: 0.66rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(219, 234, 254, 0.75);
      font-weight: 600;
    }

    .hero-corner-badge__value {
      font-size: 0.88rem;
      font-weight: 600;
      color: #f8fafc;
      white-space: nowrap;
    }

    .hero-corner-badge__value .li-starter-price {
      color: #4ade80;
    }

    .hero-corner-badges--cta .hero-corner-badge {
      padding: 0.42rem 0.8rem;
    }

    .hero-corner-badges--cta .hero-corner-badge__value {
      font-size: 0.8rem;
    }

    /* Badges always centered above H1 — no absolute corners on any breakpoint */

    .hero-title-balance>span,
    .hero-title-line {
      display: block;
      white-space: nowrap;
    }

    .hero-title-balance {
      max-width: min(72rem, calc(100vw - 2.5rem));
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      font-size: clamp(2.4rem, 4.6vw, 4.45rem);
      line-height: 0.95;
      letter-spacing: -0.045em;
      padding-inline: 0.2rem;
    }

    @media (min-width: 768px) {

      .hero-title-balance>span,
      .hero-title-line {
        width: fit-content;
        margin-inline: auto;
      }
    }

    .hero-subtitle-balance {
      max-width: 56rem;
      margin-left: auto;
      margin-right: auto;
      font-size: clamp(1.05rem, 1.7vw, 1.45rem);
      line-height: 1.35;
    }

    #hero .input-lg,
    #hero .btn-primary {
      height: 80px !important;
      font-size: 1.25rem;
    }

    .hero-trust-signals {
      justify-content: center !important;
    }

    .hero-title-break,
    .hero-subtitle-break {
      display: none;
    }

    .hero-subtitle-gap {
      display: inline;
    }

    @media (min-width: 768px) and (max-width: 1279px) {

      .hero-corner-badges--cta {
        flex-direction: column;
      }

      .hero-subtitle-gap,
      .hero-title-break,
      .hero-subtitle-break {
        display: none;
      }

      .hero-title-break,
      .hero-subtitle-break {
        display: block;
      }
    }

    @media (max-width: 767px) {
      .nav-links {
        display: none;
      }

      #mobile-nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.4);
        backdrop-filter: blur(4px);
        z-index: 1000;
      }

      #mobile-nav-overlay.active {
        display: block;
      }

      .hero-corner-badges--cta {
        gap: 0.7rem;
      }

      .mobile-menu-container {
        position: fixed;
        top: 54px;
        right: 12px;
        width: 280px;
        max-width: calc(100vw - 24px);
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(15, 23, 42, 0.25);
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        border: 1px solid #e5e7eb;
        animation: menuFadeIn 0.2s ease-out;
      }

      @keyframes menuFadeIn {
        from {
          opacity: 0;
          transform: translateY(-10px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .mobile-menu-container a {
        width: 100%;
        padding: 10px 12px;
        border-radius: 10px;
        font-weight: 500;
        color: #334155;
        transition: all 0.2s;
      }

      .mobile-menu-container a:hover {
        background: #f1f5f9;
        color: #2563eb;
      }

      .mobile-menu-toggle {
        display: inline-flex;
      }

      #hero {
        min-height: calc(100dvh - 4rem);
        padding-top: calc(46px + env(safe-area-inset-top, 0px));
        padding-bottom: 20px;
      }

      .hero-content-shell {
        padding-top: 12px;
        padding-bottom: 24px;
      }

      .hero-title-balance {
        max-width: min(100%, calc(100vw - 1.25rem));
        font-size: clamp(1.35rem, 5.8vw, 1.96rem);
        line-height: 0.98;
        margin-bottom: 0.75rem;
      }

      .hero-title-balance>span,
      .hero-title-line {
        white-space: normal;
      }

      .hero-subtitle-balance {
        max-width: 22rem;
        font-size: 0.98rem;
        line-height: 1.28;
        margin-bottom: 1rem;
      }

      .hero-search-box {
        position: relative;
        z-index: 30;
        padding: 12px;
      }

      .hero-search-box .grid {
        gap: 0.625rem;
        margin-bottom: 0.625rem;
      }

      .hero-search-box .hero-input-wrapper {
        margin-bottom: 0;
      }

      #hero .input-lg,
      #hero .btn-primary {
        height: 60px !important;
        font-size: 15px;
      }

      .hero-search-box {
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
      }

      #hero .btn-primary {
        padding: 0 20px;
        font-weight: 700;
      }

      .hero-trust-signals {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem 0.75rem;
        margin-top: 1rem;
        font-size: 0.75rem;
        line-height: 1.2;
      }

      .hero-trust-item {
        justify-content: center;
        gap: 0.375rem;
        min-width: 0;
      }

      .hero-trust-item:last-child {
        grid-column: 1 / -1;
      }

      .hero-trust-item svg {
        width: 1rem;
        height: 1rem;
      }

      .sample-results-table {
        table-layout: fixed;
      }

      .sample-results-table th,
      .sample-results-table td {
        vertical-align: middle;
      }

      /* Sleek Scrollbar */
      .overflow-x-auto::-webkit-scrollbar {
        height: 6px;
      }

      .overflow-x-auto::-webkit-scrollbar-track {
        background: transparent;
      }

      .overflow-x-auto::-webkit-scrollbar-thumb {
        background: #e5e7eb;
        border-radius: 10px;
      }

      .overflow-x-auto::-webkit-scrollbar-thumb:hover {
        background: #d1d5db;
      }

      .sample-cell-inline {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        min-width: 0;
      }

      .sample-cell-text {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: clamp(0.7rem, 0.825vw, 0.875rem);
        line-height: 1.25;
      }

      .sample-cell-stars {
        flex-shrink: 0;
      }
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .skip-link {
        position: fixed;
        top: 1rem;
        right: 1rem;
      z-index: 1000;
      padding: 0.75rem 1rem;
      border-radius: 0.75rem;
      background: #0f172a;
      color: #ffffff;
      font-weight: 600;
      text-decoration: none;
      opacity: 0;
      pointer-events: none;
        transform: translateY(-220%);
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .skip-link:focus {
      opacity: 1;
      pointer-events: auto;
        transform: translateY(0);
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    summary:focus-visible {
      outline: 3px solid #38bdf8;
      outline-offset: 3px;
    }

    @media (prefers-reduced-motion: reduce) {
      html:focus-within {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    .text-balance {
      text-wrap: balance;
    }
  </style>
</head>

<body class="bg-gray-50">
  <a class="skip-link" href="#main-content">Skip to main content</a>
  <!-- Noscript fallback for JS-disabled browsers -->
  <noscript>
    <div
      style="background:#fef3c7;border-bottom:2px solid #f59e0b;padding:0.75rem 1rem;text-align:center;font-size:0.875rem;color:#92400e;">
      <strong>JavaScript is required for live search, pricing, and ordering.</strong> Page content below remains
      viewable.
    </div>
  </noscript>

  <!-- Header -->
  <header class="bg-white shadow-sm z-50 relative">
    <div class="container mx-auto px-4 sm:px-6">
      <nav class="flex items-center justify-between h-16" aria-label="Primary">
        <a href="/v2/" class="flex items-center gap-3 text-blue-600 hover:text-blue-700 transition-colors">
          <div class="logo-icon w-9 h-9 rounded-lg flex items-center justify-center shadow-md overflow-hidden">
            <img src="/v2/assets/images/icon-dark-bg.png" alt="LeadIdeal Logo" class="w-full h-full object-cover"
              onerror="this.onerror=null;this.src='data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2736%27 height=%2736%27 viewBox=%270 0 36 36%27%3E%3Crect width=%2736%27 height=%2736%27 rx=%278%27 fill=%27%230066CC%27/%3E%3Ctext x=%2750%25%27 y=%2750%25%27 dominant-baseline=%27central%27 text-anchor=%27middle%27 fill=%27white%27 font-family=%27Arial%27 font-weight=%27700%27 font-size=%2714%27%3ELI%3C/text%3E%3C/svg%3E'">
          </div>
          <span
            class="text-xl font-bold bg-gradient-to-r from-blue-600 to-blue-700 bg-clip-text text-transparent">LeadIdeal</span>
        </a>

        <div class="flex items-center gap-3">
          <!-- Desktop Navigation -->
          <div class="nav-links hidden md:flex items-center gap-6">
            <a href="#how-it-works" class="text-gray-600 hover:text-gray-900 font-medium transition-colors">How It
              Works</a>
            <a href="#partners" class="text-gray-600 hover:text-gray-900 font-medium transition-colors">For Agencies</a>
            <a href="#packages" class="text-gray-600 hover:text-gray-900 font-medium transition-colors">Pricing</a>
            <a href="#faq" class="text-gray-600 hover:text-gray-900 font-medium transition-colors">FAQ</a>

            <div class="w-px h-5 bg-gray-200 mx-1"></div>

            <a href="/login"
              class="nav-lib-link inline-flex items-center justify-center px-4 py-2 text-sm font-semibold text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 hover:text-gray-900 shadow-sm transition-all"
              style="display:none;">Client Login</a>
          </div>

          <!-- Mobile Nav Overlay -->
          <div id="mobile-nav-overlay" class="md:hidden" role="dialog" aria-modal="true" aria-label="Mobile navigation"
            aria-hidden="true" hidden>
            <nav class="mobile-menu-container" aria-label="Mobile">
              <a href="#how-it-works">How It Works</a>
              <a href="#partners">For Agencies</a>
              <a href="#packages">Pricing</a>
              <a href="#faq">FAQ</a>
            </nav>
          </div>

          <!-- Mobile Menu Button -->
          <button id="mobile-menu-btn" type="button"
            class="mobile-menu-toggle md:hidden text-gray-600 hover:text-blue-600 w-11 h-11 flex items-center justify-center rounded-lg hover:bg-gray-100"
            aria-label="Open menu" aria-expanded="false" aria-controls="mobile-nav-overlay" data-open-label="Open menu"
            data-close-label="Close menu">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
          </button>
        </div>
      </nav>
    </div>
  </header>

  <main id="main-content" tabindex="-1">

    <!-- Hero Section -->
    <section id="hero" class="hero relative z-10 text-white">
      <!-- Clean, Premium Solid Background Gradient -->
      <div class="absolute inset-0 z-0 bg-gradient-to-br from-slate-900 via-blue-950 to-slate-950 pointer-events-none">
      </div>

      <div class="container relative z-10 py-0 md:py-32 hero-content-shell">
        <div class="hero-copy-shell text-center relative">
          <!-- Value Proposition -->
          <h1 class="hero-title-balance font-bold mb-6">
            <span class="hero-title-line">Your ideal B2B leads.&nbsp;Vetted.&nbsp;Ready.</span>
            <span class="hero-title-line bg-gradient-to-r from-green-400 to-blue-300 bg-clip-text text-transparent"
              style="background-image:linear-gradient(to right,#4ade80,#93c5fd);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent">
              No platform required.
            </span>
          </h1>

          <p class="hero-subtitle-balance mb-8 text-blue-100 font-normal">
            Hand-verified contacts you would actually call this week &mdash; no platform login, no seat fees, no learning curve.
          </p>

          <!-- 3-Step Process (3-Second Readable) -->
          <div class="flex flex-wrap justify-center gap-4 mb-10 text-xs sm:text-sm font-medium text-blue-100/90">
            <div class="flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/5 border border-white/10">
              <span class="flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-[10px] text-white">1</span>
              Define ICP
            </div>
            <div class="flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/5 border border-white/10">
              <span class="flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-[10px] text-white">2</span>
              We Research
            </div>
            <div class="flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/5 border border-white/10">
              <span class="flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-[10px] text-white">3</span>
              Start Selling
            </div>
          </div>

          <!-- Search Box -->
          <div
            class="hero-search-box max-w-4xl mx-auto mt-10 p-4 bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 shadow-2xl">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4">
              <div class="hero-input-wrapper h-full">
                <label class="sr-only" for="industry-input">Target industry</label>
                <input type="text" id="industry-input" placeholder="Industry (e.g. SaaS)" class="input-lg h-full"
                  autocomplete="off" readonly aria-readonly="true">
              </div>
              <div class="hero-input-wrapper h-full">
                <label class="sr-only" for="job-input">Target job title</label>
                <input type="text" id="job-input" placeholder="Role (e.g. CEO)" class="input-lg h-full" autocomplete="off" readonly
                  aria-readonly="true">
                </div>
            </div>
            <button id="search-cta" type="button" class="btn-primary w-full shadow-lg shadow-blue-900/40">
              <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
              </svg>
              <span>Preview Market &rarr;</span>
            </button>
            </div>

          <!-- Secondary CTA: See 5 free leads (email-gated, low friction) -->
          <div class="flex flex-col items-center justify-center gap-2 mt-6 text-sm">
            <span class="text-blue-100/80">Not ready to pay yet?</span>
            <div class="hero-corner-badges hero-corner-badges--cta" aria-hidden="false">
              <div class="hero-corner-badge hero-corner-badge--left" data-corner="audience">
                <span class="hero-corner-badge__icon" aria-hidden="true">
                  <i class="fas fa-bullseye"></i>
                </span>
                <span class="hero-corner-badge__text">
                  <span class="hero-corner-badge__value">US agencies &middot; MSPs &middot; B2B teams</span>
                </span>
              </div>
              <button type="button" id="free-leads-open"
                class="inline-flex items-center gap-2 rounded-full border border-emerald-300/40 bg-emerald-500/15 px-5 py-2 font-semibold text-emerald-100 transition hover:bg-emerald-500/25"
                data-cta="hero-see-5-free-leads">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round"
                    d="M3 8l7.5 5L18 8M5 6h14a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2z" />
                </svg>
                See 5 free leads
              </button>
              <div class="hero-corner-badge hero-corner-badge--right" data-corner="offer">
                <span class="hero-corner-badge__icon" aria-hidden="true">
                  <i class="fas fa-bolt"></i>
                </span>
                <span class="hero-corner-badge__text">
                  <span class="hero-corner-badge__label">15-contact sample</span>
                  <span class="hero-corner-badge__value"><span class="li-starter-price">$49</span> &middot; 24-48h</span>
                </span>
              </div>
            </div>
            <a href="https://www.linkedin.com/in/tommykuznets/" target="_blank" rel="noopener"
              class="text-xs text-blue-100/60 underline-offset-4 hover:text-white hover:underline"
              data-cta="hero-talk-to-founder">or talk to the founder &rarr;</a>
          </div>

          <!-- Trust Signals -->
          <div
            class="hero-trust-signals flex flex-col sm:flex-row flex-wrap justify-start items-start sm:items-center gap-3 sm:gap-8 mt-12 text-sm text-left">
            <div class="hero-trust-item flex items-center gap-2">
              <svg class="w-5 h-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                  d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z">
                </path>
              </svg>
              7-day refund protection on paid orders
            </div>
            <div class="hero-trust-item flex items-center gap-2">
              <svg class="w-5 h-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z">
                </path>
              </svg>
              24-48h standard delivery
            </div>
            <div class="hero-trust-item flex items-center gap-2">
              <svg class="w-5 h-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z">
                </path>
              </svg>
              US-only paid orders
            </div>
          </div>
          </div>
          </div>
          </section>

    <!-- Sample Data Preview -->
    <section id="sample-preview" class="py-16 bg-white">
      <div class="container mx-auto px-4 sm:px-6">
        <div class="max-w-4xl mx-auto">
          <div class="text-center mb-8">
            <h2 id="sample-heading" class="text-3xl md:text-4xl font-semibold text-gray-900 mb-3">Preview a US prospect
              lane before you buy</h2>
            <p id="sample-subheading" class="text-lg text-gray-600 max-w-3xl mx-auto text-balance">Run a search above to
              inspect masked sample rows for your target lane. Paid batches deliver verified names, emails, direct
              phones, and company details for US outbound teams.</p>
            </div>
            <div class="overflow-x-auto rounded-xl border border-gray-200 shadow-sm">
              <table class="sample-results-table w-full text-sm text-left" style="min-width:820px">
                <colgroup>
                <col style="width:14%">
                <col style="width:16%">
                <col style="width:20%">
                <col style="width:22%">
                <col style="width:10%">
                <col style="width:8%">
                <col style="width:10%">
                </colgroup>
                <thead class="bg-gray-50 text-gray-700 text-xs uppercase tracking-wider">
                  <tr>
                    <th class="px-4 py-3 whitespace-nowrap">Name</th>
                    <th class="px-4 py-3 whitespace-nowrap">Title</th>
                    <th class="px-4 py-3 whitespace-nowrap">Company</th>
                    <th class="px-4 py-3 whitespace-nowrap">Email</th>
                    <th class="px-4 py-3 whitespace-nowrap">LinkedIn</th>
                    <th class="px-4 py-3 whitespace-nowrap">Phone</th>
                    <th class="px-4 py-3 whitespace-nowrap">Location</th>
                  </tr>
                </thead>
                <tbody id="sample-tbody" class="divide-y divide-gray-100">
                  <tr class="hover:bg-blue-50 transition-colors">
                  <td data-label="Name" class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap">M.S.</td>
                  <td data-label="Title" class="px-4 py-3 text-gray-600 whitespace-nowrap">Director of Ops</td>
                  <td data-label="Company" class="px-4 py-3 text-gray-900 whitespace-nowrap">Ironridge Mechanical</td>
                  <td data-label="Email" class="px-4 py-3 text-gray-500 font-mono text-xs whitespace-nowrap">
                    m***@ironridgemech.com</td>
                  <td data-label="LinkedIn" class="px-4 py-3 text-blue-600/80 font-medium text-[11px] whitespace-nowrap">
                    linkedin.com/in/mi***</td>
                  <td data-label="Phone" class="px-4 py-3 text-gray-500 whitespace-nowrap">(7XX) ***-****</td>
                  <td data-label="Location" class="px-4 py-3 text-gray-600 whitespace-nowrap">Houston, TX</td>
                  </tr>
                  <tr class="hover:bg-blue-50 transition-colors">
                  <td data-label="Name" class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap">J.P.</td>
                  <td data-label="Title" class="px-4 py-3 text-gray-600 whitespace-nowrap">VP of Sales</td>
                  <td data-label="Company" class="px-4 py-3 text-gray-900 whitespace-nowrap">Fieldstone Capital</td>
                  <td data-label="Email" class="px-4 py-3 text-gray-500 font-mono text-xs whitespace-nowrap">
                    j***@fieldstonecap.com</td>
                  <td data-label="LinkedIn" class="px-4 py-3 text-blue-600/80 font-medium text-[11px] whitespace-nowrap">
                    linkedin.com/in/je***</td>
                  <td data-label="Phone" class="px-4 py-3 text-gray-500 whitespace-nowrap">(3XX) ***-****</td>
                  <td data-label="Location" class="px-4 py-3 text-gray-600 whitespace-nowrap">Chicago, IL</td>
                  </tr>
                  <tr class="hover:bg-blue-50 transition-colors">
                  <td data-label="Name" class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap">R.M.</td>
                  <td data-label="Title" class="px-4 py-3 text-gray-600 whitespace-nowrap">Owner</td>
                  <td data-label="Company" class="px-4 py-3 text-gray-900 whitespace-nowrap">SunPipe Plumbing LLC</td>
                  <td data-label="Email" class="px-4 py-3 text-gray-500 font-mono text-xs whitespace-nowrap">
                    r***@sunpipeplmb.com</td>
                  <td data-label="LinkedIn" class="px-4 py-3 text-blue-600/80 font-medium text-[11px] whitespace-nowrap">
                    linkedin.com/in/ro***</td>
                  <td data-label="Phone" class="px-4 py-3 text-gray-500 whitespace-nowrap">(3XX) ***-****</td>
                  <td data-label="Location" class="px-4 py-3 text-gray-600 whitespace-nowrap">Miami, FL</td>
                  </tr>
                  <tr class="hover:bg-blue-50 transition-colors">
                  <td data-label="Name" class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap">A.R.</td>
                  <td data-label="Title" class="px-4 py-3 text-gray-600 whitespace-nowrap">Head of Growth</td>
                  <td data-label="Company" class="px-4 py-3 text-gray-900 whitespace-nowrap">Launchpad Growth Co.</td>
                  <td data-label="Email" class="px-4 py-3 text-gray-500 font-mono text-xs whitespace-nowrap">
                    a***@launchpadgc.co</td>
                  <td data-label="LinkedIn" class="px-4 py-3 text-blue-600/80 font-medium text-[11px] whitespace-nowrap">
                    linkedin.com/in/al***</td>
                  <td data-label="Phone" class="px-4 py-3 text-gray-500 whitespace-nowrap">(4XX) ***-****</td>
                  <td data-label="Location" class="px-4 py-3 text-gray-600 whitespace-nowrap">San Francisco, CA</td>
                  </tr>
                  <tr class="hover:bg-blue-50 transition-colors">
                  <td data-label="Name" class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap">D.T.</td>
                  <td data-label="Title" class="px-4 py-3 text-gray-600 whitespace-nowrap">VP Partnerships</td>
                  <td data-label="Company" class="px-4 py-3 text-gray-900 whitespace-nowrap">VectorForge Cloud</td>
                  <td data-label="Email" class="px-4 py-3 text-gray-500 font-mono text-xs whitespace-nowrap">
                    d***@vectorforgecloud.io</td>
                  <td data-label="LinkedIn" class="px-4 py-3 text-blue-600/80 font-medium text-[11px] whitespace-nowrap">
                    linkedin.com/in/da***</td>
                  <td data-label="Phone" class="px-4 py-3 text-gray-500 whitespace-nowrap">(4XX) ***-****</td>
                  <td data-label="Location" class="px-4 py-3 text-gray-600 whitespace-nowrap">Seattle, WA</td>
                  </tr>
                  <tr class="hover:bg-blue-50 transition-colors">
                  <td data-label="Name" class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap">L.B.</td>
                  <td data-label="Title" class="px-4 py-3 text-gray-600 whitespace-nowrap">Operations Director</td>
                  <td data-label="Company" class="px-4 py-3 text-gray-900 whitespace-nowrap">Northcrest Builders</td>
                  <td data-label="Email" class="px-4 py-3 text-gray-500 font-mono text-xs whitespace-nowrap">
                    l***@northcrestbuilders.com
                  </td>
                  <td data-label="LinkedIn" class="px-4 py-3 text-blue-600/80 font-medium text-[11px] whitespace-nowrap">
                    linkedin.com/in/la***</td>
                  <td data-label="Phone" class="px-4 py-3 text-gray-500 whitespace-nowrap">(4XX) ***-****</td>
                  <td data-label="Location" class="px-4 py-3 text-gray-600 whitespace-nowrap">Atlanta, GA</td>
                  </tr>
                  </tbody>
                  </table>
                  </div>
                  <div id="hero-promo-banner"
                    class="hidden mt-8 rounded-3xl border border-blue-100 bg-gradient-to-r from-blue-600 via-blue-700 to-slate-900 px-6 py-6 text-white shadow-[0_24px_80px_rgba(15,23,42,0.16)]">
                    <div class="flex flex-col gap-5 md:flex-row md:items-center md:justify-between">
                      <div class="max-w-2xl">
                        <p class="text-xs font-semibold uppercase tracking-[0.22em] text-blue-200">Preview, then paid batch</p>
                        <h3 class="mt-2 text-2xl font-semibold">Start with a 15-contact paid sample</h3>
                <p id="hero-promo-copy" class="mt-2 text-sm leading-6 text-blue-100">Use the preview to confirm fit,
                  then place a <span class="li-starter-price">$49</span> paid sample order for 15 verified contacts.
                  Move into custom builds or a
                  retainer only after the first lane proves fit.</p>
                <p class="mt-2 text-xs text-blue-200">Deliverability, freshness, and refund guarantees apply to paid
                  orders only.
                  Free previews and promo access are proof-of-work only and carry no SLA.</p>
                </div>
                <div class="flex shrink-0 flex-col gap-3 sm:flex-row md:flex-col">
                  <button id="hero-promo-cta" type="button"
                    class="inline-flex items-center justify-center gap-2 rounded-full bg-white px-5 py-3 text-sm font-semibold text-blue-700 transition hover:bg-blue-50">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                    </svg>
                    Start <span class="li-starter-price">$49</span> Sample
                  </button>
                  <button id="hero-promo-dismiss" type="button"
                    class="inline-flex items-center justify-center rounded-full border border-white/20 px-5 py-3 text-sm font-medium text-blue-100 transition hover:bg-white/10">
                    Keep browsing
                  </button>
                </div>
                </div>
                </div>
                <div class="mt-4 flex flex-col sm:flex-row items-center sm:items-start justify-between gap-4">
            <p class="text-xs leading-5 text-gray-500 text-balance text-left flex-1">Public previews are masked
              proof-of-work only. Full verified data is
              delivered inside paid orders, and larger expansions come only after the first paid sample proves&nbsp;fit.
            </p>
            <div class="flex items-center gap-4 flex-shrink-0">
              <button onclick="downloadSampleCSV()"
                class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 text-gray-600 text-xs font-medium shadow-sm transition-all hover:shadow-md">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                </svg>
                Download CSV
              </button>
              <a href="#packages" class="text-blue-600 hover:text-blue-800 text-sm font-semibold whitespace-nowrap">Choose a Paid
                Batch
                &rarr;</a>
              </div>
              </div>
              <p class="mt-4 text-sm text-gray-700 font-medium text-left sm:text-center text-balance">
            If the preview looks usable, <a href="#packages"
              class="text-blue-600 hover:text-blue-800 font-semibold whitespace-nowrap">start with the
              paid sample below</a>. Move into a custom build or retainer only after the first batch is&nbsp;working.
            </p>
            <div class="mt-6 flex flex-col justify-center items-center gap-3">
            <p class="text-sm text-gray-500 md:whitespace-nowrap">
              <svg class="w-4 h-4 inline-block mr-1 text-green-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                  d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z">
                </path>
              </svg>
              <span class="inline-block md:whitespace-nowrap">Step 1: inspect masked preview.</span>
              <span class="inline-block md:whitespace-nowrap">Step 2: buy a verified batch.</span>
              <span class="inline-block md:whitespace-nowrap">Step 3: expand only after&nbsp;results.</span>
              </p>
              </div>
              <!-- V3 Unlock CTA — shown after live search results -->
              <div id="unlock-cta" class="hidden mt-6">
                <a href="#packages" id="unlock-cta-link"
                  class="block w-full text-center bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-bold py-4 px-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 text-lg">
                  <svg class="w-5 h-5 inline-block mr-2 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z">
                </path>
              </svg>
              <span id="unlock-cta-text" class="whitespace-nowrap">Start the 15-Contact Paid Sample - <span
                  class="li-starter-price">$49</span></span>
              </a>
              </div>

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

    <!-- How It Works Section (Minimalist) -->
    <section id="how-it-works" class="py-20 bg-white">
      <div class="container mx-auto px-4 sm:px-6">
        <div class="text-center mb-16">
          <h2 class="text-3xl md:text-4xl font-semibold text-gray-900 mb-4">How US custom prospecting works</h2>
          <p class="text-lg text-gray-600 max-w-2xl mx-auto">Custom prospecting is simple when the process is manual and
            verified.</p>
          </div>
          <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            <div class="p-8 rounded-2xl bg-slate-50 border border-slate-100">
              <h3 class="text-xl font-semibold text-gray-900 mb-3">1. Define</h3>
            <p class="text-gray-600">Tell us your target industry, buyer role, and US market. We focus the research on
              your exact ICP.</p>
            </div>
            <div class="p-8 rounded-2xl bg-slate-50 border border-slate-100">
              <h3 class="text-xl font-semibold text-gray-900 mb-3">2. Research</h3>
            <p class="text-gray-600">We source and verify every contact manually. No stale databases or scraped junk.
            </p>
            </div>
            <div class="p-8 rounded-2xl bg-slate-50 border border-slate-100">
              <h3 class="text-xl font-semibold text-gray-900 mb-3">3. Deliver</h3>
            <p class="text-gray-600">Receive a clean CSV batch within 24-48 hours. Ready for immediate outbound
              outreach.</p>
            </div>
            </div>
            </div>
            </section>

    <!-- What Your Report Looks Like -->
    <section id="report-preview" class="py-16 bg-white">
      <div class="container mx-auto px-4 sm:px-6">
        <div class="max-w-4xl mx-auto">
          <div class="text-center mb-10">
            <h2 class="text-3xl md:text-4xl font-semibold text-gray-900 mb-3">What Your Report Looks Like</h2>
            <p class="text-lg text-gray-600">Each delivered contact includes the key fields you need to start outreach
              fast.</p>
          </div>
          <div class="grid md:grid-cols-2 gap-6">
            <!-- Sample Contact Card 1 -->
            <div class="bg-gradient-to-br from-gray-50 to-blue-50 rounded-2xl p-6 border border-gray-200 shadow-sm">
              <div class="flex items-center gap-3 mb-4">
                <div
                  class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-700 font-bold text-lg">
                  RM</div>
                <div>
                  <p class="font-bold text-gray-900">Rachel Martinez</p>
                  <p class="text-sm text-gray-500">Owner &middot; Sunshine Plumbing</p>
                </div>
              </div>
              <div class="space-y-2 text-sm">
                <div class="flex items-center gap-2">
                  <svg class="w-4 h-4 text-green-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                    <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
                  </svg>
                  <span class="text-gray-700">rachel@sunshineplmb.com</span>
                  <span class="text-xs text-green-600 font-medium bg-green-50 px-1.5 py-0.5 rounded">Verified</span>
                </div>
                <div class="flex items-center gap-2">
                  <svg class="w-4 h-4 text-green-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                    <path
                      d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z">
                    </path>
                  </svg>
                  <span class="text-gray-700">(305) 555-1234</span>
                  <span class="text-xs text-green-600 font-medium bg-green-50 px-1.5 py-0.5 rounded">Direct</span>
                </div>
                <div class="flex items-center gap-2">
                  <svg class="w-4 h-4 text-blue-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd"
                      d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.497-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="text-gray-700">linkedin.com/in/rachelmartinez</span>
                </div>
                <div class="flex items-center gap-2">
                  <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd"
                      d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="text-gray-700">Miami, FL &middot; Home Services</span>
                </div>
              </div>
            </div>
            <!-- Sample Contact Card 2 -->
            <div class="bg-gradient-to-br from-gray-50 to-blue-50 rounded-2xl p-6 border border-gray-200 shadow-sm">
              <div class="flex items-center gap-3 mb-4">
                <div
                  class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-700 font-bold text-lg">
                  SC</div>
                <div>
                  <p class="font-bold text-gray-900">Steven Chen</p>
                  <p class="text-sm text-gray-500">VP of Sales &middot; CloudSync Solutions</p>
                </div>
              </div>
              <div class="space-y-2 text-sm">
                <div class="flex items-center gap-2">
                  <svg class="w-4 h-4 text-green-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                    <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
                  </svg>
                  <span class="text-gray-700">steven.c@cloudsync.io</span>
                  <span class="text-xs text-green-600 font-medium bg-green-50 px-1.5 py-0.5 rounded">Verified</span>
                </div>
                <div class="flex items-center gap-2">
                  <svg class="w-4 h-4 text-green-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                    <path
                      d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z">
                    </path>
                  </svg>
                  <span class="text-gray-700">(415) 555-8901</span>
                  <span class="text-xs text-green-600 font-medium bg-green-50 px-1.5 py-0.5 rounded">Direct</span>
                </div>
                <div class="flex items-center gap-2">
                  <svg class="w-4 h-4 text-blue-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd"
                      d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.497-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="text-gray-700">linkedin.com/in/stevenchen-sales</span>
                </div>
                <div class="flex items-center gap-2">
                  <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd"
                      d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="text-gray-700">San Francisco, CA &middot; SaaS</span>
                </div>
              </div>
            </div>
          </div>
          <p class="text-center text-sm text-gray-500 mt-6">
            <svg class="w-4 h-4 inline-block mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z">
              </path>
            </svg>
            Every contact includes: Name, Title, Company, Verified Email, Direct Phone, LinkedIn Profile, Industry &amp;
            Location
          </p>
        </div>
      </div>
    </section>

    <!-- Founder's Note -->
    <section class="py-16 bg-gray-50">
      <div class="container mx-auto px-4 sm:px-6">
        <div
          class="max-w-3xl mx-auto bg-gradient-to-br from-gray-50 to-blue-50 rounded-2xl p-8 md:p-12 border border-gray-200 shadow-sm relative">
          <div class="text-6xl text-blue-200 absolute top-4 left-6 font-serif leading-none">&ldquo;</div>
          <blockquote class="text-lg md:text-xl text-gray-700 italic mt-6 mb-6 leading-relaxed">
            LeadIdeal is built for teams that want proof before scale. Paid orders stay intentionally focused: fresh
            research, real verification, and a list you can actually review and use before committing to broader volume.
          </blockquote>
          <div class="flex items-center gap-4 mb-8">
            <img src="/v2/assets/images/founder.jpg" alt="Tommy Kuznets, Founder of LeadIdeal"
              class="w-14 h-14 rounded-full object-cover border-2 border-white shadow" loading="lazy" width="56" height="56"
              onerror="this.onerror=null;this.src='data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2756%27 height=%2756%27 viewBox=%270 0 56 56%27%3E%3Ccircle cx=%2728%27 cy=%2728%27 r=%2728%27 fill=%27%23e5e7eb%27/%3E%3Ccircle cx=%2728%27 cy=%2722%27 r=%279%27 fill=%27%239ca3af%27/%3E%3Cellipse cx=%2728%27 cy=%2744%27 rx=%2716%27 ry=%2712%27 fill=%27%239ca3af%27/%3E%3C/svg%3E'">
            <div>
              <p class="font-bold text-gray-900">Tommy Kuznets</p>
              <p class="text-sm text-gray-500">Founder, LeadIdeal</p>
            </div>
          </div>
          <div class="grid sm:grid-cols-2 gap-3">
            <div class="flex items-center gap-2 text-sm text-gray-700">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z">
                </path>
              </svg>
              <span><strong>90%+ Deliverability Target</strong> — eligible paid batches</span>
            </div>
            <div class="flex items-center gap-2 text-sm text-gray-700">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z">
                </path>
              </svg>
              <span><strong>Refund Protection</strong> — if covered quality misses the stated floor</span>
            </div>
            <div class="flex items-center gap-2 text-sm text-gray-700">
              <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z">
                </path>
              </svg>
              <span><strong>Founder Access</strong> — <a href="https://www.linkedin.com/in/tommykuznets/" target="_blank"
                  rel="noopener" class="text-blue-700 hover:underline">Tommy Kuznets on
                  LinkedIn</a></span>
              </div>
              <div class="flex items-center gap-2 text-sm text-gray-700">
                <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd"
                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z">
                  </path>
                </svg>
                <span><strong>7-Day Window</strong> — paid orders only</span>
              </div>
              </div>
              </div>
              </div>
              </section>

    <!-- Pricing Section (Updated) -->
    <section id="packages" class="py-20 bg-gray-50 text-center">
      <div class="container mx-auto px-4 sm:px-6">
        <div class="text-center mb-16">
          <h2 class="text-4xl md:text-5xl font-semibold text-gray-900 mb-4">Choose your batch size</h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">Start with a paid sample, then move into a custom build for
            your lane.</p>
          </div>

        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
          <!-- Paid Sample -->
          <div class="package-card p-8 bg-white rounded-3xl border border-gray-200 shadow-sm transition hover:shadow-md">
            <div class="text-xs font-semibold uppercase tracking-widest text-blue-600 mb-2">Proof of Work</div>
            <h3 class="text-2xl font-bold mb-4">Paid Sample</h3>
            <div class="text-4xl font-bold mb-4">$49</div>
            <ul class="text-sm text-gray-600 space-y-3 mb-8 text-left">
              <li class="flex items-center gap-2"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor"
                  viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg> 15 verified US contacts</li>
              <li class="flex items-center gap-2"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor"
                  viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg> One ICP + One US Market</li>
              <li class="flex items-center gap-2"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor"
                  viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg> 24h delivery</li>
              </ul>
              <button class="w-full py-3 px-6 rounded-xl bg-blue-600 text-white font-semibold hover:bg-blue-700 transition"
                onclick="selectFixedPackage('sample')">Order Sample</button>
              </div>

          <!-- Custom Build -->
          <div class="package-card custom transform scale-105">
            <div class="package-badge custom">Flexible</div>
            <h3 class="text-2xl font-semibold mb-2 text-gray-900">Custom Build</h3>
            <div class="price-display"><span id="custom-price"
                class="text-5xl font-bold bg-gradient-to-r from-purple-600 to-purple-700 bg-clip-text text-transparent"
                data-usd="99">$99</span><span class="text-gray-600">/report</span></div>
            <div class="custom-collapsed">
              <p class="text-gray-600 mb-6 mt-4">Build your package with the exact number of leads and options.</p>
              <button class="btn-secondary w-full" onclick="expandCustomPackage()"><svg class="w-5 h-5 ml-2 inline-block mr-1"
                  fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6">
                  </path>
                </svg>Customize Package</button>
              </div>
              <div class="custom-expanded hidden" id="custom-builder">
                <div class="mb-6"><label class="block text-sm font-medium mb-2 text-gray-700">Leads: <span id="lead-count-display"
                      class="text-purple-600 font-semibold">75</span></label><input type="range" id="lead-count-slider" min="75"
                    max="600" value="75" class="w-full" oninput="updateCustomPrice()">
                  <div class="flex justify-between text-xs text-gray-500 mt-1"><span>75</span><span>600</span></div>
                </div>
                <div class="mb-6"><label class="flex items-center justify-between cursor-pointer"><span
                      class="text-sm font-medium text-gray-700">Include phone numbers</span>
                    <div class="relative"><input type="checkbox" id="phone-toggle" class="sr-only peer" checked
                        onchange="updateCustomPrice()">
                      <div class="toggle-bg"></div>
                    </div>
                  </label>
                  <p class="text-xs text-gray-500 mt-1">Save 15% with email only</p>
                </div>
                <div class="bg-purple-50 rounded-lg p-4 mb-4">
                  <div class="flex justify-between text-sm mb-2"><span>Base price:</span><span id="base-price" data-usd="49">$49</span>
                  </div>
                  <div class="flex justify-between text-sm mb-2"><span>Volume discount:</span><span id="volume-discount"
                      class="text-green-600">-$0.00</span></div>
                  <div class="flex justify-between text-sm mb-2"><span>Phone discount:</span><span id="phone-discount"
                      class="text-green-600">-$0.00</span></div>
                <div class="border-t border-purple-200 pt-2 flex justify-between font-semibold text-gray-900">
                  <span>Total:</span><span id="total-price" data-usd="49">$49</span>
                </div>
                </div>
                <p class="currency-note">* Billed in USD via PayPal</p>
              <button class="btn-select custom w-full" onclick="selectCustomPackage()">Continue with custom
                package</button>
              </div>
              </div>

          <!-- Replenishment Retainer -->
          <div class="package-card p-8 bg-white rounded-3xl border border-gray-200 shadow-sm transition hover:shadow-md">
            <div class="text-xs font-semibold uppercase tracking-widest text-purple-600 mb-2">Recurring High-Growth
            </div>
            <h3 class="text-2xl font-bold mb-4">Retainer</h3>
            <div class="text-4xl font-bold mb-4">$1,199<span class="text-base font-normal">/mo</span></div>
            <ul class="text-sm text-gray-600 space-y-3 mb-8 text-left">
              <li class="flex items-center gap-2"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor"
                  viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg> 750 verified leads / month</li>
              <li class="flex items-center gap-2"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor"
                  viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg> Weekly batch delivery</li>
              <li class="flex items-center gap-2"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor"
                  viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg> White-glove CRM formatting</li>
              </ul>
            <button
              class="w-full py-3 px-6 rounded-xl border-2 border-blue-600 text-blue-600 font-semibold hover:bg-blue-50 transition"
              onclick="window.location.href='mailto:tom@leadideal.com?subject=Retainer Inquiry'">Inquire for
              Retainer</button>
            </div>
            </div>


      </div>
      </section>

    <section id="partners" class="bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 py-20 text-white">
      <div class="container mx-auto px-4 sm:px-6">
        <div class="mx-auto max-w-6xl">
          <div class="text-center">
            <p class="text-xs font-semibold uppercase tracking-[0.22em] text-blue-300">Agency And Partner Lane</p>
            <h2 class="mt-3 text-3xl font-semibold text-white md:text-4xl">Want to use LeadIdeal for your clients or
              bring
              deals on commission?</h2>
            <p class="mx-auto mt-4 max-w-3xl text-sm leading-7 text-slate-300 md:text-base">
              There is a separate path for agencies, niche operators, and channel partners. You can use LeadIdeal as a
              backend research layer for client work, or bring aligned deals and earn a percentage on approved referred
              sales.
            </p>
            </div>

          <div class="mt-10 grid gap-5 lg:grid-cols-3">
            <div class="rounded-3xl border border-white/10 bg-white/5 p-6 shadow-[0_18px_50px_rgba(2,6,23,0.24)]">
              <p class="text-xs font-semibold uppercase tracking-[0.18em] text-blue-300">Channel 1</p>
              <h3 class="mt-3 text-xl font-semibold text-white">Refer a client</h3>
              <p class="mt-3 text-sm leading-6 text-slate-300">Best if you already advise businesses that need cleaner
                B2B
                targeting. Bring the deal, keep your client relationship, and earn on collected referred orders.</p>
              <ul class="mt-5 space-y-2 text-sm text-slate-200">
                <li>Percentage of approved referred sales</li>
                <li>Best fit for agencies and consultants</li>
                <li>Custom batches usually start above the self-serve paid sample</li>
              </ul>
              </div>
              <div class="rounded-3xl border border-blue-400/20 bg-blue-500/10 p-6 shadow-[0_18px_50px_rgba(29,78,216,0.18)]">
                <p class="text-xs font-semibold uppercase tracking-[0.18em] text-blue-200">Channel 2</p>
                <h3 class="mt-3 text-xl font-semibold text-white">Resell or white-label the research</h3>
                <p class="mt-3 text-sm leading-6 text-slate-200">Best if you sell lead gen, outbound, SEO, PPC, or booked
                  calls and want LeadIdeal powering the contact-research layer behind your offer.</p>
                <ul class="mt-5 space-y-2 text-sm text-slate-100">
                  <li>Use paid samples to test fit before bigger batches</li>
                  <li>Good for one niche and one market at a time</li>
                  <li>Designed for manual, higher-trust client delivery</li>
                </ul>
              </div>
              <div class="rounded-3xl border border-white/10 bg-white/5 p-6 shadow-[0_18px_50px_rgba(2,6,23,0.24)]">
                <p class="text-xs font-semibold uppercase tracking-[0.18em] text-blue-300">Channel 3</p>
                <h3 class="mt-3 text-xl font-semibold text-white">Need a custom niche batch?</h3>
              <p class="mt-3 text-sm leading-6 text-slate-300">If the public paid sample is too small for your use case,
                we can
                scope a custom batch or agency-oriented starter build for the exact vertical you sell into.</p>
              <ul class="mt-5 space-y-2 text-sm text-slate-200">
                <li>Useful for client campaigns and niche pack creation</li>
                <li>Can include tighter role and market targeting</li>
                <li>Handled directly with the founder</li>
              </ul>
              </div>
              </div>

          <div class="mt-8 rounded-[32px] border border-white/10 bg-white/5 p-6 shadow-[0_18px_50px_rgba(2,6,23,0.24)] md:p-8">
            <div class="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
              <div class="max-w-2xl">
                <p class="text-xs font-semibold uppercase tracking-[0.18em] text-blue-300">Best Partner Types</p>
                <h3 class="mt-2 text-2xl font-semibold text-white">Agencies selling outreach into marketing, technology,
                  construction, or local B2B</h3>
                <p class="mt-3 text-sm leading-6 text-slate-300">LeadIdeal is strongest when the partner already owns
                  distribution and needs a higher-trust contact research layer behind the offer.</p>
              </div>
              <div class="flex shrink-0 flex-col gap-3 sm:flex-row md:flex-col">
                <a href="mailto:info@leadideal.com?subject=LeadIdeal%20Agency%20Partner%20Inquiry"
                  class="inline-flex items-center justify-center gap-2 rounded-full bg-white px-6 py-3 text-sm font-semibold text-slate-900 transition hover:bg-slate-100">
                  Discuss Partner Fit
                </a>
                <a href="https://www.linkedin.com/in/tommykuznets/" target="_blank" rel="noopener"
                  class="inline-flex items-center justify-center gap-2 rounded-full border border-white/15 px-6 py-3 text-sm font-semibold text-white transition hover:bg-white/10">
                  Talk To The Founder
                </a>
              </div>
            </div>
          </div>
          </div>
          </div>
          </section>

    <!-- FAQ Section -->
    <section id="faq" class="py-20 bg-white">
      <div class="container mx-auto px-4 sm:px-6">
        <div class="text-center mb-16">
          <h2 class="text-4xl md:text-5xl font-semibold text-gray-900 mb-4">Frequently Asked Questions</h2>
        </div>
        <div class="max-w-3xl mx-auto space-y-6">
          <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
            <h3 class="font-semibold text-lg text-gray-900 mb-2">What data do you provide?</h3>
            <p class="text-gray-600">We deliver verified business contacts including decision-maker names, titles,
              direct
              email addresses, phone numbers, company information, and location data. All contacts are validated for
              accuracy before delivery.</p>
            </div>
            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
              <h3 class="font-semibold text-lg text-gray-900 mb-2">How quickly do you deliver?</h3>
              <p class="text-gray-600">Standard delivery is 24-48 hours from payment confirmation for US-first paid
                orders. More complex custom builds may take longer depending on scope.</p>
            </div>
            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
              <h3 class="font-semibold text-lg text-gray-900 mb-2">Is this data compliant?</h3>
              <p class="text-gray-600">Yes. We source from lawful, publicly available business information and support
              compliant B2B use with sender identification, opt-out handling, and clear customer-use responsibilities.
              </p>
              </div>
              <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
                <h3 class="font-semibold text-lg text-gray-900 mb-2">What's your data quality guarantee?</h3>
            <p class="text-gray-600">For paid orders, we target 90%+ deliverable emails on eligible batches and keep an
              80% minimum
              floor for refund protection. If a paid order lands below that floor, you may request
              replacement or refund within 7 days. Free previews, promo access, and proof-of-work outputs are excluded.
            </p>
            </div>
            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
              <h3 class="font-semibold text-lg text-gray-900 mb-2">Can I customize my research scope?</h3>
              <p class="text-gray-600">Absolutely. Specify your target industry, company size, job titles, geographic
                location, and any other criteria. We'll deliver a custom research report matching your needs.</p>
            </div>
            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
              <h3 class="font-semibold text-lg text-gray-900 mb-2">Do you work with agencies or channel partners?</h3>
              <p class="text-gray-600">Yes. Agencies, niche operators, and channel partners can use LeadIdeal as a
              research layer for client work or bring referred deals on a commission basis. The public paid sample is
              the
              fastest way to judge fit, and larger partner-oriented batches are handled directly.</p>
              </div>
              <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
                <h3 class="font-semibold text-lg text-gray-900 mb-2">Do you store my contacts in a database?</h3>
                <p class="text-gray-600">No. We research contacts fresh for each order — this is not a pre-built database.
                  After delivery, leads are archived and not retained in active systems long-term.</p>
              </div>
              </div>
              </div>
              </section>

    <!-- Promo Interstitial Slide-in Panel -->
    <div id="promo-panel" class="promo-interstitial" role="dialog" aria-modal="true" aria-labelledby="promo-panel-title"
      aria-hidden="true">
      <div class="promo-panel-backdrop" onclick="skipPromo()"></div>
      <div class="promo-panel-content">
        <!-- Close button -->
        <button class="promo-close" onclick="skipPromo()" aria-label="Close">
          <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>

        <!-- Promo Content -->
        <div class="promo-content">
          <div class="promo-icon">🎁</div>
          <h2 id="promo-panel-title" class="promo-title">Paid Sample Offer</h2>
          <p class="promo-subtitle">Validate your audience first, then scale with confidence</p>
          <p class="text-sm text-gray-500 mt-2 mb-1"
            style="max-width: 340px; margin-left: auto; margin-right: auto; line-height: 1.5;">
            Same research quality as full orders — verified contacts from public sources. One-time payment, no
            subscription.
          </p>

          <!-- Promo Details -->
          <div class="promo-details">
            <div class="promo-badge" id="promo-badge-code">PAID SAMPLE</div>
            <div class="promo-price" id="promo-price-display">
              <span class="free-price" id="promo-price-value">$49</span>
            </div>
          </div>

          <!-- What You Get -->
          <ul class="promo-features">
            <li>
              <svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              15 verified contacts with phone + email
            </li>
            <li>
              <svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              Industry: <span id="promo-industry">Marketing</span>
            </li>
            <li>
              <svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              Job Title: <span id="promo-job-title">Founder</span>
            </li>
            <li>
              <svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd"
                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                  clip-rule="evenodd" />
              </svg>
              Delivered within 24 hours
            </li>
          </ul>

          <!-- CTA Buttons -->
          <div class="promo-ctas">
            <button onclick="acceptPromo()" class="btn-promo-accept" aria-label="Order $49 Sample" title="Order $49 Sample">
              <i class="fa-solid fa-rocket"></i> Order <span class="li-starter-price">$49</span> Sample
            </button>
            <button onclick="skipPromo()" class="btn-promo-skip">
              Skip and see all packages →
            </button>
          </div>
          </div>
          </div>
          </div>

    <!-- ICP Quick Modal - Shows before payment -->

    <div id="icp-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="icp-modal-title"
      aria-hidden="true">
      <div class="modal-container">

        <!-- Header -->
        <div class="modal-header">
          <div></div>
          <h2 id="icp-modal-title" class="modal-title">Define Your Leads</h2>
          <button class="modal-close w-11 h-11 flex items-center justify-center rounded-lg" onclick="closeICPModal()"
            aria-label="Close modal">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
          </button>
        </div>

        <!-- Content -->
        <div class="modal-body p-6">
          <div class="icp-modal-layout">
            <div class="icp-modal-main">
              <!-- Selected Package Summary -->
              <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-4">
                <div class="flex justify-between items-center">
                  <div>
                    <h3 class="font-semibold text-lg text-gray-900" id="icp-package-name">Paid Sample</h3>
                    <p class="text-sm text-gray-600" id="icp-package-desc">15 verified contacts with phone</p>
                  </div>
                  <div class="text-right">
                    <div class="flex items-center gap-2">
                      <span class="text-gray-400 line-through text-sm" id="icp-original-price" style="display:none">$49</span>
                      <span class="text-xl font-bold text-gray-900" id="icp-final-price">$49</span>
                      </div>
                      <span class="inline-block bg-green-500 text-white text-xs font-semibold px-2 py-1 rounded" id="icp-discount-badge">LANE
                        VALIDATION</span>
                      </div>
                      </div>
                      </div>

              <div id="icp-preview-mobile" class="icp-preview-mobile" hidden>
                <details>
                  <summary>
                    <span class="icp-preview-mobile-summary-copy">Preview this ready-made pack</span>
                    <span class="icp-preview-mobile-summary-meta" id="icp-preview-mobile-meta"></span>
                  </summary>
                  <div class="icp-preview-mobile-body" id="icp-preview-mobile-body"></div>
                </details>
              </div>

              <!-- Change Package Link -->
              <p class="text-sm text-center mb-4">
                <a href="#" onclick="showMiniPackageSelector(); return false;" class="text-blue-600 hover:underline">
                  Change package →
                </a>
              </p>

              <!-- Real ICP Form -->
              <form id="icp-form" class="space-y-4">
                <!-- Full Name (required — prevents backend name validation failures) -->
                <div>
                  <label for="icp-name-main" class="block text-sm font-medium text-gray-700 mb-1">Your Full Name
                    *</label>
                  <input type="text" id="icp-name-main" name="name" required
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    placeholder="John Doe" autocomplete="name" minlength="2">
                  </div>

                <!-- Email -->
                <div>
                  <label for="icp-email" class="block text-sm font-medium text-gray-700 mb-1">Email for delivery
                    *</label>
                  <input type="email" id="icp-email" name="email" required
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    placeholder="your@email.com" autocomplete="email">
                  </div>

                <!-- Industry -->
                <div>
                  <label for="icp-industry" class="block text-sm font-medium text-gray-700 mb-1">Target Industry
                    *</label>
                  <select id="icp-industry" name="industry" required
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                    onchange="populateJobTitlesDropdown(this.value)">
                    <option value="">Select industry</option>
                    <!-- Options populated by JS -->
                  </select>
                  </div>

                <!-- Job Title (populated by industry) -->
                <div id="icp-job-title-field">
                  <label for="icp-job-title" class="block text-sm font-medium text-gray-700 mb-1">Target Job Title
                    *</label>
                  <select id="icp-job-title" name="job_title"
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                    disabled>
                    <option value="">Select industry first</option>
                  </select>
                  <input type="text" id="icp-job-title-custom" name="job_title_custom" placeholder="Custom job title"
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm mt-2" style="display: none;">
                </div>

                <!-- Country + location -->
                <div>
                  <label for="icp-country" class="block text-sm font-medium text-gray-700 mb-1">Target Country *</label>
                  <select id="icp-country" name="country" required
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="">Select target country</option>
                    <option value="US">United States</option>
                  </select>
                  <p class="mt-2 text-xs text-gray-500">The current public rollout is limited to United States targeting
                    so delivery, QA,
                    and compliance stay consistent.</p>
                  </div>

                <div>
                  <label for="icp-location" class="block text-sm font-medium text-gray-700 mb-1">Target Location <span
                      class="text-gray-400 font-normal">(optional — leave blank for nationwide)</span></label>
                  <input type="text" id="icp-location" name="location"
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    placeholder="e.g. New York, NY - or leave blank for nationwide" autocomplete="off">
                </div>

                <!-- Optional Fields (collapsed) -->
                <details class="border border-gray-200 rounded-lg">
                  <summary class="px-4 py-3 text-sm font-medium text-gray-600 cursor-pointer hover:text-gray-900">
                    More options (optional)
                  </summary>
                  <div class="px-4 pb-4 space-y-4">
                    <!-- Full Name moved to main form -->

                    <!-- Company Size -->
                    <div>
                      <label for="icp-company-size" class="block text-sm font-medium text-gray-700 mb-1">Company
                        Size</label>
                      <select id="icp-company-size" name="company_size"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="">Any size</option>
                        <option value="1-10">1-10 employees</option>
                        <option value="11-50">11-50 employees</option>
                        <option value="51-200">51-200 employees</option>
                        <option value="201-500">201-500 employees</option>
                        <option value="501+">501+ employees</option>
                      </select>
                    </div>

                    <!-- Contact Type -->
                    <div>
                      <label for="icp-contact-type" class="block text-sm font-medium text-gray-700 mb-1">Contact Data
                        Type</label>
                      <select id="icp-contact-type" name="contact_type"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="both">Email + Phone (Recommended)</option>
                        <option value="email">Email Only (Save 15-20%)</option>
                      </select>
                    </div>
                    </div>
                    </details>

                <!-- Submit Button -->
                <button type="button" onclick="proceedToPayment()" class="btn-primary w-full">
                  Continue to Payment &rarr;
                </button>
                </form>
                </div>

            <aside id="icp-preview-desktop" class="icp-preview-desktop" hidden>
              <div class="icp-preview-panel">
                <div class="icp-preview-header">
                  <div class="icp-preview-icon" id="icp-preview-icon"></div>
                  <div>
                    <p class="icp-preview-kicker">Censored Preview</p>
                    <h3 class="icp-preview-title" id="icp-preview-title">Ready-made pack preview</h3>
                    <p class="icp-preview-subtitle" id="icp-preview-subtitle">See the format before you pay.</p>
                  </div>
                </div>
                <div class="icp-preview-badges">
                  <span class="icp-preview-badge" id="icp-preview-count">30 contacts</span>
                  <span class="icp-preview-badge" id="icp-preview-verified">Verified</span>
                </div>
                <div class="icp-preview-table-wrap">
                  <table class="icp-preview-table">
                    <thead>
                      <tr>
                        <th>Name</th>
                        <th>Title</th>
                        <th>Company</th>
                        <th>Email</th>
                        <th>Phone</th>
                      </tr>
                    </thead>
                    <tbody id="icp-preview-table-body"></tbody>
                  </table>
                </div>
                <p class="icp-preview-note">The delivered CSV contains full contact details, company metadata, and
                  uncensored direct
                  fields.</p>
              </div>
            </aside>
            </div>
            </div>


      </div>
      </div>

    <!-- Payment Modal -->
    <div id="payment-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="payment-modal-title"
      aria-hidden="true">
      <div class="modal-container">

        <!-- Header -->
        <div class="modal-header">
          <button class="modal-back" onclick="goBackToICP()" aria-label="Back to ICP">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
            Back
          </button>
          <h2 id="payment-modal-title" class="modal-title">Complete Your Order</h2>
          <button class="modal-close" onclick="closePaymentModal()" aria-label="Close modal">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
          </button>
        </div>

        <div class="modal-body">

          <!-- Order Summary -->
          <div class="order-summary">
            <div class="flex justify-between items-start">
              <div>
                <h3 class="font-semibold text-lg" id="selected-package-name">Growth Package</h3>
                <p class="text-sm text-gray-600" id="selected-package-desc">300 verified contacts</p>
              </div>
              <div class="text-right">
                <p class="text-3xl font-bold text-gray-900" id="selected-package-price">$249</p>
              </div>
            </div>
          </div>

          <div class="rounded-xl border border-blue-100 bg-blue-50/70 p-4 mt-4">
            <label for="promoCodeInput" class="block text-sm font-medium text-gray-700 mb-2">Promo code</label>
            <div class="flex flex-col sm:flex-row gap-2">
              <input type="text" id="promoCodeInput" name="promo_code"
                class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 uppercase"
                placeholder="Enter promo code" autocomplete="off" autocapitalize="characters" spellcheck="false">
              <button type="button" id="applyPromoBtn"
                class="inline-flex items-center justify-center px-4 py-3 rounded-lg bg-gray-900 text-white font-semibold hover:bg-gray-800 transition-colors">
                Apply
              </button>
            </div>
            <p class="mt-2 text-xs text-gray-500">For internal tests like DEV001, keep the existing admin token in the URL or
              session.</p>
            <p id="promoCodeMessage" class="text-sm mt-2 hidden"></p>
          </div>

          <!-- Legal Consent (must accept before payment buttons activate) -->
          <div class="legal-consent">
            <label class="flex items-start gap-3 cursor-pointer">
              <input type="checkbox" id="terms-consent" required
                class="mt-1 w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
              <span class="text-sm text-gray-600">
                I agree to the <a class='text-blue-600 hover:underline' href='/v2/legal/terms' target='_blank'>Terms
                  of
                  Service</a>,
                <a class='text-blue-600 hover:underline' href='/v2/legal/privacy' target='_blank'>Privacy
                  Policy</a>,
                and
                <a class='text-blue-600 hover:underline' href='/v2/legal/refunds' target='_blank'>Refund
                  Policy</a>.
                </span>
                </label>
                </div>

          <!-- Payment Container (Single Method - PayPal) -->
          <div class="payment-container p-6">
            <!-- PayPal Button Container -->
            <div id="paypal-button-container"></div>

            <!-- Refund Protection Badge -->
            <div
              class="flex items-center justify-center gap-2 mt-3 mb-1 py-2 px-4 bg-green-50 border border-green-200 rounded-lg mx-auto"
              style="max-width:320px;">
              <svg class="w-5 h-5 text-green-600 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                  d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z">
                </path>
              </svg>
              <span class="text-sm font-semibold text-green-700">7-Day Refund Protection</span>
            </div>

            <p class="text-xs text-gray-400 text-center mt-2">
              All major credit/debit cards accepted via PayPal - no PayPal account required
            </p>
            <div class="flex flex-wrap items-center justify-center gap-2 mt-3" aria-hidden="true">
              <span
                class="inline-flex h-9 w-14 items-center justify-center rounded-lg border border-slate-200 bg-white px-1.5 shadow-sm text-[#1A1F71]"
                title="Visa"><i class="fa-brands fa-cc-visa text-[1.1rem]" aria-hidden="true"></i></span>
              <span
                class="inline-flex h-9 w-14 items-center justify-center rounded-lg border border-slate-200 bg-white px-1.5 shadow-sm text-[#EB001B]"
                title="Mastercard"><i class="fa-brands fa-cc-mastercard text-[1.1rem]" aria-hidden="true"></i></span>
              <span
                class="inline-flex h-9 w-14 items-center justify-center rounded-lg border border-slate-200 bg-white px-1.5 shadow-sm text-[#016FD0]"
                title="American Express"><i class="fa-brands fa-cc-amex text-[1rem]" aria-hidden="true"></i></span>
              <span
                class="inline-flex h-9 w-14 items-center justify-center rounded-lg border border-slate-200 bg-white px-1.5 shadow-sm text-[#F76F20]"
                title="Discover"><i class="fa-brands fa-cc-discover text-[1rem]" aria-hidden="true"></i></span>
              <span
                class="inline-flex h-9 items-center justify-center gap-1.5 rounded-lg border border-slate-200 bg-white px-2.5 shadow-sm text-slate-500"
                title="PayPal secure checkout"><i class="fa-brands fa-paypal text-[1rem] text-[#003087]" aria-hidden="true"></i><i
                  class="fa-solid fa-lock text-[10px] text-emerald-500" aria-hidden="true"></i></span>
            </div>
            </div>

          <!-- Trust Badges -->
          <div class="payment-trust-badges flex justify-center gap-6 text-xs text-gray-500 mt-6 mb-4">
            <div class="flex items-center gap-1">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                  d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z">
                </path>
              </svg>
              SSL Encrypted
            </div>
            <div class="flex items-center gap-1">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                  d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z">
                </path>
              </svg>
              PCI Compliant
            </div>
            <div class="flex items-center gap-1">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z">
                </path>
              </svg>
              Refund Policy For Paid Orders
            </div>
          </div>

        </div>

      </div>
      </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-12">
      <div class="container mx-auto px-4 sm:px-6">
        <div class="grid md:grid-cols-3 gap-8">
          <div>
            <div class="flex items-center gap-3 mb-6">
              <div
                class="w-10 h-10 rounded-lg flex items-center justify-center shadow-lg overflow-hidden bg-white/5 border border-white/10">
                <img src="/v2/assets/images/icon-blue.png" alt="LeadIdeal" class="w-full h-full object-cover">
              </div>
              <h3 class="text-white font-semibold text-xl tracking-tight">LeadIdeal</h3>
              </div>
              <p class="text-sm">Verified B2B contacts researched on demand.</p>
              <div class="mt-4 flex flex-wrap gap-3 text-sm">
              </div>
              </div>
              <div class="nav-links footer-nav">
                <h4 class="text-white font-semibold mb-4">Legal & Docs</h4>
                <div class="space-y-2 text-sm">
                  <a href="/trust" class="block hover:text-white transition-colors">Trust &amp; Compliance</a>
                  <a class='block hover:text-white transition-colors' href='/v2/legal/privacy'>Privacy Policy</a>
                  <a class='block hover:text-white transition-colors' href='/v2/legal/terms'>Terms of Service</a>
                  <a class='block hover:text-white transition-colors' href='/v2/legal/refunds'>Refund Policy</a>
                  <a class='block hover:text-white transition-colors' href='/v2/legal/cookie'>Cookie Policy</a>
                  <a class='block hover:text-white transition-colors' href='/v2/legal/dpa'>DPA</a>
                  <a class='block hover:text-white transition-colors' href='/v2/legal/lia'>LIA</a>
                  <a class='block hover:text-white transition-colors' href='/v2/legal/dua'>Data Use</a>
                  <a href="/login" class="nav-lib-link block hover:text-white transition-colors" style="display:none;">Login</a>
                  </div>
                  </div>
                  <div>
                    <h4 class="text-white font-semibold mb-4">Contact</h4>
                    <div class="space-y-2 text-sm">
                      <a href="mailto:info@leadideal.com" class="block hover:text-white transition-colors">info@leadideal.com</a>
                      <a href="tel:+12193701517" class="block hover:text-white transition-colors">📞 +1 (219) 370-1517</a>
                      <p class="text-gray-500 mt-2">LeadIdeal | Business ID: 314396169<br>Reg: Hefziba 8, Haifa, Israel<br>US
                        Mail: 23600
                        Mercantile Rd, Suite C-100<br>Beachwood, OH 44122</p>
                    </div>
                  </div>
                  </div>
                  <!-- Browse by Industry — internal links for SEO -->
                  <div id="focused-niches" class="border-t border-gray-800 mt-8 pt-6">
                    <h4 class="text-white font-semibold text-sm mb-3 text-center">Browse Focused Verticals</h4>
                    <div class="flex flex-wrap justify-center gap-2 text-xs">
                      <a href="/leads/marketing/"
                        class="px-2.5 py-1 rounded-full bg-gray-800 hover:bg-gray-700 text-gray-400 hover:text-white transition-colors">Marketing</a>
                      <a href="/leads/technology/"
                        class="px-2.5 py-1 rounded-full bg-gray-800 hover:bg-gray-700 text-gray-400 hover:text-white transition-colors">Technology</a>
                      <a href="/leads/construction/"
                        class="px-2.5 py-1 rounded-full bg-gray-800 hover:bg-gray-700 text-gray-400 hover:text-white transition-colors">Construction</a>
                    </div>
                  </div>
                  <div class="border-t border-gray-800 mt-8 pt-6">
                    <p class="text-xs text-gray-500 text-center mb-3">Accepted Payment Methods</p>
                    <div class="flex flex-wrap items-center justify-center gap-2 mb-2" aria-hidden="true">
                      <span
                        class="inline-flex h-10 w-16 items-center justify-center rounded-xl border border-slate-700 bg-white px-2 shadow-sm text-[#1A1F71]"
                        title="Visa"><i class="fa-brands fa-cc-visa text-[1.35rem]" aria-hidden="true"></i></span>
                      <span
                        class="inline-flex h-10 w-16 items-center justify-center rounded-xl border border-slate-700 bg-white px-2 shadow-sm text-[#EB001B]"
                        title="Mastercard"><i class="fa-brands fa-cc-mastercard text-[1.35rem]" aria-hidden="true"></i></span>
                      <span
                        class="inline-flex h-10 w-16 items-center justify-center rounded-xl border border-slate-700 bg-white px-2 shadow-sm text-[#016FD0]"
                        title="American Express"><i class="fa-brands fa-cc-amex text-[1.25rem]" aria-hidden="true"></i></span>
                      <span
                        class="inline-flex h-10 w-16 items-center justify-center rounded-xl border border-slate-700 bg-white px-2 shadow-sm text-[#F76F20]"
                        title="Discover"><i class="fa-brands fa-cc-discover text-[1.25rem]" aria-hidden="true"></i></span>
                      <span
                        class="inline-flex h-10 items-center justify-center gap-2 rounded-xl border border-slate-700 bg-white px-3 shadow-sm text-slate-500"
                        title="PayPal secure checkout"><i class="fa-brands fa-paypal text-[1.2rem] text-[#003087]"
                      aria-hidden="true"></i><i class="fa-solid fa-lock text-[11px] text-emerald-500" aria-hidden="true"></i></span>
                </div>
                <p class="text-xs text-gray-500 text-center">All major credit/debit cards accepted via PayPal - no PayPal
                  account required</p>
              </div>

        <div class="border-t border-gray-800 mt-6 pt-6 text-center text-sm">
          © 2026 LeadIdeal. All rights reserved.
        </div>
        </div>
        </footer>

    <!-- Scripts (absolute paths for /v2/ context) -->
    <script src="/v2/assets/js/icp-data.js?v=5"></script>
    <script src="/v2/assets/js/toast.js?v=4"></script>
    <script src="/v2/assets/js/sample-data.js?v=2"></script>
    <script src="/v2/assets/js/pricing-config.js?v=2"></script>
    <script src="/v2/assets/js/package-builder.js?v=8"></script>
    <script src="/v2/assets/js/main.js?v=16"></script>
    <script src="/v2/assets/js/payment.js?v=9"></script>

    <!-- V3 hero search integration — live search in hero sample table -->
    <script src="/v2/assets/js/lead-finder-hero.js?v=9"></script>

    <!-- Structured Data: WebSite + Organization + Service -->
    <script type="application/ld+json">
            {
              "@context": "https://schema.org",
      "@graph": [
        {
          "@type": "WebSite",
          "@id": "https://leadideal.com/#website",
          "url": "https://leadideal.com/",
          "name": "LeadIdeal",
          "inLanguage": "en-US"
        },
        {
          "@type": "Organization",
          "@id": "https://leadideal.com/#organization",
          "name": "LeadIdeal",
          "url": "https://leadideal.com/",
          "logo": {
            "@type": "ImageObject",
            "url": "https://leadideal.com/v2/assets/images/brand/icon-180.png"
          },
          "email": "info@leadideal.com",
          "telephone": "+1 (219) 370-1517",
          "contactPoint": [
            {
              "@type": "ContactPoint",
              "contactType": "sales",
              "email": "info@leadideal.com",
              "telephone": "+1 (219) 370-1517",
              "availableLanguage": ["en"]
            }
          ]
        },
        {
          "@type": "Service",
          "@id": "https://leadideal.com/#service",
          "name": "US custom prospecting and B2B lead research",
          "serviceType": "Human-verified prospect list research",
          "provider": {
            "@id": "https://leadideal.com/#organization"
          },
          "url": "https://leadideal.com/",
          "description": "LeadIdeal delivers your ideal B2B leads, vetted and ready, without the GTM-platform bloat. Human-verified US prospect list research for agencies, MSPs, and B2B service teams. Delivered as a CRM-ready CSV in 24-48 hours.",
          "areaServed": {
            "@type": "Country",
            "name": "United States"
          },
          "availableLanguage": ["en"],
          "audience": {
            "@type": "Audience",
            "audienceType": "Agencies, MSPs, and B2B service teams"
          },
          "offers": [
            {
              "@type": "Offer",
              "name": "Paid Sample",
              "description": "15 human-verified contacts for lane validation",
              "price": "49",
              "priceCurrency": "USD",
              "availability": "https://schema.org/InStock"
            },
            {
              "@type": "Offer",
              "name": "Custom Build",
              "description": "Custom US prospect list research for one ICP lane",
              "price": "199",
              "priceCurrency": "USD",
              "availability": "https://schema.org/InStock"
            },
            {
              "@type": "Offer",
              "name": "Monthly Retainer",
              "description": "Recurring human-verified prospect research for active outbound teams",
              "price": "1199",
              "priceCurrency": "USD",
              "availability": "https://schema.org/InStock"
            }
          ]
        }
      ]
    }
  </script>

    <!-- FAQPage Schema -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [
        {
          "@type": "Question",
          "name": "What data do you provide?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "We deliver verified business contacts including decision-maker names, titles, direct email addresses, phone numbers, company information, and location data. All contacts are validated for accuracy before delivery."
          }
        },
        {
          "@type": "Question",
          "name": "How quickly do you deliver?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Standard delivery is 24-48 hours from payment confirmation for US-first paid orders. More complex custom builds may take longer depending on scope."
          }
        },
        {
          "@type": "Question",
          "name": "Is this data compliant?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Yes. We source from lawful, publicly available business information and support compliant B2B use with sender identification, opt-out handling, and clear customer-use responsibilities."
          }
        },
        {
          "@type": "Question",
          "name": "What's your data quality guarantee?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "For paid orders, we target 90%+ deliverable emails on eligible batches and keep an 80% minimum floor for refund protection. If a paid order lands below that floor, you may request replacement or refund within 7 days. Free previews, promo access, and proof-of-work outputs are excluded."
          }
        },
        {
          "@type": "Question",
          "name": "Can I customize my research scope?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Absolutely. Specify your target industry, company size, job titles, geographic location, and any other criteria. We'll deliver a custom research report matching your needs."
          }
        },
        {
          "@type": "Question",
          "name": "Do you work with agencies or channel partners?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Yes. Agencies, niche operators, and channel partners can use LeadIdeal as a research layer for client work or bring referred deals on a commission basis. The public paid sample is the fastest way to judge fit, and larger partner-oriented batches are handled directly."
          }
        },
        {
          "@type": "Question",
          "name": "Do you store my contacts in a database?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "No. We research contacts fresh for each order — this is not a pre-built database. After delivery, leads are archived and not retained in active systems long-term."
          }
        }
      ]
    }
    </script>

    <!-- Alex AI Chat Widget -->
    <link rel="stylesheet" href="./assets/css/chat-widget.css">
    <!-- Auto-Shrink Recalculation Utility -->
    <script>
          (function () {
            function adjustTextSize() {
              // Recalculate table cells to prevent breaks or heavy cutting
              document.querySelectorAll('table.sample-results-table td').forEach(el => {
                let size = 14; // Start at base font-size in pixels (tailwind text-sm)
                if (el.classList.contains('text-xs')) size = 12;
                el.style.fontSize = ''; // reset

                let iterations = 0;
                // For TDs without wrappers, scrollWidth > clientWidth might only show up if max-width is constrained
                // Adding brief max-width to measure natural bounds vs assigned bounds
                const currentMaxWidth = el.style.maxWidth;
                el.style.maxWidth = window.getComputedStyle(el).width;

                while (el.scrollWidth > el.clientWidth && size > 9 && iterations < 8) {
                  size -= 0.5;
                  el.style.fontSize = size + 'px';
                  iterations++;
                }
                el.style.maxWidth = currentMaxWidth;
              });
            }
            window.addEventListener('resize', adjustTextSize);
            window.addEventListener('load', adjustTextSize);
            document.addEventListener('LeadFinderPopulated', () => setTimeout(adjustTextSize, 50));
          })();
        </script>
<!-- Free 5 Leads modal (low-friction email capture) -->
<div id="free-leads-modal"
  class="fixed inset-0 z-[100] hidden items-center justify-center bg-slate-950/80 backdrop-blur-sm p-4" role="dialog"
  aria-modal="true" aria-labelledby="free-leads-title">
  <div class="relative w-full max-w-md rounded-2xl border border-white/10 bg-slate-900 p-6 shadow-2xl">
    <button type="button" id="free-leads-close"
      class="absolute top-3 right-3 rounded-full p-1 text-slate-400 hover:bg-white/10 hover:text-white"
      aria-label="Close">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
    <h3 id="free-leads-title" class="text-xl font-bold text-white">See 5 free leads</h3>
    <p class="mt-1 text-sm text-blue-100/80">Tell us your ICP. We'll hand-deliver 5 verified contacts to your inbox
      within 1 business day. No card, no platform login.</p>
    <form id="free-leads-form" class="mt-5 space-y-3" novalidate>
      <div>
        <label for="fl-email" class="block text-xs font-semibold uppercase tracking-wider text-blue-100/70 mb-1">Work
          email</label>
        <input id="fl-email" name="email" type="email" required autocomplete="email" placeholder="you@company.com"
          class="w-full rounded-lg border border-white/15 bg-slate-800 px-3 py-2 text-white placeholder:text-slate-500 focus:border-emerald-400 focus:outline-none focus:ring-1 focus:ring-emerald-400" />
      </div>
      <div>
        <label for="fl-icp" class="block text-xs font-semibold uppercase tracking-wider text-blue-100/70 mb-1">Who do
          you want to reach?</label>
        <input id="fl-icp" name="icp" type="text" required maxlength="160"
          placeholder="e.g. CTOs at US SaaS startups, 10-50 employees"
          class="w-full rounded-lg border border-white/15 bg-slate-800 px-3 py-2 text-white placeholder:text-slate-500 focus:border-emerald-400 focus:outline-none focus:ring-1 focus:ring-emerald-400" />
      </div>
      <button type="submit" id="fl-submit"
        class="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-emerald-500 px-4 py-3 font-semibold text-white transition hover:bg-emerald-400 disabled:cursor-wait disabled:opacity-70">
        <span id="fl-submit-label">Send my 5 free leads</span>
      </button>
      <p id="fl-status" class="text-xs text-blue-100/70 min-h-[1rem]" role="status" aria-live="polite"></p>
      <p class="text-[11px] text-slate-500">By submitting, you agree to receive a one-time email with your sample. No
        spam, no list resale.</p>
    </form>
  </div>
</div>
<script>
  (function () {
    const openBtn = document.getElementById('free-leads-open');
    const modal = document.getElementById('free-leads-modal');
    const closeBtn = document.getElementById('free-leads-close');
    const form = document.getElementById('free-leads-form');
    const statusEl = document.getElementById('fl-status');
    const submitBtn = document.getElementById('fl-submit');
    const submitLabel = document.getElementById('fl-submit-label');
    if (!openBtn || !modal || !form) return;

    function openModal() {
      modal.classList.remove('hidden');
      modal.classList.add('flex');
      setTimeout(() => { const e = document.getElementById('fl-email'); if (e) e.focus(); }, 30);
      try { window.gtag && window.gtag('event', 'free_leads_modal_open', { event_category: 'engagement' }); } catch (e) { }
    }
    function closeModal() {
      modal.classList.add('hidden');
      modal.classList.remove('flex');
      statusEl.textContent = '';
      submitBtn.disabled = false;
      submitLabel.textContent = 'Send my 5 free leads';
    }

    openBtn.addEventListener('click', openModal);
    closeBtn.addEventListener('click', closeModal);
    modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
    document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !modal.classList.contains('hidden')) closeModal(); });

    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      const email = (document.getElementById('fl-email').value || '').trim();
      const icp = (document.getElementById('fl-icp').value || '').trim();
      if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
        statusEl.textContent = 'Please enter a valid work email.';
        statusEl.className = 'text-xs text-red-300 min-h-[1rem]';
        return;
      }
      if (!icp) {
        statusEl.textContent = 'Tell us who you want to reach.';
        statusEl.className = 'text-xs text-red-300 min-h-[1rem]';
        return;
      }
      submitBtn.disabled = true;
      submitLabel.textContent = 'Sending...';
      statusEl.textContent = '';
      try {
        const res = await fetch('/.netlify/functions/free-leads-request', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email: email, icp: icp, source: 'hero-secondary-cta', referrer: document.referrer || '', page: location.pathname })
        });
        const data = await res.json().catch(() => ({}));
        if (res.ok && data.ok !== false) {
          statusEl.textContent = 'Got it. Check your inbox within 1 business day.';
          statusEl.className = 'text-xs text-emerald-300 min-h-[1rem]';
          submitLabel.textContent = 'Sent';
          try { window.gtag && window.gtag('event', 'free_leads_submitted', { event_category: 'conversion' }); } catch (e) { }
          setTimeout(closeModal, 2200);
        } else {
          statusEl.textContent = (data && data.error) || 'Something went wrong. Please try again or email tommy@leadideal.com.';
          statusEl.className = 'text-xs text-red-300 min-h-[1rem]';
          submitBtn.disabled = false;
          submitLabel.textContent = 'Send my 5 free leads';
        }
      } catch (err) {
        statusEl.textContent = 'Network error. Please try again.';
        statusEl.className = 'text-xs text-red-300 min-h-[1rem]';
        submitBtn.disabled = false;
        submitLabel.textContent = 'Send my 5 free leads';
      }
    });
  })();
</script>
</body>

</html>
