.elementor-1524 .elementor-element.elementor-element-c99c26f{padding:0px 0px 0px 0px;}:root{--page-title-display:none;}/* Start custom CSS */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fast Quote — Ammar Saleem, The Amazon Guy</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>

<!-- ============================================================
     FAST QUOTE  —  paste everything from <div id="fq-root"> to the
     closing </script> into an Elementor "HTML" widget.
     Edit the CONFIG block at the top of the script to change the
     WhatsApp number, email, or lead-capture endpoint.
     ============================================================ -->

<div id="fq-root">
  <div class="fq-shell">

    <header class="fq-head">
      <span class="fq-eyebrow">Fast Quote</span>
      <h1>Tell me the problem.<br><em>Get a price, not a sales call.</em></h1>
      <p class="fq-sub">Answer four questions and your request lands on my WhatsApp fully written up. Most quotes go back the same working day, Mon–Fri 9–5 PKT.</p>
    </header>

    <div class="fq-grid">

      <!-- ---------------- FORM ---------------- -->
      <form class="fq-form" id="fq-form" novalidate>

        <section class="fq-block">
          <div class="fq-legend"><span class="fq-num">1</span> What do you need?</div>
          <div class="fq-chips" role="radiogroup" aria-label="Service needed" id="fq-service">
            <button type="button" class="fq-chip" data-value="Amazon PPC / Advertising">Amazon PPC</button>
            <button type="button" class="fq-chip" data-value="Amazon SEO &amp; ranking">Amazon SEO &amp; ranking</button>
            <button type="button" class="fq-chip" data-value="Listing optimization">Listing optimization</button>
            <button type="button" class="fq-chip" data-value="Design: A+ / Brand Store / images">Design &amp; A+ content</button>
            <button type="button" class="fq-chip" data-value="Account suspension / reinstatement">Suspension or reinstatement</button>
            <button type="button" class="fq-chip" data-value="Account audit">Account audit</button>
            <button type="button" class="fq-chip" data-value="Full service management">Full service management</button>
            <button type="button" class="fq-chip" data-value="Trademark / brand registry">Trademark &amp; Brand Registry</button>
            <button type="button" class="fq-chip" data-value="LLC, EIN &amp; ITIN setup">LLC, EIN &amp; ITIN</button>
            <button type="button" class="fq-chip" data-value="Consulting / coaching call">Consulting call</button>
            <button type="button" class="fq-chip" data-value="Something else">Something else</button>
          </div>
          <p class="fq-error" id="fq-err-service">Pick the closest one — you can explain the rest below.</p>
        </section>

        <section class="fq-block">
          <div class="fq-legend"><span class="fq-num">2</span> How fast do you need it?</div>
          <div class="fq-chips fq-chips--urgency" role="radiogroup" aria-label="Urgency" id="fq-urgency">
            <button type="button" class="fq-chip fq-chip--hot" data-value="Emergency — account or listing is down" data-eta="Reply within a few hours">Emergency — it's down</button>
            <button type="button" class="fq-chip" data-value="This week" data-eta="Quote back same working day">This week</button>
            <button type="button" class="fq-chip" data-value="Planning ahead" data-eta="Quote back within 24 hours">Planning ahead</button>
          </div>
        </section>

        <section class="fq-block">
          <div class="fq-legend"><span class="fq-num">3</span> Your store</div>
          <div class="fq-row">
            <label class="fq-field">
              <span>Marketplace</span>
              <select id="fq-market">
                <option value="">Select</option>
                <option>Amazon US</option>
                <option>Amazon UK</option>
                <option>Amazon EU</option>
                <option>Amazon UAE / KSA</option>
                <option>Amazon CA / AU</option>
                <option>Not selling yet</option>
                <option>Other platform</option>
              </select>
            </label>
            <label class="fq-field">
              <span>Monthly sales</span>
              <select id="fq-revenue">
                <option value="">Select</option>
                <option>Pre-launch</option>
                <option>Under $5k</option>
                <option>$5k – $25k</option>
                <option>$25k – $100k</option>
                <option>$100k+</option>
              </select>
            </label>
          </div>
          <label class="fq-field">
            <span>Brand or store name <i>optional</i></span>
            <input type="text" id="fq-brand" placeholder="e.g. Lumora Home">
          </label>
          <label class="fq-field">
            <span>What's going on?</span>
            <textarea id="fq-details" rows="4" placeholder="ASIN suppressed since Tuesday, ACOS climbed to 62%, need A+ for 6 listings — whatever it is, in your own words."></textarea>
          </label>
        </section>

        <section class="fq-block">
          <div class="fq-legend"><span class="fq-num">4</span> Where do I send the quote?</div>
          <div class="fq-row">
            <label class="fq-field">
              <span>Name</span>
              <input type="text" id="fq-name" placeholder="Your name" autocomplete="name">
            </label>
            <label class="fq-field">
              <span>Email</span>
              <input type="email" id="fq-email" placeholder="you@brand.com" autocomplete="email">
            </label>
          </div>
          <p class="fq-error" id="fq-err-contact">I need a name and a working email to send the quote.</p>
        </section>

        <div class="fq-actions">
          <button type="submit" class="fq-btn fq-btn--wa" id="fq-send">
            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2a10 10 0 0 0-8.6 15l-1.3 4.7 4.8-1.3A10 10 0 1 0 12 2zm5.6 14.2c-.2.7-1.2 1.3-2 1.4-.5.1-1.2.1-3.4-.8-2.9-1.2-4.7-4.1-4.9-4.3-.1-.2-1.1-1.5-1.1-2.8s.7-2 .9-2.3c.2-.3.5-.4.7-.4h.5c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.4 0 .5l-.4.6c-.1.2-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.2.1.4.1.6-.1l.8-1c.2-.2.3-.2.6-.1l2 1c.3.1.4.2.5.3.1.2.1.7-.1 1.4z"/></svg>
            Send on WhatsApp
          </button>
          <button type="button" class="fq-btn fq-btn--ghost" id="fq-mail">Send by email instead</button>
        </div>
        <p class="fq-fine">Your details go straight to me — no sales team, no autoresponder sequence.</p>
      </form>

      <!-- ---------------- LIVE TICKET ---------------- -->
      <aside class="fq-ticket-wrap">
        <div class="fq-ticket" id="fq-ticket">
          <div class="fq-ticket-top">
            <span>Quote request</span>
            <span class="fq-ticket-id" id="fq-id">FQ-0000</span>
          </div>
          <div class="fq-perf"></div>
          <dl class="fq-lines">
            <div class="fq-line"><dt>Service</dt><dd id="t-service">—</dd></div>
            <div class="fq-line"><dt>Priority</dt><dd id="t-urgency">—</dd></div>
            <div class="fq-line"><dt>Marketplace</dt><dd id="t-market">—</dd></div>
            <div class="fq-line"><dt>Monthly sales</dt><dd id="t-revenue">—</dd></div>
            <div class="fq-line"><dt>Brand</dt><dd id="t-brand">—</dd></div>
            <div class="fq-line"><dt>From</dt><dd id="t-name">—</dd></div>
          </dl>
          <div class="fq-perf"></div>
          <div class="fq-eta">
            <span class="fq-eta-dot"></span>
            <span id="t-eta">Pick a priority to see the turnaround</span>
          </div>
        </div>
        <div class="fq-trust">
          <div><strong>50+</strong><span>brands served</span></div>
          <div><strong>$25M+</strong><span>revenue driven</span></div>
          <div><strong>6+ yrs</strong><span>on Seller Central</span></div>
        </div>
      </aside>

    </div>
  </div>
