{"id":7,"date":"2026-07-26T04:53:51","date_gmt":"2026-07-26T04:53:51","guid":{"rendered":"https:\/\/blckspaceai.com\/?page_id=7"},"modified":"2026-07-26T04:54:35","modified_gmt":"2026-07-26T04:54:35","slug":"elementor-7","status":"publish","type":"page","link":"https:\/\/blckspaceai.com\/?page_id=7","title":{"rendered":"Elementor #7"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7\" class=\"elementor elementor-7\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bfb2328 e-con-full e-flex e-con e-parent\" data-id=\"bfb2328\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3f790a3f elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"3f790a3f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>:root {\n  --black: #090a0c;\n  --warm: #f7f7f2;\n  --white: #ffffff;\n  --gray: #e8e8e3;\n  --mid: #73757b;\n  --blue: #2864ff;\n  --violet: #7357ff;\n  --line: rgba(9, 10, 12, .13);\n}\n\n* {\n  box-sizing: border-box;\n}\n\nhtml {\n  scroll-behavior: smooth;\n  background: var(--black);\n}\n\nbody {\n  margin: 0;\n  overflow-x: hidden;\n  background: var(--warm);\n  color: var(--black);\n  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;\n  -webkit-font-smoothing: antialiased;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\nbutton {\n  font: inherit;\n}\n\n.shell {\n  width: min(1320px, calc(100% - 64px));\n  margin-inline: auto;\n}\n\n.site-nav {\n  height: 88px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid var(--line);\n}\n\n.brand {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 13px;\n  font-weight: 720;\n  letter-spacing: .075em;\n}\n\n.brand b {\n  color: var(--blue);\n  font-weight: inherit;\n}\n\n.brand-mark {\n  width: 23px;\n  height: 23px;\n  position: relative;\n  display: inline-block;\n}\n\n.brand-mark i {\n  width: 9px;\n  height: 9px;\n  position: absolute;\n  border: 1.5px solid currentColor;\n  border-radius: 50%;\n}\n\n.brand-mark i:nth-child(1) {\n  top: 0;\n  left: 7px;\n}\n\n.brand-mark i:nth-child(2) {\n  bottom: 1px;\n  left: 1px;\n}\n\n.brand-mark i:nth-child(3) {\n  right: 1px;\n  bottom: 1px;\n  border-color: var(--blue);\n  background: var(--blue);\n}\n\n.nav-links {\n  display: flex;\n  gap: 34px;\n  font-size: 12px;\n  font-weight: 560;\n}\n\n.nav-links a,\n.footer-main a {\n  transition: color .2s ease;\n}\n\n.nav-links a:hover,\n.footer-main a:hover {\n  color: var(--blue);\n}\n\n.nav-action {\n  min-height: 42px;\n  padding: 0 17px;\n  display: inline-flex;\n  align-items: center;\n  gap: 16px;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 650;\n  transition: background .2s ease, color .2s ease;\n}\n\n.nav-action:hover {\n  background: var(--black);\n  color: var(--white);\n}\n\n.opening {\n  min-height: calc(100svh - 88px);\n  padding-top: clamp(80px, 10vh, 140px);\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n\n.opening-kicker,\n.section-label {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  color: #6c6e74;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace, monospace;\n  font-size: 9px;\n  font-weight: 650;\n  letter-spacing: .14em;\n  text-transform: uppercase;\n}\n\n.opening-kicker > span {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--blue);\n  box-shadow: 0 0 0 5px rgba(40, 100, 255, .1);\n}\n\n.opening h1 {\n  max-width: 1130px;\n  margin: 32px auto 25px;\n  font-size: clamp(64px, 7.4vw, 112px);\n  line-height: .92;\n  font-weight: 520;\n  letter-spacing: -.067em;\n}\n\n.opening > p {\n  max-width: 680px;\n  margin: 0 auto;\n  color: #6d6e72;\n  font-size: 17px;\n  line-height: 1.62;\n}\n\n.opening-actions {\n  margin-top: 35px;\n  display: flex;\n  align-items: center;\n  gap: 28px;\n}\n\n.primary-button {\n  min-height: 52px;\n  padding: 0 21px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 22px;\n  border-radius: 999px;\n  background: var(--blue);\n  color: var(--white);\n  font-size: 12px;\n  font-weight: 650;\n  box-shadow: 0 10px 35px rgba(40, 100, 255, .16);\n  transition: transform .25s ease, background .25s ease;\n}\n\n.primary-button:hover {\n  transform: translateY(-2px);\n  background: #174fe0;\n}\n\n.quiet-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 14px;\n  font-size: 12px;\n  font-weight: 620;\n}\n\n.quiet-link span {\n  color: var(--blue);\n}\n\n.opening-object {\n  width: min(920px, 78vw);\n  height: 260px;\n  margin-top: clamp(60px, 8vh, 100px);\n  position: relative;\n  overflow: hidden;\n  perspective: 1000px;\n}\n\n.object-halo {\n  width: 520px;\n  height: 180px;\n  position: absolute;\n  left: 50%;\n  bottom: -25px;\n  transform: translateX(-50%);\n  border-radius: 50%;\n  background: radial-gradient(ellipse, rgba(40, 100, 255, .17), transparent 68%);\n  filter: blur(8px);\n}\n\n.object-surface {\n  width: 640px;\n  height: 230px;\n  position: absolute;\n  left: 50%;\n  top: 8px;\n  overflow: hidden;\n  transform: translateX(-50%) rotateX(57deg) rotateZ(-2deg);\n  transform-origin: center bottom;\n  border: 1px solid rgba(9,10,12,.18);\n  border-radius: 28px;\n  background:\n    linear-gradient(rgba(9,10,12,.04) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(9,10,12,.04) 1px, transparent 1px),\n    rgba(255,255,255,.82);\n  background-size: 32px 32px;\n  box-shadow: 0 45px 80px rgba(9,10,12,.14);\n  animation: objectFloat 7s ease-in-out infinite;\n}\n\n.object-brand {\n  position: absolute;\n  top: 22px;\n  left: 24px;\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  color: #6f7175;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace, monospace;\n  font-size: 8px;\n  letter-spacing: .08em;\n}\n\n.object-brand .brand-mark {\n  width: 16px;\n  height: 16px;\n}\n\n.object-brand .brand-mark i {\n  width: 6px;\n  height: 6px;\n}\n\n.object-message {\n  position: absolute;\n  padding: 11px 15px;\n  border: 1px solid rgba(9,10,12,.1);\n  border-radius: 999px;\n  background: rgba(255,255,255,.9);\n  color: #4f5156;\n  font-size: 10px;\n  box-shadow: 0 12px 30px rgba(9,10,12,.08);\n}\n\n.message-a {\n  top: 72px;\n  left: 80px;\n}\n\n.message-b {\n  top: 118px;\n  left: 264px;\n}\n\n.message-c {\n  top: 165px;\n  right: 62px;\n  color: var(--black);\n}\n\n.message-c i {\n  width: 6px;\n  height: 6px;\n  display: inline-block;\n  margin-right: 7px;\n  border-radius: 50%;\n  background: var(--blue);\n}\n\n.object-axis {\n  position: absolute;\n  background: linear-gradient(90deg, transparent, rgba(40,100,255,.35), transparent);\n}\n\n.axis-x {\n  width: 100%;\n  height: 1px;\n  top: 50%;\n}\n\n.axis-y {\n  width: 1px;\n  height: 100%;\n  left: 50%;\n  background: linear-gradient(transparent, rgba(40,100,255,.35), transparent);\n}\n\n.scroll-cue {\n  margin-top: auto;\n  padding-bottom: 27px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  color: #7a7b7e;\n  font-size: 9px;\n  letter-spacing: .07em;\n  text-transform: uppercase;\n}\n\n.scroll-cue i {\n  width: 16px;\n  height: 25px;\n  position: relative;\n  border: 1px solid #b8b9b6;\n  border-radius: 10px;\n}\n\n.scroll-cue i::after {\n  content: \"\";\n  width: 2px;\n  height: 5px;\n  position: absolute;\n  top: 5px;\n  left: 6px;\n  border-radius: 2px;\n  background: var(--blue);\n  animation: scrollTick 1.8s ease-in-out infinite;\n}\n\n.story {\n  height: 430vh;\n  position: relative;\n}\n\n.story-stage {\n  --story-progress: 0;\n  height: 100svh;\n  min-height: 680px;\n  position: sticky;\n  top: 0;\n  overflow: hidden;\n  background: var(--warm);\n  color: var(--black);\n  isolation: isolate;\n}\n\n.story-atmosphere {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  background:\n    radial-gradient(circle at 76% 48%, rgba(40,100,255,.17), transparent 24%),\n    var(--black);\n  opacity: clamp(0, calc((var(--story-progress) - .46) * 2.1), 1);\n}\n\n.story-meta {\n  width: min(1320px, calc(100% - 64px));\n  height: 72px;\n  position: absolute;\n  top: 0;\n  left: 50%;\n  z-index: 5;\n  transform: translateX(-50%);\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  align-items: center;\n  color: color-mix(in srgb, var(--black) calc((1 - var(--story-progress)) * 100%), var(--white));\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace, monospace;\n  font-size: 8px;\n  letter-spacing: .12em;\n}\n\n.story-meta > span:last-child {\n  justify-self: end;\n}\n\n.scene-nav {\n  display: flex;\n  gap: 8px;\n}\n\n.scene-nav button {\n  width: 31px;\n  height: 18px;\n  padding: 0;\n  position: relative;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n}\n\n.scene-nav button::before {\n  content: \"\";\n  height: 1px;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 8px;\n  background: currentColor;\n  opacity: .2;\n}\n\n.scene-nav button[aria-current=\"step\"]::before {\n  height: 2px;\n  background: var(--blue);\n  opacity: 1;\n}\n\n.scene-nav button:focus-visible,\n.nav-action:focus-visible,\n.primary-button:focus-visible,\n.quiet-link:focus-visible,\na:focus-visible {\n  outline: 2px solid var(--blue);\n  outline-offset: 4px;\n}\n\n.story-track {\n  width: 400%;\n  height: 100%;\n  display: flex;\n  transform: translate3d(calc(var(--story-progress) * -75%), 0, 0);\n  will-change: transform;\n}\n\n.story-scene {\n  width: 25%;\n  height: 100%;\n  padding: 110px max(32px, calc((100vw - 1320px) \/ 2)) 56px;\n  flex: 0 0 25%;\n  display: grid;\n  grid-template-columns: .78fr 1.22fr;\n  gap: clamp(50px, 7vw, 120px);\n  align-items: center;\n}\n\n.scene-copy {\n  max-width: 500px;\n}\n\n.scene-number {\n  color: var(--blue);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace, monospace;\n  font-size: 9px;\n  font-weight: 650;\n  letter-spacing: .13em;\n}\n\n.scene-copy h2 {\n  margin: 28px 0 24px;\n  font-size: clamp(53px, 5.5vw, 84px);\n  line-height: .95;\n  font-weight: 520;\n  letter-spacing: -.058em;\n}\n\n.scene-copy > p {\n  max-width: 450px;\n  margin: 0;\n  color: #6e7075;\n  font-size: 15px;\n  line-height: 1.7;\n}\n\n.scene-copy ul {\n  margin: 34px 0 0;\n  padding: 22px 0 0;\n  display: flex;\n  gap: 22px;\n  border-top: 1px solid currentColor;\n  color: inherit;\n  list-style: none;\n  font-size: 9px;\n  font-weight: 640;\n  letter-spacing: .03em;\n}\n\n.scene-copy li::before {\n  content: \"\";\n  width: 5px;\n  height: 5px;\n  margin-right: 7px;\n  display: inline-block;\n  border-radius: 50%;\n  background: var(--blue);\n}\n\n.scene-visual {\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.scene-mist {\n  background: #e5e7e8;\n}\n\n.scene-dusk {\n  background: #292d35;\n  color: var(--white);\n}\n\n.scene-space {\n  --demo-progress: clamp(0, calc((var(--story-progress) - .71) * 3.45), 1);\n  background: var(--black);\n  color: var(--white);\n}\n\n.scene-dusk .scene-copy > p,\n.scene-space .scene-copy > p {\n  color: #a2a5ad;\n}\n\n.product-browser {\n  width: min(720px, 100%);\n  aspect-ratio: 1.35;\n  overflow: hidden;\n  border: 1px solid rgba(9,10,12,.16);\n  border-radius: 18px;\n  background: var(--white);\n  box-shadow: 0 30px 80px rgba(9,10,12,.12);\n}\n\n.browser-chrome {\n  height: 44px;\n  padding: 0 16px;\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  align-items: center;\n  border-bottom: 1px solid rgba(9,10,12,.09);\n  background: #fafaf8;\n}\n\n.browser-chrome > span {\n  display: flex;\n  gap: 5px;\n}\n\n.browser-chrome i {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: #d3d3cf;\n}\n\n.browser-chrome small,\n.browser-chrome b {\n  color: #8a8b8d;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace, monospace;\n  font-size: 7px;\n  font-weight: 500;\n}\n\n.browser-chrome b {\n  justify-self: end;\n  color: var(--blue);\n}\n\n.browser-site {\n  height: calc(100% - 44px);\n  padding: 24px;\n  position: relative;\n  background:\n    linear-gradient(110deg, transparent 44%, rgba(40,100,255,.07)),\n    #f3f3ef;\n}\n\n.browser-brand {\n  font-size: 8px;\n  font-weight: 750;\n  letter-spacing: .08em;\n}\n\n.browser-lines {\n  width: 48%;\n  margin-top: 75px;\n}\n\n.browser-lines i {\n  height: 9px;\n  margin-bottom: 11px;\n  display: block;\n  border-radius: 10px;\n  background: #dbdbd6;\n}\n\n.browser-lines i:first-child {\n  width: 88%;\n  height: 24px;\n  background: #16171a;\n}\n\n.browser-lines i:last-child {\n  width: 67%;\n}\n\n.agent-window {\n  width: 310px;\n  position: absolute;\n  right: 28px;\n  bottom: 24px;\n  overflow: hidden;\n  border: 1px solid rgba(9,10,12,.12);\n  border-radius: 16px;\n  background: var(--white);\n  box-shadow: 0 25px 65px rgba(9,10,12,.16);\n}\n\n.agent-top {\n  min-height: 64px;\n  padding: 12px 15px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  border-bottom: 1px solid rgba(9,10,12,.08);\n}\n\n.agent-avatar {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  background: var(--black);\n  color: var(--white);\n}\n\n.agent-avatar .brand-mark {\n  transform: scale(.62);\n}\n\n.agent-top > span:nth-child(2) {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.agent-top b {\n  font-size: 10px;\n}\n\n.agent-top small {\n  color: #84868a;\n  font-size: 7px;\n}\n\n.agent-top small i {\n  width: 5px;\n  height: 5px;\n  margin-right: 4px;\n  display: inline-block;\n  border-radius: 50%;\n  background: #26a66b;\n}\n\n.agent-top button {\n  border: 0;\n  background: none;\n  color: #9b9c9e;\n}\n\n.agent-messages {\n  padding: 14px;\n}\n\n.agent-messages p {\n  max-width: 83%;\n  margin: 0 0 9px;\n  padding: 8px 10px;\n  border-radius: 9px 9px 9px 2px;\n  background: #f0f0ed;\n  color: #4f5054;\n  font-size: 8px;\n  line-height: 1.45;\n}\n\n.agent-messages p.visitor {\n  margin-left: auto;\n  border-radius: 9px 9px 2px 9px;\n  background: var(--blue);\n  color: var(--white);\n}\n\n.agent-input {\n  margin: 0 14px 14px;\n  padding: 8px 8px 8px 11px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border: 1px solid #ddddda;\n  border-radius: 8px;\n  color: #a1a2a3;\n  font-size: 8px;\n}\n\n.agent-input b {\n  width: 22px;\n  height: 22px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  background: var(--blue);\n  color: var(--white);\n}\n\n.qualification-visual {\n  width: min(650px, 100%);\n  aspect-ratio: 1;\n  position: relative;\n}\n\n.signal-orbit {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  border: 1px solid rgba(9,10,12,.12);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.orbit-one {\n  width: 54%;\n  height: 54%;\n}\n\n.orbit-two {\n  width: 82%;\n  height: 82%;\n}\n\n.signal-orbit::before,\n.signal-orbit::after {\n  content: \"\";\n  width: 6px;\n  height: 6px;\n  position: absolute;\n  border-radius: 50%;\n  background: var(--blue);\n  box-shadow: 0 0 24px rgba(40,100,255,.65);\n}\n\n.orbit-one::before {\n  left: 10%;\n  top: 20%;\n}\n\n.orbit-one::after {\n  right: 0;\n  bottom: 33%;\n}\n\n.orbit-two::before {\n  right: 19%;\n  top: 3%;\n}\n\n.orbit-two::after {\n  left: 2%;\n  bottom: 28%;\n}\n\n.signal-core {\n  width: 152px;\n  height: 152px;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 18px;\n  border: 1px solid rgba(40,100,255,.25);\n  border-radius: 50%;\n  background: rgba(255,255,255,.56);\n  box-shadow: 0 24px 60px rgba(40,100,255,.12);\n}\n\n.signal-core span {\n  font-size: 9px;\n}\n\n.signal-node {\n  min-width: 150px;\n  padding: 13px 14px;\n  position: absolute;\n  display: grid;\n  grid-template-columns: 8px 1fr;\n  gap: 3px 8px;\n  border: 1px solid rgba(9,10,12,.12);\n  border-radius: 11px;\n  background: rgba(247,247,242,.88);\n  color: #66686d;\n  font-size: 9px;\n  box-shadow: 0 16px 40px rgba(9,10,12,.08);\n  backdrop-filter: blur(12px);\n}\n\n.signal-node i {\n  width: 6px;\n  height: 6px;\n  margin-top: 2px;\n  grid-row: 1 \/ 3;\n  border-radius: 50%;\n  background: var(--blue);\n}\n\n.signal-node b {\n  color: var(--black);\n  font-size: 11px;\n}\n\n.node-one { left: 2%; top: 17%; }\n.node-two { right: 1%; top: 25%; }\n.node-three { right: 9%; bottom: 14%; }\n.node-four { left: 3%; bottom: 20%; }\n\n.booking-visual {\n  width: min(690px, 100%);\n  aspect-ratio: 1.22;\n  position: relative;\n}\n\n.calendar-panel {\n  width: 78%;\n  min-height: 340px;\n  padding: 27px;\n  position: absolute;\n  left: 0;\n  top: 0;\n  border: 1px solid rgba(255,255,255,.13);\n  border-radius: 18px;\n  background: #343943;\n  box-shadow: 0 35px 80px rgba(0,0,0,.24);\n}\n\n.calendar-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.calendar-head > span {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n}\n\n.calendar-head small {\n  color: #8f949e;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace, monospace;\n  font-size: 8px;\n  letter-spacing: .1em;\n}\n\n.calendar-head b {\n  font-size: 23px;\n  font-weight: 530;\n}\n\n.calendar-head div {\n  display: flex;\n  gap: 7px;\n}\n\n.calendar-head i {\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid rgba(255,255,255,.12);\n  border-radius: 50%;\n  color: #a9adb4;\n  font-style: normal;\n}\n\n.calendar-days {\n  margin-top: 31px;\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 7px;\n}\n\n.calendar-days span {\n  min-height: 78px;\n  padding: 13px 7px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  border: 1px solid rgba(255,255,255,.09);\n  border-radius: 9px;\n}\n\n.calendar-days small {\n  color: #7f848e;\n  font-size: 7px;\n}\n\n.calendar-days b {\n  font-size: 15px;\n  font-weight: 540;\n}\n\n.calendar-days span.selected {\n  border-color: var(--blue);\n  background: var(--blue);\n}\n\n.calendar-days span.selected small {\n  color: rgba(255,255,255,.7);\n}\n\n.time-slots {\n  margin-top: 25px;\n  display: flex;\n  gap: 7px;\n}\n\n.time-slots span {\n  padding: 10px 13px;\n  border: 1px solid rgba(255,255,255,.1);\n  border-radius: 8px;\n  color: #aeb1b7;\n  font-size: 8px;\n}\n\n.time-slots span.active {\n  border-color: rgba(40,100,255,.6);\n  background: rgba(40,100,255,.16);\n  color: #b7caff;\n}\n\n.handoff-card {\n  width: 49%;\n  padding: 24px;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  border: 1px solid rgba(255,255,255,.18);\n  border-radius: 16px;\n  background: rgba(16,18,22,.9);\n  box-shadow: 0 30px 70px rgba(0,0,0,.35);\n  backdrop-filter: blur(18px);\n}\n\n.handoff-status {\n  color: #a9acb3;\n  font-size: 8px;\n}\n\n.handoff-status i {\n  width: 6px;\n  height: 6px;\n  margin-right: 6px;\n  display: inline-block;\n  border-radius: 50%;\n  background: var(--blue);\n  box-shadow: 0 0 18px rgba(40,100,255,.8);\n}\n\n.handoff-card h4 {\n  margin: 17px 0 22px;\n  font-size: 17px;\n  font-weight: 530;\n}\n\n.handoff-card dl {\n  margin: 0;\n}\n\n.handoff-card dl div {\n  padding: 9px 0;\n  display: flex;\n  justify-content: space-between;\n  border-top: 1px solid rgba(255,255,255,.08);\n  font-size: 8px;\n}\n\n.handoff-card dt {\n  color: #767b85;\n}\n\n.handoff-card dd {\n  margin: 0;\n  color: #cfd1d5;\n}\n\n.handoff-line {\n  height: 1px;\n  margin: 12px 0;\n  display: block;\n  background: rgba(255,255,255,.08);\n}\n\n.handoff-card > small {\n  color: #70757e;\n  font-size: 7px;\n}\n\n.coordinator-visual {\n  width: min(700px, 100%);\n  height: 520px;\n  position: relative;\n  perspective: 1200px;\n}\n\n.interface-layer {\n  position: absolute;\n  border: 1px solid rgba(255,255,255,.13);\n  border-radius: 18px;\n  background: #15171b;\n  box-shadow: 0 35px 90px rgba(0,0,0,.5);\n  transition: transform .1s linear, opacity .1s linear;\n}\n\n.layer-back {\n  width: 72%;\n  height: 62%;\n  left: 13%;\n  top: 4%;\n  padding: 24px;\n  transform: translate3d(\n    calc((1 - var(--demo-progress)) * 110px),\n    calc((1 - var(--demo-progress)) * -55px),\n    -160px\n  ) rotateY(-8deg);\n  opacity: calc(.45 + var(--demo-progress) * .4);\n}\n\n.layer-back > span,\n.layer-middle > span {\n  color: #62666f;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace, monospace;\n  font-size: 8px;\n  letter-spacing: .12em;\n}\n\n.layer-back > i {\n  width: 80%;\n  height: 7px;\n  margin-top: 18px;\n  display: block;\n  border-radius: 4px;\n  background: #262930;\n}\n\n.layer-back > i:nth-of-type(2) { width: 62%; }\n.layer-back > i:nth-of-type(3) { width: 74%; }\n.layer-back > i:nth-of-type(4) { width: 45%; }\n\n.layer-middle {\n  width: 79%;\n  height: 67%;\n  right: 4%;\n  top: 17%;\n  padding: 24px;\n  transform: translate3d(\n    calc((1 - var(--demo-progress)) * -100px),\n    calc((1 - var(--demo-progress)) * -5px),\n    -80px\n  ) rotateY(7deg);\n  opacity: calc(.62 + var(--demo-progress) * .28);\n}\n\n.channel-list {\n  margin-top: 26px;\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 9px;\n}\n\n.channel-list b {\n  min-height: 66px;\n  padding: 14px;\n  display: flex;\n  align-items: flex-end;\n  border: 1px solid rgba(255,255,255,.08);\n  border-radius: 10px;\n  color: #90949c;\n  font-size: 10px;\n  font-weight: 500;\n}\n\n.layer-front {\n  width: 88%;\n  min-height: 390px;\n  left: 2%;\n  bottom: 0;\n  overflow: hidden;\n  transform: translate3d(\n    0,\n    calc((1 - var(--demo-progress)) * 72px),\n    0\n  );\n}\n\n.interface-top {\n  height: 62px;\n  padding: 0 20px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid rgba(255,255,255,.09);\n}\n\n.interface-top > span {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 10px;\n}\n\n.interface-top .brand-mark {\n  transform: scale(.65);\n}\n\n.interface-top small {\n  color: #81858c;\n  font-size: 8px;\n}\n\n.interface-top small i {\n  width: 6px;\n  height: 6px;\n  margin-right: 5px;\n  display: inline-block;\n  border-radius: 50%;\n  background: #26a66b;\n}\n\n.interface-metrics {\n  padding: 18px;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 9px;\n}\n\n.interface-metrics > div {\n  min-height: 112px;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid rgba(255,255,255,.08);\n  border-radius: 10px;\n  background: #191b20;\n}\n\n.interface-metrics small {\n  color: #62666f;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace, monospace;\n  font-size: 7px;\n}\n\n.interface-metrics b {\n  margin: 12px 0 7px;\n  font-size: 27px;\n  font-weight: 510;\n}\n\n.interface-metrics span {\n  color: #757981;\n  font-size: 8px;\n}\n\n.interface-stream {\n  margin: 0 18px 18px;\n  border: 1px solid rgba(255,255,255,.08);\n  border-radius: 10px;\n}\n\n.interface-stream > span {\n  min-height: 45px;\n  padding: 0 14px;\n  display: grid;\n  grid-template-columns: 7px 1fr auto;\n  align-items: center;\n  gap: 9px;\n  border-bottom: 1px solid rgba(255,255,255,.06);\n}\n\n.interface-stream > span:last-child {\n  border: 0;\n}\n\n.interface-stream i {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--blue);\n}\n\n.interface-stream .text-dot { background: var(--violet); }\n.interface-stream .phone-dot { background: #63a6ff; }\n\n.interface-stream b {\n  color: #a8abb1;\n  font-size: 8px;\n  font-weight: 510;\n}\n\n.interface-stream small {\n  color: #5f636b;\n  font-size: 7px;\n}\n\n.continuity {\n  min-height: 1100px;\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  background: var(--black);\n  color: var(--white);\n}\n\n.continuity::before {\n  content: \"\";\n  width: 700px;\n  height: 700px;\n  position: absolute;\n  right: -160px;\n  top: 50%;\n  transform: translateY(-50%);\n  border-radius: 50%;\n  background: radial-gradient(circle, rgba(40,100,255,.15), transparent 65%);\n}\n\n.continuity-copy {\n  position: relative;\n  z-index: 2;\n}\n\n.continuity-copy h2 {\n  max-width: 1030px;\n  margin: 32px 0 30px;\n  font-size: clamp(62px, 7.2vw, 108px);\n  line-height: .94;\n  font-weight: 500;\n  letter-spacing: -.064em;\n}\n\n.continuity-copy p {\n  max-width: 550px;\n  margin: 0;\n  color: #91949b;\n  font-size: 16px;\n  line-height: 1.7;\n}\n\n.continuity-orbit {\n  width: 720px;\n  height: 720px;\n  position: absolute;\n  right: -120px;\n  top: 50%;\n  transform: translateY(-50%);\n  opacity: .68;\n}\n\n.continuity-orbit > i {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  border: 1px solid rgba(255,255,255,.13);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.ring-a { width: 30%; height: 30%; }\n.ring-b { width: 60%; height: 60%; }\n.ring-c { width: 90%; height: 90%; }\n\n.continuity-orbit > span {\n  width: 110px;\n  height: 110px;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid rgba(40,100,255,.45);\n  border-radius: 50%;\n  background: rgba(40,100,255,.08);\n  color: var(--white);\n  box-shadow: 0 0 80px rgba(40,100,255,.22);\n}\n\n.orbit-label {\n  position: absolute;\n  color: #777b84;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace, monospace;\n  font-size: 8px;\n  letter-spacing: .15em;\n}\n\n.label-web { left: 17%; top: 17%; }\n.label-text { right: 5%; top: 46%; }\n.label-email { left: 3%; bottom: 28%; }\n.label-phone { right: 18%; bottom: 11%; }\n\n.method {\n  padding-top: 160px;\n  padding-bottom: 170px;\n}\n\n.method-intro {\n  display: grid;\n  grid-template-columns: .45fr 1fr .65fr;\n  gap: 40px;\n  align-items: start;\n}\n\n.method-intro h2 {\n  max-width: 620px;\n  margin: 0;\n  font-size: clamp(52px, 5.4vw, 82px);\n  line-height: .96;\n  font-weight: 510;\n  letter-spacing: -.058em;\n}\n\n.method-intro > p {\n  margin: 0;\n  color: #6f7176;\n  font-size: 15px;\n  line-height: 1.7;\n}\n\n.method-steps {\n  margin-top: 110px;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  border-top: 1px solid var(--line);\n}\n\n.method-steps article {\n  min-height: 300px;\n  padding: 28px 38px 10px 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.method-steps article + article {\n  padding-left: 38px;\n  border-left: 1px solid var(--line);\n}\n\n.method-steps article > span {\n  color: var(--blue);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace, monospace;\n  font-size: 9px;\n}\n\n.method-steps h3 {\n  margin: auto 0 17px;\n  font-size: 29px;\n  font-weight: 520;\n  letter-spacing: -.035em;\n}\n\n.method-steps p {\n  max-width: 340px;\n  margin: 0;\n  color: #74767a;\n  font-size: 12px;\n  line-height: 1.7;\n}\n\n.trust {\n  padding: 160px 0;\n  background: var(--white);\n}\n\n.trust-head {\n  display: grid;\n  grid-template-columns: .48fr 1fr .62fr;\n  gap: 40px;\n  align-items: end;\n}\n\n.trust-head h2 {\n  margin: 0;\n  font-size: clamp(52px, 5.3vw, 80px);\n  line-height: .96;\n  font-weight: 510;\n  letter-spacing: -.057em;\n}\n\n.trust-head p {\n  margin: 0;\n  color: #6f7176;\n  font-size: 14px;\n  line-height: 1.7;\n}\n\n.trust-lines {\n  margin-top: 100px;\n  border-top: 1px solid var(--line);\n}\n\n.trust-lines article {\n  min-height: 118px;\n  display: grid;\n  grid-template-columns: 60px .8fr 1.4fr 100px;\n  gap: 30px;\n  align-items: center;\n  border-bottom: 1px solid var(--line);\n}\n\n.trust-lines article > span {\n  color: var(--blue);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace, monospace;\n  font-size: 8px;\n}\n\n.trust-lines h3 {\n  margin: 0;\n  font-size: 19px;\n  font-weight: 540;\n  letter-spacing: -.02em;\n}\n\n.trust-lines p {\n  margin: 0;\n  color: #73757a;\n  font-size: 12px;\n  line-height: 1.6;\n}\n\n.trust-lines b {\n  justify-self: end;\n  color: #a1a2a5;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace, monospace;\n  font-size: 8px;\n  letter-spacing: .12em;\n}\n\n.integration-editorial {\n  margin-top: 140px;\n  padding-top: 50px;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 100px;\n  border-top: 1px solid var(--line);\n}\n\n.integration-editorial h3 {\n  max-width: 580px;\n  margin: 22px 0 0;\n  font-size: 38px;\n  line-height: 1.04;\n  font-weight: 510;\n  letter-spacing: -.045em;\n}\n\n.integration-list {\n  display: flex;\n  flex-wrap: wrap;\n  align-content: flex-start;\n  gap: 9px;\n}\n\n.integration-list span {\n  padding: 12px 16px;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  color: #5e6065;\n  font-size: 10px;\n}\n\n.integration-list span:nth-child(3n + 1) {\n  border-color: rgba(40,100,255,.3);\n  color: var(--blue);\n}\n\n.use-cases {\n  padding-top: 150px;\n  padding-bottom: 160px;\n}\n\n.use-case-grid {\n  margin-top: 45px;\n  display: grid;\n  grid-template-columns: 1.35fr .65fr;\n  gap: 120px;\n  align-items: start;\n}\n\n.use-case-grid h2 {\n  max-width: 820px;\n  margin: 0;\n  font-size: clamp(54px, 6vw, 90px);\n  line-height: .95;\n  font-weight: 510;\n  letter-spacing: -.062em;\n}\n\n.use-case-grid > div {\n  border-top: 1px solid var(--line);\n}\n\n.use-case-grid p {\n  margin: 0;\n  padding: 16px 0;\n  border-bottom: 1px solid var(--line);\n  color: #616368;\n  font-size: 12px;\n}\n\n.final-scene {\n  min-height: 950px;\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  background: var(--black);\n  color: var(--white);\n  text-align: center;\n}\n\n.final-light {\n  width: 900px;\n  height: 900px;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  border-radius: 50%;\n  background:\n    radial-gradient(circle, rgba(40,100,255,.17), rgba(115,87,255,.06) 35%, transparent 70%);\n}\n\n.final-content {\n  position: relative;\n  z-index: 1;\n}\n\n.final-content .section-label {\n  color: #8d919a;\n}\n\n.final-content h2 {\n  max-width: 980px;\n  margin: 36px auto 26px;\n  font-size: clamp(68px, 8vw, 120px);\n  line-height: .91;\n  font-weight: 500;\n  letter-spacing: -.07em;\n}\n\n.final-content p {\n  max-width: 590px;\n  margin: 0 auto 38px;\n  color: #92959d;\n  font-size: 15px;\n  line-height: 1.7;\n}\n\n.light-button {\n  background: var(--white);\n  color: var(--black);\n  box-shadow: none;\n}\n\n.light-button:hover {\n  background: #e7e7e2;\n}\n\nfooter {\n  padding: 70px 0 26px;\n  background: var(--black);\n  color: var(--white);\n}\n\n.footer-main {\n  padding-bottom: 65px;\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  align-items: start;\n}\n\n.footer-main > p {\n  margin: 0;\n  color: #73767e;\n  font-size: 12px;\n}\n\n.footer-main > div {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 15px;\n  color: #a0a3a9;\n  font-size: 10px;\n}\n\n.footer-base {\n  padding-top: 22px;\n  display: flex;\n  justify-content: space-between;\n  border-top: 1px solid rgba(255,255,255,.1);\n  color: #565961;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace, monospace;\n  font-size: 8px;\n  letter-spacing: .08em;\n  text-transform: uppercase;\n}\n\n@keyframes objectFloat {\n  0%, 100% { transform: translateX(-50%) rotateX(57deg) rotateZ(-2deg) translateY(0); }\n  50% { transform: translateX(-50%) rotateX(57deg) rotateZ(-2deg) translateY(-8px); }\n}\n\n@keyframes scrollTick {\n  0%, 100% { transform: translateY(0); opacity: .2; }\n  50% { transform: translateY(7px); opacity: 1; }\n}\n\n@media (max-width: 1050px) {\n  .story-scene {\n    grid-template-columns: .85fr 1.15fr;\n    gap: 35px;\n  }\n\n  .scene-copy h2 {\n    font-size: 52px;\n  }\n\n  .method-intro,\n  .trust-head {\n    grid-template-columns: .35fr 1fr;\n  }\n\n  .method-intro > p,\n  .trust-head > p {\n    grid-column: 2;\n  }\n\n  .continuity-orbit {\n    opacity: .36;\n  }\n}\n\n@media (max-width: 820px) {\n  .shell {\n    width: min(100% - 32px, 680px);\n  }\n\n  .site-nav {\n    height: 74px;\n  }\n\n  .nav-links {\n    display: none;\n  }\n\n  .nav-action {\n    min-height: 38px;\n    padding: 0 13px;\n  }\n\n  .opening {\n    min-height: auto;\n    padding-top: 85px;\n  }\n\n  .opening h1 {\n    font-size: clamp(55px, 13vw, 82px);\n  }\n\n  .opening > p {\n    font-size: 15px;\n  }\n\n  .opening-object {\n    width: 100%;\n    height: 230px;\n  }\n\n  .object-surface {\n    width: 520px;\n    left: 50%;\n  }\n\n  .scroll-cue {\n    margin-top: 35px;\n  }\n\n  .story {\n    height: auto;\n  }\n\n  .story-stage {\n    height: auto;\n    min-height: 0;\n    position: relative;\n    overflow: visible;\n    background: transparent;\n  }\n\n  .story-atmosphere,\n  .story-meta {\n    display: none;\n  }\n\n  .story-track {\n    width: 100%;\n    display: block;\n    transform: none;\n  }\n\n  .story-scene {\n    width: 100%;\n    height: auto;\n    min-height: 800px;\n    padding: 100px 24px;\n    display: flex;\n    flex-direction: column;\n    gap: 65px;\n  }\n\n  .scene-copy {\n    max-width: 620px;\n  }\n\n  .scene-copy h2 {\n    font-size: clamp(48px, 12vw, 70px);\n  }\n\n  .scene-visual {\n    width: 100%;\n  }\n\n  .scene-light { background: var(--warm); }\n  .scene-mist { background: #e5e7e8; }\n  .scene-dusk { background: #292d35; }\n  .scene-space { background: var(--black); --demo-progress: 1; }\n\n  .continuity {\n    min-height: 850px;\n  }\n\n  .continuity-orbit {\n    width: 560px;\n    height: 560px;\n    right: -310px;\n  }\n\n  .continuity-copy h2 {\n    max-width: 620px;\n    font-size: 64px;\n  }\n\n  .method,\n  .trust,\n  .use-cases {\n    padding-top: 110px;\n    padding-bottom: 110px;\n  }\n\n  .method-intro,\n  .trust-head,\n  .use-case-grid,\n  .integration-editorial {\n    grid-template-columns: 1fr;\n    gap: 35px;\n  }\n\n  .method-intro > p,\n  .trust-head > p {\n    grid-column: auto;\n  }\n\n  .method-steps {\n    margin-top: 75px;\n    grid-template-columns: 1fr;\n  }\n\n  .method-steps article {\n    min-height: 230px;\n    padding: 25px 0 35px;\n  }\n\n  .method-steps article + article {\n    padding-left: 0;\n    border-left: 0;\n    border-top: 1px solid var(--line);\n  }\n\n  .trust-lines article {\n    padding: 25px 0;\n    grid-template-columns: 45px 1fr;\n    gap: 15px;\n  }\n\n  .trust-lines p,\n  .trust-lines b {\n    grid-column: 2;\n    justify-self: start;\n  }\n\n  .integration-editorial {\n    margin-top: 100px;\n  }\n\n  .use-case-grid {\n    margin-top: 35px;\n  }\n\n  .final-scene {\n    min-height: 780px;\n  }\n\n  .final-content h2 {\n    font-size: 72px;\n  }\n}\n\n@media (max-width: 560px) {\n  .brand {\n    font-size: 11px;\n  }\n\n  .nav-action {\n    font-size: 0;\n    gap: 0;\n  }\n\n  .nav-action span {\n    font-size: 13px;\n  }\n\n  .opening {\n    padding-top: 70px;\n  }\n\n  .opening h1 {\n    margin-top: 25px;\n    font-size: 52px;\n  }\n\n  .opening-actions {\n    width: 100%;\n    flex-direction: column;\n    gap: 18px;\n  }\n\n  .primary-button {\n    width: 100%;\n  }\n\n  .opening-object {\n    height: 215px;\n    margin-top: 55px;\n  }\n\n  .object-surface {\n    width: 430px;\n    height: 200px;\n  }\n\n  .message-a { left: 42px; }\n  .message-b { left: 180px; }\n  .message-c { right: 32px; top: 154px; }\n\n  .story-scene {\n    min-height: 720px;\n    padding: 80px 16px;\n    gap: 48px;\n  }\n\n  .scene-copy h2 {\n    font-size: 45px;\n  }\n\n  .scene-copy > p {\n    font-size: 14px;\n  }\n\n  .scene-copy ul {\n    flex-direction: column;\n    gap: 11px;\n  }\n\n  .product-browser {\n    aspect-ratio: .9;\n  }\n\n  .browser-site {\n    padding: 17px;\n  }\n\n  .browser-lines {\n    width: 80%;\n    margin-top: 38px;\n  }\n\n  .agent-window {\n    width: calc(100% - 30px);\n    right: 15px;\n    bottom: 14px;\n  }\n\n  .qualification-visual {\n    transform: scale(.92);\n  }\n\n  .signal-node {\n    min-width: 125px;\n    padding: 10px;\n  }\n\n  .node-one { left: -2%; }\n  .node-two { right: -5%; }\n  .node-three { right: -2%; }\n  .node-four { left: -3%; }\n\n  .booking-visual {\n    aspect-ratio: .9;\n  }\n\n  .calendar-panel {\n    width: 100%;\n    min-height: 320px;\n    padding: 18px;\n  }\n\n  .handoff-card {\n    width: 75%;\n    right: -2%;\n  }\n\n  .calendar-days span {\n    min-height: 65px;\n  }\n\n  .time-slots span {\n    padding: 9px;\n  }\n\n  .coordinator-visual {\n    height: 430px;\n  }\n\n  .layer-back,\n  .layer-middle {\n    display: none;\n  }\n\n  .layer-front {\n    width: 100%;\n    left: 0;\n  }\n\n  .interface-metrics {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .interface-metrics > div:nth-child(3) {\n    display: none;\n  }\n\n  .continuity {\n    min-height: 760px;\n  }\n\n  .continuity-copy h2,\n  .method-intro h2,\n  .trust-head h2,\n  .use-case-grid h2 {\n    font-size: 48px;\n  }\n\n  .continuity-copy p {\n    font-size: 14px;\n  }\n\n  .trust-lines article {\n    grid-template-columns: 32px 1fr;\n  }\n\n  .integration-editorial h3 {\n    font-size: 31px;\n  }\n\n  .final-content h2 {\n    font-size: 55px;\n  }\n\n  .footer-main {\n    grid-template-columns: 1fr;\n    gap: 35px;\n  }\n\n  .footer-main > div {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .footer-base span:last-child {\n    display: none;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  html {\n    scroll-behavior: auto;\n  }\n\n  *,\n  *::before,\n  *::after {\n    animation-duration: .001ms !important;\n    animation-iteration-count: 1 !important;\n    scroll-behavior: auto !important;\n    transition-duration: .001ms !important;\n  }\n\n  .story {\n    height: auto;\n  }\n\n  .story-stage {\n    height: auto;\n    min-height: 0;\n    position: relative;\n    overflow: visible;\n  }\n\n  .story-atmosphere,\n  .story-meta {\n    display: none;\n  }\n\n  .story-track {\n    width: 100%;\n    display: block;\n    transform: none;\n  }\n\n  .story-scene {\n    width: 100%;\n    min-height: 820px;\n  }\n\n  .scene-space {\n    --demo-progress: 1;\n  }\n}\n\n\n\/* Elementor canvas and HTML-widget reset *\/\n.elementor-widget-html,\n.elementor-widget-html > .elementor-widget-container {\n  width: 100%;\n}\n.elementor-widget-html .blckspace-elementor-root {\n  width: 100%;\n  overflow: hidden;\n}\n.blckspace-elementor-root button,\n.blckspace-elementor-root input,\n.blckspace-elementor-root textarea,\n.blckspace-elementor-root select {\n  font: inherit;\n}\n<\/style><div class=\"blckspace-elementor-root\"><main id=\"top\"><nav class=\"site-nav shell\" aria-label=\"Main navigation\"><a class=\"brand\" href=\"#top\" aria-label=\"Blckspace AI home\"><span class=\"brand-mark\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><\/span><span>BLCKSPACE <b>AI<\/b><\/span><\/a><div class=\"nav-links\"><a href=\"#product\">Product<\/a><a href=\"#approach\">How it works<\/a><a href=\"#trust\">Trust<\/a><\/div><a class=\"nav-action\" href=\"#contact\">Book a discovery call <span aria-hidden=\"true\">\u2197<\/span><\/a><\/nav><section class=\"opening shell\"><div class=\"opening-kicker\"><span><\/span> Managed AI customer engagement<\/div><h1>An AI front desk that never leaves a lead waiting.<\/h1><p>Blckspace builds, trains, and manages AI agents that answer, qualify, schedule, and follow up\u2014across web, text, email, and phone.<\/p><div class=\"opening-actions\"><a class=\"primary-button\" href=\"#contact\">Meet your AI agent <span aria-hidden=\"true\">\u2197<\/span><\/a><a class=\"quiet-link\" href=\"#product\">Explore the product <span>\u2193<\/span><\/a><\/div><div class=\"opening-object\" aria-hidden=\"true\"><div class=\"object-halo\"><\/div><div class=\"object-surface\"><div class=\"object-brand\"><span class=\"brand-mark\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><\/span><span>BLCKSPACE \/ ACTIVE<\/span><\/div><div class=\"object-message message-a\">A new visitor has a question.<\/div><div class=\"object-message message-b\">Intent understood.<\/div><div class=\"object-message message-c\"><i><\/i> Appointment booked.<\/div><div class=\"object-axis axis-x\"><\/div><div class=\"object-axis axis-y\"><\/div><\/div><\/div><div class=\"scroll-cue\"><i><\/i> Scroll to move through the product<\/div><\/section><section class=\"story\" id=\"product\" aria-label=\"How the Blckspace AI product works\"><div class=\"story-stage\"><div class=\"story-atmosphere\" aria-hidden=\"true\"><\/div><div class=\"story-meta\"><span>THE PRODUCT STORY<\/span><div class=\"scene-nav\" aria-label=\"Product scenes\"><button type=\"button\" aria-label=\"Go to scene 1\" aria-current=\"step\"><\/button><button type=\"button\" aria-label=\"Go to scene 2\"><\/button><button type=\"button\" aria-label=\"Go to scene 3\"><\/button><button type=\"button\" aria-label=\"Go to scene 4\"><\/button><\/div><span>01<!-- --> \/ 04<\/span><\/div><div class=\"story-track\"><article class=\"story-scene scene-light\"><div class=\"scene-copy\"><span class=\"scene-number\">01 \u00b7 WEBSITE<\/span><h2>Be there the moment interest appears.<\/h2><p>Your Website AI Agent welcomes every visitor, answers from approved business knowledge, and turns curiosity into a real conversation.<\/p><ul><li>24\/7 answers<\/li><li>Brand-trained voice<\/li><li>Human handoff<\/li><\/ul><\/div><div class=\"scene-visual\"><div class=\"product-browser\" aria-label=\"Website AI Agent example\"><div class=\"browser-chrome\"><span><i><\/i><i><\/i><i><\/i><\/span><small>yourbusiness.com<\/small><b>Secure<\/b><\/div><div class=\"browser-site\"><div class=\"browser-brand\">YOUR BUSINESS<\/div><div class=\"browser-lines\"><i><\/i><i><\/i><i><\/i><\/div><div class=\"agent-window\"><div class=\"agent-top\"><span class=\"agent-avatar\"><span class=\"brand-mark\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><\/span><\/span><span><b>AI Assistant<\/b><small><i><\/i> Online now<\/small><\/span><button type=\"button\" aria-label=\"Close demonstration\">\u00d7<\/button><\/div><div class=\"agent-messages\"><p>Hi\u2014what can I help you accomplish today?<\/p><p class=\"visitor\">I&#x27;d like to schedule a consultation.<\/p><p>I can help with that. First, what service are you interested in?<\/p><\/div><div class=\"agent-input\"><span>Type a message\u2026<\/span><b>\u2191<\/b><\/div><\/div><\/div><\/div><\/div><\/article><article class=\"story-scene scene-mist\"><div class=\"scene-copy\"><span class=\"scene-number\">02 \u00b7 UNDERSTAND<\/span><h2>Find the signal inside every question.<\/h2><p>The agent asks what your team needs to know\u2014service, timing, fit, and intent\u2014without making the conversation feel like a form.<\/p><ul><li>Natural qualification<\/li><li>Consent-aware capture<\/li><li>Clear lead context<\/li><\/ul><\/div><div class=\"scene-visual\"><div class=\"qualification-visual\" aria-label=\"AI lead qualification flow\"><div class=\"signal-orbit orbit-one\"><\/div><div class=\"signal-orbit orbit-two\"><\/div><div class=\"signal-core\"><span class=\"brand-mark\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><\/span><span>Understanding intent<\/span><\/div><div class=\"signal-node node-one\"><i><\/i> Service needed<b>Qualified<\/b><\/div><div class=\"signal-node node-two\"><i><\/i> Timing<b>This week<\/b><\/div><div class=\"signal-node node-three\"><i><\/i> Location<b>In range<\/b><\/div><div class=\"signal-node node-four\"><i><\/i> Contact consent<b>Confirmed<\/b><\/div><\/div><\/div><\/article><article class=\"story-scene scene-dusk\"><div class=\"scene-copy\"><span class=\"scene-number\">03 \u00b7 ACT<\/span><h2>Move from conversation to commitment.<\/h2><p>Once a lead is ready, the agent checks availability, books the next step, and hands your team a complete summary.<\/p><ul><li>Live scheduling<\/li><li>Owner notifications<\/li><li>CRM-ready handoff<\/li><\/ul><\/div><div class=\"scene-visual\"><div class=\"booking-visual\" aria-label=\"Appointment booking and handoff\"><div class=\"calendar-panel\"><div class=\"calendar-head\"><span><small>OCT<\/small><b>14\u201318<\/b><\/span><div><i>\u2039<\/i><i>\u203a<\/i><\/div><\/div><div class=\"calendar-days\"><span class=\"\"><small>MON<\/small><b>14<\/b><\/span><span class=\"\"><small>TUE<\/small><b>15<\/b><\/span><span class=\"selected\"><small>WED<\/small><b>16<\/b><\/span><span class=\"\"><small>THU<\/small><b>17<\/b><\/span><span class=\"\"><small>FRI<\/small><b>18<\/b><\/span><\/div><div class=\"time-slots\"><span>9:00<\/span><span class=\"active\">10:30<\/span><span>1:00<\/span><span>2:30<\/span><\/div><\/div><div class=\"handoff-card\"><div class=\"handoff-status\"><i><\/i> Appointment booked<\/div><h4>Consultation \u00b7 Wed 10:30 AM<\/h4><dl><div><dt>Lead<\/dt><dd>Qualified<\/dd><\/div><div><dt>Need<\/dt><dd>Website AI Agent<\/dd><\/div><div><dt>Owner<\/dt><dd>Notified<\/dd><\/div><\/dl><span class=\"handoff-line\"><\/span><small>Full conversation summary attached<\/small><\/div><\/div><\/div><\/article><article class=\"story-scene scene-space\"><div class=\"scene-copy\"><span class=\"scene-number\">04 \u00b7 COORDINATE<\/span><h2>One intelligence across every channel.<\/h2><p>Start on the website. Add text, email, and phone when you are ready\u2014while one managed AI Coordinator keeps the context connected.<\/p><ul><li>One conversation history<\/li><li>Managed improvement<\/li><li>FlowGuard monitoring<\/li><\/ul><\/div><div class=\"scene-visual\"><div class=\"coordinator-visual\" aria-label=\"Unified AI Coordinator interface\"><div class=\"interface-layer layer-back\"><span>KNOWLEDGE<\/span><i><\/i><i><\/i><i><\/i><i><\/i><\/div><div class=\"interface-layer layer-middle\"><span>CHANNELS<\/span><div class=\"channel-list\"><b>Web<\/b><b>Text<\/b><b>Email<\/b><b>Phone<\/b><\/div><\/div><div class=\"interface-layer layer-front\"><div class=\"interface-top\"><span><span class=\"brand-mark\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><\/span> Blckspace Coordinator<\/span><small><i><\/i> Live<\/small><\/div><div class=\"interface-metrics\"><div><small>CONVERSATIONS<\/small><b>128<\/b><span>this month<\/span><\/div><div><small>QUALIFIED<\/small><b>84%<\/b><span>of new inquiries<\/span><\/div><div><small>RESPONSE<\/small><b>&lt;5s<\/b><span>average<\/span><\/div><\/div><div class=\"interface-stream\"><span><i class=\"web-dot\"><\/i><b>Web inquiry qualified<\/b><small>now<\/small><\/span><span><i class=\"text-dot\"><\/i><b>Text follow-up sent<\/b><small>2m<\/small><\/span><span><i class=\"phone-dot\"><\/i><b>Call summary ready<\/b><small>8m<\/small><\/span><\/div><\/div><\/div><\/div><\/article><\/div><\/div><\/section><section class=\"continuity\" id=\"approach\"><div class=\"continuity-orbit\" aria-hidden=\"true\"><i class=\"ring-a\"><\/i><i class=\"ring-b\"><\/i><i class=\"ring-c\"><\/i><span><span class=\"brand-mark\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><\/span><\/span><b class=\"orbit-label label-web\">WEB<\/b><b class=\"orbit-label label-text\">TEXT<\/b><b class=\"orbit-label label-email\">EMAIL<\/b><b class=\"orbit-label label-phone\">PHONE<\/b><\/div><div class=\"shell continuity-copy\"><span class=\"section-label\">ONE CONTINUOUS EXPERIENCE<\/span><h2>Your customer sees a conversation. Your business sees momentum.<\/h2><p>The channel can change. The context does not. Blckspace keeps every answer, qualification, appointment, and handoff connected.<\/p><\/div><\/section><section class=\"method shell\"><div class=\"method-intro\"><span class=\"section-label\">DONE FOR YOU<\/span><h2>Not another tool to configure.<\/h2><p>We turn your business knowledge into a reliable AI employee\u2014and stay involved after launch.<\/p><\/div><div class=\"method-steps\"><article><span>01<\/span><h3>Teach<\/h3><p>We learn your services, tone, policies, boundaries, and the questions that define a qualified lead.<\/p><\/article><article><span>02<\/span><h3>Connect<\/h3><p>We connect your agent to the website, calendar, notifications, and customer systems you already use.<\/p><\/article><article><span>03<\/span><h3>Improve<\/h3><p>We review real conversations, refine behavior, and keep the agent aligned as your business changes.<\/p><\/article><\/div><\/section><section class=\"trust\" id=\"trust\"><div class=\"shell\"><div class=\"trust-head\"><span class=\"section-label\">INTELLIGENCE WITH BOUNDARIES<\/span><h2>Built to act.<br\/>Designed to stay in bounds.<\/h2><p>Every agent is grounded in approved knowledge, limited to approved actions, and backed by a clear human handoff.<\/p><\/div><div class=\"trust-lines\"><article><span>01<\/span><h3>Approved knowledge<\/h3><p>Your agent answers from the business information you choose\u2014not the open internet.<\/p><b>CONTROLLED<\/b><\/article><article><span>02<\/span><h3>Defined actions<\/h3><p>Scheduling, lead capture, and follow-up happen only through the pathways you approve.<\/p><b>CONNECTED<\/b><\/article><article><span>03<\/span><h3>Human handoff<\/h3><p>When a request is sensitive, unusual, or uncertain, your agent pauses and brings in your team.<\/p><b>ESCALATED<\/b><\/article><article><span>04<\/span><h3>Visible performance<\/h3><p>Conversation history and lead context make it clear what happened and what should happen next.<\/p><b>TRACEABLE<\/b><\/article><\/div><div class=\"integration-editorial\"><div><span class=\"section-label\">FITS YOUR STACK<\/span><h3>Connected to the tools that already run your business.<\/h3><\/div><div class=\"integration-list\" aria-label=\"Supported integration categories\"><span>WordPress<\/span><span>Elementor<\/span><span>Calendars<\/span><span>CRM<\/span><span>Zapier<\/span><span>n8n<\/span><span>Telnyx<\/span><\/div><\/div><\/div><\/section><section class=\"use-cases shell\"><span class=\"section-label\">BUILT FOR HIGH-VALUE CONVERSATIONS<\/span><div class=\"use-case-grid\"><h2>For teams where one missed inquiry can mean one missed customer.<\/h2><div><p>Home services<\/p><p>Professional services<\/p><p>Real estate<\/p><p>Automotive<\/p><p>Marketing agencies<\/p><p>Appointment-driven businesses<\/p><\/div><\/div><\/section><section class=\"final-scene\" id=\"contact\"><div class=\"final-light\" aria-hidden=\"true\"><\/div><div class=\"shell final-content\"><span class=\"section-label\">START WITH THE WEBSITE AGENT<\/span><h2>Make the next conversation count.<\/h2><p>We&#x27;ll design the agent, train it on your business, connect it to the right actions, and manage it with you.<\/p><a class=\"primary-button light-button\" href=\"mailto:hello@blckspaceai.com?subject=Blckspace%20AI%20discovery%20call\">Book a discovery call <span aria-hidden=\"true\">\u2197<\/span><\/a><\/div><\/section><footer><div class=\"shell footer-main\"><a class=\"brand\" href=\"#top\"><span class=\"brand-mark\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><\/span><span>BLCKSPACE <b>AI<\/b><\/span><\/a><p>Managed AI agents for customer conversations.<\/p><div><a href=\"#product\">Product<\/a><a href=\"#approach\">How it works<\/a><a href=\"#trust\">Trust<\/a><a href=\"mailto:hello@blckspaceai.com\">Contact<\/a><\/div><\/div><div class=\"shell footer-base\"><span>\u00a9 2026 Blckspace AI<\/span><span>Every lead answered.<\/span><\/div><\/footer><\/main><\/div>\n<script>\n(() => {\n  const root = document.querySelector(\".blckspace-elementor-root\");\n  if (!root || root.dataset.scrollReady === \"true\") return;\n  root.dataset.scrollReady = \"true\";\n  const section = root.querySelector(\".story\");\n  const stage = root.querySelector(\".story-stage\");\n  const buttons = Array.from(root.querySelectorAll(\".scene-nav button\"));\n  const counter = root.querySelector(\".story-meta > span:last-child\");\n  if (!section || !stage) return;\n  let frame = 0;\n  let active = 0;\n  const update = () => {\n    frame = 0;\n    if (window.matchMedia(\"(max-width: 820px), (prefers-reduced-motion: reduce)\").matches) {\n      stage.style.setProperty(\"--story-progress\", \"0\");\n      return;\n    }\n    const rect = section.getBoundingClientRect();\n    const distance = Math.max(1, section.offsetHeight - window.innerHeight);\n    const progress = Math.min(1, Math.max(0, -rect.top \/ distance));\n    const next = Math.min(3, Math.round(progress * 3));\n    stage.style.setProperty(\"--story-progress\", progress.toFixed(4));\n    if (next !== active) {\n      active = next;\n      buttons.forEach((button, index) => {\n        if (index === active) button.setAttribute(\"aria-current\", \"step\");\n        else button.removeAttribute(\"aria-current\");\n      });\n      if (counter) counter.textContent = String(active + 1).padStart(2, \"0\") + \" \/ 04\";\n    }\n  };\n  const requestUpdate = () => {\n    if (!frame) frame = window.requestAnimationFrame(update);\n  };\n  buttons.forEach((button, index) => button.addEventListener(\"click\", () => {\n    const distance = section.offsetHeight - window.innerHeight;\n    window.scrollTo({\n      top: section.offsetTop + (distance * index) \/ 3,\n      behavior: \"smooth\"\n    });\n  }));\n  update();\n  window.addEventListener(\"scroll\", requestUpdate, { passive: true });\n  window.addEventListener(\"resize\", requestUpdate);\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>BLCKSPACE AIProductHow it worksTrustBook a discovery call \u2197 Managed AI customer engagement An AI front desk that never leaves a lead waiting. Blckspace builds, trains, and manages AI agents that answer, qualify, schedule, and follow up\u2014across web, text, email, and phone. Meet your AI agent \u2197Explore the product \u2193BLCKSPACE \/ ACTIVEA new visitor has a &hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_genesis_block_theme_hide_title":false,"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry","post","without-featured-image"],"featured_image_src":null,"featured_image_src_square":null,"_links":{"self":[{"href":"https:\/\/blckspaceai.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blckspaceai.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blckspaceai.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blckspaceai.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blckspaceai.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":4,"href":"https:\/\/blckspaceai.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/blckspaceai.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/blckspaceai.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}