{"id":3993,"date":"2026-03-03T17:03:10","date_gmt":"2026-03-04T00:03:10","guid":{"rendered":"https:\/\/ex.plo.re\/crm\/gptdemo-2\/"},"modified":"2026-03-06T14:11:59","modified_gmt":"2026-03-06T21:11:59","slug":"gptdemo-2","status":"publish","type":"page","link":"https:\/\/ex.plo.re\/crm\/gptdemo-2\/","title":{"rendered":"blank html2"},"content":{"rendered":"<div id=\"cs-content\" class=\"cs-content\"><!-- ===================== EX.PLO.RE PRICING \u2013 LTV + NONLINEAR SLIDER (3-TILE UX) ===================== -->\n\n<style>\n  \n  div#secondaryCard button {\n    width: 80% !important;\n    margin: auto auto;\n}\n  \n  div#primaryCard button {\n    width: 100% !important;\n    margin: auto auto;\n}\n \n div#coordRow {\n    display: none !important;\n}\n  #secondaryCard li span:nth-child(2) {\n    display: none;\n}\n  \n  #secondaryCard .card li {\n    float: left !important;\n    font-size: 2.9em;\n    width: 50px;\n}\n  #secondaryCard .price {\n    display: none;\n}\n  \n:root{\n  --bg:#0f0f10;\n  --card:#1a1b1e;\n  --ink:#ffffff;\n  --ink2:#cfd3dc;\n  --muted:#9aa2ad;\n  --accent:#6c7cff;\n  --accent-soft:rgba(108,124,255,.22);\n  --ring:rgba(255,255,255,.08);\n  --pill:#1c1f2d;\n\n  --badge:#0e422f;\n  --badgeText:#b8ffdb;\n  --selectedBg:rgba(108,124,255,.18);\n  --selectedText:#e4e6ff;\n  --selectedBorder:#6c7cff;\n}\n\n#pslider{\n  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;\n  color:var(--ink);\n}\n#pslider .wrap{\n  background:var(--card);\n  border-radius:16px;\n  padding:18px 18px 20px;\n  box-shadow:0 0 0 1px var(--ring) inset;\n}\n\n\/* ===== LTV Calc ===== *\/\n.calc{\n  display:grid;\n  gap:10px;\n  margin-bottom:18px;\n  text-align:center;\n}\n.calc h3{\n  margin:0;\n  font-size:1.25rem;\n  font-weight:600;\n}\n.calc .top{\n  display:flex;\n  justify-content:center;\n  flex-wrap:wrap;\n  gap:10px;\n}\n.calc input{\n  width:220px;\n  padding:10px 14px;\n  border-radius:9px;\n  border:1px solid #2a2d34;\n  background:#0e0f12;\n  color:#fff;\n  font-size:1.05rem;\n  text-align:center;\n}\n.calc input::placeholder{color:#555}\n.calc button{\n  padding:10px 18px;\n  border-radius:9px;\n  border:0;\n  font-weight:800;\n  background:linear-gradient(135deg,#6c7cff,#8f7dff);\n  color:#fff;\n  cursor:pointer;\n  font-size:.9rem;\n  white-space:nowrap;\n}\n.calc button:hover{opacity:.94}\n.calc .sub{\n  color:var(--muted);\n  font-size:.85rem;\n}\n\n\/* ===== Budget Slider ===== *\/\n.budgetBlock{\n  margin-bottom:18px;\n}\n.budgetRow{\n  display:flex;\n  justify-content:space-between;\n  align-items:flex-end;\n  gap:6px;\n  flex-wrap:wrap;\n}\n.budgetRow .label{\n  font-size:.9rem;\n  text-transform:uppercase;\n  letter-spacing:.08em;\n  color:var(--muted);\n}\n.budgetRow .sub{\n  font-size:.9rem;\n  color:var(--ink2);\n}\n.budgetValue{\n  font-weight:900;\n  font-size:1rem;\n  background:var(--pill);\n  padding:6px 12px;\n  border-radius:9px;\n  min-width:120px;\n  text-align:right;\n}\n\n.trackZone{\n  margin-top:10px;\n  padding:12px 14px 10px;\n  border-radius:14px;\n  border:1px solid #23252c;\n  background:\n    radial-gradient(circle at 20% 0%,rgba(108,124,255,.25) 0,transparent 52%),\n    radial-gradient(circle at 80% 0%,rgba(167,114,255,.2) 0,transparent 55%),\n    #111218;\n}\n\n\/* slider *\/\n#budgetSlider{\n  width:100%;\n  -webkit-appearance:none;\n  appearance:none;\n  height:9px;\n  border-radius:9px;\n  background:linear-gradient(90deg,#26283a,#3b3f63,#5c5fe0);\n  outline:none;\n}\n#budgetSlider::-webkit-slider-thumb{\n  -webkit-appearance:none;\n  appearance:none;\n  width:22px;height:22px;border-radius:50%;\n  background:radial-gradient(circle at 30% 30%,#ffffff,#d4d7ff,#8a8fff);\n  box-shadow:0 0 0 3px rgba(255,255,255,.16),0 12px 22px rgba(0,0,0,.7);\n  cursor:pointer;\n}\n#budgetSlider::-moz-range-thumb{\n  width:22px;height:22px;border-radius:50%;\n  background:radial-gradient(circle at 30% 30%,#ffffff,#d4d7ff,#8a8fff);\n  box-shadow:0 0 0 3px rgba(255,255,255,.16),0 12px 22px rgba(0,0,0,.7);\n  cursor:pointer;\n}\n\n\/* slider labels *\/\n.slider-labels{\n  display:flex;\n  justify-content:space-between;\n  margin-top:8px;\n}\n.slider-labels span{\n  position:relative;\n  font-size:.8rem;\n  color:var(--muted);\n  font-weight:700;\n  text-transform:uppercase;\n  letter-spacing:.06em;\n  flex:1;\n  text-align:center;\n  user-select:none;\n}\n.slider-labels span::before{\n  content:\"\";\n  position:absolute;\n  left:50%;\n  transform:translateX(-50%);\n  top:-8px;\n  width:1px;\n  height:6px;\n  background:rgba(255,255,255,.3);\n}\n.slider-labels span.active{\n  color:#fff;\n  font-size:.9rem;\n}\n.slider-labels span.active::after{\n  content:\"\";\n  position:absolute;\n  left:50%;\n  transform:translateX(-50%);\n  bottom:-4px;\n  width:26px;\n  height:3px;\n  border-radius:9px;\n  background:var(--accent-soft);\n}\n\n\/* Mobile safety *\/\n@media(max-width:520px){\n  .slider-labels span{font-size:.72rem}\n  .slider-labels span.active{font-size:.8rem}\n}\n\n\/* ===== Section Header ===== *\/\n.section-head{\n  margin:10px 0 10px 2px;\n}\n.section-head h4{\n  margin:0;\n  font-size:1.05rem;\n  font-weight:600;\n}\n.section-head .help{\n  margin-top:4px;\n  color:var(--muted);\n  font-size:.85rem;\n}\n\n\/* ===== Plan Row (Primary \/ Next \/ Invoice) ===== *\/\n.plan-row{\n  display:grid;\n  grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr) minmax(0,1fr);\n  gap:10px;\n  align-items:stretch;\n  margin-bottom:8px;\n}\n@media(max-width:900px){\n  .plan-row{\n    grid-template-columns:1fr;\n  }\n}\n\n.col-label{\n  font-size:.78rem;\n  text-transform:uppercase;\n  letter-spacing:.08em;\n  color:var(--muted);\n  margin-bottom:4px;\n}\n\n\/* ===== Cards ===== *\/\n.card{\n  position:relative;\n  background:#121316;\n  border-radius:12px;\n  padding:14px 14px 12px;\n  border:1px solid #23252c;\n  cursor:pointer;\n  text-align:left;\n  display:flex;\n  flex-direction:column;\n  gap:6px;\n  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .12s ease;\n  -webkit-tap-highlight-color: transparent;\n}\n.card:hover{\n  transform:translateY(-1px);\n}\n.card.primary{\n  padding:16px 16px 12px;\n}\n.card.primary[aria-current=\"true\"]{\n  border-color:var(--selectedBorder);\n  background:var(--selectedBg);\n  box-shadow:0 0 0 1px var(--selectedBorder) inset,0 0 26px rgba(108,124,255,.3);\n}\n.card.secondary{\n  opacity:.9;\n  font-size:.86rem;\n}\n.card.secondary .hint{display:none;}\n\n.card .hdr{\n  display:flex;\n  justify-content:space-between;\n  align-items:flex-start;\n  gap:10px;\n}\n.card .name{\n  font-weight:600;\n  font-size:1rem;\n}\n.card.primary .name{\n  font-size:1.05rem;\n}\n.card .tagline{\n  font-size:.8rem;\n  color:var(--ink2);\n}\n.card .price{\n  background:var(--pill);\n  padding:5px 10px;\n  border-radius:9px;\n  font-weight:800;\n  font-size:.8rem;\n  white-space:nowrap;\n}\n.card ul{\n  list-style:none;\n  margin:4px 0 0;\n  padding:0;\n  font-size:.86rem;\n  color:var(--ink2);\n}\n.card ul li{\n  display:flex;\n  gap:6px;\n  margin:3px 0;\n}\n.card ul li span:first-child{\n  width:18px;\n}\n.card.secondary ul li:nth-child(n+3){\n  display:none;\n}\n.card .hint{\n  margin-top:6px;\n  font-size:.78rem;\n  color:var(--muted);\n}\n\n\/* Coordinator toggle inside primary column (kept, but only shown where JS enables it) *\/\n.coord-row{\n  margin-top:8px;\n  display:flex;\n  align-items:center;\n  gap:8px;\n  font-size:.8rem;\n  color:var(--ink2);\n}\n.coord-row .label{\n  flex:1;\n}\n.toggle{\n  position:relative;\n  width:38px;\n  height:20px;\n  border-radius:999px;\n  background:#282a33;\n  cursor:pointer;\n  flex-shrink:0;\n}\n.toggle::before{\n  content:\"\";\n  position:absolute;\n  top:2px;left:3px;\n  width:16px;height:16px;\n  border-radius:50%;\n  background:#cfd3dc;\n  transition:transform .18s ease, background .18s ease;\n}\n.toggle.on{\n  background:#1f3c24;\n}\n.toggle.on::before{\n  transform:translateX(16px);\n  background:#7bffb4;\n}\n\n\/* ===== Invoice \/ Summary ===== *\/\n.sum{\n  margin-top:0;\n  padding:10px 12px;\n  border-radius:12px;\n  background:#121316;\n  border:1px solid rgba(255,255,255,.65);\n  height:100%;\n  display:flex;\n  flex-direction:column;\n  justify-content:space-between;\n}\n.sum-header{\n  display:flex;\n  justify-content:space-between;\n  align-items:baseline;\n  gap:10px;\n  margin-bottom:4px;\n}\n.sum-header .title{\n  font-size:.8rem;\n  font-weight:700;\n  text-transform:uppercase;\n  letter-spacing:.08em;\n  color:var(--muted);\n}\n.sum-header .total{\n  font-size:1.05rem;\n  font-weight:900;\n}\n.sum-body{\n  font-size:.84rem;\n}\n.sum-body .row{\n  display:flex;\n  justify-content:space-between;\n  gap:8px;\n  margin:2px 0;\n}\n.sum-body .label{\n  color:var(--ink2);\n}\n.sum-body .value{\n  font-weight:700;\n}\n.sum-body .fine{\n  margin-top:4px;\n  color:var(--muted);\n  font-size:.78rem;\n}\n\n\/* ===== CTA ===== *\/\n.cta-wrap{\n  margin-top:14px;\n  display:flex;\n  justify-content:flex-end;\n}\n@media(max-width:900px){\n  .cta-wrap{\n    justify-content:center;\n  }\n}\n.cta-box{\n  display:flex;\n  flex-direction:column;\n  align-items:flex-end;\n  gap:6px;\n}\n@media(max-width:900px){\n  .cta-box{align-items:center}\n}\n.cta-note{\n  font-size:.85rem;\n  color:var(--ink2);\n}\n.cta-primary{\n  display:inline-block;\n  padding:12px 22px;\n  border-radius:9px;\n  background:linear-gradient(135deg,#6c7cff,#8f7dff);\n  color:#fff;\n  font-weight:800;\n  font-size:.95rem;\n  text-decoration:none;\n}\n.cta-primary:hover{opacity:.94}\n.cta-secondary{\n  font-size:.85rem;\n  color:var(--ink2);\n  text-decoration:underline;\n  text-underline-offset:3px;\n}\n<\/style>\n\n<div id=\"pslider\">\n  <div class=\"wrap\">\n\n    <!-- LTV CALCULATOR -->\n    <div class=\"calc\" id=\"ltvCalc\">\n      <h3>What\u2019s one loyal client worth to you?<\/h3>\n      <div class=\"top\">\n        <input id=\"ltvInput\" type=\"text\" placeholder=\"$12,000\" inputmode=\"numeric\" autocomplete=\"off\">\n        <button id=\"ltvBtn\" type=\"button\">Get recommendation<\/button>\n      <\/div>\n      <div class=\"sub\" id=\"ltvHint\">We\u2019ll line up a monthly plan and highlight the tier we\u2019d choose.<\/div>\n    <\/div>\n\n    <!-- BUDGET SLIDER -->\n    <div class=\"budgetBlock\">\n      <div class=\"budgetRow\">\n        <div>\n          <div class=\"label\">Monthly marketing budget<\/div>\n          <div class=\"sub\">Use the slider to adjust packages &amp; ad spend. The invoice updates live.<\/div>\n        <\/div>\n        <div class=\"budgetValue\" id=\"budgetLabel\">$2,945.mo<\/div>\n      <\/div>\n      <div class=\"trackZone\">\n        <input id=\"budgetSlider\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" value=\"55\">\n        <div class=\"slider-labels\">\n          <!-- \u2705 Back to your original: label only \u201cDIY\u201d (no $5 mention) -->\n          <span data-tier=\"diy\">DIY<\/span>\n          <span data-tier=\"leads\">Loyalty &amp; Leads<\/span>\n          <span data-tier=\"team\">Marketing Team<\/span>\n          <span data-tier=\"guarantee\">Leads Guaranteed<\/span>\n          <span data-tier=\"partner\">Partner<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"section-head\">\n      <h4>Your setup<\/h4>\n      <div class=\"help\" id=\"modeLabel\">Slide first, then tap a tile if you want to see the next level up.<\/div>\n    <\/div>\n\n    <!-- PLANS + INVOICE -->\n    <div class=\"plan-row\">\n      <div class=\"primary-col\">\n        <div class=\"col-label\">Selected plan<\/div>\n        <div id=\"primaryCard\"><\/div>\n\n        <!-- Coordinator Toggle (kept; JS decides when to show) -->\n        <div class=\"coord-row\" id=\"coordRow\">\n          <div class=\"label\">I do not want a marketing coordinator. Move that budget into extra ad spend.<\/div>\n          <div class=\"toggle\" id=\"coordToggle\" role=\"switch\" aria-checked=\"false\"><\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"secondary-col\" id=\"secondaryCol\">\n        <div class=\"col-label\">Next level up<\/div>\n        <div id=\"secondaryCard\"><\/div>\n      <\/div>\n\n      <div class=\"invoice-col\">\n        <div class=\"sum\" id=\"invoiceBox\"><\/div>\n      <\/div>\n    <\/div>\n\n    <!-- CTA -->\n    <div class=\"cta-wrap\">\n      <div class=\"cta-box\">\n        <div class=\"cta-note\">Satisfaction guaranteed. We\u2019ll show you everything before you commit.<\/div>\n        <a href=\"https:\/\/ex.plo.re\/choose\" class=\"cta-primary\">Get Started<\/a>\n        <a href=\"#contact\" class=\"cta-secondary\">Or request a call<\/a>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  \/\/ ----- CONSTANTS (PRICING) -----\n  const PLATFORM_LUX = 445;           \/\/ ex.plo.re LUX\n  const DIY_ONEPAGE_PRICE = 5;        \/\/ hidden at the extreme end (not labeled)\n\n  const TEAM_LEAD = 1000;             \/\/ Lead-gen expert\n  const TEAM_COORD = 1000;            \/\/ Remote marketing coordinator\n  const AGENCY_FIXED = 1054;          \/\/ Base management fee\n  const AGENCY_RATE = 0.20;           \/\/ 20% of ad spend\n  const MIN_AD_FOR_GUAR = 2000;\n  const MAX_AD = 20000;\n\n  const LEADS_BASE = PLATFORM_LUX + TEAM_LEAD + 500;              \/\/ 1,945\n  const TEAM_BASE  = PLATFORM_LUX + TEAM_LEAD + TEAM_COORD + 500; \/\/ 2,945\n\n  const GUAR_BASE_TOTAL =\n    PLATFORM_LUX + TEAM_LEAD + TEAM_COORD + AGENCY_FIXED + MIN_AD_FOR_GUAR * (1 + AGENCY_RATE); \/\/ 5,899\n\n  const PARTNER_TOTAL =\n    PLATFORM_LUX + TEAM_LEAD + TEAM_COORD + AGENCY_FIXED + MAX_AD * (1 + AGENCY_RATE);          \/\/ 69,999\n\n  \/* \u2705 Your request: DIY area should NOT take up space.\n     - The $5 option only appears at the absolute last tick (extreme left).\n     - \u201cDIY\u201d label stays, but most of the travel starts at LUX ($445).\n     - Everything else stays smooth and continuous.\n\n     Mapping idea:\n     0\u20132%: $5 -> $445  (tiny DIY lane; basically only at the end)\n     2\u201330%: $445 -> $1,945\n     30\u201355%: $1,945 -> $2,945\n     55\u201385%: $2,945 -> $5,899  (more resolution where it felt jumpy)\n     85\u2013100%: $5,899 -> $69,999 (compressed; you said you don\u2019t care much here)\n  *\/\n  const BREAKS = [\n    {pos:0,  val:DIY_ONEPAGE_PRICE},\n    {pos:2,  val:PLATFORM_LUX},\n    {pos:30, val:LEADS_BASE},\n    {pos:50, val:TEAM_BASE},\n    {pos:70, val:GUAR_BASE_TOTAL},\n    {pos:100,val:PARTNER_TOTAL}\n  ];\n\n  const $  = s => document.querySelector(s);\n  const $$ = s => Array.from(document.querySelectorAll(s));\n\n  const slider      = $('#budgetSlider');\n  const budgetLabel = $('#budgetLabel');\n  const modeLabel   = $('#modeLabel');\n  const coordRow    = $('#coordRow');\n  const coordToggle = $('#coordToggle');\n  const invoiceBox  = $('#invoiceBox');\n  const ltvInput    = $('#ltvInput');\n  const ltvBtn      = $('#ltvBtn');\n  const ltvHint     = $('#ltvHint');\n  const primaryCardEl   = $('#primaryCard');\n  const secondaryCardEl = $('#secondaryCard');\n  const secondaryCol    = $('#secondaryCol');\n\n  let noCoordinator = false;\n  let budget        = GUAR_BASE_TOTAL; \/\/ start in Leads Guranteed\n\n  \/\/ ----- TIER CONFIG (COPY) -----\n  const TIER_CONFIG = {\n    diy:{\n      name:'Launch Now For Free',\n      price:'Get Started',\n      tagline:'Better than any link-in-bio \u2014 ready to grow with you.',\n      bullets:[\n        {icon:'\u2728', text:'Sleek one-page design that feels premium.'},\n        {icon:'\ud83d\udd17', text:'Social embeds + contact in one place.'},\n        {icon:'\ud83c\udfa8', text:'Awesome customization that stays clean.'}\n      ],\n      hint:'A real home online \u2014 fast, sharp, and upgrade-ready.'\n    },\n    lux:{\n      name:'ex.plo.re LUX',\n      price:'$445\/mo',\n      tagline:'Website, email & content in one place.',\n      bullets:[\n        {icon:'\ud83c\udf10', text:'Multi-page luxury website with listings.'},\n        {icon:'\ud83d\udce7', text:'Email blasts & simple nurture flows.'},\n        {icon:'\ud83d\udce3', text:'Social media ads powered by your budget.'}\n      ],\n      hint:'Own the platform. Add managed services and more ad spend whenever you\u2019re ready.'\n    },\n    leads:{\n      name:'Loyalty & Leads',\n      price:'From $1,945.mo',\n      tagline:'Your platform plus a focused lead engine.',\n      bullets:[\n        {icon:'\ud83c\udfaf', text:'Smart \u201csell \/ value my yacht or home\u201d funnels.'},\n        {icon:'\ud83d\udce7', text:'Loyalty email for past clients & warm leads.'},\n        {icon:'\ud83d\udce3', text:'Always-on paid campaigns to stay visible.'}\n      ],\n      hint:'This is the \u201cfirst real lead engine\u201d step \u2014 predictable traffic + follow-up.'\n    },\n    team:{\n      \/* \u2705 You asked: force sequence lead gen -> marketing manager -> guarantee.\n         Keeping your tier key \"team\" so nothing breaks, but the card is positioned as the managed step. *\/\n      name:'Marketing Team',\n      price:'From $2,945.mo',\n      tagline:'Lead-gen first. Then a team to run it.',\n      bullets:[\n        {icon:'\ud83e\uddd1\u200d\ud83d\udcbb', text:'Lead-gen specialist running campaigns.'},\n        {icon:'\ud83d\udc69\u200d\ud83c\udfa8', text:'Coordinator for blogs, email & socials.'},\n        {icon:'\ud83d\udcc6', text:'1:1 strategy check-ins so you\u2019re never guessing.'}\n      ],\n      hint:'You stop doing marketing alone. It becomes a system.'\n    },\n    guarantee:{\n      name:'Leads Guaranteed',\n      price:'From $5,899.mo',\n      tagline:'Serious budget. Clear promise.',\n      bullets:[\n        {icon:'\ud83d\udd25', text:'High-intent leads from Google, Meta, Yelp & more.'},\n        {icon:'\ud83d\udcb8', text:'At least ~$2,000.mo in paid media working for you.'},\n        {icon:'\u2705', text:'90-day guarantee with full labor refund.'}\n      ],\n      hint:'Built when you\u2019re ready to lean in. Platform + team + guarantee structure.'\n    },\n    partner:{\n      name:'Partner',\n      price:'All',\n      tagline:'For brands investing $2k+ in ads.',\n      bullets:[\n        {icon:'\ud83d\ude80', text:'Create profitable campaigns at any budget'},\n        {icon:'\ud83d\udcc8', text:'Performance structure tied to outcomes.'},\n        {icon:'\ud83e\udd1d', text:'Tight collaboration with your in-house team.'}\n      ],\n      hint:'Once your campaigns are dialed in we ramp up with you.'\n    }\n  };\n\n  \/\/ ----- HELPERS -----\n  function fmtMoney(n){\n    n = Math.round(n || 0);\n    return '$' + n.toString().replace(\/\\B(?=(\\d{3})+(?!\\d))\/g, ',');\n  }\n  function clamp(n, min, max){\n    return Math.max(min, Math.min(max, n));\n  }\n\n  function posToBudget(pos){\n    pos = clamp(pos, 0, 100);\n    for(let i=0;i<BREAKS.length-1;i++){\n      const a = BREAKS[i];\n      const b = BREAKS[i+1];\n      if(pos <= b.pos){\n        const t = (pos - a.pos) \/ (b.pos - a.pos || 1);\n        return a.val + t * (b.val - a.val);\n      }\n    }\n    return PARTNER_TOTAL;\n  }\n  function budgetToPos(val){\n    val = clamp(val, DIY_ONEPAGE_PRICE, PARTNER_TOTAL);\n    for(let i=0;i<BREAKS.length-1;i++){\n      const a = BREAKS[i];\n      const b = BREAKS[i+1];\n      if(val <= b.val){\n        const t = (val - a.val) \/ (b.val - a.val || 1);\n        return a.pos + t * (b.pos - a.pos);\n      }\n    }\n    return 100;\n  }\n\n  function getTierFromBudget(b){\n    if(b < PLATFORM_LUX) return 'diy';\n    if(b < LEADS_BASE)   return 'lux';\n    if(b < TEAM_BASE)    return 'leads';\n    if(b < GUAR_BASE_TOTAL) return 'team';\n\n    const partnerThreshold = PLATFORM_LUX + TEAM_LEAD + TEAM_COORD + AGENCY_FIXED + 4000 * (1 + AGENCY_RATE);\n    return b <= partnerThreshold ? 'guarantee' : 'partner';\n  }\n\n  function parseLtv(raw){\n    if(!raw) return null;\n    raw = String(raw).toLowerCase().replace(\/[\\s,\\$]\/g,'');\n    const m = raw.match(\/^([0-9]*\\.?[0-9]+)([km])?$\/i);\n    if(!m) return null;\n    let num = parseFloat(m[1] || '0');\n    if(!Number.isFinite(num)) return null;\n    const suf = m[2];\n    if(suf === 'k') num *= 1000;\n    if(suf === 'm') num *= 1000000;\n    return Math.round(num);\n  }\n\n  \/\/ ----- COMPOSITION (how the bill breaks down) -----\n  function computeComposition(b){\n    let tier = getTierFromBudget(b);\n    let tech = 0;\n    let team = 0;\n    let ad   = 0;\n    let agency = 0;\n    let useDIY = false;\n\n    if(tier === 'diy'){\n      useDIY = true;\n      tech = DIY_ONEPAGE_PRICE;\n      ad = 0;\n      b = DIY_ONEPAGE_PRICE;\n    } else if(tier === 'lux'){\n      tech = PLATFORM_LUX;\n      ad = Math.max(0, b - tech);\n    } else if(tier === 'leads'){\n      tech = PLATFORM_LUX;\n      team = TEAM_LEAD;\n      ad = Math.max(500, b - tech - team);\n    } else if(tier === 'team'){\n      tech = PLATFORM_LUX;\n      if(noCoordinator){\n        team = TEAM_LEAD;\n        ad = Math.max(500, b - tech - team);\n      } else {\n        team = TEAM_LEAD + TEAM_COORD;\n        ad = Math.max(500, b - tech - team);\n      }\n      \/* \u2705 Removed the \u201csnap to guarantee\u201d jump. Tier is controlled by slider range. *\/\n    }\n\n    if(tier === 'guarantee' || tier === 'partner'){\n      tech = PLATFORM_LUX;\n      team = TEAM_LEAD + TEAM_COORD;\n      let derivedAd = (b - tech - team - AGENCY_FIXED) \/ (1 + AGENCY_RATE);\n      if(!Number.isFinite(derivedAd) || derivedAd < MIN_AD_FOR_GUAR){\n        derivedAd = MIN_AD_FOR_GUAR;\n      }\n      derivedAd = clamp(derivedAd, MIN_AD_FOR_GUAR, MAX_AD);\n      ad = derivedAd;\n      agency = AGENCY_FIXED + ad * AGENCY_RATE;\n      b = tech + team + ad + agency;\n    }\n\n    return {tier, budget:b, tech, team, ad, agency, useDIY};\n  }\n\n  \/\/ ----- LTV \u2192 Recommended Budget -----\n  function recommendBudgetFromLtv(ltv){\n    const perMonth = ltv \/ 36;\n    let tier, budget;\n\n    if(ltv < 1200){\n      tier = 'diy';\n      budget = DIY_ONEPAGE_PRICE;\n    } else if(ltv < 2000){\n      tier = 'lux';\n      const ads = Math.max(0, perMonth);\n      budget = PLATFORM_LUX + ads;\n      budget = clamp(budget, PLATFORM_LUX, LEADS_BASE - 1);\n    } else if(ltv < 9000){\n      tier = 'leads';\n      const ads = Math.max(500, perMonth);\n      budget = PLATFORM_LUX + TEAM_LEAD + ads;\n      budget = clamp(budget, LEADS_BASE, TEAM_BASE - 1);\n    } else if(ltv < 20000){\n      tier = 'team';\n      const ads = Math.max(500, perMonth);\n      budget = PLATFORM_LUX + TEAM_LEAD + TEAM_COORD + ads;\n      budget = clamp(budget, TEAM_BASE, GUAR_BASE_TOTAL - 1);\n    } else {\n      tier = 'guarantee';\n      let ads = Math.max(MIN_AD_FOR_GUAR, perMonth);\n      budget = PLATFORM_LUX + TEAM_LEAD + TEAM_COORD + AGENCY_FIXED + ads * (1 + AGENCY_RATE);\n      budget = clamp(budget, GUAR_BASE_TOTAL, PARTNER_TOTAL);\n    }\n\n    return {tier, budget};\n  }\n\n  \/\/ ----- CARD RENDERING -----\n  function getNextTier(tier){\n    \/* \u2705 \u201cForce\u201d progression: lead gen -> managed -> guarantee (and DIY\/LUX feed into lead gen). *\/\n    if(tier === 'diy' || tier === 'lux') return 'leads';\n    if(tier === 'leads') return 'team';\n    if(tier === 'team') return 'guarantee';\n    if(tier === 'guarantee') return 'partner';\n    return null;\n  }\n\n  function renderCard(container, tier, variant){\n    if(!container) return;\n    container.innerHTML = '';\n    if(!tier || !TIER_CONFIG[tier]) return;\n\n    const cfg = TIER_CONFIG[tier];\n    const isPrimary = variant === 'primary';\n\n    const card = document.createElement('button');\n    card.type = 'button';\n    card.className = 'card ' + variant;\n    card.setAttribute('data-tier', tier);\n    card.setAttribute('aria-current', isPrimary ? 'true' : 'false');\n\n    const bulletHtml = cfg.bullets.map(b=>`\n      <li><span>${b.icon}<\/span><span>${b.text}<\/span><\/li>\n    `).join('');\n\n    card.innerHTML = `\n      <div class=\"hdr\">\n        <div>\n          <div class=\"name\">${cfg.name}<\/div>\n          <div class=\"tagline\">${cfg.tagline}<\/div>\n        <\/div>\n        <div class=\"price\">${cfg.price}<\/div>\n      <\/div>\n      <ul>${bulletHtml}<\/ul>\n      <div class=\"hint\">${cfg.hint}<\/div>\n    `;\n\n    container.appendChild(card);\n  }\n\n  function updateSliderLabels(activeTier){\n    $$('.slider-labels span').forEach(el=>{\n      const t = el.dataset.tier;\n      let on = (t === activeTier);\n      if(activeTier === 'lux' && t === 'diy') on = true; \/\/ keep your original \u201cDIY lane highlight\u201d\n      el.classList.toggle('active', on);\n    });\n  }\n\n  function updateModeLabel(tier){\n    let text;\n    if(tier === 'diy'){\n      text = 'DIY lane. The $5 Sleek Landing Page is only at the extreme end \u2014 most people start with LUX.';\n    } else if(tier === 'lux'){\n      text = 'LUX is your foundation. Next step is lead-gen so your site starts producing demand.';\n    } else if(tier === 'leads'){\n      text = 'Lead-gen first: predictable traffic + loyalty follow-up so you stop relying on random referrals.';\n    } else if(tier === 'team'){\n      text = 'Marketing Team: we run the machine so you\u2019re not doing it alone.';\n    } else if(tier === 'guarantee'){\n      text = 'Leads Guaranteed: serious budget and a clear promise on performance.';\n    } else {\n      text = 'Partner level is for brands thinking in market share and territory.';\n    }\n    modeLabel.textContent = text;\n  }\n\n  function renderInvoice(state){\n    const {tier,budget,tech,team,ad,agency,useDIY} = state;\n\n    \/\/ Show toggle only in Leads \/ Team tiers (same behavior; now not CSS-killed)\n    const showToggle = (tier === 'leads' || tier === 'team');\n    coordRow.style.display = showToggle ? 'flex' : 'none';\n\n    const lines = [];\n\n    if(ad > 0){\n      const label = (tier === 'diy' || tier === 'lux')\n        ? 'Social media ads'\n        : 'Ad spend (Google \/ Meta \/ Yelp)';\n      lines.push({label, value:fmtMoney(ad) + '.mo'});\n    }\n\n    if(agency > 0){\n      lines.push({\n        label:'Agency fee (management + performance)',\n        value:fmtMoney(agency) + '.mo'\n      });\n    }\n\n    if(team > 0){\n      let teamLabel;\n      if(tier === 'leads'){\n        teamLabel = 'Lead-gen expert';\n      } else if(tier === 'team'){\n        teamLabel = noCoordinator\n          ? 'Lead-gen expert (no coordinator)'\n          : 'Marketing Team';\n      } else {\n        teamLabel = 'Marketing Team';\n      }\n      lines.push({label:teamLabel, value:fmtMoney(team) + '.mo'});\n    }\n\n    if(useDIY){\n      lines.push({label:'Sleek Landing Page', value:fmtMoney(tech) + '.mo'});\n    } else {\n      lines.push({label:'LUX Web, Social, Email)', value:fmtMoney(tech) + '.mo'});\n    }\n\n    let fine = '';\n    if(tier === 'guarantee' || tier === 'partner'){\n      fine = 'Leads Guaranteed includes the platform, lead-gen expert, and coordinator. 90-day guarantee with a 50% refund if we don\u2019t deliver qualified leads.';\n    } else if(tier === 'team'){\n      fine = noCoordinator\n        ? 'You\u2019ve moved the coordinator budget into more ad spend. You can add a coordinator later without rebuilding the system.'\n        : 'You get tech, consistent content, and a team driving campaigns so you\u2019re not doing it alone.';\n    } else if(tier === 'leads'){\n      fine = 'This is the \u201cfirst real lead engine\u201d step. Next, you add a team to run the machine.';\n    } else {\n      fine = 'Start with a strong home online. Then we layer in leads, a team, and guarantees on top.';\n    }\n\n    const labelMap = {\n      diy:'DIY (Sleek Landing Page)',\n      lux:'ex.plo.re LUX',\n      leads:'Loyalty & Leads',\n      team:'Marketing Team',\n      guarantee:'Leads Guaranteed',\n      partner:'Partner Level'\n    };\n\n    invoiceBox.innerHTML = `\n      <div class=\"sum-header\">\n        <div class=\"title\">Total monthly plan<\/div>\n        <div class=\"total\">${fmtMoney(budget)}.mo<\/div>\n      <\/div>\n      <div class=\"sum-body\">\n        ${lines.map(l=>`\n          <div class=\"row\">\n            <div class=\"label\">${l.label}<\/div>\n            <div class=\"value\">${l.value}<\/div>\n          <\/div>\n        `).join('')}\n        <div class=\"fine\">\n          Plan: <strong>${labelMap[state.tier] || ''}<\/strong>.\n          ${fine ? ' ' + fine : ''}\n        <\/div>\n      <\/div>\n    `;\n  }\n\n  function renderCards(state){\n    const baseTier = state.tier;\n\n    let primaryTier   = baseTier;\n    let secondaryTier = getNextTier(baseTier);\n\n    if (baseTier === 'partner') {\n      primaryTier   = 'guarantee';\n      secondaryTier = 'partner';\n    }\n\n    renderCard(primaryCardEl, primaryTier, 'primary');\n\n    if (secondaryTier) {\n      secondaryCol.style.display = 'block';\n      renderCard(secondaryCardEl, secondaryTier, 'secondary');\n    } else {\n      secondaryCol.style.display = 'none';\n      secondaryCardEl.innerHTML = '';\n    }\n\n    \/* \u2705 Mobile reliability: removed { once:true } so taps always work *\/\n    $$('#primaryCard .card, #secondaryCard .card').forEach(card => {\n      card.addEventListener('click', () => {\n        const t = card.getAttribute('data-tier');\n        let target;\n        if (t === 'diy')            target = DIY_ONEPAGE_PRICE;\n        else if (t === 'lux')       target = PLATFORM_LUX;\n        else if (t === 'leads')     target = LEADS_BASE;\n        else if (t === 'team')      target = TEAM_BASE;\n        else if (t === 'guarantee') target = GUAR_BASE_TOTAL;\n        else                         target = PARTNER_TOTAL;\n\n        budget = target;\n        updateAll(false);\n      });\n    });\n  }\n\n  \/\/ ----- MAIN UPDATE PIPELINE -----\n  function updateAll(fromSlider){\n    if(fromSlider){\n      budget = posToBudget(parseFloat(slider.value || '0'));\n    }\n\n    let state = computeComposition(budget);\n\n    \/\/ If we ended up in guarantee or partner while toggle is on, force coordinator back on\n    if((state.tier === 'guarantee' || state.tier === 'partner') && noCoordinator){\n      noCoordinator = false;\n      coordToggle.classList.remove('on');\n      coordToggle.setAttribute('aria-checked','false');\n      state = computeComposition(budget);\n    }\n\n    budget = state.budget;\n    budgetLabel.textContent = fmtMoney(budget) + '.mo';\n\n    const pos = budgetToPos(budget);\n    slider.value = String(Math.round(pos));\n\n    updateSliderLabels(state.tier);\n    updateModeLabel(state.tier);\n    renderCards(state);\n    renderInvoice(state);\n  }\n\n  \/\/ ----- LTV EVENTS -----\n  function handleLtvSubmit(){\n    const value = parseLtv(ltvInput.value);\n    if(value === null){\n      ltvHint.textContent = 'Try something like 12000, 12k, or 0.012m.';\n      return;\n    }\n    if(value <= 0){\n      ltvHint.textContent = 'We\u2019ll work better with a positive number here.';\n      return;\n    }\n\n    const rec = recommendBudgetFromLtv(value);\n    budget = rec.budget;\n    const pos = budgetToPos(budget);\n    slider.value = String(Math.round(pos));\n    ltvHint.textContent = 'Got it. We used roughly 1\/36 of that as ad budget and highlighted the tier we\u2019d choose.';\n    updateAll(false);\n  }\n\n  ltvBtn.addEventListener('click', handleLtvSubmit);\n  ltvInput.addEventListener('keydown', e=>{\n    if(e.key === 'Enter'){\n      e.preventDefault();\n      handleLtvSubmit();\n    }\n  });\n\n  \/\/ ----- SLIDER + TOGGLE EVENTS -----\n  slider.addEventListener('input', ()=>{\n    updateAll(true);\n  });\n\n  coordToggle.addEventListener('click', ()=>{\n    noCoordinator = !noCoordinator;\n    coordToggle.classList.toggle('on', noCoordinator);\n    coordToggle.setAttribute('aria-checked', noCoordinator ? 'true' : 'false');\n    updateAll(false);\n  });\n\n  \/\/ ----- INIT -----\n  (function init(){\n    const startPos = budgetToPos(GUAR_BASE_TOTAL);\n    slider.value = String(Math.round(startPos));\n    noCoordinator = false;\n    coordToggle.classList.remove('on');\n    coordToggle.setAttribute('aria-checked','false');\n    updateAll(true);\n  })();\n})();\n<\/script>\n\n<!-- ===================== \/EX.PLO.RE PRICING ===================== --><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n  <title>ex.plo.re \u2014 Business OS<\/title>\n  <meta name=\"description\" content=\"Meet the AI built for your business \u2014 your complete solution to business management.\" \/>\n\n  <style>\n    \/* =========================================================\n       ex.plo.re GPT Demo \u2014 FULL BLEED + FIX THEME MARGINS\n       ========================================================= *\/\n    body.page-id-3754 .entry-wrap,\n    body.page-id-3754 .entry-content,\n    body.page-id-3754 .entry-content.content,\n    body.page-id-3754 .x-main,\n    body.page-id-3754 .x-main.full,\n    body.page-id-3754 .x-container,\n    body.page-id-3754 .x-container.max.width.offset{\n      margin: 0 !important;\n      padding: 0 !important;\n      max-width: none !important;\n      width: 100% !important;\n    }\n    body.page-id-3754 .hentry{ margin-top: 0 !important; }\n    body.page-id-3754 #explore-root{\n      width: 100vw !important;\n      margin-left: calc(50% - 50vw) !important;\n      margin-right: calc(50% - 50vw) !important;\n      max-width: 100vw !important;\n      overflow-x: clip;\n      -webkit-text-size-adjust: 100%;\n    }\n    body.page-id-3754 #explore-root h1,\n    body.page-id-3754 #explore-root h2,\n    body.page-id-3754 #explore-root h3{\n      color:#f2f2f2 !important;\n      margin-top:0;\n    }\n    body.page-id-3754 #explore-root p{ margin-top:0; }\n    body.page-id-3754 #explore-root .topbar{ position: sticky; top:0; z-index:9999; }\n    .entry-wrap{ background-color: unset !important; }\n    h1,h2,h3{ color:#f2f2f2; }\n\n    :root{\n      --bg0:#07070c;\n      --bg1:#0b0b12;\n      --panel:#0f0f1c;\n      --panel2:#14142b;\n      --text:#f6f6ff;\n      --muted:#b8bbda;\n      --muted2:#8f94bf;\n      --line:rgba(160,140,255,.18);\n\n      --glow:#7c3aed;\n      --glow2:#5b21b6;\n      --lilac:#a78bfa;\n\n      --good:#22c55e;\n\n      --r:22px;\n      --shadow: 0 18px 70px rgba(0,0,0,.65);\n      --shadowGlow: 0 28px 120px rgba(124,58,237,.22);\n\n      --ease: cubic-bezier(.2,.9,.2,1);\n      --ease2: cubic-bezier(.16,.92,.2,1);\n    }\n\n    *{ box-sizing:border-box; }\n    html,body{ height:100%; }\n    body{\n      margin:0;\n      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, \"Apple Color Emoji\",\"Segoe UI Emoji\";\n      color:var(--text);\n      background:\n        radial-gradient(1100px 760px at 75% 8%, rgba(124,58,237,.22), transparent 60%),\n        radial-gradient(900px 720px at 25% 0%, rgba(91,33,182,.18), transparent 55%),\n        linear-gradient(180deg, var(--bg0), var(--bg1) 55%, #07070c);\n      overflow-x:hidden;\n    }\n\n    \/* subtle noise *\/\n    body::before{\n      content:\"\";\n      position:fixed;\n      inset:0;\n      pointer-events:none;\n      background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='2' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.12'\/%3E%3C\/svg%3E\");\n      mix-blend-mode:overlay;\n      opacity:.35;\n    }\n\n    a{ color:inherit; text-decoration:none; }\n    .wrap{ width:min(1180px, 92vw); margin:0 auto; }\n\n    \/* ===== Topbar ===== *\/\n    .topbar{\n      position:sticky;\n      top:0;\n      z-index:80;\n      background: rgba(7,7,12,.52);\n      border-bottom:1px solid rgba(160,140,255,.14);\n      backdrop-filter: blur(12px);\n    }\n    .topbar .inner{\n      display:flex; align-items:center; justify-content:space-between;\n      padding: 14px 0;\n      gap: 14px;\n    }\n    .brand{\n      display:flex; align-items:center; gap:10px;\n      font-weight:850;\n      letter-spacing:.2px;\n    }\n    .logoOrb{\n      width:14px; height:14px; border-radius:999px;\n      background:\n        radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.25) 35%, rgba(124,58,237,.92) 70%, rgba(91,33,182,.95));\n      box-shadow: 0 0 0 7px rgba(124,58,237,.14), 0 0 40px rgba(124,58,237,.35);\n      transform: translateZ(0);\n    }\n\n    .navlinks{\n      display:none;\n      gap: 14px;\n      color: var(--muted);\n      font-size: 14px;\n    }\n    @media (min-width: 860px){ .navlinks{ display:flex; } }\n    .navlinks a{\n      padding: 8px 10px;\n      border-radius: 999px;\n      border: 1px solid transparent;\n      transition: .2s var(--ease);\n    }\n    .navlinks a:hover{\n      border-color: rgba(167,139,250,.30);\n      background: rgba(124,58,237,.12);\n      color: var(--text);\n    }\n\n    .ctaRow{ display:flex; gap:10px; align-items:center; }\n    .btn{\n      border:1px solid rgba(167,139,250,.28);\n      background: rgba(124,58,237,.10);\n      color: var(--text);\n      padding: 11px 14px;\n      border-radius: 999px;\n      font-weight: 750;\n      font-size: 14px;\n      cursor:pointer;\n      transition: transform .2s var(--ease), background .2s var(--ease), filter .2s var(--ease);\n      display:inline-flex; align-items:center; gap:10px;\n      user-select:none;\n      box-shadow: 0 12px 36px rgba(124,58,237,.12);\n      will-change: transform;\n      white-space: nowrap;\n    }\n    .btn:hover{ transform: translateY(-1px); background: rgba(124,58,237,.16); }\n    .btn.primary{\n      background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(91,33,182,.92));\n      border-color: rgba(255,255,255,.08);\n      box-shadow: var(--shadowGlow);\n    }\n    .btn.primary:hover{ filter: brightness(1.06); }\n\n    \/* ===== Hero ===== *\/\n    .hero{\n      padding: 82px 0 34px;\n      position:relative;\n      overflow: hidden;\n    }\n    .kicker{\n      color: var(--lilac);\n      font-weight: 800;\n      letter-spacing: .14em;\n      text-transform: uppercase;\n      font-size: 12px;\n      margin-bottom: 12px;\n    }\n    h1{\n      margin:0 0 14px;\n      font-size: clamp(34px, 4.2vw, 58px);\n      line-height:1.02;\n      letter-spacing:-.03em;\n    }\n    .subhead{\n      max-width: 820px;\n      color: var(--muted);\n      font-size: clamp(15px, 1.5vw, 18px);\n      line-height: 1.65;\n      margin: 0 0 18px;\n    }\n\n    .heroCaps{\n      display:flex; flex-wrap:wrap; gap:10px;\n      margin-top: 12px;\n    }\n    .cap{\n      display:inline-flex; align-items:center; gap:10px;\n      padding: 10px 12px;\n      border-radius: 999px;\n      background: rgba(18,18,38,.55);\n      border: 1px solid rgba(160,140,255,.16);\n      box-shadow: 0 16px 50px rgba(0,0,0,.35);\n      color: var(--muted);\n      font-size: 13px;\n      user-select:none;\n    }\n    .cap b{ color: var(--text); font-weight: 850; }\n\n    .heroOrbs{\n      position:absolute;\n      inset: -60px -60px auto -60px;\n      height: 320px;\n      pointer-events:none;\n      opacity:.95;\n      filter: saturate(1.1);\n      transform: translateZ(0);\n      will-change: transform;\n    }\n    .heroOrbs .orb{\n      position:absolute;\n      width: 240px; height: 240px; border-radius: 999px;\n      background:\n        radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), rgba(255,255,255,0) 35%),\n        radial-gradient(circle at 60% 60%, rgba(124,58,237,.35), rgba(91,33,182,.10) 55%, rgba(0,0,0,0) 72%);\n      border: 1px solid rgba(167,139,250,.12);\n      box-shadow: 0 40px 180px rgba(124,58,237,.18);\n      transform: translateZ(0);\n      animation: floaty 10s var(--ease2) infinite;\n      will-change: transform;\n    }\n    .heroOrbs .orb.o1{ left: -40px; top: 54px; animation-delay: -2s; }\n    .heroOrbs .orb.o2{ left: 52%; top: -18px; width: 190px; height: 190px; animation-delay: -5s; opacity:.75; }\n    .heroOrbs .orb.o3{ right: -40px; top: 82px; width: 260px; height: 260px; animation-delay: -7s; opacity:.55; }\n    @keyframes floaty{\n      0%{ transform: translate3d(0,0,0) scale(1); }\n      50%{ transform: translate3d(0,-10px,0) scale(1.02); }\n      100%{ transform: translate3d(0,0,0) scale(1); }\n    }\n\n    .heroCtas{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top: 14px; }\n    .heroFree{\n      color: rgba(184,187,218,.92);\n      font-size: 13.5px;\n      line-height: 1.55;\n    }\n    .heroFree b{ color: var(--text); font-weight: 900; }\n\n    .divider{\n      height:1px;\n      background: linear-gradient(90deg, transparent, rgba(160,140,255,.22), transparent);\n      margin: 26px 0 0;\n    }\n\n    \/* ===== Categories ===== *\/\n    .sectionTitle{\n      padding: 44px 0 16px;\n      display:flex; align-items:flex-end; justify-content:space-between;\n      gap: 18px;\n    }\n    .sectionTitle h2{\n      margin:0;\n      font-size: clamp(22px, 2.4vw, 32px);\n      letter-spacing: -.015em;\n    }\n    .sectionTitle p{\n      margin:0;\n      max-width: 560px;\n      color: var(--muted);\n      line-height: 1.6;\n      font-size: 14px;\n    }\n\n    \/* Stage (content left + helper right) *\/\n    .stage{\n      position:relative;\n      min-height: 100vh;\n      display:grid;\n      place-items:center;\n      padding: 34px 0;\n      perspective: 1200px;\n    }\n\n    .stageLayout{\n      width: min(1180px, 92vw);\n      display:grid;\n      grid-template-columns: 1fr 360px;\n      gap: 18px;\n      align-items: start;\n    }\n    @media (max-width: 980px){\n      .stageLayout{ grid-template-columns: 1fr; }\n    }\n\n    .focusFrame{\n      border-radius: var(--r);\n      background: linear-gradient(180deg, rgba(18,18,40,.78), rgba(10,10,18,.62));\n      border: 1px solid rgba(160,140,255,.18);\n      box-shadow: var(--shadow), var(--shadowGlow);\n      overflow:hidden;\n      position:relative;\n      transform-style: preserve-3d;\n      will-change: transform, opacity, filter;\n    }\n    .focusFrame::before{\n      content:\"\";\n      position:absolute;\n      inset:-2px;\n      background:\n        radial-gradient(800px 460px at 25% 0%, rgba(124,58,237,.20), transparent 60%),\n        radial-gradient(700px 420px at 80% 15%, rgba(91,33,182,.16), transparent 60%);\n      pointer-events:none;\n      opacity:.9;\n    }\n    .frameInner{ position:relative; padding: 18px; }\n\n    \/* Helper column *\/\n    .helper{\n      position: sticky;\n      top: 88px; \/* under topbar *\/\n      border-radius: var(--r);\n      border: 1px solid rgba(160,140,255,.16);\n      background: rgba(12,12,24,.42);\n      box-shadow: 0 22px 80px rgba(0,0,0,.48), 0 26px 120px rgba(124,58,237,.14);\n      overflow:hidden;\n      min-height: 360px;\n      transform: translateZ(0);\n    }\n    @media (max-width: 980px){\n      .helper{ position: relative; top: auto; min-height: auto; }\n    }\n\n    .helperImgWrap{\n      position: relative;\n      overflow:hidden;\n      border-radius: var(--r);\n    }\n    .helperImg{\n      width: 100%;\n      display:block;\n      aspect-ratio: 4 \/ 5;\n      object-fit: cover;\n      filter: saturate(1.05) contrast(1.03);\n      transform: translateZ(0);\n      will-change: transform;\n    }\n    @media (max-width: 980px){\n      .helperImg{ aspect-ratio: 16 \/ 9; }\n    }\n    .helperTint{\n      position:absolute;\n      inset:0;\n      background:\n        radial-gradient(420px 240px at 25% 18%, rgba(255,255,255,.12), transparent 62%),\n        radial-gradient(640px 420px at 78% 72%, rgba(124,58,237,.22), rgba(91,33,182,.12) 55%, transparent 74%),\n        linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.54));\n      pointer-events:none;\n    }\n    .helperMeta{\n      padding: 12px 12px 14px;\n      border-top: 1px solid rgba(160,140,255,.12);\n    }\n    .helperK{\n      font-size: 12px;\n      letter-spacing: .14em;\n      text-transform: uppercase;\n      color: rgba(167,139,250,.92);\n      font-weight: 900;\n      margin: 0 0 8px;\n    }\n    .helperTitle{\n      margin: 0 0 6px;\n      font-weight: 950;\n      letter-spacing: -.01em;\n      font-size: 16px;\n      line-height: 1.15;\n    }\n    .helperDesc{\n      margin: 0;\n      color: rgba(184,187,218,.92);\n      font-size: 13px;\n      line-height: 1.55;\n    }\n\n    \/* Card header *\/\n    .catTop{\n      display:flex;\n      align-items:flex-start;\n      justify-content:space-between;\n      gap: 14px;\n      padding-bottom: 10px;\n    }\n    .catName{\n      display:flex;\n      align-items:center;\n      gap: 12px;\n    }\n\n    .orbNode{\n      width: 54px; height: 54px;\n      border-radius: 999px;\n      background:\n        radial-gradient(circle at 28% 28%, rgba(255,255,255,.55), rgba(255,255,255,.10) 28%, rgba(255,255,255,0) 35%),\n        radial-gradient(circle at 60% 65%, rgba(124,58,237,.85), rgba(91,33,182,.35) 55%, rgba(0,0,0,0) 72%),\n        linear-gradient(135deg, rgba(124,58,237,.25), rgba(91,33,182,.12));\n      border: 1px solid rgba(255,255,255,.10);\n      box-shadow: 0 18px 60px rgba(124,58,237,.22), 0 0 0 8px rgba(124,58,237,.10);\n      display:grid;\n      place-items:center;\n      font-weight: 950;\n      letter-spacing:.02em;\n      transform: translateZ(40px);\n      text-shadow: 0 2px 10px rgba(0,0,0,.45);\n      user-select:none;\n    }\n\n    .catName h3{ margin:0; font-size: 18px; letter-spacing:-.01em; }\n    .catName .tag{ margin-top: 6px; color: var(--muted); font-size: 13px; }\n\n    .miniBtn{\n      padding: 8px 10px;\n      border-radius: 999px;\n      border: 1px solid rgba(167,139,250,.22);\n      background: rgba(124,58,237,.10);\n      color: var(--text);\n      font-weight: 800;\n      font-size: 13px;\n      cursor:pointer;\n      transition: transform .2s var(--ease), background .2s var(--ease);\n      user-select:none;\n      will-change: transform;\n      white-space: nowrap;\n    }\n    .miniBtn:hover{ transform: translateY(-1px); background: rgba(124,58,237,.16); }\n\n    .rootCard{\n      margin-top: 8px;\n      border-radius: 18px;\n      border: 1px solid rgba(160,140,255,.16);\n      background: linear-gradient(135deg, rgba(18,18,40,.55), rgba(18,18,32,.35));\n      box-shadow: 0 18px 60px rgba(0,0,0,.35);\n      overflow:hidden;\n      position:relative;\n    }\n    .rootCard::after{\n      content:\"\";\n      position:absolute;\n      inset:-1px;\n      background: radial-gradient(680px 240px at 20% 0%, rgba(167,139,250,.16), transparent 60%);\n      pointer-events:none;\n    }\n    .rootInner{ position:relative; padding: 14px 14px 12px; }\n    .rootTitle{\n      margin:0 0 6px;\n      font-size: 18px;\n      font-weight: 900;\n      letter-spacing: -.01em;\n    }\n    .rootDesc{\n      margin:0;\n      color: var(--muted);\n      line-height: 1.6;\n      font-size: 13.8px;\n      max-width: 760px;\n    }\n\n    .flowLine{\n      height: 30px;\n      position:relative;\n      margin: 12px 0 10px;\n    }\n    .flowLine::before{\n      content:\"\";\n      position:absolute;\n      left:10%;\n      right:10%;\n      top:50%;\n      height:1px;\n      background: linear-gradient(90deg, transparent, rgba(160,140,255,.20), transparent);\n      transform: translateY(-50%);\n    }\n    .flowLine::after{\n      content:\"\";\n      position:absolute;\n      left:50%;\n      top: 0;\n      bottom: 0;\n      width: 1px;\n      background: linear-gradient(180deg, transparent, rgba(160,140,255,.20), transparent);\n      transform: translateX(-50%);\n    }\n\n    .orbGrid{\n      display:grid;\n      grid-template-columns: 1fr;\n      gap: 12px;\n      transform-style: preserve-3d;\n    }\n    @media (min-width: 720px){ .orbGrid{ grid-template-columns: 1fr 1fr; } }\n\n    .orbBubble{\n      border-radius: 18px;\n      border: 1px solid rgba(160,140,255,.18);\n      background: rgba(18,18,40,.46);\n      box-shadow: 0 18px 60px rgba(0,0,0,.22);\n      padding: 14px 14px 13px;\n      position:relative;\n      overflow:hidden;\n\n      opacity: 0;\n      transform: translate3d(0, 34px, -70px) scale(.975);\n      transition: transform .85s var(--ease2), opacity .85s var(--ease2), filter .85s var(--ease2);\n      will-change: transform, opacity;\n    }\n    .orbBubble::before{\n      content:\"\";\n      position:absolute;\n      inset:-2px;\n      background:\n        radial-gradient(250px 140px at 22% 16%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%),\n        radial-gradient(420px 220px at 75% 70%, rgba(124,58,237,.18), rgba(91,33,182,.10) 55%, rgba(0,0,0,0) 72%);\n      pointer-events:none;\n      opacity:.9;\n    }\n    .orbBubble strong{\n      position:relative;\n      display:flex;\n      align-items:center;\n      gap:10px;\n      font-weight: 950;\n      letter-spacing:-.01em;\n      font-size: 14px;\n      margin-bottom: 6px;\n    }\n    .miniOrb{\n      width: 18px; height: 18px; border-radius: 999px;\n      background:\n        radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), rgba(255,255,255,.14) 30%, rgba(255,255,255,0) 42%),\n        radial-gradient(circle at 60% 65%, rgba(124,58,237,.85), rgba(91,33,182,.28) 55%, rgba(0,0,0,0) 72%);\n      border:1px solid rgba(255,255,255,.10);\n      box-shadow: 0 0 0 6px rgba(124,58,237,.10), 0 10px 30px rgba(124,58,237,.18);\n      flex:0 0 auto;\n    }\n    .orbBubble span{\n      position:relative;\n      color: var(--muted);\n      font-size: 13px;\n      line-height: 1.5;\n      display:block;\n    }\n\n    \/* Focus states controlled by JS *\/\n    .stage .focusFrame{\n      transform: translate3d(0, 46px, -90px) rotateX(7deg) scale(.975);\n      opacity: .20;\n      filter: saturate(.92);\n      transition: transform .75s var(--ease2), opacity .75s var(--ease2), filter .75s var(--ease2);\n    }\n    .stage.is-active .focusFrame{\n      transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);\n      opacity: 1;\n      filter: saturate(1.06);\n    }\n    .stage.is-active .orbBubble{\n      opacity: 1;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n    .stage.is-active .orbBubble:nth-child(1){ transition-delay: .10s; }\n    .stage.is-active .orbBubble:nth-child(2){ transition-delay: .16s; }\n    .stage.is-active .orbBubble:nth-child(3){ transition-delay: .22s; }\n    .stage.is-active .orbBubble:nth-child(4){ transition-delay: .28s; }\n    .stage.is-active .orbBubble:nth-child(5){ transition-delay: .34s; }\n    .stage.is-active .orbBubble:nth-child(6){ transition-delay: .40s; }\n\n    \/* Footer CTA *\/\n    .footerCta{ padding: 26px 0 92px; }\n    .ctaPanel{\n      border-radius: var(--r);\n      background: linear-gradient(135deg, rgba(124,58,237,.20), rgba(18,18,40,.70));\n      border: 1px solid rgba(167,139,250,.18);\n      box-shadow: var(--shadowGlow);\n      padding: 18px;\n      display:flex; align-items:center; justify-content:space-between;\n      flex-wrap:wrap;\n      gap: 12px;\n    }\n    .ctaPanel h3{ margin:0; font-size: 18px; letter-spacing:-.01em; }\n    .ctaPanel p{ margin: 6px 0 0; color: var(--muted); line-height: 1.6; font-size: 14px; max-width: 760px; }\n\n    \/* ===== Chatbot widget (unchanged) ===== *\/\n    .bot{ position:fixed; right:18px; bottom:18px; width:min(400px, calc(100vw - 36px)); z-index:90; border-radius:22px; background: linear-gradient(180deg, rgba(18,18,40,.92), rgba(7,7,12,.86)); border:1px solid rgba(160,140,255,.18); box-shadow: 0 26px 90px rgba(0,0,0,.65), 0 20px 70px rgba(124,58,237,.16); overflow:hidden; }\n    .botHeader{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 12px 10px; background: rgba(7,7,12,.40); border-bottom:1px solid rgba(160,140,255,.14); }\n    .botTitle{ display:flex; align-items:center; gap:10px; font-weight:950; letter-spacing:-.01em; }\n    .botBadge{ width:10px;height:10px;border-radius:999px;background: rgba(34,197,94,.95); box-shadow:0 0 0 6px rgba(34,197,94,.12); }\n    .botHeader small{ color: var(--muted); font-weight:750; }\n    .botToggle{ border:1px solid rgba(167,139,250,.18); background: rgba(124,58,237,.10); color: var(--text); border-radius:999px; padding:8px 10px; cursor:pointer; font-weight:900; user-select:none; transition: transform .2s var(--ease), background .2s var(--ease); }\n    .botToggle:hover{ transform: translateY(-1px); background: rgba(124,58,237,.16); }\n    .botBody{ max-height:460px; display:flex; flex-direction:column; }\n    .botLog{ padding:12px; overflow:auto; max-height:360px; scrollbar-width: thin; scrollbar-color: rgba(167,139,250,.35) rgba(0,0,0,0); }\n    .msg{ display:flex; margin:10px 0; gap:10px; }\n    .avatar{ width:28px;height:28px;border-radius:12px; background: linear-gradient(135deg, rgba(124,58,237,.55), rgba(91,33,182,.55)); border:1px solid rgba(255,255,255,.10); box-shadow: 0 12px 30px rgba(124,58,237,.18); flex:0 0 auto; }\n    .msg.user{ justify-content:flex-end; }\n    .msg.user .avatar{ display:none; }\n    .bubbleMsg{ max-width:82%; border-radius:18px; padding:10px 12px; border:1px solid rgba(160,140,255,.16); background: rgba(18,18,40,.50); color: var(--text); line-height:1.5; font-size:13.6px; }\n    .msg.user .bubbleMsg{ background: rgba(124,58,237,.15); border-color: rgba(167,139,250,.22); }\n    .quickActions{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 2px; }\n    .chip{ border:1px solid rgba(167,139,250,.18); background: rgba(124,58,237,.10); color: var(--text); padding:8px 10px; border-radius:999px; cursor:pointer; font-weight:800; font-size:12.5px; user-select:none; transition: transform .2s var(--ease), background .2s var(--ease); }\n    .chip:hover{ transform: translateY(-1px); background: rgba(124,58,237,.16); }\n    .botInput{ border-top:1px solid rgba(160,140,255,.14); padding:10px; display:flex; gap:8px; background: rgba(7,7,12,.40); }\n    .botInput input{ flex:1; border-radius:16px; border:1px solid rgba(160,140,255,.18); background: rgba(18,18,40,.55); color: var(--text); padding:10px 12px; outline:none; font-weight:750; font-size:13.5px; }\n    .botInput input::placeholder{ color: rgba(184,187,218,.65); }\n    .botInput button{ border-radius:16px; border:1px solid rgba(255,255,255,.08); background: linear-gradient(135deg, rgba(124,58,237,.88), rgba(91,33,182,.80)); color: var(--text); padding:10px 12px; cursor:pointer; font-weight:950; }\n    .botMin{ display:none; position:fixed; right:18px; bottom:18px; z-index:90; border-radius:999px; padding:12px 14px; border:1px solid rgba(167,139,250,.18); background: rgba(7,7,12,.78); box-shadow: 0 22px 80px rgba(0,0,0,.62); cursor:pointer; user-select:none; color: var(--text); font-weight:950; display:flex; gap:10px; align-items:center; }\n    .botMin .pulse{ width:10px;height:10px;border-radius:999px;background: rgba(34,197,94,.95); box-shadow:0 0 0 6px rgba(34,197,94,.12); }\n\n    \/* Reduced motion *\/\n    @media (prefers-reduced-motion: reduce){\n      .heroOrbs .orb{ animation:none; }\n      .stage .focusFrame{ transition:none !important; transform:none !important; opacity:1 !important; }\n      .orbBubble{ transition:none !important; opacity:1 !important; transform:none !important; }\n      .btn:hover,.chip:hover,.miniBtn:hover,.botToggle:hover{ transform:none; }\n      .helperImg{ transform:none !important; }\n    }\n  <\/style>\n<\/head>\n\n<body>\n  <div id=\"explore-root\">\n\n    <div class=\"topbar\">\n      <div class=\"wrap\">\n        <div class=\"inner\">\n          <div class=\"brand\">\n            <span class=\"logoOrb\" aria-hidden=\"true\"><\/span>\n            <span>ex.plo.re<\/span>\n          <\/div>\n\n          <nav class=\"navlinks\" aria-label=\"Primary\">\n            <a href=\"#categories\">Business OS<\/a>\n            <a href=\"#howItWorks\">How it works<\/a>\n            <a href=\"#getStarted\">Get started<\/a>\n          <\/nav>\n\n          <div class=\"ctaRow\">\n            <button class=\"btn\" id=\"openBotBtn\" type=\"button\">Talk to the AI<\/button>\n            <!-- \u2705 changed: no (free) on button -->\n            <a class=\"btn primary\" href=\"https:\/\/ex.plo.re\/instalogin\" id=\"topCta\">Launch now<\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <main>\n      <section class=\"hero\">\n        <div class=\"heroOrbs\" aria-hidden=\"true\" id=\"heroOrbs\">\n          <div class=\"orb o1\"><\/div>\n          <div class=\"orb o2\"><\/div>\n          <div class=\"orb o3\"><\/div>\n        <\/div>\n\n        <div class=\"wrap\">\n          <div class=\"kicker\" id=\"kickerText\">Your complete solution to business management<\/div>\n          <h1 id=\"heroTitle\">Meet the AI built for you \u2014 the operating system for a controlled, scalable business.<\/h1>\n          <p class=\"subhead\" id=\"heroSub\">\n            Most owners are forced to run an entire company alone: marketing, follow-up, scheduling, paperwork, daily tasks, and client management.\n            We\u2019ll build the AI designed to replace chaos with control \u2014 so you grow without burnout.\n          <\/p>\n\n          <div class=\"heroCtas\">\n            <a class=\"btn primary\" href=\"https:\/\/ex.plo.re\/instalogin\" id=\"heroLaunch\">Launch now<\/a>\n            <button class=\"btn\" id=\"jumpToCategories\" type=\"button\">See the system<\/button>\n            <div class=\"heroFree\"><b>Launch is free<\/b> \u2014 go live in about <b>60 seconds<\/b>.<\/div>\n          <\/div>\n\n          <div class=\"heroCaps\" role=\"list\" aria-label=\"Highlights\">\n            <div class=\"cap\" role=\"listitem\"><b>Controlled growth<\/b> without chaos<\/div>\n            <div class=\"cap\" role=\"listitem\"><b>Controlled stress<\/b> with clarity & next steps<\/div>\n            <div class=\"cap\" role=\"listitem\"><b>Controlled forms<\/b> + doc signing<\/div>\n            <div class=\"cap\" role=\"listitem\"><b>Daily tasks<\/b> that run themselves<\/div>\n            <div class=\"cap\" role=\"listitem\"><b>Meetings<\/b> + scheduling that converts<\/div>\n            <div class=\"cap\" role=\"listitem\"><b>AI delegation<\/b> so you run like a team<\/div>\n          <\/div>\n\n          <div class=\"divider\"><\/div>\n        <\/div>\n      <\/section>\n\n      <section id=\"categories\">\n        <div class=\"wrap\">\n          <div class=\"sectionTitle\">\n            <div>\n              <h2>Your Business OS \u2014 scroll through the org chart<\/h2>\n              <p>\n                As you scroll, each category rises into focus with a 3D orb feel.\n                Each bubble shows <b>how<\/b> we execute it \u2014 premium, repeatable, and built for speed.\n              <\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div id=\"stageMount\"><\/div>\n      <\/section>\n\n      <section id=\"howItWorks\">\n        <div class=\"wrap\">\n          <div class=\"sectionTitle\">\n            <div>\n              <h2>How it works<\/h2>\n              <p>\n                Tell the AI your industry and goal. It routes you to a full overview or a specific category \u2014 then helps you take the fastest next step.\n              <\/p>\n            <\/div>\n          <\/div>\n\n          <div class=\"stage\" style=\"min-height: 85vh;\">\n            <div class=\"stageLayout\">\n              <div class=\"focusFrame\">\n                <div class=\"frameInner\">\n                  <div class=\"catTop\">\n                    <div class=\"catName\">\n                      <div class=\"orbNode\" aria-hidden=\"true\">1<\/div>\n                      <div>\n                        <h3>Choose your focus<\/h3>\n                        <div class=\"tag\">Full overview or a category deep dive<\/div>\n                      <\/div>\n                    <\/div>\n                    <button class=\"miniBtn\" id=\"jumpToBot\" type=\"button\">Ask the AI<\/button>\n                  <\/div>\n\n                  <div class=\"rootCard\">\n                    <div class=\"rootInner\">\n                      <div class=\"rootTitle\">We\u2019d like you to meet the AI built for you.<\/div>\n                      <p class=\"rootDesc\">It learns what you\u2019re trying to improve, then shows the operating system that fixes it \u2014 and routes you to the fastest next action.<\/p>\n                    <\/div>\n                  <\/div>\n\n                  <div class=\"flowLine\" aria-hidden=\"true\"><\/div>\n\n                  <div class=\"orbGrid\">\n                    <div class=\"orbBubble\"><strong><span class=\"miniOrb\"><\/span>Overview<\/strong><span>See how categories connect as one system \u2014 not 10 tools.<\/span><\/div>\n                    <div class=\"orbBubble\"><strong><span class=\"miniOrb\"><\/span>Deep dive<\/strong><span>Marketing, Tasks, Leads, Stress, Email, Social \u2014 your choice.<\/span><\/div>\n                    <div class=\"orbBubble\"><strong><span class=\"miniOrb\"><\/span>Schedule logic<\/strong><span>If you want controlled growth, the fastest step is a quick walkthrough.<\/span><\/div>\n                    <div class=\"orbBubble\"><strong><span class=\"miniOrb\"><\/span>Launch now<\/strong><span>Start free instantly \u2014 then upgrade into full managed execution when ready.<\/span><\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <!-- \u2705 helper image block -->\n              <aside class=\"helper\" aria-label=\"Visual helper\">\n                <div class=\"helperImgWrap\">\n                  <img decoding=\"async\"\n                    id=\"helperImg\"\n                    class=\"helperImg\"\n                    src=\"https:\/\/ex.plo.re\/crm\/wp-content\/uploads\/sites\/601\/2026\/01\/ai-banner-1769718184.png\"\n                    alt=\"ex.plo.re visual\"\n                    loading=\"lazy\"\n                  \/>\n                  <div class=\"helperTint\"><\/div>\n                <\/div>\n                <div class=\"helperMeta\">\n                  <div class=\"helperK\" id=\"helperK\">Business OS<\/div>\n                  <div class=\"helperTitle\" id=\"helperTitle\">A system that feels premium<\/div>\n                  <p class=\"helperDesc\" id=\"helperDesc\">As you scroll, the right category locks into focus. The helper updates with you.<\/p>\n                <\/div>\n              <\/aside>\n\n            <\/div>\n          <\/div>\n\n          <div class=\"footerCta\" id=\"getStarted\">\n            <div class=\"ctaPanel\">\n              <div>\n                <h3 id=\"footerTitle\">Ready to run like a team \u2014 even if you\u2019re solo?<\/h3>\n                <p id=\"footerSub\">Launch free in ~60 seconds, or talk to the AI for a full overview and the fastest next step.<\/p>\n              <\/div>\n              <div class=\"ctaRow\">\n                <button class=\"btn\" id=\"openBotBtn2\" type=\"button\">Talk to the AI<\/button>\n                <a class=\"btn primary\" href=\"https:\/\/ex.plo.re\/instalogin\" id=\"signupBtn\">Launch now<\/a>\n              <\/div>\n            <\/div>\n          <\/div>\n\n        <\/div>\n      <\/section>\n    <\/main>\n\n    <!-- Chatbot -->\n    <div class=\"bot\" id=\"botWidget\" aria-label=\"Homepage AI Chat\" role=\"dialog\">\n      <div class=\"botHeader\">\n        <div class=\"botTitle\">\n          <span class=\"botBadge\" aria-hidden=\"true\"><\/span>\n          <div>\n            ex.plo.re AI\n            <div><small id=\"botSubtitle\">Business OS Navigator<\/small><\/div>\n          <\/div>\n        <\/div>\n        <button class=\"botToggle\" id=\"botMinimize\" type=\"button\" aria-label=\"Minimize chat\">\u2014<\/button>\n      <\/div>\n\n      <div class=\"botBody\">\n        <div class=\"botLog\" id=\"botLog\" aria-live=\"polite\"><\/div>\n\n        <div class=\"botInput\">\n          <input id=\"botInput\" type=\"text\" placeholder=\"Type your industry (e.g., real estate, mortgage, insurance)...\" autocomplete=\"off\" \/>\n          <button id=\"botSend\" type=\"button\">Send<\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"botMin\" id=\"botMinButton\" role=\"button\" aria-label=\"Open chat\">\n      <span class=\"pulse\" aria-hidden=\"true\"><\/span>\n      Talk to the AI\n    <\/div>\n\n  <\/div>\n\n  <script>\n    \/\/ ==========================================================\n    \/\/ \u2705 UPGRADED SCROLL UX:\n    \/\/ - Center-focus (stage is-active)\n    \/\/ - Parallax tilt (frame + helper image)\n    \/\/ - Helper panel updates per stage\n    \/\/ - Optional soft-snap: settle stage to center after scroll stops\n    \/\/ ==========================================================\n    const LOG = (...args) => console.log(\"\ud83d\udfe3 ex.plo.re:\", ...args);\n\n    const SIGNUP_URL = \"https:\/\/ex.plo.re\/instalogin\";\n    const PLACEHOLDER_IMG = \"https:\/\/ex.plo.re\/crm\/wp-content\/uploads\/sites\/601\/2026\/01\/ai-banner-1769718184.png\";\n\n    \/\/ ============\n    \/\/ DATA\n    \/\/ ============\n    const CATEGORIES = [\n      { key:\"marketing\", icon:\"M\", name:\"Marketing\", tagline:\"Always-on presence that compounds\",\n        desc:\"We\u2019ll build the AI designed to keep marketing consistent without you doing everything yourself.\",\n        helper:{ k:\"Marketing\", t:\"Scroll-stopping presence\", d:\"Email + social + premium visuals that feel on-brand.\" },\n        how:[\n          { t:\"Email\", d:\"Send announcements and updates \u2014 consistently, on-brand.\" },\n          { t:\"Social media\", d:\"Repurpose what matters into trust-building posts.\" },\n          { t:\"Premium content\", d:\"Auto-generate luxury-grade visuals and pages.\" },\n          { t:\"Retargeting readiness\", d:\"Turn site traffic into warm audiences.\" }\n        ]\n      },\n      { key:\"leads\", icon:\"L\", name:\"Leads\", tagline:\"Capture \u2192 follow-up \u2192 appointment\",\n        desc:\"We\u2019ll build the AI designed to convert attention into booked conversations and pipeline momentum.\",\n        helper:{ k:\"Leads\", t:\"Convert attention into calls\", d:\"Premium capture, clean routing, never miss follow-up.\" },\n        how:[\n          { t:\"Lead capture\", d:\"Fast mobile forms \u2014 fewer steps, higher completion.\" },\n          { t:\"Follow-up system\", d:\"Structured next steps, reminders, and routing.\" },\n          { t:\"Nurture\", d:\"Warm leads over time with the right message.\" },\n          { t:\"Pipeline clarity\", d:\"Know what moves revenue today.\" }\n        ]\n      },\n      { key:\"tasks\", icon:\"T\", name:\"Daily Tasks\", tagline:\"Run your day like a system\",\n        desc:\"We\u2019d like you to meet the AI built to remove mental load and keep execution tight every day.\",\n        helper:{ k:\"Daily Tasks\", t:\"Less mental load\", d:\"A system that prioritizes and keeps momentum moving.\" },\n        how:[\n          { t:\"Today\u2019s plan\", d:\"Auto-prioritized checklist based on pipeline.\" },\n          { t:\"No dropped balls\", d:\"Next steps become automatic \u2014 not memory-based.\" },\n          { t:\"Templates\", d:\"Repeatable sequences for weekly actions.\" },\n          { t:\"Momentum tracking\", d:\"Spot slipping items before they cost deals.\" }\n        ]\n      },\n      { key:\"scheduling\", icon:\"S\", name:\"Meetings + Scheduling\", tagline:\"Turn interest into booked calls\",\n        desc:\"We\u2019ll build the AI designed to make scheduling your conversion engine \u2014 not a bottleneck.\",\n        helper:{ k:\"Scheduling\", t:\"Book faster, fewer no-shows\", d:\"Instant booking + reminders + clean meeting routing.\" },\n        how:[\n          { t:\"Instant booking\", d:\"Links everywhere so prospects can act now.\" },\n          { t:\"Smart reminders\", d:\"Reduce no-shows with confirmations.\" },\n          { t:\"Routing\", d:\"Right meeting type, right next step.\" },\n          { t:\"Outcome-driven calls\", d:\"Every meeting ends with a clear action.\" }\n        ]\n      },\n      { key:\"forms\", icon:\"F\", name:\"Forms + Signing\", tagline:\"Less friction, faster commitments\",\n        desc:\"We\u2019ll build the AI designed to streamline intake, paperwork, and signing so deals move faster.\",\n        helper:{ k:\"Forms + Signing\", t:\"Premium intake and signatures\", d:\"Collect once, reuse everywhere, track status cleanly.\" },\n        how:[\n          { t:\"Client intake\", d:\"Guided, premium experience \u2014 collect once.\" },\n          { t:\"Doc signing flow\", d:\"Send + track signatures with less friction.\" },\n          { t:\"Faster turnaround\", d:\"Less chasing. More completions.\" },\n          { t:\"Consistency\", d:\"Professional every time \u2014 even when busy.\" }\n        ]\n      },\n      { key:\"stress\", icon:\"C\", name:\"Controlled Stress\", tagline:\"Clarity replaces chaos\",\n        desc:\"We\u2019d like you to meet the AI built to keep your business from living in your head.\",\n        helper:{ k:\"Clarity\", t:\"Control replaces chaos\", d:\"Centralized workflow and predictable operating rhythm.\" },\n        how:[\n          { t:\"Centralized workflow\", d:\"One place to see what matters and what\u2019s next.\" },\n          { t:\"Less context switching\", d:\"Stop bouncing between tasks and tools.\" },\n          { t:\"Confidence\", d:\"Always know what\u2019s active and what\u2019s next.\" },\n          { t:\"Sustainable growth\", d:\"Scale without burnout.\" }\n        ]\n      },\n      { key:\"delegation\", icon:\"AI\", name:\"AI Delegation\", tagline:\"Leverage without hiring\",\n        desc:\"We\u2019ll build the AI designed to act as your delegation layer \u2014 drafts, routes, organizes, standardizes.\",\n        helper:{ k:\"AI Delegation\", t:\"Operate like a team\", d:\"Draft, triage, standardize, ship faster.\" },\n        how:[\n          { t:\"Drafting\", d:\"Emails, posts, updates \u2014 on-brand, fast.\" },\n          { t:\"Triage\", d:\"Organize inbound activity and recommend next steps.\" },\n          { t:\"Standardization\", d:\"Stay consistent across everything.\" },\n          { t:\"Speed\", d:\"Turn decisions into execution instantly.\" }\n        ]\n      }\n    ];\n\n    \/\/ ============\n    \/\/ Render stages (with helper column)\n    \/\/ ============\n    const stageMount = document.getElementById(\"stageMount\");\n    function stageTemplate(cat){\n      const stage = document.createElement(\"section\");\n      stage.className = \"stage\";\n      stage.id = `cat-${cat.key}`;\n      stage.dataset.key = cat.key;\n      stage.innerHTML = `\n        <div class=\"stageLayout\">\n          <div class=\"focusFrame\">\n            <div class=\"frameInner\">\n              <div class=\"catTop\">\n                <div class=\"catName\">\n                  <div class=\"orbNode\" aria-hidden=\"true\">${cat.icon}<\/div>\n                  <div>\n                    <h3>${cat.name}<\/h3>\n                    <div class=\"tag\">${cat.tagline}<\/div>\n                  <\/div>\n                <\/div>\n                <button class=\"miniBtn\" type=\"button\" data-jump=\"${cat.key}\">Jump<\/button>\n              <\/div>\n\n              <div class=\"rootCard\">\n                <div class=\"rootInner\">\n                  <div class=\"rootTitle\">${cat.name}<\/div>\n                  <p class=\"rootDesc\">${cat.desc}<\/p>\n                <\/div>\n              <\/div>\n\n              <div class=\"flowLine\" aria-hidden=\"true\"><\/div>\n\n              <div class=\"orbGrid\">\n                ${cat.how.map(h => `\n                  <div class=\"orbBubble\">\n                    <strong><span class=\"miniOrb\" aria-hidden=\"true\"><\/span>${h.t}<\/strong>\n                    <span>${h.d}<\/span>\n                  <\/div>\n                `).join(\"\")}\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <aside class=\"helper\" aria-label=\"Visual helper\">\n            <div class=\"helperImgWrap\">\n              <img decoding=\"async\" class=\"helperImg\" src=\"${PLACEHOLDER_IMG}\" alt=\"ex.plo.re visual\" loading=\"lazy\" \/>\n              <div class=\"helperTint\"><\/div>\n            <\/div>\n            <div class=\"helperMeta\">\n              <div class=\"helperK\">${cat.helper.k}<\/div>\n              <div class=\"helperTitle\">${cat.helper.t}<\/div>\n              <p class=\"helperDesc\">${cat.helper.d}<\/p>\n            <\/div>\n          <\/aside>\n        <\/div>\n      `;\n      return stage;\n    }\n    CATEGORIES.forEach(c => stageMount.appendChild(stageTemplate(c)));\n    LOG(\"\u2705 Rendered stages:\", CATEGORIES.length);\n\n    \/\/ ============\n    \/\/ Focus observer (center band)\n    \/\/ ============\n    const stages = Array.from(document.querySelectorAll(\".stage\"));\n    const focusObserver = new IntersectionObserver((entries) => {\n      for(const e of entries){\n        const stage = e.target;\n        if(e.isIntersecting){\n          stage.classList.add(\"is-active\");\n          LOG(\"\ud83e\udded Stage focus:\", stage.dataset.key);\n        } else {\n          stage.classList.remove(\"is-active\");\n        }\n      }\n    }, {\n      root: null,\n      rootMargin: \"-38% 0px -38% 0px\",\n      threshold: 0.01\n    });\n    stages.forEach(s => focusObserver.observe(s));\n\n    \/\/ ============\n    \/\/ Parallax + tilt (frame + helper image + hero orbs)\n    \/\/ ============\n    let rafId = null;\n    const clamp = (n,min,max)=> Math.max(min, Math.min(max, n));\n\n    function applyDepth(){\n      rafId = null;\n      const vh = window.innerHeight || 800;\n      const centerY = vh * 0.5;\n\n      \/\/ Hero orbs parallax\n      const heroOrbs = document.getElementById(\"heroOrbs\");\n      if(heroOrbs){\n        const y = window.scrollY || 0;\n        heroOrbs.style.transform = `translate3d(0, ${y * 0.08}px, 0)`;\n      }\n\n      for(const s of stages){\n        const frame = s.querySelector(\".focusFrame\");\n        const helperImg = s.querySelector(\".helperImg\");\n        if(!frame) continue;\n\n        const rect = s.getBoundingClientRect();\n        const stageCenter = rect.top + rect.height * 0.5;\n        const dist = (stageCenter - centerY) \/ vh;      \/\/ -1..1-ish\n        const near = 1 - clamp(Math.abs(dist), 0, 1);    \/\/ 1 near center\n\n        \/\/ Depth math\n        const rotX = clamp(dist * 8, -8, 8);\n        const lift = clamp(dist * 34, -34, 34);\n\n        \/\/ Frame: stronger \u201crise into focus\u201d\n        if(s.classList.contains(\"is-active\")){\n          frame.style.transform = `translate3d(0, 0, 0) rotateX(${rotX * 0.22}deg) scale(1)`;\n        }else{\n          frame.style.transform = `translate3d(0, ${lift}px, -90px) rotateX(${rotX}deg) scale(.975)`;\n        }\n\n        \/\/ Helper image subtle parallax (keeps sleek feel)\n        if(helperImg){\n          const imgY = clamp(dist * -18, -18, 18);\n          const scale = 1 + (near * 0.02);\n          helperImg.style.transform = `translate3d(0, ${imgY}px, 0) scale(${scale})`;\n        }\n      }\n    }\n\n    function onScroll(){\n      if(rafId) return;\n      rafId = requestAnimationFrame(applyDepth);\n    }\n    window.addEventListener(\"scroll\", onScroll, { passive:true });\n    window.addEventListener(\"resize\", onScroll);\n    onScroll();\n\n    \/\/ ============\n    \/\/ Soft snap (optional): gently center the closest stage after scroll stops\n    \/\/ Safe: only runs on desktop-ish, and only if user isn't actively scrolling\n    \/\/ ============\n    let snapT = null;\n    function softSnap(){\n      if(window.matchMedia(\"(max-width: 980px)\").matches) return; \/\/ avoid on mobile\n      const vh = window.innerHeight || 800;\n      const centerY = vh * 0.5;\n      let best = null;\n      let bestDist = Infinity;\n\n      for(const s of stages){\n        const r = s.getBoundingClientRect();\n        const c = r.top + r.height * 0.5;\n        const d = Math.abs(c - centerY);\n        if(d < bestDist){\n          bestDist = d;\n          best = s;\n        }\n      }\n      if(best && bestDist < vh * 0.22){\n        best.scrollIntoView({ behavior:\"smooth\", block:\"center\" });\n        LOG(\"\ud83e\uddf2 soft snap:\", best.dataset.key);\n      }\n    }\n\n    window.addEventListener(\"scroll\", ()=>{\n      clearTimeout(snapT);\n      snapT = setTimeout(softSnap, 140);\n    }, { passive:true });\n\n    \/\/ Jump buttons\n    document.addEventListener(\"click\", (ev) => {\n      const btn = ev.target.closest(\"[data-jump]\");\n      if(!btn) return;\n      const key = btn.getAttribute(\"data-jump\");\n      const target = document.getElementById(`cat-${key}`);\n      if(target){\n        target.scrollIntoView({ behavior:\"smooth\", block:\"center\" });\n        LOG(\"\u27a1\ufe0f Jump to:\", key);\n      }\n    });\n\n    document.getElementById(\"jumpToCategories\")?.addEventListener(\"click\", ()=>{\n      document.getElementById(\"categories\")?.scrollIntoView({ behavior:\"smooth\", block:\"start\" });\n      LOG(\"\u27a1\ufe0f Jump to categories\");\n    });\n\n    \/\/ ============\n    \/\/ Chatbot (keep your existing logic if you want\u2014this is just opening\/closing UX)\n    \/\/ ============\n    const bot = document.getElementById(\"botWidget\");\n    const botMinBtn = document.getElementById(\"botMinButton\");\n    const botMinimize = document.getElementById(\"botMinimize\");\n    const openBotBtn = document.getElementById(\"openBotBtn\");\n    const openBotBtn2 = document.getElementById(\"openBotBtn2\");\n    const jumpToBot = document.getElementById(\"jumpToBot\");\n    const botLog = document.getElementById(\"botLog\");\n    const botInput = document.getElementById(\"botInput\");\n    const botSend = document.getElementById(\"botSend\");\n\n    function showBot(){\n      bot.style.display = \"block\";\n      botMinBtn.style.display = \"none\";\n      botInput.focus();\n      LOG(\"\ud83d\udcac Bot opened\");\n    }\n    function hideBot(){\n      bot.style.display = \"none\";\n      botMinBtn.style.display = \"flex\";\n      LOG(\"\ud83d\udcac Bot minimized\");\n    }\n    botMinimize.addEventListener(\"click\", hideBot);\n    botMinBtn.addEventListener(\"click\", showBot);\n    openBotBtn.addEventListener(\"click\", showBot);\n    openBotBtn2?.addEventListener(\"click\", showBot);\n    jumpToBot?.addEventListener(\"click\", showBot);\n\n    function addMsg(text, who=\"bot\"){\n      const row = document.createElement(\"div\");\n      row.className = `msg ${who === \"user\" ? \"user\" : \"\"}`;\n      row.innerHTML = `${who === \"user\" ? \"\" : '<div class=\"avatar\" aria-hidden=\"true\"><\/div>'}<div class=\"bubbleMsg\">${text}<\/div>`;\n      botLog.appendChild(row);\n      botLog.scrollTop = botLog.scrollHeight;\n    }\n\n    function handleUser(text){\n      addMsg(text, \"user\");\n      addMsg(`Got it. Want an <b>overview<\/b> or a <b>category<\/b> deep dive?`, \"bot\");\n    }\n\n    botSend.addEventListener(\"click\", ()=>{\n      const v = botInput.value.trim();\n      if(!v) return;\n      botInput.value = \"\";\n      handleUser(v);\n    });\n    botInput.addEventListener(\"keydown\",(e)=>{\n      if(e.key === \"Enter\") botSend.click();\n    });\n\n    \/\/ Seed bot\n    addMsg(`We\u2019d like you to meet the <b>AI built for you<\/b>. Start by typing your industry.`, \"bot\");\n\n    \/\/ Start minimized on small screens\n    const isSmall = window.matchMedia(\"(max-width: 520px)\").matches;\n    if(isSmall) hideBot();\n\n    LOG(\"\u2705 UX upgraded: parallax + focus + helper column + soft snap\");\n  <\/script>\n<\/body>\n<\/html>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>What\u2019s one loyal client worth to you? Get recommendation We\u2019ll line up a monthly plan and highlight the tier we\u2019d choose. Monthly marketing budget Use the slider to adjust packages &amp; ad spend. The invoice updates live. $2,945.mo DIY Loyalty &amp; Leads Marketing Team Leads Guaranteed Partner Your setup Slide first, then tap a tile if you want to see &#8230; <\/p>\n<div><a href=\"https:\/\/ex.plo.re\/crm\/gptdemo-2\/\" class=\"more-link\">Read More<\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-blank-3.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-3993","page","type-page","status-publish","hentry","no-post-thumbnail"],"acf":[],"_links":{"self":[{"href":"https:\/\/ex.plo.re\/crm\/wp-json\/wp\/v2\/pages\/3993","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ex.plo.re\/crm\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ex.plo.re\/crm\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ex.plo.re\/crm\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ex.plo.re\/crm\/wp-json\/wp\/v2\/comments?post=3993"}],"version-history":[{"count":16,"href":"https:\/\/ex.plo.re\/crm\/wp-json\/wp\/v2\/pages\/3993\/revisions"}],"predecessor-version":[{"id":4018,"href":"https:\/\/ex.plo.re\/crm\/wp-json\/wp\/v2\/pages\/3993\/revisions\/4018"}],"wp:attachment":[{"href":"https:\/\/ex.plo.re\/crm\/wp-json\/wp\/v2\/media?parent=3993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}