</div>

<style>
#fq-root{
  /* ---- tokens ---- */
  --ink:#0C1B2A;
  --ink-70:#41566B;
  --ink-40:#8195A8;
  --paper:#FFFFFF;
  --mist:#F2F5F8;
  --line:#DCE4EC;
  --amber:#FF9A00;
  --amber-deep:#D97B00;
  --hot:#E0483C;
  --go:#12A37A;
  --r:14px;
  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;

  font-family:var(--font);
  color:var(--ink);
  background:var(--mist);
  padding:clamp(28px,5vw,64px) clamp(16px,4vw,40px);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
#fq-root *,#fq-root *::before,#fq-root *::after{box-sizing:border-box;}
#fq-root .fq-shell{max-width:1080px;margin:0 auto;}

/* ---- header ---- */
#fq-root .fq-head{max-width:640px;margin-bottom:clamp(28px,4vw,44px);}
#fq-root .fq-eyebrow{
  display:inline-block;font-family:var(--font);font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber-deep);
  background:#FFF3E0;border:1px solid #FFDFAE;border-radius:100px;
  padding:5px 12px;margin-bottom:18px;
}
#fq-root h1{
  font-family:var(--font);font-weight:700;
  font-size:clamp(28px,4.3vw,46px);line-height:1.1;letter-spacing:-.025em;
  margin:0 0 14px;color:var(--ink);
}
#fq-root h1 em{font-style:normal;color:var(--ink-40);}
#fq-root .fq-sub{margin:0;color:var(--ink-70);font-size:16px;max-width:52ch;}

