{"id":60,"date":"2026-06-10T19:12:22","date_gmt":"2026-06-10T19:12:22","guid":{"rendered":"https:\/\/newcyber.cyberneticfinds.online\/?page_id=60"},"modified":"2026-06-10T19:15:56","modified_gmt":"2026-06-10T19:15:56","slug":"demo-2","status":"publish","type":"page","link":"https:\/\/newcyber.cyberneticfinds.online\/demo-2\/demo-2\/","title":{"rendered":"demo 2"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n:root {\n  --bg-dark: #040711; \/* Deep tactical navy\/black *\/\n  --accent-gold: #c6a454;\n  --accent-blue: rgba(0, 112, 224, 0.25); \/* Enhanced visibility for the grid lines *\/\n  --text-main: #f9fafb;\n  --text-muted: #d1d5db;\n}\n\n\/* Force breakout from standard WordPress layout constraints *\/\n.investigator-hero.full-bleed {\n  position: relative;\n  width: 100vw;\n  left: 50%;\n  right: 50%;\n  margin-left: -50vw;\n  margin-right: -50vw;\n  min-height: 95vh; \n  display: flex;\n  align-items: center;\n  background-color: var(--bg-dark);\n  overflow: hidden;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n}\n\n\/* Blue Blueprint Grid Layer - Kept at z-index 1 *\/\n.hero-grid {\n  position: absolute;\n  top: 0; left: 0; width: 100%; height: 100%;\n  background-size: 50px 50px;\n  background-image: \n    linear-gradient(to right, var(--accent-blue) 1px, transparent 1px),\n    linear-gradient(to bottom, var(--accent-blue) 1px, transparent 1px);\n  z-index: 1;\n  pointer-events: none;\n  transform: scale(1.05);\n  transition: transform 0.3s cubic-bezier(0.1, 0.8, 0.3, 1);\n}\n\n\/* Ambient glow to separate text from background grid *\/\n.hero-ambient-glow {\n  position: absolute;\n  top: 0; left: 0; width: 100%; height: 100%;\n  background: radial-gradient(circle at 20% 50%, rgba(0, 82, 204, 0.15) 0%, transparent 60%);\n  z-index: 2;\n  pointer-events: none;\n}\n\n\/* Vehicle wrapper - z-index 3 handles the stacking overlay cleanly *\/\n.hero-image-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 3;\n  mix-blend-mode: screen; \/* Allows the underlying blue grid to shine through dark spaces *\/\n}\n\n.hero-vehicles-bg {\n  width: 100%;\n  height: 100%;\n  object-fit: cover; \n  object-position: right 65%; \/* Pins vehicles slightly right to give text room *\/\n  display: block;\n  opacity: 0.85;\n}\n\n\/* Full screen interactive spotlight mask (OPTIMIZED FOR TRANSPARENCY) *\/\n.hero-light-mask {\n  position: absolute;\n  top: 0; left: 0; width: 100%; height: 100%;\n  pointer-events: none;\n  z-index: 4;\n  background-image: \n    \/* Eased left and right gradients to let more image reveal naturally *\/\n    linear-gradient(to right, rgba(4, 7, 17, 0.90) 25%, rgba(4, 7, 17, 0.2) 60%, rgba(4, 7, 17, 0.75) 100%),\n    \/* Eased out ambient darkness from 0.98 to 0.80 so the dark fleet is visible *\/\n    radial-gradient(circle 280px at var(--mouse-x, 75%) var(--mouse-y, 50%), \n      rgba(255, 255, 255, 0.12) 0%, \n      rgba(4, 7, 17, 0.80) 100%);\n}\n\n\/* Document grid alignment wrapper *\/\n.hero-container {\n  width: 100%;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 6rem 2rem;\n  z-index: 5; \n  position: relative;\n}\n\n.hero-content {\n  max-width: 620px; \n}\n\n.badge {\n  display: inline-block;\n  padding: 0.5rem 1rem;\n  background: rgba(198, 164, 84, 0.1);\n  border: 1px solid var(--accent-gold);\n  color: var(--accent-gold);\n  border-radius: 4px;\n  font-size: 0.8rem;\n  text-transform: uppercase;\n  letter-spacing: 1.5px;\n  font-weight: 700;\n  margin-bottom: 2rem;\n}\n\n.hero-content h1 {\n  font-size: 4rem;\n  font-weight: 900;\n  line-height: 1.1;\n  margin: 0 0 1.5rem 0;\n  letter-spacing: -0.02em;\n}\n\n.highlight {\n  color: #fff;\n  background: linear-gradient(120deg, #fff, var(--accent-gold));\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.hero-content p {\n  color: var(--text-muted);\n  font-size: 1.25rem;\n  line-height: 1.6;\n  margin-bottom: 3rem;\n}\n\n.hero-actions {\n  display: flex;\n  gap: 1.25rem;\n}\n\n.btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 1rem 2.25rem;\n  font-size: 1rem;\n  font-weight: 700;\n  border-radius: 4px;\n  text-decoration: none;\n  transition: all 0.3s ease;\n}\n\n.btn-primary {\n  background-color: var(--accent-gold);\n  color: #000;\n}\n\n.btn-primary:hover {\n  background-color: #d8b668;\n  transform: translateY(-2px);\n  box-shadow: 0 8px 24px rgba(198, 164, 84, 0.3);\n}\n\n.btn-secondary {\n  background-color: rgba(4, 7, 17, 0.6);\n  color: #fff;\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  backdrop-filter: blur(4px);\n}\n\n\/* ==========================================================================\n   MOBILE & TABLET OPTIMIZATIONS\n   ========================================================================== *\/\n@media (max-width: 992px) {\n  .hero-vehicles-bg {\n    object-position: center 75%; \/* Lower position looks much better on tablets *\/\n  }\n}\n\n@media (max-width: 768px) {\n  .investigator-hero.full-bleed {\n    min-height: auto;\n    padding-top: 80px;\n    padding-bottom: 40px;\n  }\n  \n  .hero-container {\n    padding: 2rem 1.5rem;\n  }\n  \n  .hero-content {\n    max-width: 100%;\n    text-align: center;\n  }\n  \n  .hero-content h1 { \n    font-size: 2.5rem; \n    line-height: 1.2;\n  }\n  \n  .hero-content p { \n    font-size: 1.1rem; \n    margin-bottom: 2rem;\n  }\n  \n  .hero-actions { \n    flex-direction: column; \n    gap: 1rem;\n  }\n  \n  .btn { \n    width: 100%; \n    justify-content: center; \n    padding: 0.85rem 1.5rem;\n  }\n\n  \/* Deactive mouse mask styling on mobile, deploy looping automated pulse scanning graphic (OPTIMIZED FOR TRANSPARENCY) *\/\n  .hero-light-mask {\n    animation: tacticalScan 8s infinite linear;\n    background-image: \n      linear-gradient(to bottom, rgba(4, 7, 17, 0.80) 0%, rgba(4, 7, 17, 0.15) 50%, rgba(4, 7, 17, 0.85) 100%),\n      radial-gradient(circle 180px at var(--scan-x, 50%) var(--scan-y, 65%), \n        rgba(255, 255, 255, 0.15) 0%, \n        rgba(4, 7, 17, 0.80) 100%);\n  }\n}\n\n\/* Automated detective scanning animation tracking across the cars on mobile screens *\/\n@keyframes tacticalScan {\n  0% { --scan-x: 20%; --scan-y: 65%; }\n  33% { --scan-x: 80%; --scan-y: 70%; }\n  66% { --scan-x: 50%; --scan-y: 60%; }\n  100% { --scan-x: 20%; --scan-y: 65%; }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener('DOMContentLoaded', () => {\n  const mask = document.getElementById('heroLight');\n  const grid = document.getElementById('heroGrid');\n  const section = mask.closest('.investigator-hero');\n\n  \/\/ Kill mouse-tracking logic on touch-enabled mobile devices to safe-keep performance loops\n  if (window.matchMedia(\"(min-width: 769px)\").matches) {\n    section.addEventListener('mousemove', (e) => {\n      const sectionRect = section.getBoundingClientRect();\n      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n      const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;\n      \n      const sectionTop = sectionRect.top + scrollTop;\n      const sectionLeft = sectionRect.left + scrollLeft;\n      \n      const x = e.pageX - sectionLeft;\n      const y = e.pageY - sectionTop;\n      \n      \/\/ Update spotlight positions explicitly anchored to user pointer variables\n      mask.style.setProperty('--mouse-x', `${x}px`);\n      mask.style.setProperty('--mouse-y', `${y}px`);\n\n      \/\/ Gentle counter-drift parallax action on the blueprint design lines\n      const driftX = (x - sectionRect.width \/ 2) * -0.012;\n      const driftY = (y - sectionRect.height \/ 2) * -0.012;\n      grid.style.transform = `scale(1.05) translate(${driftX}px, ${driftY}px)`;\n    });\n  }\n});\n<\/script>\n\n<section class=\"investigator-hero full-bleed\">\n  <!-- Dynamic Blue Tactical Grid (Now structurally layered correctly) -->\n  <div class=\"hero-grid\" id=\"heroGrid\"><\/div>\n  \n  <!-- Ambient background glow behind the text -->\n  <div class=\"hero-ambient-glow\"><\/div>\n  \n  <!-- The full-width image container with blending rules applied -->\n  <div class=\"hero-image-container\">\n    <img decoding=\"async\" src=\"https:\/\/newcyber.cyberneticfinds.online\/wp-content\/uploads\/2026\/06\/Untitled-design-2026-06-10T135327.124.png\" alt=\"First Responder Vehicles\" class=\"hero-vehicles-bg\">\n    <!-- The interactive spotlight mask overlay -->\n    <div class=\"hero-light-mask\" id=\"heroLight\"><\/div>\n  <\/div>\n\n  <!-- Content layer -->\n  <div class=\"hero-container\">\n    <div class=\"hero-content\">\n      <span class=\"badge\">A Fellow First Responder in Your Corner<\/span>\n      <h1>Secure The Future <br><span class=\"highlight\">You Risk Every Day<\/span><\/h1>\n      <p>Bulletproof financial planning and wealth management for police, fire, and EMS. Spearheaded by a detective who investigates the market to protect your hard-earned legacy.<\/p>\n      \n      <div class=\"hero-actions\">\n        <a href=\"#contact\" class=\"btn btn-primary\">\n          <span>Schedule a Briefing<\/span>\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\n        <\/a>\n        <a href=\"#services\" class=\"btn btn-secondary\">Explore the Strategy<\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>A Fellow First Responder in Your Corner Secure The Future You Risk Every Day Bulletproof financial planning and wealth management [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-60","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/newcyber.cyberneticfinds.online\/demo-2\/wp-json\/wp\/v2\/pages\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/newcyber.cyberneticfinds.online\/demo-2\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/newcyber.cyberneticfinds.online\/demo-2\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/newcyber.cyberneticfinds.online\/demo-2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/newcyber.cyberneticfinds.online\/demo-2\/wp-json\/wp\/v2\/comments?post=60"}],"version-history":[{"count":3,"href":"https:\/\/newcyber.cyberneticfinds.online\/demo-2\/wp-json\/wp\/v2\/pages\/60\/revisions"}],"predecessor-version":[{"id":63,"href":"https:\/\/newcyber.cyberneticfinds.online\/demo-2\/wp-json\/wp\/v2\/pages\/60\/revisions\/63"}],"wp:attachment":[{"href":"https:\/\/newcyber.cyberneticfinds.online\/demo-2\/wp-json\/wp\/v2\/media?parent=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}