{
  "version": "0.4",
  "title": "TeamRion - Growth Diagnostic Quiz",
  "type": "page",
  "content": [
    {
      "id": "tr_xh2xt62",
      "elType": "container",
      "isInner": false,
      "settings": {
        "content_width": "full",
        "padding": {
          "unit": "px",
          "top": "0",
          "right": "0",
          "bottom": "0",
          "left": "0",
          "isLinked": true
        },
        "margin": {
          "unit": "px",
          "top": "0",
          "right": "0",
          "bottom": "0",
          "left": "0",
          "isLinked": true
        },
        "background_background": "classic",
        "background_color": "#e0e5ec"
      },
      "elements": [
        {
          "id": "tr_widget_xcqskp9",
          "elType": "widget",
          "isInner": false,
          "widgetType": "html",
          "settings": {
            "html": "\n<div class=\"teamrion-elementor-wrapper\">\n  <style>\n/* ==========================================================================\n   TeamRion — Industrial Skeuomorphism & Growth Engine Design System\n   Elementor Pro Compatible Tokens & Shared Neumorphic CSS Classes\n   ========================================================================== */\n\n:root {\n  /* Chassis & Neutral Surfaces (Elementor Global Colors) */\n  --chassis-bg: #e0e5ec;\n  --panel-bg: #f0f2f5;\n  --recessed-bg: #d1d9e6;\n  --surface-white: #ffffff;\n  \n  /* Text Tokens */\n  --text-primary: #2d3436;\n  --text-muted: #4a5568;\n  --text-dim: #718096;\n  \n  /* Accent & Interactive Safety Orange */\n  --accent-orange: #ff4757;\n  --accent-orange-hover: #e83848;\n  --accent-orange-light: #ff6b81;\n  --accent-glow: rgba(255, 71, 87, 0.6);\n  --accent-fg: #ffffff;\n  \n  /* Status Colors */\n  --status-green: #22c55e;\n  --status-green-glow: rgba(34, 197, 94, 0.7);\n  --status-cyan: #06b6d4;\n  --status-amber: #f59e0b;\n  \n  /* Shadows & Borders */\n  --shadow-dark: #babecc;\n  --shadow-light: #ffffff;\n  --border-dark: #a3b1c6;\n  --border-light: #ffffff;\n  \n  /* Radii */\n  --radius-sm: 4px;\n  --radius-md: 8px;\n  --radius-lg: 16px;\n  --radius-xl: 24px;\n  --radius-2xl: 32px;\n  --radius-full: 9999px;\n  \n  /* Physics & Mechanical Transitions */\n  --ease-mechanical: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);\n  --transition-fast: 150ms var(--ease-mechanical);\n  --transition-card: 300ms var(--ease-smooth);\n}\n\n/* Base Body Styles */\nbody {\n  background-color: var(--chassis-bg);\n  color: var(--text-primary);\n  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  min-height: 100vh;\n  overflow-x: hidden;\n  background-image: \n    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.7) 0%, transparent 40%),\n    radial-gradient(circle at 90% 90%, rgba(186, 190, 204, 0.4) 0%, transparent 50%);\n  background-attachment: fixed;\n}\n\n.font-mono-tech {\n  font-family: 'JetBrains Mono', 'Roboto Mono', monospace;\n}\n\n/* Embossed Hero Heading Drop-Shadow */\n.hero-embossed-text {\n  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9), -1px -1px 0 rgba(0, 0, 0, 0.08);\n}\n\n/* ==========================================================================\n   Neumorphic Elevation Hierarchy\n   ========================================================================== */\n\n/* Level +1: Standard Bolted Panel / Card */\n.shadow-card {\n  box-shadow: 8px 8px 16px #babecc, -8px -8px 16px #ffffff;\n  background-color: var(--panel-bg);\n}\n\n/* Level +2: Elevated / Floating Control */\n.shadow-floating {\n  box-shadow: 12px 12px 24px #babecc, -12px -12px 24px #ffffff, inset 1px 1px 0 rgba(255, 255, 255, 0.8);\n  background-color: var(--panel-bg);\n}\n\n/* Level -1: Depressed / Pressed State */\n.shadow-pressed {\n  box-shadow: inset 6px 6px 12px #babecc, inset -6px -6px 12px #ffffff;\n  background-color: var(--chassis-bg);\n}\n\n/* Level -1: Recessed Screen / Input / Well */\n.shadow-recessed {\n  box-shadow: inset 4px 4px 8px #babecc, inset -4px -4px 8px #ffffff;\n  background-color: var(--recessed-bg);\n}\n\n/* Sharp Technical Bevel */\n.shadow-sharp {\n  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12), -1px -1px 1px rgba(255, 255, 255, 0.8);\n}\n\n/* ==========================================================================\n   LED Glows & Status Animations\n   ========================================================================== */\n\n.led-indicator {\n  display: inline-block;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  position: relative;\n}\n\n.led-glow-orange {\n  background-color: var(--accent-orange);\n  box-shadow: 0 0 10px 2px var(--accent-glow);\n  animation: ledPulseOrange 2.2s infinite ease-in-out;\n}\n\n.led-glow-green {\n  background-color: var(--status-green);\n  box-shadow: 0 0 10px 2px var(--status-green-glow);\n  animation: ledPulseGreen 2s infinite ease-in-out;\n}\n\n.led-glow-cyan {\n  background-color: var(--status-cyan);\n  box-shadow: 0 0 8px 2px rgba(6, 182, 212, 0.7);\n  animation: ledPulseCyan 2.4s infinite ease-in-out;\n}\n\n.led-glow-amber {\n  background-color: var(--status-amber);\n  box-shadow: 0 0 8px 2px rgba(245, 158, 11, 0.7);\n  animation: ledPulseAmber 1.8s infinite ease-in-out;\n}\n\n@keyframes ledPulseOrange {\n  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px 2px rgba(255, 71, 87, 0.7); }\n  50% { opacity: 0.55; transform: scale(0.92); box-shadow: 0 0 3px 1px rgba(255, 71, 87, 0.3); }\n}\n\n@keyframes ledPulseGreen {\n  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px 2px rgba(34, 197, 94, 0.8); }\n  50% { opacity: 0.6; transform: scale(0.92); box-shadow: 0 0 4px 1px rgba(34, 197, 94, 0.3); }\n}\n\n@keyframes ledPulseCyan {\n  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px 2px rgba(6, 182, 212, 0.7); }\n  50% { opacity: 0.5; transform: scale(0.9); box-shadow: 0 0 3px 1px rgba(6, 182, 212, 0.2); }\n}\n\n@keyframes ledPulseAmber {\n  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px 2px rgba(245, 158, 11, 0.7); }\n  50% { opacity: 0.55; transform: scale(0.92); box-shadow: 0 0 3px 1px rgba(245, 158, 11, 0.3); }\n}\n\n/* ==========================================================================\n   Physical Hardware Components & Skeuomorphic Details\n   ========================================================================== */\n\n/* Bolted Module Card */\n.bolted-card {\n  position: relative;\n  background-color: var(--panel-bg);\n  border-radius: var(--radius-lg);\n  box-shadow: 8px 8px 16px #babecc, -8px -8px 16px #ffffff;\n  transition: all 300ms var(--ease-smooth);\n}\n\n.bolted-card:hover {\n  transform: translateY(-4px);\n  box-shadow: 12px 12px 24px #babecc, -12px -12px 24px #ffffff, inset 1px 1px 0 rgba(255, 255, 255, 0.6);\n}\n\n/* Corner Screws (10px diameter, radial brushed metal + engraved cross slot) */\n.screw-head {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #d1d9e6 50%, #a3b1c6 90%, #8b99ac 100%);\n  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.8), inset -1px -1px 1px rgba(0, 0, 0, 0.3), 1px 1px 2px rgba(0, 0, 0, 0.15);\n  pointer-events: none;\n  z-index: 10;\n}\n\n.screw-head::before {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 6px;\n  height: 1px;\n  background-color: #636e72;\n  transform: translate(-50%, -50%) rotate(45deg);\n  box-shadow: 0 0.5px 0.5px rgba(255, 255, 255, 0.5);\n}\n\n.screw-head::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 1px;\n  height: 6px;\n  background-color: #636e72;\n  transform: translate(-50%, -50%) rotate(45deg);\n  box-shadow: 0.5px 0 0.5px rgba(255, 255, 255, 0.5);\n}\n\n.screw-tl { top: 12px; left: 12px; }\n.screw-tr { top: 12px; right: 12px; }\n.screw-bl { bottom: 12px; left: 12px; }\n.screw-br { bottom: 12px; right: 12px; }\n\n/* Vent Slots (3 pill slots top-right) */\n.vent-slots {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  position: absolute;\n  top: 14px;\n  right: 28px;\n}\n\n.vent-slot {\n  width: 22px;\n  height: 4px;\n  border-radius: 2px;\n  background-color: var(--recessed-bg);\n  box-shadow: inset 1px 1px 2px #a3b1c6, inset -1px -1px 2px #ffffff;\n}\n\n/* Punched Hole Detail on Pricing Cards */\n.punched-hole {\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background-color: var(--recessed-bg);\n  box-shadow: inset 2px 2px 4px #9aa7ba, inset -2px -2px 4px #ffffff, 0 1px 1px rgba(255, 255, 255, 0.8);\n  border: 1px solid rgba(163, 177, 198, 0.4);\n  margin: 0 auto 12px auto;\n  position: relative;\n}\n\n.punched-hole::after {\n  content: '';\n  position: absolute;\n  inset: 3px;\n  border-radius: 50%;\n  background: radial-gradient(circle, #b0bccf 0%, #8795ab 100%);\n  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4);\n}\n\n/* Masking Tape / Sticker Banner Detail */\n.masking-tape {\n  position: relative;\n  display: inline-block;\n  background: #fbf5e8;\n  color: #332d20;\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  padding: 3px 12px;\n  transform: rotate(-1.5deg);\n  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.12);\n  border-left: 2px dashed rgba(194, 175, 142, 0.6);\n  border-right: 2px dashed rgba(194, 175, 142, 0.6);\n  user-select: none;\n}\n\n.masking-tape-alt {\n  background: #ffeaa7;\n  color: #2d3436;\n  transform: rotate(1deg);\n}\n\n/* Push Pin Detail on Testimonial Cards */\n.push-pin {\n  position: absolute;\n  top: -10px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: radial-gradient(circle at 35% 35%, #ff7675 0%, #d63031 70%, #901616 100%);\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35), inset 1px 1px 2px rgba(255, 255, 255, 0.6);\n  z-index: 20;\n}\n\n.push-pin::after {\n  content: '';\n  position: absolute;\n  bottom: -4px;\n  left: 7px;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: rgba(0, 0, 0, 0.25);\n  filter: blur(1px);\n}\n\n/* Physical Connector Pipe Between Step Nodes */\n.connector-pipe-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.connector-pipe {\n  height: 8px;\n  width: 100%;\n  background: linear-gradient(180deg, #c0cad8 0%, #8f9eaf 50%, #dbe2ed 100%);\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  position: relative;\n  overflow: hidden;\n}\n\n.connector-pipe-light {\n  position: absolute;\n  top: 1px;\n  bottom: 1px;\n  width: 30px;\n  background: linear-gradient(90deg, transparent 0%, #ff4757 50%, transparent 100%);\n  filter: blur(1px);\n  animation: pipeFlow 2.5s infinite linear;\n}\n\n@keyframes pipeFlow {\n  0% { left: -30px; opacity: 0; }\n  20% { opacity: 1; }\n  80% { opacity: 1; }\n  100% { left: 100%; opacity: 0; }\n}\n\n.pipe-flange {\n  width: 12px;\n  height: 16px;\n  background: linear-gradient(180deg, #d8e0ea 0%, #9aaabf 100%);\n  box-shadow: 1px 1px 2px rgba(0,0,0,0.2);\n  border-radius: 2px;\n}\n\n/* ==========================================================================\n   Mechanical Buttons (\"Physical Keys\")\n   ========================================================================== */\n\n.btn-physical-primary {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  background: linear-gradient(180deg, #ff5766 0%, #ff4757 60%, #e03242 100%);\n  color: #ffffff;\n  font-family: 'JetBrains Mono', monospace;\n  font-weight: 700;\n  font-size: 13px;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  padding: 14px 28px;\n  min-height: 48px;\n  border-radius: var(--radius-md);\n  box-shadow: 0 4px 10px rgba(255, 71, 87, 0.35), 4px 4px 10px #babecc, -4px -4px 10px #ffffff, inset 0 1px 0 rgba(255, 255, 255, 0.4);\n  transition: all var(--transition-fast);\n  cursor: pointer;\n  border: none;\n  outline: none;\n  user-select: none;\n}\n\n.btn-physical-primary:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px rgba(255, 71, 87, 0.45), 6px 6px 14px #babecc, -6px -6px 14px #ffffff, inset 0 1px 0 rgba(255, 255, 255, 0.6);\n}\n\n.btn-physical-primary:active {\n  transform: translateY(2px);\n  box-shadow: inset 3px 3px 6px rgba(160, 20, 32, 0.6), inset -2px -2px 5px rgba(255, 120, 130, 0.3), 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.btn-physical-secondary {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  background-color: var(--panel-bg);\n  color: var(--text-primary);\n  font-family: 'JetBrains Mono', monospace;\n  font-weight: 700;\n  font-size: 13px;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  padding: 14px 26px;\n  min-height: 48px;\n  border-radius: var(--radius-md);\n  box-shadow: 6px 6px 12px #babecc, -6px -6px 12px #ffffff;\n  transition: all var(--transition-fast);\n  cursor: pointer;\n  border: 1px solid rgba(255, 255, 255, 0.8);\n  user-select: none;\n}\n\n.btn-physical-secondary:hover {\n  transform: translateY(-2px);\n  box-shadow: 8px 8px 16px #babecc, -8px -8px 16px #ffffff;\n  color: var(--accent-orange);\n}\n\n.btn-physical-secondary:active {\n  transform: translateY(2px);\n  box-shadow: inset 4px 4px 8px #babecc, inset -4px -4px 8px #ffffff;\n}\n\n.btn-physical-recessed {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  background-color: var(--recessed-bg);\n  color: var(--text-muted);\n  font-family: 'JetBrains Mono', monospace;\n  font-weight: 600;\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  padding: 10px 18px;\n  border-radius: var(--radius-sm);\n  box-shadow: inset 2px 2px 4px #babecc, inset -2px -2px 4px #ffffff;\n  transition: all var(--transition-fast);\n  cursor: pointer;\n  border: none;\n}\n\n.btn-physical-recessed:hover, .btn-physical-recessed.active {\n  color: var(--accent-orange);\n  background-color: #dbe2ee;\n  box-shadow: inset 3px 3px 6px #b5bece, inset -3px -3px 6px #ffffff;\n}\n\n/* ==========================================================================\n   Inputs (\"Data Slots\")\n   ========================================================================== */\n\n.input-recessed {\n  width: 100%;\n  min-height: 52px;\n  background-color: var(--recessed-bg);\n  border: none;\n  outline: none;\n  border-radius: var(--radius-md);\n  box-shadow: inset 4px 4px 8px #babecc, inset -4px -4px 8px #ffffff;\n  padding: 12px 18px;\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 14px;\n  color: var(--text-primary);\n  transition: box-shadow 200ms ease, background-color 200ms ease;\n}\n\n.input-recessed:focus {\n  background-color: #dbe2ee;\n  box-shadow: inset 4px 4px 8px #b4becd, inset -4px -4px 8px #ffffff, 0 0 0 2px var(--accent-orange);\n}\n\n.input-recessed::placeholder {\n  color: #8896aa;\n}\n\n/* ==========================================================================\n   Textures & Background Patterns\n   ========================================================================== */\n\n/* Blueprint Grid (Light Industrial Theme) */\n.bg-blueprint-light {\n  background-size: 24px 24px;\n  background-image: \n    linear-gradient(to right, rgba(163, 177, 198, 0.25) 1px, transparent 1px),\n    linear-gradient(to bottom, rgba(163, 177, 198, 0.25) 1px, transparent 1px);\n}\n\n/* CRT Screen & Scanlines for Growth Console */\n.crt-screen-bezel {\n  position: relative;\n  background-color: #0d1519;\n  border-radius: var(--radius-lg);\n  border: 3px solid #27373f;\n  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.9), 0 4px 12px rgba(186, 190, 204, 0.5);\n  overflow: hidden;\n}\n\n.crt-scanlines {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background: repeating-linear-gradient(\n    0deg,\n    rgba(0, 0, 0, 0.22) 0px,\n    rgba(0, 0, 0, 0.22) 1px,\n    transparent 1px,\n    transparent 2px\n  );\n  z-index: 10;\n}\n\n.crt-vignette {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background: radial-gradient(circle, transparent 65%, rgba(0, 0, 0, 0.7) 100%);\n  z-index: 11;\n}\n\n.crt-screen-content {\n  position: relative;\n  z-index: 5;\n  color: #22c55e;\n  font-family: 'JetBrains Mono', monospace;\n}\n\n/* Radar Sweep Scope */\n.radar-scope {\n  width: 140px;\n  height: 140px;\n  border-radius: 50%;\n  position: relative;\n  background-color: #0d1519;\n  border: 3px solid #babecc;\n  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.8), 6px 6px 12px #babecc, -6px -6px 12px #ffffff;\n  overflow: hidden;\n}\n\n.radar-sweep-beam {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background: conic-gradient(from 0deg, rgba(34, 197, 94, 0.6) 0deg, rgba(34, 197, 94, 0.08) 60deg, transparent 65deg);\n  animation: radarRotate 4s infinite linear;\n}\n\n.radar-grid {\n  position: absolute;\n  inset: 0;\n  background-image: \n    radial-gradient(circle, transparent 20%, #1e2c33 21%, #1e2c33 22%, transparent 23%),\n    radial-gradient(circle, transparent 50%, #1e2c33 51%, #1e2c33 52%, transparent 53%),\n    radial-gradient(circle, transparent 80%, #1e2c33 81%, #1e2c33 82%, transparent 83%);\n  pointer-events: none;\n}\n\n.radar-crosshair {\n  position: absolute;\n  inset: 0;\n  background-image:\n    linear-gradient(to right, transparent 49.5%, rgba(34, 197, 94, 0.25) 50%, transparent 50.5%),\n    linear-gradient(to bottom, transparent 49.5%, rgba(34, 197, 94, 0.25) 50%, transparent 50.5%);\n  pointer-events: none;\n}\n\n.radar-blip {\n  position: absolute;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background-color: var(--accent-orange);\n  box-shadow: 0 0 6px 1px var(--accent-orange);\n  animation: blipPulse 2s infinite ease-out;\n}\n\n@keyframes radarRotate {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n@keyframes blipPulse {\n  0%, 100% { opacity: 0.8; transform: scale(1); }\n  50% { opacity: 0.2; transform: scale(0.6); }\n}\n\n/* ==========================================================================\n   Grayscale to Color Filter Treatment\n   ========================================================================== */\n\n.img-tech-filter {\n  filter: grayscale(100%) contrast(105%) brightness(95%);\n  transition: filter 500ms var(--ease-smooth), transform 500ms var(--ease-smooth);\n}\n\n.bolted-card:hover .img-tech-filter,\n.img-tech-filter:hover {\n  filter: grayscale(0%) contrast(100%) brightness(100%);\n  transform: scale(1.02);\n}\n\n/* ==========================================================================\n   Metric Readout Recessed Module (§4)\n   ========================================================================== */\n\n.metric-readout-module {\n  position: relative;\n  background-color: var(--recessed-bg);\n  border-radius: var(--radius-md);\n  box-shadow: inset 4px 4px 8px #babecc, inset -4px -4px 8px #ffffff;\n  padding: 16px 20px;\n  border: 1px solid rgba(255, 255, 255, 0.7);\n  overflow: hidden;\n}\n\n.metric-readout-module::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: repeating-linear-gradient(\n    0deg,\n    rgba(0, 0, 0, 0.03) 0px,\n    rgba(0, 0, 0, 0.03) 1px,\n    transparent 1px,\n    transparent 3px\n  );\n  pointer-events: none;\n}\n\n/* Placeholder Badge Rule (§4) */\n.placeholder-data-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  font-family: 'JetBrains Mono', monospace;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  color: #718096;\n  background-color: rgba(113, 128, 150, 0.12);\n  border: 1px dashed rgba(113, 128, 150, 0.4);\n  padding: 2px 6px;\n  border-radius: 3px;\n  text-transform: uppercase;\n}\n\n/* ==========================================================================\n   Responsive & Accessibility Helpers\n   ========================================================================== */\n\n@media (max-width: 768px) {\n  .hero-embossed-text {\n    font-size: 2.75rem !important;\n    line-height: 1.15 !important;\n  }\n  .connector-pipe-wrapper {\n    display: none !important;\n  }\n}\n\n/* Focus States for Keyboard Accessibility */\na:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {\n  outline: 2px solid var(--accent-orange) !important;\n  outline-offset: 3px !important;\n}\n\n/* Scrollbar Styling */\n::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n::-webkit-scrollbar-track {\n  background: var(--chassis-bg);\n}\n::-webkit-scrollbar-thumb {\n  background: #a3b1c6;\n  border-radius: 4px;\n}\n::-webkit-scrollbar-thumb:hover {\n  background: #718096;\n}\n\n\n  </style>\n  \n      <section class=\"py-16 md:py-24 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\n        \n        <div class=\"text-center mb-12\">\n          <div class=\"masking-tape mb-3\">60-SECOND SELF ASSESSMENT</div>\n          <h1 class=\"text-3xl md:text-5xl font-extrabold text-[#2d3436] tracking-tight hero-embossed-text\">\n            Full-Funnel Growth <span class=\"text-[#ff4757]\">Diagnostic.</span>\n          </h1>\n          <p class=\"text-base text-[#4a5568] mt-3\">\n            Answer 4 quick technical questions to generate an immediate growth bottleneck score and receive a tailored 90-day action blueprint.\n          </p>\n        </div>\n\n        <!-- Interactive Diagnostic Terminal Container (Light Neumorphic) -->\n        <div class=\"bolted-card p-6 md:p-10 rounded-3xl bg-[#f0f2f5] border border-white relative shadow-floating\">\n          <div class=\"screw-head screw-tl\"></div>\n          <div class=\"screw-head screw-tr\"></div>\n          <div class=\"screw-head screw-bl\"></div>\n          <div class=\"screw-head screw-br\"></div>\n          \n          <div id=\"diagnostic-quiz-container\">\n            <!-- Step Indicator -->\n            <div class=\"flex items-center justify-between pb-4 border-b border-[#d1d9e6] mb-6 text-xs font-mono\">\n              <div class=\"flex items-center gap-2\">\n                <span class=\"led-indicator led-glow-orange\"></span>\n                <span class=\"text-[#2d3436] font-bold\">SYSTEM AUDIT IN PROGRESS</span>\n              </div>\n              <div class=\"text-[#718096]\">STEP <span id=\"diag-step-num\">1</span> OF 4</div>\n            </div>\n\n            <!-- Question 1 -->\n            <div id=\"diag-q1\" class=\"diag-question-step space-y-4\">\n              <h2 class=\"text-lg md:text-xl font-bold text-[#2d3436]\">\n                1. How is your marketing currently managed across channels?\n              </h2>\n              <div class=\"space-y-3 font-mono text-xs\">\n                <button onclick=\"window.answerDiagnostic(1, 'siloed')\" class=\"w-full text-left p-4 rounded-xl bg-white shadow-card hover:text-[#ff4757] hover:-translate-y-0.5 transition flex items-center justify-between\">\n                  <span>A. We juggle 2 to 4 separate freelancers/agencies who don't talk to each other.</span>\n                  <span class=\"text-[#ff4757]\">&rarr;</span>\n                </button>\n                <button onclick=\"window.answerDiagnostic(1, 'internal')\" class=\"w-full text-left p-4 rounded-xl bg-white shadow-card hover:text-[#ff4757] hover:-translate-y-0.5 transition flex items-center justify-between\">\n                  <span>B. We have an in-house generalist managing ads, SEO, and content alone.</span>\n                  <span class=\"text-[#ff4757]\">&rarr;</span>\n                </button>\n                <button onclick=\"window.answerDiagnostic(1, 'design_only')\" class=\"w-full text-left p-4 rounded-xl bg-white shadow-card hover:text-[#ff4757] hover:-translate-y-0.5 transition flex items-center justify-between\">\n                  <span>C. We hired a design studio for a website redesign, but traffic & leads are flat.</span>\n                  <span class=\"text-[#ff4757]\">&rarr;</span>\n                </button>\n              </div>\n            </div>\n\n            <!-- Question 2 -->\n            <div id=\"diag-q2\" class=\"diag-question-step hidden space-y-4\">\n              <h2 class=\"text-lg md:text-xl font-bold text-[#2d3436]\">\n                2. What is your current visibility in AI search engines (Perplexity, ChatGPT)?\n              </h2>\n              <div class=\"space-y-3 font-mono text-xs\">\n                <button onclick=\"window.answerDiagnostic(2, 'unknown')\" class=\"w-full text-left p-4 rounded-xl bg-white shadow-card hover:text-[#ff4757] hover:-translate-y-0.5 transition flex items-center justify-between\">\n                  <span>A. We have no idea if or how AI engines cite our brand.</span>\n                  <span class=\"text-[#ff4757]\">&rarr;</span>\n                </button>\n                <button onclick=\"window.answerDiagnostic(2, 'competitor_cited')\" class=\"w-full text-left p-4 rounded-xl bg-white shadow-card hover:text-[#ff4757] hover:-translate-y-0.5 transition flex items-center justify-between\">\n                  <span>B. Our competitors get cited when asking for alternatives in our space.</span>\n                  <span class=\"text-[#ff4757]\">&rarr;</span>\n                </button>\n                <button onclick=\"window.answerDiagnostic(2, 'active_seo_only')\" class=\"w-full text-left p-4 rounded-xl bg-white shadow-card hover:text-[#ff4757] hover:-translate-y-0.5 transition flex items-center justify-between\">\n                  <span>C. We do traditional Google SEO, but have not configured structured GEO entity graphs.</span>\n                  <span class=\"text-[#ff4757]\">&rarr;</span>\n                </button>\n              </div>\n            </div>\n\n            <!-- Question 3 -->\n            <div id=\"diag-q3\" class=\"diag-question-step hidden space-y-4\">\n              <h2 class=\"text-lg md:text-xl font-bold text-[#2d3436]\">\n                3. How accurate is your current revenue attribution model?\n              </h2>\n              <div class=\"space-y-3 font-mono text-xs\">\n                <button onclick=\"window.answerDiagnostic(3, 'broken')\" class=\"w-full text-left p-4 rounded-xl bg-white shadow-card hover:text-[#ff4757] hover:-translate-y-0.5 transition flex items-center justify-between\">\n                  <span>A. Broken: Google Ads claims 50 leads, Meta claims 40, but CRM only shows 30 total.</span>\n                  <span class=\"text-[#ff4757]\">&rarr;</span>\n                </button>\n                <button onclick=\"window.answerDiagnostic(3, 'ga4_basic')\" class=\"w-full text-left p-4 rounded-xl bg-white shadow-card hover:text-[#ff4757] hover:-translate-y-0.5 transition flex items-center justify-between\">\n                  <span>B. Basic: Standard GA4 last-click, but we cannot tie closed-won deals to first touch.</span>\n                  <span class=\"text-[#ff4757]\">&rarr;</span>\n                </button>\n                <button onclick=\"window.answerDiagnostic(3, 'none')\" class=\"w-full text-left p-4 rounded-xl bg-white shadow-card hover:text-[#ff4757] hover:-translate-y-0.5 transition flex items-center justify-between\">\n                  <span>C. None: We rely on gut feel and monthly traffic reports.</span>\n                  <span class=\"text-[#ff4757]\">&rarr;</span>\n                </button>\n              </div>\n            </div>\n\n            <!-- Question 4: Submission & Results Delivery -->\n            <div id=\"diag-q4\" class=\"diag-question-step hidden space-y-4\">\n              <h2 class=\"text-lg md:text-xl font-bold text-[#2d3436]\">\n                4. Where should we deliver your Full-Funnel Growth Diagnostic Blueprint?\n              </h2>\n              <p class=\"text-xs text-[#4a5568]\">\n                Includes your calculated pipeline leakage score, channel priority roadmap, and GEO citation readiness benchmark.\n              </p>\n\n              <form onsubmit=\"window.submitDiagnosticLead(event)\" class=\"space-y-4 pt-2\">\n                <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n                  <div>\n                    <label class=\"block text-xs font-mono font-bold uppercase text-[#2d3436] mb-1\">Your Name *</label>\n                    <input type=\"text\" required class=\"input-recessed\" placeholder=\"Alex Morgan\" />\n                  </div>\n                  <div>\n                    <label class=\"block text-xs font-mono font-bold uppercase text-[#2d3436] mb-1\">Work Email *</label>\n                    <input type=\"email\" required class=\"input-recessed\" placeholder=\"alex@company.com\" />\n                  </div>\n                </div>\n\n                <div>\n                  <label class=\"block text-xs font-mono font-bold uppercase text-[#2d3436] mb-1\">Company Domain *</label>\n                  <input type=\"url\" required class=\"input-recessed\" placeholder=\"https://company.com\" />\n                </div>\n\n                <button type=\"submit\" class=\"btn-physical-primary w-full\">\n                  <span>GENERATE MY GROWTH BLUEPRINT</span>\n                  <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"/></svg>\n                </button>\n              </form>\n            </div>\n\n            <!-- Quiz Completed Result View -->\n            <div id=\"diag-result-view\" class=\"hidden space-y-6\">\n              <div class=\"metric-readout-module text-center p-6 bg-[#f0f2f5] text-[#2d3436] border border-white\">\n                <span class=\"led-indicator led-glow-green mb-2\"></span>\n                <div class=\"text-xs font-mono text-[#718096]\">DIAGNOSTIC TELEMETRY COMPLETE</div>\n                <div class=\"text-3xl font-extrabold font-mono text-[#ff4757] my-2\">HIGH PIPELINE LEAKAGE DETECTED</div>\n                <div class=\"text-xs text-[#4a5568] max-w-lg mx-auto\">\n                  Your assessment indicates a <strong>42% estimated pipeline loss</strong> caused by disconnected channel tracking and zero LLM entity graph optimization.\n                </div>\n              </div>\n\n              <div class=\"p-4 bg-white rounded-xl shadow-card text-xs text-[#4a5568] space-y-3\">\n                <div class=\"font-mono font-bold text-[#2d3436]\">NEXT STEP: 14-DAY GROWTH DIAGNOSTIC ENGAGEMENT</div>\n                <p>Our senior squad is preparing your custom teardown. If you would like to fast-track your 14-day formal Growth Diagnostic ($1,450 fixed-fee), reserve your slot below.</p>\n                <div class=\"pt-2 flex gap-3\">\n                  <a href=\"#/contact\" class=\"btn-physical-primary flex-1 text-xs text-center\"><span>BOOK 30-MIN BRIEFING</span></a>\n                  <a href=\"#/pricing\" class=\"btn-physical-secondary text-xs\"><span>VIEW PRICING</span></a>\n                </div>\n              </div>\n            </div>\n\n          </div>\n        </div>\n\n      </section>\n    \n</div>\n"
          },
          "elements": []
        }
      ]
    }
  ]
}