/* ---- layout ---- */
#fq-root .fq-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start;}
#fq-root .fq-form{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,3vw,34px);
}
#fq-root .fq-block{padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line);}
#fq-root .fq-block:last-of-type{border-bottom:0;padding-bottom:6px;margin-bottom:0;}
#fq-root .fq-legend{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font);font-weight:600;font-size:17px;margin-bottom:14px;
}
#fq-root .fq-num{
  width:24px;height:24px;flex:none;display:grid;place-items:center;
  background:var(--ink);color:#fff;border-radius:7px;
  font-family:var(--font);font-size:12px;font-weight:600;
}

/* ---- chips ---- */
#fq-root .fq-chips{display:flex;flex-wrap:wrap;gap:8px;}
#fq-root .fq-chip{
  font:inherit;font-size:14px;font-weight:500;cursor:pointer;
  background:var(--paper);color:var(--ink-70);
  border:1px solid var(--line);border-radius:100px;padding:9px 15px;
  transition:border-color .15s,color .15s,background .15s,transform .1s;
}
#fq-root .fq-chip:hover{border-color:var(--ink-40);color:var(--ink);}
#fq-root .fq-chip:active{transform:scale(.98);}
#fq-root .fq-chip[aria-pressed="true"]{
  background:var(--ink);border-color:var(--ink);color:#fff;
}
#fq-root .fq-chip--hot[aria-pressed="true"]{background:var(--hot);border-color:var(--hot);}
#fq-root .fq-chips--urgency .fq-chip{padding:11px 18px;}

/* ---- fields ---- */
#fq-root .fq-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
#fq-root .fq-field{display:block;margin-bottom:14px;}
#fq-root .fq-row .fq-field{margin-bottom:14px;}
#fq-root .fq-field > span{
  display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink);
}
#fq-root .fq-field i{font-style:normal;font-weight:400;color:var(--ink-40);}
#fq-root input,#fq-root select,#fq-root textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;transition:border-color .15s,box-shadow .15s;
}
#fq-root textarea{resize:vertical;min-height:96px;}
#fq-root input:focus,#fq-root select:focus,#fq-root textarea:focus,
#fq-root .fq-chip:focus-visible,#fq-root .fq-btn:focus-visible{
  outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,154,0,.25);
}
#fq-root .fq-chip:focus-visible,#fq-root .fq-btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
#fq-root ::placeholder{color:#A9B7C4;}
#fq-root .fq-invalid{border-color:var(--hot)!important;}

/* ---- errors ---- */
#fq-root .fq-error{
  display:none;margin:10px 0 0;font-size:13px;color:var(--hot);font-weight:500;
}
#fq-root .fq-error.is-on{display:block;}

/* ---- actions ---- */
#fq-root .fq-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
#fq-root .fq-btn{
  font-family:var(--font);font-weight:600;font-size:16px;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;
  border-radius:11px;padding:14px 22px;border:1px solid transparent;
  transition:transform .1s,box-shadow .15s,background .15s;
}
#fq-root .fq-btn:active{transform:translateY(1px);}
#fq-root .fq-btn--wa{background:var(--amber);color:#241300;box-shadow:0 2px 0 var(--amber-deep);}
#fq-root .fq-btn--wa:hover{background:#FFA71F;}
#fq-root .fq-btn--wa svg{width:20px;height:20px;fill:currentColor;}
#fq-root .fq-btn--ghost{background:transparent;border-color:var(--line);color:var(--ink-70);}
#fq-root .fq-btn--ghost:hover{border-color:var(--ink-40);color:var(--ink);}
#fq-root .fq-fine{margin:14px 0 0;font-size:13px;color:var(--ink-40);}

/* ---- ticket ---- */
#fq-root .fq-ticket-wrap{position:sticky;top:24px;}
#fq-root .fq-ticket{
  background:var(--ink);color:#fff;border-radius:var(--r);
  padding:18px 20px 16px;
}
#fq-root .fq-ticket-top{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--font);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#8FA3B7;
}
#fq-root .fq-ticket-id{color:var(--amber);font-weight:700;}
#fq-root .fq-perf{
  height:1px;margin:14px -20px;
  background:repeating-linear-gradient(90deg,#33475C 0 5px,transparent 5px 10px);
}
#fq-root .fq-lines{margin:0;}
#fq-root .fq-line{display:flex;justify-content:space-between;gap:14px;padding:6px 0;}
#fq-root .fq-line dt{
  font-family:var(--font);font-size:10.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:#7C93A8;flex:none;padding-top:2px;
}
#fq-root .fq-line dd{
  margin:0;font-size:14px;font-weight:500;text-align:right;color:#EAF1F7;
  transition:color .2s;
}
#fq-root .fq-line dd.is-empty{color:#4A5F73;}
#fq-root .fq-line dd.just-set{color:var(--amber);}
#fq-root .fq-eta{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#C6D5E2;}
#fq-root .fq-eta-dot{
  width:8px;height:8px;border-radius:50%;background:var(--go);flex:none;
  box-shadow:0 0 0 4px rgba(18,163,122,.18);
}
#fq-root .fq-eta.is-hot .fq-eta-dot{background:var(--hot);box-shadow:0 0 0 4px rgba(224,72,60,.2);animation:fqpulse 1.6s infinite;}
@keyframes fqpulse{50%{box-shadow:0 0 0 8px rgba(224,72,60,0);}}

#fq-root .fq-trust{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;
}
#fq-root .fq-trust div{
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:11px 8px;text-align:center;
}
#fq-root .fq-trust strong{
  display:block;font-family:var(--font);font-size:16px;color:var(--ink);
}
#fq-root .fq-trust span{font-size:11px;color:var(--ink-40);line-height:1.3;display:block;}

/* ---- responsive ---- */
@media (max-width:900px){
  #fq-root .fq-grid{grid-template-columns:1fr;}
  #fq-root .fq-ticket-wrap{position:static;order:2;}
  #fq-root .fq-form{order:1;}
}
@media (max-width:520px){
  #fq-root .fq-row{grid-template-columns:1fr;}
  #fq-root .fq-btn{width:100%;justify-content:center;}
  #fq-root .fq-line{flex-direction:column;gap:2px;}
  #fq-root .fq-line dd{text-align:left;}
}
@media (prefers-reduced-motion:reduce){
  #fq-root *{animation:none!important;transition:none!important;}
}
</style>

<script>
(function(){
  /* ======================= CONFIG ======================= */
  var WHATSAPP = "923362842823";                 // digits only, with country code
  var EMAIL    = "connect@ammarsaleem.com";
  var LEAD_ENDPOINT = "";                        // optional: paste a Formspree/webhook URL to also store leads
  /* ====================================================== */

  var root = document.getElementById('fq-root');
  if(!root) return;
  var $ = function(id){ return document.getElementById(id); };

  var state = { service:"", urgency:"", eta:"" };

  // ticket number
  var tid = "FQ-" + String(Math.floor(Math.random()*9000)+1000);
  $('fq-id').textContent = tid;

  function paint(el, value, placeholder){
    el.textContent = value || (placeholder || "—");
    el.classList.toggle('is-empty', !value);
    if(value){
      el.classList.add('just-set');
      setTimeout(function(){ el.classList.remove('just-set'); }, 600);
    }
  }
  ['t-service','t-urgency','t-market','t-revenue','t-brand','t-name'].forEach(function(id){
    $(id).classList.add('is-empty');
  });

  // chip groups
  function wireChips(groupId, onPick){
    var group = $(groupId);
    group.querySelectorAll('.fq-chip').forEach(function(chip){
      chip.setAttribute('aria-pressed','false');
      chip.addEventListener('click', function(){
        group.querySelectorAll('.fq-chip').forEach(function(c){ c.setAttribute('aria-pressed','false'); });
        chip.setAttribute('aria-pressed','true');
        onPick(chip);
      });
    });
  }

  wireChips('fq-service', function(chip){
    state.service = chip.dataset.value;
    paint($('t-service'), state.service);
    $('fq-err-service').classList.remove('is-on');
  });

  wireChips('fq-urgency', function(chip){
    state.urgency = chip.dataset.value;
    state.eta = chip.dataset.eta;
    paint($('t-urgency'), state.urgency.split(' — ')[0]);
    $('t-eta').textContent = state.eta;
    $('fq-ticket').querySelector('.fq-eta').classList.toggle('is-hot', chip.classList.contains('fq-chip--hot'));
  });

  // live fields → ticket
  [['fq-market','t-market'],['fq-revenue','t-revenue'],['fq-brand','t-brand'],['fq-name','t-name']]
  .forEach(function(pair){
    var input = $(pair[0]);
    input.addEventListener('input', function(){ paint($(pair[1]), input.value.trim()); });
    input.addEventListener('change', function(){ paint($(pair[1]), input.value.trim()); });
  });

  function validEmail(v){ return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v); }

  function check(){
    var ok = true;
    var name = $('fq-name'), email = $('fq-email');

    if(!state.service){ $('fq-err-service').classList.add('is-on'); ok = false; }

    var contactBad = !name.value.trim() || !validEmail(email.value.trim());
    name.classList.toggle('fq-invalid', !name.value.trim());
    email.classList.toggle('fq-invalid', !validEmail(email.value.trim()));
    $('fq-err-contact').classList.toggle('is-on', contactBad);
    if(contactBad) ok = false;

    if(!ok){
      var first = root.querySelector('.fq-error.is-on');
      if(first) first.scrollIntoView({behavior:'smooth', block:'center'});
    }
    return ok;
  }

  function val(id){ return ($(id).value || "").trim(); }

  function buildMessage(){
    var L = [];
    L.push("FAST QUOTE " + tid);
    L.push("Service: " + state.service);
    L.push("Priority: " + (state.urgency || "Not specified"));
    if(val('fq-market'))  L.push("Marketplace: " + val('fq-market'));
    if(val('fq-revenue')) L.push("Monthly sales: " + val('fq-revenue'));
    if(val('fq-brand'))   L.push("Brand: " + val('fq-brand'));
    L.push("Name: " + val('fq-name'));
    L.push("Email: " + val('fq-email'));
    if(val('fq-details')) L.push("", "Problem:", val('fq-details'));
    return L.join("\n");
  }

  function capture(msg){
    if(!LEAD_ENDPOINT) return;
    try{
      fetch(LEAD_ENDPOINT, {
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body: JSON.stringify({
          ticket: tid, service: state.service, priority: state.urgency,
          marketplace: val('fq-market'), revenue: val('fq-revenue'),
          brand: val('fq-brand'), name: val('fq-name'), email: val('fq-email'),
          details: val('fq-details'), message: msg
        })
      });
    }catch(e){}
  }

  function sent(button, label){
    var old = button.innerHTML;
    button.innerHTML = label;
    setTimeout(function(){ button.innerHTML = old; }, 4000);
  }

  $('fq-form').addEventListener('submit', function(e){
    e.preventDefault();
    if(!check()) return;
    var msg = buildMessage();
    capture(msg);
    window.open("https://wa.me/" + WHATSAPP + "?text=" + encodeURIComponent(msg), "_blank", "noopener");
    sent($('fq-send'), "Opening WhatsApp…");
  });

  $('fq-mail').addEventListener('click', function(){
    if(!check()) return;
    var msg = buildMessage();
    capture(msg);
    var subject = "Fast Quote " + tid + " — " + state.service;
    window.location.href = "mailto:" + EMAIL +
      "?subject=" + encodeURIComponent(subject) +
      "&body=" + encodeURIComponent(msg);
  });
})();
</script>

</body>
</html>/* End custom CSS */