{
  "version": "0.4",
  "title": "TeamRion - Homepage (Full Page)",
  "type": "page",
  "content": [
    {
      "id": "tr_i4k751n",
      "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_ua1kj69",
          "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      <!-- HERO SECTION (Asymmetric 60/40 Desktop Grid) -->\n      <section class=\"relative pt-12 pb-20 md:pt-16 md:pb-28 overflow-hidden\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n          \n          <!-- Operational Status Badge -->\n          <div class=\"inline-flex items-center gap-3 px-3 py-1.5 rounded-full shadow-recessed mb-8 bg-[#d1d9e6]/60\">\n            <span class=\"led-indicator led-glow-green\"></span>\n            <span class=\"text-xs font-mono font-bold tracking-wider text-[#2d3436] uppercase\">SYSTEM OPERATIONAL · ENGINE v4.2 [LIVE]</span>\n            <span class=\"text-xs font-mono text-[#ff4757] font-semibold\">ALL CHANNELS ACTIVE</span>\n          </div>\n\n          <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 items-center\">\n            \n            <!-- Left Column: Copy & CTAs (60%) -->\n            <div class=\"lg:col-span-7 space-y-6\">\n              <div class=\"masking-tape mb-2\">FULL-FUNNEL ACCOUNTABILITY</div>\n              <h1 class=\"text-4xl sm:text-5xl lg:text-6xl font-extrabold text-[#2d3436] tracking-tight leading-[1.1] hero-embossed-text\">\n                Stop Juggling Freelancers. Build One Measurable <span class=\"text-[#ff4757]\">Growth Engine.</span>\n              </h1>\n              <p class=\"text-lg sm:text-xl text-[#4a5568] leading-relaxed max-w-2xl\">\n                We unify <strong>SEO</strong>, <strong>GEO (AI-Search Optimization)</strong>, <strong>Paid Media</strong>, <strong>Marketing Automation</strong>, <strong>CRO</strong>, and <strong>High-Performance Web Architecture</strong> into a single accountable pipeline framework. One team. One attribution model. Predictable revenue.\n              </p>\n\n              <!-- Rapid Value Points -->\n              <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 pt-2 font-mono text-xs text-[#2d3436]\">\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"w-2 h-2 rounded-full bg-[#ff4757]\"></span>\n                  <span>ZERO SILOED VENDORS</span>\n                </div>\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"w-2 h-2 rounded-full bg-[#22c55e]\"></span>\n                  <span>UNIFIED ATTRIBUTION STACK</span>\n                </div>\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"w-2 h-2 rounded-full bg-[#06b6d4]\"></span>\n                  <span>PERPLEXITY & CHATGPT READY</span>\n                </div>\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"w-2 h-2 rounded-full bg-[#f59e0b]\"></span>\n                  <span>TIED DIRECTLY TO PIPELINE</span>\n                </div>\n              </div>\n\n              <!-- CTA Cluster (Physical Keys) -->\n              <div class=\"flex flex-wrap items-center gap-4 pt-4\">\n                <a href=\"#/growth-diagnostic\" class=\"btn-physical-primary\">\n                  <span>START GROWTH DIAGNOSTIC</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=\"M14 5l7 7m0 0l-7 7m7-7H3\"/></svg>\n                </a>\n                <a href=\"#/pricing\" class=\"btn-physical-secondary\">\n                  <span>VIEW BANDED PRICING</span>\n                </a>\n                <a href=\"#/ai-search-audit\" class=\"btn-physical-recessed text-xs flex items-center gap-1.5\">\n                  <span class=\"led-indicator led-glow-cyan\"></span>\n                  <span>RUN AI-SEARCH AUDIT</span>\n                </a>\n              </div>\n\n              <div class=\"pt-4 flex items-center gap-3 text-xs text-[#718096] font-mono\">\n                <span class=\"font-bold text-[#2d3436]\">NEED A RELIABLE GROWTH SQUAD?</span>\n                <a href=\"#/compare/vs-traditional-agencies\" class=\"text-[#ff4757] font-semibold underline hover:text-[#e03242]\">Compare our model vs traditional agencies &rarr;</a>\n              </div>\n            </div>\n\n            <!-- Right Column: 3D Growth Console Device Mockup (Tactile Light Industrial Chassis) -->\n            <div class=\"lg:col-span-5\">\n              <div class=\"bolted-card bg-[#f0f2f5] p-5 rounded-2xl shadow-floating border border-white relative\">\n                <!-- Screws on Device Bezel -->\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                <!-- Console Top Header -->\n                <div class=\"flex items-center justify-between pb-3 border-b border-[#d1d9e6] mb-4\">\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"led-indicator led-glow-green\"></span>\n                    <span class=\"text-[11px] font-mono font-bold text-[#2d3436] tracking-widest uppercase\">TR-CONSOLE // SIGNAL MONITOR</span>\n                  </div>\n                  <div class=\"vent-slots !top-3 !right-4\">\n                    <span class=\"vent-slot\"></span>\n                    <span class=\"vent-slot\"></span>\n                    <span class=\"vent-slot\"></span>\n                  </div>\n                </div>\n\n                <!-- CRT Monitor Screen (Recessed High-Contrast Telemetry Panel) -->\n                <div class=\"crt-screen-bezel p-4 mb-4\">\n                  <div class=\"crt-scanlines\"></div>\n                  <div class=\"crt-vignette\"></div>\n                  \n                  <div class=\"crt-screen-content space-y-4\">\n                    <!-- Live Channel Selector -->\n                    <div class=\"flex items-center justify-between text-[10px] pb-2 border-b border-[#1f3028]\">\n                      <span class=\"text-[#22c55e] font-bold\">SIGNAL: <span id=\"console-active-signal\">ALL_FUNNEL</span></span>\n                      <span class=\"text-[#889988]\">FPS: 60 // PING: 12ms</span>\n                    </div>\n\n                    <!-- Dynamic SVG Growth Trend Line -->\n                    <div class=\"h-28 w-full relative\">\n                      <svg class=\"w-full h-full\" viewBox=\"0 0 300 100\" preserveAspectRatio=\"none\">\n                        <defs>\n                          <linearGradient id=\"crtGlow\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                            <stop offset=\"0%\" stop-color=\"#22c55e\" stop-opacity=\"0.4\"/>\n                            <stop offset=\"100%\" stop-color=\"#22c55e\" stop-opacity=\"0.0\"/>\n                          </linearGradient>\n                        </defs>\n                        <!-- Grid Lines -->\n                        <line x1=\"0\" y1=\"25\" x2=\"300\" y2=\"25\" stroke=\"#172b22\" stroke-dasharray=\"3,3\"/>\n                        <line x1=\"0\" y1=\"50\" x2=\"300\" y2=\"50\" stroke=\"#172b22\" stroke-dasharray=\"3,3\"/>\n                        <line x1=\"0\" y1=\"75\" x2=\"300\" y2=\"75\" stroke=\"#172b22\" stroke-dasharray=\"3,3\"/>\n                        <!-- Area Fill -->\n                        <path id=\"console-chart-area\" d=\"M0,85 Q50,78 100,60 T200,35 T300,10 L300,100 L0,100 Z\" fill=\"url(#crtGlow)\" />\n                        <!-- Line -->\n                        <path id=\"console-chart-line\" d=\"M0,85 Q50,78 100,60 T200,35 T300,10\" fill=\"none\" stroke=\"#22c55e\" stroke-width=\"2.5\" stroke-linecap=\"round\"/>\n                        <!-- Animated Marker -->\n                        <circle id=\"console-marker\" cx=\"300\" cy=\"10\" r=\"4\" fill=\"#ff4757\" stroke=\"#ffffff\" stroke-width=\"1.5\">\n                          <animate attributeName=\"r\" values=\"3;5;3\" dur=\"1.5s\" repeatCount=\"indefinite\"/>\n                        </circle>\n                      </svg>\n                    </div>\n\n                    <!-- Instrumentation Counters -->\n                    <div class=\"grid grid-cols-3 gap-2 text-center pt-1 border-t border-[#1f3028]\">\n                      <div class=\"bg-[#0b1210] p-1.5 rounded border border-[#1a2d24]\">\n                        <div class=\"text-[9px] text-[#889988] uppercase\">AI Citations</div>\n                        <div id=\"console-val-ai\" class=\"text-xs font-bold text-[#06b6d4]\">84.2%</div>\n                      </div>\n                      <div class=\"bg-[#0b1210] p-1.5 rounded border border-[#1a2d24]\">\n                        <div class=\"text-[9px] text-[#889988] uppercase\">Org. Pipeline</div>\n                        <div id=\"console-val-pipeline\" class=\"text-xs font-bold text-[#22c55e]\">3.4x</div>\n                      </div>\n                      <div class=\"bg-[#0b1210] p-1.5 rounded border border-[#1a2d24]\">\n                        <div class=\"text-[9px] text-[#889988] uppercase\">Blended CAC</div>\n                        <div id=\"console-val-cac\" class=\"text-xs font-bold text-[#ff4757]\">-38%</div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Interactive Hardware Switches -->\n                <div class=\"flex items-center justify-between gap-2 pt-2\">\n                  <button onclick=\"window.updateConsoleChannel('all')\" class=\"console-tab-btn flex-1 py-1.5 px-2 rounded text-[10px] font-mono font-bold uppercase transition bg-[#d1d9e6] text-[#ff4757] shadow-recessed active:translate-y-0.5\">ALL</button>\n                  <button onclick=\"window.updateConsoleChannel('geo')\" class=\"console-tab-btn flex-1 py-1.5 px-2 rounded text-[10px] font-mono font-bold uppercase transition bg-[#e0e5ec] text-[#4a5568] hover:text-[#06b6d4] shadow-card active:translate-y-0.5\">GEO/AI</button>\n                  <button onclick=\"window.updateConsoleChannel('seo')\" class=\"console-tab-btn flex-1 py-1.5 px-2 rounded text-[10px] font-mono font-bold uppercase transition bg-[#e0e5ec] text-[#4a5568] hover:text-[#22c55e] shadow-card active:translate-y-0.5\">SEO</button>\n                  <button onclick=\"window.updateConsoleChannel('paid')\" class=\"console-tab-btn flex-1 py-1.5 px-2 rounded text-[10px] font-mono font-bold uppercase transition bg-[#e0e5ec] text-[#4a5568] hover:text-[#ff4757] shadow-card active:translate-y-0.5\">PAID</button>\n                  <button onclick=\"window.updateConsoleChannel('cro')\" class=\"console-tab-btn flex-1 py-1.5 px-2 rounded text-[10px] font-mono font-bold uppercase transition bg-[#e0e5ec] text-[#4a5568] hover:text-[#f59e0b] shadow-card active:translate-y-0.5\">CRO</button>\n                </div>\n\n                <div class=\"mt-3 text-[10px] font-mono text-[#718096] text-center\">\n                  DIAL STATUS: <span class=\"text-[#22c55e] font-semibold\">SYNCHRONIZED ATTRIBUTION ENGINE</span>\n                </div>\n              </div>\n            </div>\n\n          </div>\n        </div>\n      </section>\n\n      <!-- SECTION: STATS STRIP (Light Neumorphic Layout) -->\n      <section class=\"bg-[#f0f2f5] py-12 border-y border-[#d1d9e6] relative overflow-hidden bg-blueprint-light\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n          \n          <div class=\"flex flex-col md:flex-row items-center justify-between gap-6 mb-8\">\n            <div class=\"flex items-center gap-3\">\n              <span class=\"led-indicator led-glow-orange\"></span>\n              <span class=\"text-xs font-mono font-bold tracking-widest text-[#2d3436] uppercase\">INSTRUMENTATION READOUT // PROOF ENGINE</span>\n            </div>\n            <div class=\"placeholder-data-badge\">\n              <span>● PROOF PROTOCOL: STRICT PLACEHOLDER DISCIPLINE (§4)</span>\n            </div>\n          </div>\n\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6\">\n            \n            <!-- Readout 1 -->\n            <div class=\"metric-readout-module\">\n              <div class=\"flex items-center justify-between text-[10px] font-mono text-[#718096] mb-1\">\n                <span>METRIC_ID: 001</span>\n                <span class=\"text-[#22c55e]\">● 90-DAY WINDOW</span>\n              </div>\n              <div class=\"text-3xl font-extrabold font-mono text-[#22c55e] tracking-tight py-1\">+142%</div>\n              <div class=\"text-xs font-bold text-[#2d3436] uppercase tracking-wide\">ORGANIC PIPELINE REVENUE</div>\n              <div class=\"text-[10px] font-mono text-[#718096] mt-2\">B2B SaaS Infrastructure Client</div>\n            </div>\n\n            <!-- Readout 2 -->\n            <div class=\"metric-readout-module\">\n              <div class=\"flex items-center justify-between text-[10px] font-mono text-[#718096] mb-1\">\n                <span>METRIC_ID: 002</span>\n                <span class=\"text-[#06b6d4]\">● AI PROMPT SHARE</span>\n              </div>\n              <div class=\"text-3xl font-extrabold font-mono text-[#06b6d4] tracking-tight py-1\">#1</div>\n              <div class=\"text-xs font-bold text-[#2d3436] uppercase tracking-wide\">AI CITATION SHARE (PERPLEXITY & GPT)</div>\n              <div class=\"text-[10px] font-mono text-[#718096] mt-2\">FinTech Compliance Suite</div>\n            </div>\n\n            <!-- Readout 3 -->\n            <div class=\"metric-readout-module\">\n              <div class=\"flex items-center justify-between text-[10px] font-mono text-[#718096] mb-1\">\n                <span>METRIC_ID: 003</span>\n                <span class=\"text-[#ff4757]\">● CAC COMPRESSION</span>\n              </div>\n              <div class=\"text-3xl font-extrabold font-mono text-[#ff4757] tracking-tight py-1\">-46%</div>\n              <div class=\"text-xs font-bold text-[#2d3436] uppercase tracking-wide\">BLENDED COST PER ACQUISITION</div>\n              <div class=\"text-[10px] font-mono text-[#718096] mt-2\">High-Ticket Professional Services</div>\n            </div>\n\n            <!-- Readout 4 -->\n            <div class=\"metric-readout-module\">\n              <div class=\"flex items-center justify-between text-[10px] font-mono text-[#718096] mb-1\">\n                <span>METRIC_ID: 004</span>\n                <span class=\"text-[#f59e0b]\">● CRO IMPACT</span>\n              </div>\n              <div class=\"text-3xl font-extrabold font-mono text-[#f59e0b] tracking-tight py-1\">3.2x</div>\n              <div class=\"text-xs font-bold text-[#2d3436] uppercase tracking-wide\">DEMO BOOKING VELOCITY</div>\n              <div class=\"text-[10px] font-mono text-[#718096] mt-2\">E-Commerce & Supply Chain SaaS</div>\n            </div>\n\n          </div>\n        </div>\n      </section>\n\n      <!-- SECTION: THE PROBLEM — JUGGLING 4 DISCONNECTED VENDORS -->\n      <section class=\"py-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div class=\"text-center max-w-3xl mx-auto mb-16\">\n          <div class=\"masking-tape mb-3\">THE AGENCY PARADOX</div>\n          <h2 class=\"text-3xl md:text-4xl font-extrabold text-[#2d3436] tracking-tight hero-embossed-text\">\n            Why Fragmented Marketing Stalls Your Growth\n          </h2>\n          <p class=\"text-base md:text-lg text-[#4a5568] mt-3\">\n            Mid-market companies waste 40%+ of their marketing capital managing the communication gap between four separate specialists who never look at the full funnel.\n          </p>\n        </div>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-stretch\">\n          \n          <!-- The Disconnected Old Way -->\n          <div class=\"bolted-card p-8 rounded-2xl bg-[#e5e9f0] border border-[#d1d9e6]\">\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 class=\"flex items-center gap-2 mb-4\">\n              <span class=\"w-3 h-3 rounded-full bg-[#ff4757]\"></span>\n              <span class=\"font-mono text-xs font-bold uppercase text-[#ff4757]\">THE DISCONNECTED PATCHWORK (WHAT FAILS)</span>\n            </div>\n\n            <div class=\"space-y-4 text-sm text-[#4a5568]\">\n              <div class=\"p-3 bg-white/60 rounded-lg shadow-recessed flex items-start gap-3\">\n                <span class=\"font-mono font-bold text-[#ff4757]\">01</span>\n                <div>\n                  <strong class=\"text-[#2d3436]\">Design Studio:</strong> Builds a flashy website with zero search architecture, zero schema, and no consideration for lead routing.\n                </div>\n              </div>\n              <div class=\"p-3 bg-white/60 rounded-lg shadow-recessed flex items-start gap-3\">\n                <span class=\"font-mono font-bold text-[#ff4757]\">02</span>\n                <div>\n                  <strong class=\"text-[#2d3436]\">SEO Freelancer:</strong> Writes keyword-stuffed blog posts that bring vanity traffic but 0% pipeline contribution.\n                </div>\n              </div>\n              <div class=\"p-3 bg-white/60 rounded-lg shadow-recessed flex items-start gap-3\">\n                <span class=\"font-mono font-bold text-[#ff4757]\">03</span>\n                <div>\n                  <strong class=\"text-[#2d3436]\">Paid Ads Agency:</strong> Blames the website conversion rate whenever ROAS dips; takes no accountability for landing page UX.\n                </div>\n              </div>\n              <div class=\"p-3 bg-white/60 rounded-lg shadow-recessed flex items-start gap-3\">\n                <span class=\"font-mono font-bold text-[#ff4757]\">04</span>\n                <div>\n                  <strong class=\"text-[#2d3436]\">Leadership:</strong> Stuck in the middle with 4 invoices, conflicting analytics dashboards, and no clear revenue attribution.\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- The TeamRion Unified Model -->\n          <div class=\"bolted-card p-8 rounded-2xl bg-[#f0f2f5] border-2 border-[#ff4757]/30 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 class=\"flex items-center gap-2 mb-4\">\n              <span class=\"led-indicator led-glow-green\"></span>\n              <span class=\"font-mono text-xs font-bold uppercase text-[#22c55e]\">THE TEAMRION GROWTH ENGINE (WHAT WINS)</span>\n            </div>\n\n            <div class=\"space-y-4 text-sm text-[#4a5568]\">\n              <div class=\"p-3 bg-white rounded-lg shadow-card flex items-start gap-3\">\n                <span class=\"font-mono font-bold text-[#22c55e]\">01</span>\n                <div>\n                  <strong class=\"text-[#2d3436]\">One Accountable Growth Squad:</strong> Search engineers, paid media buyers, CRO scientists, and developers synchronized in one sprint cycle.\n                </div>\n              </div>\n              <div class=\"p-3 bg-white rounded-lg shadow-card flex items-start gap-3\">\n                <span class=\"font-mono font-bold text-[#22c55e]\">02</span>\n                <div>\n                  <strong class=\"text-[#2d3436]\">Unified Data Pipeline:</strong> Server-side GTM, GA4, HubSpot/CRM, and Looker tied directly to closed-won revenue, not clicks.\n                </div>\n              </div>\n              <div class=\"p-3 bg-white rounded-lg shadow-card flex items-start gap-3\">\n                <span class=\"font-mono font-bold text-[#22c55e]\">03</span>\n                <div>\n                  <strong class=\"text-[#2d3436]\">GEO & Traditional Search Synchrony:</strong> Capturing intent across Google, ChatGPT, Claude, and Perplexity simultaneously.\n                </div>\n              </div>\n              <div class=\"p-3 bg-white rounded-lg shadow-card flex items-start gap-3\">\n                <span class=\"font-mono font-bold text-[#22c55e]\">04</span>\n                <div>\n                  <strong class=\"text-[#2d3436]\">Single P&L Responsibility:</strong> We optimize your entire conversion funnel from impression to onboarding.\n                </div>\n              </div>\n            </div>\n          </div>\n\n        </div>\n      </section>\n\n      <!-- SECTION: THE 9 GROWTH PILLARS (SERVICES GRID) -->\n      <section class=\"py-20 bg-[#e0e5ec] border-t border-[#d1d9e6]\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n          \n          <div class=\"flex flex-col md:flex-row md:items-end justify-between gap-6 mb-16\">\n            <div>\n              <div class=\"masking-tape mb-3\">SYSTEM CAPABILITIES</div>\n              <h2 class=\"text-3xl md:text-4xl font-extrabold text-[#2d3436] tracking-tight hero-embossed-text\">\n                The 9 Growth Engine Pillars\n              </h2>\n              <p class=\"text-base text-[#4a5568] mt-2 max-w-xl\">\n                Every service engineered to work in unison or deployed as targeted modular sprints.\n              </p>\n            </div>\n            <a href=\"#/services\" class=\"btn-physical-secondary text-xs\">\n              <span>EXPLORE ALL SERVICES &rarr;</span>\n            </a>\n          </div>\n\n          <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n            \n            <!-- Service 1: SEO -->\n            <div class=\"bolted-card p-6 rounded-xl flex flex-col justify-between\">\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              <div class=\"vent-slots\"><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span></div>\n              \n              <div>\n                <div class=\"w-12 h-12 rounded-lg shadow-recessed flex items-center justify-center text-[#ff4757] font-mono font-bold mb-4\">\n                  01\n                </div>\n                <h3 class=\"text-xl font-bold text-[#2d3436] mb-2\">Search Engine Optimization</h3>\n                <p class=\"text-sm text-[#4a5568] leading-relaxed mb-4\">\n                  Technical architecture, topical authority clustering, and bottom-funnel keyword domination that drives qualified buyer pipeline.\n                </p>\n              </div>\n\n              <div class=\"pt-4 border-t border-[#d1d9e6] flex items-center justify-between\">\n                <span class=\"text-[11px] font-mono text-[#718096]\">SEARCH REVENUE</span>\n                <a href=\"#/services/seo\" class=\"text-xs font-mono font-bold text-[#ff4757] hover:underline\">SPEC &rarr;</a>\n              </div>\n            </div>\n\n            <!-- Service 2: GEO / AI Search -->\n            <div class=\"bolted-card p-6 rounded-xl flex flex-col justify-between border-2 border-[#06b6d4]/40\">\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              <div class=\"vent-slots\"><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span></div>\n              \n              <div>\n                <div class=\"flex items-center gap-2 mb-3\">\n                  <span class=\"w-12 h-12 rounded-lg shadow-recessed flex items-center justify-center text-[#06b6d4] font-mono font-bold\">\n                    02\n                  </span>\n                  <span class=\"px-2 py-0.5 rounded text-[10px] font-mono font-bold bg-[#06b6d4]/15 text-[#0891b2]\">DIFFERENTIATED</span>\n                </div>\n                <h3 class=\"text-xl font-bold text-[#2d3436] mb-2\">GEO / AI Search Optimization</h3>\n                <p class=\"text-sm text-[#4a5568] leading-relaxed mb-4\">\n                  Position your brand as the canonical citation in ChatGPT, Perplexity, Claude, and Google AI Overviews through structured entity graphs.\n                </p>\n              </div>\n\n              <div class=\"pt-4 border-t border-[#d1d9e6] flex items-center justify-between\">\n                <span class=\"text-[11px] font-mono text-[#718096]\">LLM CITATION SHARE</span>\n                <a href=\"#/services/geo-ai-search\" class=\"text-xs font-mono font-bold text-[#06b6d4] hover:underline\">SPEC &rarr;</a>\n              </div>\n            </div>\n\n            <!-- Service 3: Paid Media — Google -->\n            <div class=\"bolted-card p-6 rounded-xl flex flex-col justify-between\">\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              <div class=\"vent-slots\"><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span></div>\n              \n              <div>\n                <div class=\"w-12 h-12 rounded-lg shadow-recessed flex items-center justify-center text-[#ff4757] font-mono font-bold mb-4\">\n                  03\n                </div>\n                <h3 class=\"text-xl font-bold text-[#2d3436] mb-2\">Paid Media — Google Ads</h3>\n                <p class=\"text-sm text-[#4a5568] leading-relaxed mb-4\">\n                  High-intent capture across Google Search, Performance Max, and YouTube with surgical negative keyword structures and conversion feedback loops.\n                </p>\n              </div>\n\n              <div class=\"pt-4 border-t border-[#d1d9e6] flex items-center justify-between\">\n                <span class=\"text-[11px] font-mono text-[#718096]\">HIGH-INTENT CAPTURE</span>\n                <a href=\"#/services/paid-media-google\" class=\"text-xs font-mono font-bold text-[#ff4757] hover:underline\">SPEC &rarr;</a>\n              </div>\n            </div>\n\n            <!-- Service 4: Paid Media — Meta -->\n            <div class=\"bolted-card p-6 rounded-xl flex flex-col justify-between\">\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              <div class=\"vent-slots\"><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span></div>\n              \n              <div>\n                <div class=\"w-12 h-12 rounded-lg shadow-recessed flex items-center justify-center text-[#ff4757] font-mono font-bold mb-4\">\n                  04\n                </div>\n                <h3 class=\"text-xl font-bold text-[#2d3436] mb-2\">Paid Media — Meta Ads</h3>\n                <p class=\"text-sm text-[#4a5568] leading-relaxed mb-4\">\n                  High-velocity creative testing engines, full-funnel remarketing, and Server-Side CAPI data pipelines to scale customer acquisition efficiently.\n                </p>\n              </div>\n\n              <div class=\"pt-4 border-t border-[#d1d9e6] flex items-center justify-between\">\n                <span class=\"text-[11px] font-mono text-[#718096]\">CREATIVE VELOCITY</span>\n                <a href=\"#/services/paid-media-meta\" class=\"text-xs font-mono font-bold text-[#ff4757] hover:underline\">SPEC &rarr;</a>\n              </div>\n            </div>\n\n            <!-- Service 5: Paid Media — LinkedIn -->\n            <div class=\"bolted-card p-6 rounded-xl flex flex-col justify-between\">\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              <div class=\"vent-slots\"><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span></div>\n              \n              <div>\n                <div class=\"w-12 h-12 rounded-lg shadow-recessed flex items-center justify-center text-[#ff4757] font-mono font-bold mb-4\">\n                  05\n                </div>\n                <h3 class=\"text-xl font-bold text-[#2d3436] mb-2\">Paid Media — LinkedIn Ads</h3>\n                <p class=\"text-sm text-[#4a5568] leading-relaxed mb-4\">\n                  B2B Account-Based Marketing (ABM) precision targeting decision makers, buying committees, and high-value accounts with direct pipeline impact.\n                </p>\n              </div>\n\n              <div class=\"pt-4 border-t border-[#d1d9e6] flex items-center justify-between\">\n                <span class=\"text-[11px] font-mono text-[#718096]\">B2B BUYING COMMITTEES</span>\n                <a href=\"#/services/paid-media-linkedin\" class=\"text-xs font-mono font-bold text-[#ff4757] hover:underline\">SPEC &rarr;</a>\n              </div>\n            </div>\n\n            <!-- Service 6: Marketing Automation -->\n            <div class=\"bolted-card p-6 rounded-xl flex flex-col justify-between\">\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              <div class=\"vent-slots\"><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span></div>\n              \n              <div>\n                <div class=\"w-12 h-12 rounded-lg shadow-recessed flex items-center justify-center text-[#ff4757] font-mono font-bold mb-4\">\n                  06\n                </div>\n                <h3 class=\"text-xl font-bold text-[#2d3436] mb-2\">Marketing Automation</h3>\n                <p class=\"text-sm text-[#4a5568] leading-relaxed mb-4\">\n                  HubSpot, Klaviyo, and custom lifecycle pipelines with lead scoring, multi-branch nurture sequences, and automated sales handoffs.\n                </p>\n              </div>\n\n              <div class=\"pt-4 border-t border-[#d1d9e6] flex items-center justify-between\">\n                <span class=\"text-[11px] font-mono text-[#718096]\">LIFECYCLE PIPELINE</span>\n                <a href=\"#/services/marketing-automation\" class=\"text-xs font-mono font-bold text-[#ff4757] hover:underline\">SPEC &rarr;</a>\n              </div>\n            </div>\n\n            <!-- Service 7: CRO -->\n            <div class=\"bolted-card p-6 rounded-xl flex flex-col justify-between\">\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              <div class=\"vent-slots\"><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span></div>\n              \n              <div>\n                <div class=\"w-12 h-12 rounded-lg shadow-recessed flex items-center justify-center text-[#ff4757] font-mono font-bold mb-4\">\n                  07\n                </div>\n                <h3 class=\"text-xl font-bold text-[#2d3436] mb-2\">Conversion Rate Optimization (CRO)</h3>\n                <p class=\"text-sm text-[#4a5568] leading-relaxed mb-4\">\n                  Scientific heuristic teardowns, heatmapping, multivariate A/B testing, and friction elimination to maximize visitor-to-customer throughput.\n                </p>\n              </div>\n\n              <div class=\"pt-4 border-t border-[#d1d9e6] flex items-center justify-between\">\n                <span class=\"text-[11px] font-mono text-[#718096]\">CONVERSION VELOCITY</span>\n                <a href=\"#/services/cro\" class=\"text-xs font-mono font-bold text-[#ff4757] hover:underline\">SPEC &rarr;</a>\n              </div>\n            </div>\n\n            <!-- Service 8: Analytics & Attribution -->\n            <div class=\"bolted-card p-6 rounded-xl flex flex-col justify-between\">\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              <div class=\"vent-slots\"><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span></div>\n              \n              <div>\n                <div class=\"w-12 h-12 rounded-lg shadow-recessed flex items-center justify-center text-[#ff4757] font-mono font-bold mb-4\">\n                  08\n                </div>\n                <h3 class=\"text-xl font-bold text-[#2d3436] mb-2\">Analytics & Attribution</h3>\n                <p class=\"text-sm text-[#4a5568] leading-relaxed mb-4\">\n                  Server-side tagging, multi-touch attribution, offline conversion imports, and executive Looker cockpits showing exact revenue per channel.\n                </p>\n              </div>\n\n              <div class=\"pt-4 border-t border-[#d1d9e6] flex items-center justify-between\">\n                <span class=\"text-[11px] font-mono text-[#718096]\">FULL ATTRIBUTION</span>\n                <a href=\"#/services/analytics-attribution\" class=\"text-xs font-mono font-bold text-[#ff4757] hover:underline\">SPEC &rarr;</a>\n              </div>\n            </div>\n\n            <!-- Service 9: Web Design & Dev -->\n            <div class=\"bolted-card p-6 rounded-xl flex flex-col justify-between\">\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              <div class=\"vent-slots\"><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span></div>\n              \n              <div>\n                <div class=\"w-12 h-12 rounded-lg shadow-recessed flex items-center justify-center text-[#ff4757] font-mono font-bold mb-4\">\n                  09\n                </div>\n                <h3 class=\"text-xl font-bold text-[#2d3436] mb-2\">Web Design & Development</h3>\n                <p class=\"text-sm text-[#4a5568] leading-relaxed mb-4\">\n                  Ultra-fast WordPress + Elementor and modern web builds engineered with industrial polish, 100/100 Core Web Vitals, and conversion triggers.\n                </p>\n              </div>\n\n              <div class=\"pt-4 border-t border-[#d1d9e6] flex items-center justify-between\">\n                <span class=\"text-[11px] font-mono text-[#718096]\">HIGH-PERFORMANCE BUILDS</span>\n                <a href=\"#/services/web-design-dev\" class=\"text-xs font-mono font-bold text-[#ff4757] hover:underline\">SPEC &rarr;</a>\n              </div>\n            </div>\n\n          </div>\n        </div>\n      </section>\n\n      <!-- SECTION: HOW IT WORKS (WITH PHYSICAL CONNECTOR PIPES) -->\n      <section class=\"py-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div class=\"text-center max-w-3xl mx-auto mb-16\">\n          <div class=\"masking-tape mb-3\">OPERATIONAL WORKFLOW</div>\n          <h2 class=\"text-3xl md:text-4xl font-extrabold text-[#2d3436] tracking-tight hero-embossed-text\">\n            The 4-Stage Growth Engineering Method\n          </h2>\n          <p class=\"text-base md:text-lg text-[#4a5568] mt-3\">\n            A battle-tested deployment pipeline that identifies bottlenecks, fixes the foundation, scales acquisition, and compounds revenue.\n          </p>\n        </div>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-4 gap-6 items-center\">\n          \n          <!-- Step 1 -->\n          <div class=\"bolted-card p-6 rounded-xl relative\">\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 class=\"text-xs font-mono font-bold text-[#ff4757] mb-2\">STAGE 01 // AUDIT</div>\n            <h4 class=\"text-lg font-bold text-[#2d3436] mb-2\">Growth Diagnostic</h4>\n            <p class=\"text-xs text-[#4a5568] leading-relaxed\">\n              Complete full-funnel audit: SEO health, GEO citation share, ad spend waste, tracking integrity, and CRO friction points.\n            </p>\n          </div>\n\n          <!-- Connector Pipe 1 -> 2 (Desktop only) -->\n          <div class=\"connector-pipe-wrapper hidden md:block\">\n            <div class=\"connector-pipe\">\n              <div class=\"connector-pipe-light\"></div>\n            </div>\n          </div>\n\n          <!-- Step 2 -->\n          <div class=\"bolted-card p-6 rounded-xl relative\">\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 class=\"text-xs font-mono font-bold text-[#06b6d4] mb-2\">STAGE 02 // SPRINT</div>\n            <h4 class=\"text-lg font-bold text-[#2d3436] mb-2\">Foundation Sprint</h4>\n            <p class=\"text-xs text-[#4a5568] leading-relaxed\">\n              30-day build: Tracking architecture overhaul, core landing page redesign, and primary acquisition channel setup.\n            </p>\n          </div>\n\n          <!-- Step 3 -->\n          <div class=\"bolted-card p-6 rounded-xl relative\">\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 class=\"text-xs font-mono font-bold text-[#22c55e] mb-2\">STAGE 03 // SCALE</div>\n            <h4 class=\"text-lg font-bold text-[#2d3436] mb-2\">Growth Retainer</h4>\n            <p class=\"text-xs text-[#4a5568] leading-relaxed\">\n              Continuous multichannel execution across search, AI visibility, paid media, automation, and bi-weekly attribution reporting.\n            </p>\n          </div>\n\n        </div>\n      </section>\n\n      <!-- SECTION: RADAR SWEEP & COMPETITIVE COMPARISON PREVIEW (Light Neumorphic Layout) -->\n      <section class=\"py-20 bg-[#f0f2f5] border-y border-[#d1d9e6] relative overflow-hidden bg-blueprint-light\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n          \n          <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-12 items-center\">\n            \n            <!-- Left: Radar Scope & Tech Spec -->\n            <div class=\"lg:col-span-5 flex flex-col items-center lg:items-start text-center lg:text-left space-y-6\">\n              <div class=\"flex items-center gap-3\">\n                <span class=\"led-indicator led-glow-green\"></span>\n                <span class=\"text-xs font-mono font-bold text-[#2d3436] uppercase tracking-widest\">REALTIME FUNNEL RADAR</span>\n              </div>\n              \n              <div class=\"radar-scope my-2\">\n                <div class=\"radar-sweep-beam\"></div>\n                <div class=\"radar-grid\"></div>\n                <div class=\"radar-crosshair\"></div>\n                <div class=\"radar-blip\" style=\"top: 35%; left: 62%;\"></div>\n                <div class=\"radar-blip\" style=\"top: 70%; left: 30%;\"></div>\n                <div class=\"radar-blip\" style=\"top: 25%; left: 25%;\"></div>\n              </div>\n\n              <div>\n                <h3 class=\"text-2xl font-bold text-[#2d3436] mb-2\">Engineered for Cold-Hard ROI</h3>\n                <p class=\"text-sm text-[#4a5568] leading-relaxed\">\n                  While traditional agencies hand off vanity traffic reports, TeamRion measures and delivers closed-won pipeline and qualified revenue.\n                </p>\n              </div>\n\n              <div class=\"flex items-center gap-4\">\n                <a href=\"#/compare/vs-traditional-agencies\" class=\"btn-physical-primary text-xs\">\n                  <span>COMPARE VS TRADITIONAL AGENCIES</span>\n                </a>\n              </div>\n            </div>\n\n            <!-- Right: Interactive Matrix Preview -->\n            <div class=\"lg:col-span-7\">\n              <div class=\"bolted-card bg-[#f0f2f5] p-6 rounded-2xl border border-white 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 class=\"font-mono text-xs font-bold text-[#ff4757] uppercase mb-4 flex items-center justify-between\">\n                  <span>AGENCY MODEL BENCHMARK MATRIX</span>\n                  <span class=\"text-[#718096]\">UPDATED 2026</span>\n                </div>\n\n                <div class=\"overflow-x-auto\">\n                  <table class=\"w-full text-left text-xs font-mono border-collapse\">\n                    <thead>\n                      <tr class=\"border-b border-[#d1d9e6] text-[#718096]\">\n                        <th class=\"py-3 px-2\">CAPABILITY</th>\n                        <th class=\"py-3 px-2 text-[#ff4757]\">TEAMRION</th>\n                        <th class=\"py-3 px-2\">TRADITIONAL AGENCIES</th>\n                        <th class=\"py-3 px-2\">FREELANCER BUNDLE</th>\n                      </tr>\n                    </thead>\n                    <tbody class=\"divide-y divide-[#d1d9e6] text-[#4a5568]\">\n                      <tr>\n                        <td class=\"py-3 px-2 font-semibold text-[#2d3436]\">Full-Funnel Accountability</td>\n                        <td class=\"py-3 px-2 text-[#22c55e] font-bold\">✓ 100% Unified</td>\n                        <td class=\"py-3 px-2 text-[#ff4757]\">✗ Disconnected Silos</td>\n                        <td class=\"py-3 px-2 text-[#f59e0b]\">~ Fragmented</td>\n                      </tr>\n                      <tr>\n                        <td class=\"py-3 px-2 font-semibold text-[#2d3436]\">GEO / AI Search Optimization</td>\n                        <td class=\"py-3 px-2 text-[#22c55e] font-bold\">✓ Native Stack</td>\n                        <td class=\"py-3 px-2 text-[#ff4757]\">✗ None / Outdated</td>\n                        <td class=\"py-3 px-2 text-[#ff4757]\">✗ None</td>\n                      </tr>\n                      <tr>\n                        <td class=\"py-3 px-2 font-semibold text-[#2d3436]\">Outcome & Revenue Proof</td>\n                        <td class=\"py-3 px-2 text-[#22c55e] font-bold\">✓ Verified Pipeline</td>\n                        <td class=\"py-3 px-2 text-[#ff4757]\">✗ Clicks & Impressions</td>\n                        <td class=\"py-3 px-2 text-[#f59e0b]\">~ Unverified</td>\n                      </tr>\n                      <tr>\n                        <td class=\"py-3 px-2 font-semibold text-[#2d3436]\">Published Banded Pricing</td>\n                        <td class=\"py-3 px-2 text-[#22c55e] font-bold\">✓ Real Bands (§5)</td>\n                        <td class=\"py-3 px-2 text-[#ff4757]\">✗ Hidden / \"Quote\"</td>\n                        <td class=\"py-3 px-2 text-[#f59e0b]\">~ Variable Rates</td>\n                      </tr>\n                      <tr>\n                        <td class=\"py-3 px-2 font-semibold text-[#2d3436]\">Server-Side Multi-Touch Attribution</td>\n                        <td class=\"py-3 px-2 text-[#22c55e] font-bold\">✓ Standard</td>\n                        <td class=\"py-3 px-2 text-[#ff4757]\">✗ Basic Pixel Only</td>\n                        <td class=\"py-3 px-2 text-[#ff4757]\">✗ Out of Scope</td>\n                      </tr>\n                    </tbody>\n                  </table>\n                </div>\n              </div>\n            </div>\n\n          </div>\n        </div>\n      </section>\n\n      <!-- SECTION: INTERACTIVE ROI & OPPORTUNITY CALCULATOR -->\n      <section class=\"py-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div class=\"text-center max-w-3xl mx-auto mb-16\">\n          <div class=\"masking-tape mb-3\">GROWTH CALCULATOR</div>\n          <h2 class=\"text-3xl md:text-4xl font-extrabold text-[#2d3436] tracking-tight hero-embossed-text\">\n            Calculate Your Leaked Pipeline & ROI\n          </h2>\n          <p class=\"text-base md:text-lg text-[#4a5568] mt-3\">\n            Estimate how much pipeline is lost to disconnected vendors and see the projected return from a unified growth stack.\n          </p>\n        </div>\n\n        <div class=\"bolted-card p-8 rounded-2xl max-w-4xl mx-auto bg-[#f0f2f5] border border-[#d1d9e6]\">\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 class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center\">\n            \n            <!-- Inputs -->\n            <div class=\"space-y-5\">\n              <div>\n                <label class=\"block text-xs font-mono font-bold uppercase text-[#2d3436] mb-2\">Monthly Traffic / Visitors</label>\n                <input id=\"calc-traffic\" type=\"number\" value=\"25000\" oninput=\"window.recalculateROI()\" class=\"input-recessed\" placeholder=\"e.g. 25000\" />\n              </div>\n              <div>\n                <label class=\"block text-xs font-mono font-bold uppercase text-[#2d3436] mb-2\">Current Website Conversion Rate (%)</label>\n                <input id=\"calc-cvr\" type=\"number\" step=\"0.1\" value=\"1.5\" oninput=\"window.recalculateROI()\" class=\"input-recessed\" placeholder=\"e.g. 1.5\" />\n              </div>\n              <div>\n                <label class=\"block text-xs font-mono font-bold uppercase text-[#2d3436] mb-2\">Average Contract Value / Customer ACV ($)</label>\n                <input id=\"calc-acv\" type=\"number\" value=\"4500\" oninput=\"window.recalculateROI()\" class=\"input-recessed\" placeholder=\"e.g. 4500\" />\n              </div>\n            </div>\n\n            <!-- Recessed Readout Display -->\n            <div class=\"metric-readout-module p-6 space-y-4\">\n              <div class=\"flex items-center justify-between text-xs font-mono text-[#718096]\">\n                <span>MODEL: UNIFIED FUNNEL</span>\n                <span class=\"text-[#22c55e]\">● PROJECTION</span>\n              </div>\n              \n              <div>\n                <div class=\"text-xs font-mono text-[#718096] uppercase\">Projected Annual Pipeline Gain</div>\n                <div id=\"calc-result-pipeline\" class=\"text-3xl font-extrabold font-mono text-[#22c55e] mt-1\">$405,000</div>\n              </div>\n\n              <div>\n                <div class=\"text-xs font-mono text-[#718096] uppercase\">Estimated Leaked Revenue / Mo (Fragmented Stack)</div>\n                <div id=\"calc-result-leakage\" class=\"text-2xl font-bold font-mono text-[#ff4757] mt-1\">$33,750 / mo</div>\n              </div>\n\n              <div class=\"pt-2\">\n                <a href=\"#/growth-diagnostic\" class=\"btn-physical-primary w-full text-xs\">\n                  <span>CLAIM DIAGNOSTIC AUDIT TO CAPTURE THIS</span>\n                </a>\n              </div>\n            </div>\n\n          </div>\n        </div>\n      </section>\n\n      <!-- SECTION: CASE STUDY PREVIEWS (§4 PLACEHOLDER DISCIPLINE) -->\n      <section class=\"py-20 bg-[#e0e5ec] border-t border-[#d1d9e6]\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n          \n          <div class=\"flex flex-col md:flex-row md:items-end justify-between gap-6 mb-16\">\n            <div>\n              <div class=\"masking-tape mb-3\">PROOF & CASE STUDIES</div>\n              <h2 class=\"text-3xl md:text-4xl font-extrabold text-[#2d3436] tracking-tight hero-embossed-text\">\n                Metric-Led Case Studies\n              </h2>\n              <p class=\"text-base text-[#4a5568] mt-2 max-w-xl\">\n                We anchor every case study with hard outcome data above the fold — never screenshots alone.\n              </p>\n            </div>\n            <div class=\"flex items-center gap-3\">\n              <span class=\"placeholder-data-badge\">§4 DISCIPLINE ACTIVE</span>\n              <a href=\"#/case-studies\" class=\"btn-physical-secondary text-xs\">\n                <span>VIEW ALL CASE STUDIES &rarr;</span>\n              </a>\n            </div>\n          </div>\n\n          <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n            \n            <!-- Case 1 -->\n            <div class=\"bolted-card p-6 rounded-xl flex flex-col justify-between\">\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              <div class=\"vent-slots\"><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span></div>\n              \n              <div>\n                <!-- Recessed Metric Readout Above the Fold -->\n                <div class=\"metric-readout-module mb-4\">\n                  <div class=\"flex items-center justify-between text-[10px] font-mono text-[#718096] mb-1\">\n                    <span>SECTOR: B2B SAAS</span>\n                    <span class=\"text-[#22c55e]\">● 90-DAY RESULT</span>\n                  </div>\n                  <div class=\"text-3xl font-extrabold font-mono text-[#ff4757]\">+142%</div>\n                  <div class=\"text-xs font-bold text-[#2d3436] uppercase tracking-wide\">ORGANIC PIPELINE REVENUE</div>\n                  <div class=\"placeholder-data-badge mt-2\">SAMPLE DATA — REPLACE BEFORE LAUNCH</div>\n                </div>\n\n                <!-- Client Silhouette & Summary -->\n                <div class=\"flex items-center gap-3 mb-3\">\n                  <div class=\"w-10 h-10 rounded bg-[#d1d9e6] shadow-recessed flex items-center justify-center font-mono font-bold text-[#718096]\">\n                    [LOGO]\n                  </div>\n                  <div>\n                    <h4 class=\"font-bold text-[#2d3436] text-sm\">[Client Name Placeholder — B2B Cloud]</h4>\n                    <p class=\"text-[11px] font-mono text-[#718096]\">Series B Enterprise SaaS</p>\n                  </div>\n                </div>\n\n                <p class=\"text-xs text-[#4a5568] leading-relaxed\">\n                  Replaced 3 fragmented vendors with TeamRion's unified SEO + GEO AI-search + LinkedIn Ads funnel, unlocking rapid closed-won pipeline.\n                </p>\n              </div>\n\n              <div class=\"pt-4 border-t border-[#d1d9e6] mt-4 flex items-center justify-between\">\n                <span class=\"text-[11px] font-mono text-[#718096]\">FULL BREAKDOWN</span>\n                <a href=\"#/case-studies/saas-growth-pipeline\" class=\"text-xs font-mono font-bold text-[#ff4757] hover:underline\">READ DEEP DIVE &rarr;</a>\n              </div>\n            </div>\n\n            <!-- Case 2 -->\n            <div class=\"bolted-card p-6 rounded-xl flex flex-col justify-between\">\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              <div class=\"vent-slots\"><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span></div>\n              \n              <div>\n                <!-- Recessed Metric Readout Above the Fold -->\n                <div class=\"metric-readout-module mb-4\">\n                  <div class=\"flex items-center justify-between text-[10px] font-mono text-[#718096] mb-1\">\n                    <span>SECTOR: PROF. SERVICES</span>\n                    <span class=\"text-[#06b6d4]\">● AI SHARE</span>\n                  </div>\n                  <div class=\"text-3xl font-extrabold font-mono text-[#06b6d4]\">#1 SHARE</div>\n                  <div class=\"text-xs font-bold text-[#2d3436] uppercase tracking-wide\">PERPLEXITY & CHATGPT CITATIONS</div>\n                  <div class=\"placeholder-data-badge mt-2\">SAMPLE DATA — REPLACE BEFORE LAUNCH</div>\n                </div>\n\n                <!-- Client Silhouette & Summary -->\n                <div class=\"flex items-center gap-3 mb-3\">\n                  <div class=\"w-10 h-10 rounded bg-[#d1d9e6] shadow-recessed flex items-center justify-center font-mono font-bold text-[#718096]\">\n                    [LOGO]\n                  </div>\n                  <div>\n                    <h4 class=\"font-bold text-[#2d3436] text-sm\">[Client Name Placeholder — Legal Tech]</h4>\n                    <p class=\"text-[11px] font-mono text-[#718096]\">National Corporate Advisory</p>\n                  </div>\n                </div>\n\n                <p class=\"text-xs text-[#4a5568] leading-relaxed\">\n                  Deployed structured entity graph schema and high-authority citation engineering to capture 74% share of AI-generated consulting recommendations.\n                </p>\n              </div>\n\n              <div class=\"pt-4 border-t border-[#d1d9e6] mt-4 flex items-center justify-between\">\n                <span class=\"text-[11px] font-mono text-[#718096]\">FULL BREAKDOWN</span>\n                <a href=\"#/case-studies/saas-growth-pipeline\" class=\"text-xs font-mono font-bold text-[#ff4757] hover:underline\">READ DEEP DIVE &rarr;</a>\n              </div>\n            </div>\n\n            <!-- Case 3 -->\n            <div class=\"bolted-card p-6 rounded-xl flex flex-col justify-between\">\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              <div class=\"vent-slots\"><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span><span class=\"vent-slot\"></span></div>\n              \n              <div>\n                <!-- Recessed Metric Readout Above the Fold -->\n                <div class=\"metric-readout-module mb-4\">\n                  <div class=\"flex items-center justify-between text-[10px] font-mono text-[#718096] mb-1\">\n                    <span>SECTOR: E-COMMERCE</span>\n                    <span class=\"text-[#22c55e]\">● MULTICHANNEL</span>\n                  </div>\n                  <div class=\"text-3xl font-extrabold font-mono text-[#22c55e]\">3.8x ROAS</div>\n                  <div class=\"text-xs font-bold text-[#2d3436] uppercase tracking-wide\">BLENDED REVENUE SCALE</div>\n                  <div class=\"placeholder-data-badge mt-2\">SAMPLE DATA — REPLACE BEFORE LAUNCH</div>\n                </div>\n\n                <!-- Client Silhouette & Summary -->\n                <div class=\"flex items-center gap-3 mb-3\">\n                  <div class=\"w-10 h-10 rounded bg-[#d1d9e6] shadow-recessed flex items-center justify-center font-mono font-bold text-[#718096]\">\n                    [LOGO]\n                  </div>\n                  <div>\n                    <h4 class=\"font-bold text-[#2d3436] text-sm\">[Client Name Placeholder — DTC Brand]</h4>\n                    <p class=\"text-[11px] font-mono text-[#718096]\">Omnichannel Consumer Brand</p>\n                  </div>\n                </div>\n\n                <p class=\"text-xs text-[#4a5568] leading-relaxed\">\n                  Scaled Meta & Google ad spend profitably using Server-Side CAPI tracking, rapid creative testing, and post-click landing page optimization.\n                </p>\n              </div>\n\n              <div class=\"pt-4 border-t border-[#d1d9e6] mt-4 flex items-center justify-between\">\n                <span class=\"text-[11px] font-mono text-[#718096]\">FULL BREAKDOWN</span>\n                <a href=\"#/case-studies/saas-growth-pipeline\" class=\"text-xs font-mono font-bold text-[#ff4757] hover:underline\">READ DEEP DIVE &rarr;</a>\n              </div>\n            </div>\n\n          </div>\n        </div>\n      </section>\n\n      <!-- SECTION: PRICING PREVIEW (§5 BANDED LADDER) -->\n      <section class=\"py-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div class=\"text-center max-w-3xl mx-auto mb-16\">\n          <div class=\"masking-tape mb-3\">REAL BANDED PRICING</div>\n          <h2 class=\"text-3xl md:text-4xl font-extrabold text-[#2d3436] tracking-tight hero-embossed-text\">\n            Transparent Land-and-Expand Growth Ladder\n          </h2>\n          <p class=\"text-base md:text-lg text-[#4a5568] mt-3\">\n            No hidden numbers or vague \"starting at\" quotes. A structured ladder built for measurable return at every stage.\n          </p>\n        </div>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-4 gap-6\">\n          \n          <!-- Tier 1: Growth Diagnostic -->\n          <div class=\"bolted-card p-6 rounded-2xl flex flex-col justify-between\">\n            <div class=\"punched-hole\"></div>\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>\n              <div class=\"font-mono text-xs font-bold text-[#ff4757] uppercase mb-1\">TIER 01 // AUDIT</div>\n              <h3 class=\"text-xl font-bold text-[#2d3436]\">Growth Diagnostic</h3>\n              <div class=\"my-4 p-3 bg-[#d1d9e6]/50 rounded-lg shadow-recessed text-center font-mono\">\n                <div class=\"text-2xl font-extrabold text-[#2d3436]\">$1,450</div>\n                <div class=\"text-[10px] text-[#718096] uppercase\">[INSERT FINAL PRICE] · FIXED FEE</div>\n              </div>\n              <p class=\"text-xs text-[#4a5568] mb-4 leading-relaxed\">\n                Complete diagnostic of current website, SEO rankings, AI search readiness, ad waste, and CRO friction. Delivered in 14 days.\n              </p>\n              <ul class=\"text-xs text-[#4a5568] space-y-2 border-t border-[#d1d9e6] pt-3 font-mono\">\n                <li>✓ Full Funnel Teardown</li>\n                <li>✓ AI Search Readiness Audit</li>\n                <li>✓ 90-Day Priority Action Map</li>\n              </ul>\n            </div>\n\n            <div class=\"pt-6\">\n              <a href=\"#/growth-diagnostic\" class=\"btn-physical-secondary w-full text-xs\">\n                <span>ORDER DIAGNOSTIC</span>\n              </a>\n            </div>\n          </div>\n\n          <!-- Tier 2: Foundation Sprint -->\n          <div class=\"bolted-card p-6 rounded-2xl flex flex-col justify-between\">\n            <div class=\"punched-hole\"></div>\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>\n              <div class=\"font-mono text-xs font-bold text-[#06b6d4] uppercase mb-1\">TIER 02 // SPRINT</div>\n              <h3 class=\"text-xl font-bold text-[#2d3436]\">Foundation Sprint</h3>\n              <div class=\"my-4 p-3 bg-[#d1d9e6]/50 rounded-lg shadow-recessed text-center font-mono\">\n                <div class=\"text-2xl font-extrabold text-[#2d3436]\">$6,500</div>\n                <div class=\"text-[10px] text-[#718096] uppercase\">[INSERT FINAL PRICE] · 30-DAY SPRINT</div>\n              </div>\n              <p class=\"text-xs text-[#4a5568] mb-4 leading-relaxed\">\n                30-day architectural sprint fixing tracking infrastructure, redesigning high-converting landing templates, and launching core channel.\n              </p>\n              <ul class=\"text-xs text-[#4a5568] space-y-2 border-t border-[#d1d9e6] pt-3 font-mono\">\n                <li>✓ Server-Side GTM & GA4 Overhaul</li>\n                <li>✓ 2 High-Conversion Landing Pages</li>\n                <li>✓ 1 Core Channel Launch</li>\n              </ul>\n            </div>\n\n            <div class=\"pt-6\">\n              <a href=\"#/pricing\" class=\"btn-physical-secondary w-full text-xs\">\n                <span>VIEW SPRINT SPEC</span>\n              </a>\n            </div>\n          </div>\n\n          <!-- Tier 3: Growth Retainer (Featured) -->\n          <div class=\"bolted-card p-6 rounded-2xl flex flex-col justify-between border-2 border-[#ff4757] shadow-floating bg-[#f7f9fb] relative\">\n            <div class=\"masking-tape !absolute -top-3 left-1/2 -translate-x-1/2\">MOST POPULAR PARTNERSHIP</div>\n            <div class=\"punched-hole mt-2\"></div>\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>\n              <div class=\"font-mono text-xs font-bold text-[#ff4757] uppercase mb-1\">TIER 03 // FULL FUNNEL</div>\n              <h3 class=\"text-xl font-bold text-[#2d3436]\">Growth Retainer</h3>\n              <div class=\"my-4 p-3 bg-white rounded-lg shadow-recessed text-center font-mono\">\n                <div class=\"text-xl font-extrabold text-[#ff4757]\">$4,500 – $9,500<span class=\"text-xs text-[#718096]\">/mo</span></div>\n                <div class=\"text-[10px] text-[#718096] uppercase\">[INSERT FINAL PRICE] · BANDED BY CHANNELS</div>\n              </div>\n              <p class=\"text-xs text-[#4a5568] mb-4 leading-relaxed\">\n                Our flagship full-funnel retainer. Unified execution across SEO, GEO AI search, Paid Ads, Marketing Automation, and CRO.\n              </p>\n              <ul class=\"text-xs text-[#4a5568] space-y-2 border-t border-[#d1d9e6] pt-3 font-mono\">\n                <li>✓ Multichannel Execution Squad</li>\n                <li>✓ Continuous CRO & A/B Testing</li>\n                <li>✓ Bi-Weekly Attribution Readout</li>\n              </ul>\n            </div>\n\n            <div class=\"pt-6\">\n              <a href=\"#/pricing\" class=\"btn-physical-primary w-full text-xs\">\n                <span>EXPLORE RETAINER BANDS</span>\n              </a>\n            </div>\n          </div>\n\n          <!-- Tier 4: Enterprise / Fractional -->\n          <div class=\"bolted-card p-6 rounded-2xl flex flex-col justify-between\">\n            <div class=\"punched-hole\"></div>\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>\n              <div class=\"font-mono text-xs font-bold text-[#718096] uppercase mb-1\">TIER 04 // ENTERPRISE</div>\n              <h3 class=\"text-xl font-bold text-[#2d3436]\">Fractional Growth Team</h3>\n              <div class=\"my-4 p-3 bg-[#d1d9e6]/50 rounded-lg shadow-recessed text-center font-mono\">\n                <div class=\"text-xl font-extrabold text-[#2d3436]\">CUSTOM QUOTE</div>\n                <div class=\"text-[10px] text-[#718096] uppercase\">LET'S TALK · TAILORED SCOPE</div>\n              </div>\n              <p class=\"text-xs text-[#4a5568] mb-4 leading-relaxed\">\n                Dedicated growth squad, custom data warehouse, multi-brand attribution models, and embedded Fractional Head of Growth.\n              </p>\n              <ul class=\"text-xs text-[#4a5568] space-y-2 border-t border-[#d1d9e6] pt-3 font-mono\">\n                <li>✓ Dedicated Senior Squad</li>\n                <li>✓ Custom Data Warehouse Sync</li>\n                <li>✓ Executive Board Reporting</li>\n              </ul>\n            </div>\n\n            <div class=\"pt-6\">\n              <a href=\"#/contact\" class=\"btn-physical-secondary w-full text-xs\">\n                <span>SCHEDULE BRIEFING</span>\n              </a>\n            </div>\n          </div>\n\n        </div>\n      </section>\n\n      <!-- SECTION: SCHEMA-MARKED FAQ PREVIEW -->\n      <section class=\"py-20 bg-[#e0e5ec] border-t border-[#d1d9e6]\">\n        <div class=\"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\">ENGINEERING QUESTIONS</div>\n            <h2 class=\"text-3xl md:text-4xl font-extrabold text-[#2d3436] tracking-tight hero-embossed-text\">\n              Frequently Answered Inquiries\n            </h2>\n            <p class=\"text-sm md:text-base text-[#4a5568] mt-2\">\n              Transparent answers on our operational model, technical architecture, and pricing.\n            </p>\n          </div>\n\n          <!-- FAQ Accordions -->\n          <div class=\"space-y-4\">\n            \n            <div class=\"bolted-card p-5 rounded-xl\">\n              <button onclick=\"window.toggleFAQ(this)\" class=\"w-full flex items-center justify-between text-left font-bold text-[#2d3436] text-base\">\n                <span>Why is a single full-funnel partner better than hiring specialist agencies?</span>\n                <span class=\"text-[#ff4757] text-xl font-mono\">+</span>\n              </button>\n              <div class=\"hidden pt-3 text-sm text-[#4a5568] leading-relaxed border-t border-[#d1d9e6] mt-3\">\n                Specialist agencies optimize for their isolated metric (SEO agencies for clicks, ad agencies for ROAS, design studios for aesthetics). When they don't talk to each other, you get broken tracking, blaming, and wasted budget. TeamRion aligns all disciplines around one single metric: closed-won pipeline and blended customer acquisition cost (CAC).\n              </div>\n            </div>\n\n            <div class=\"bolted-card p-5 rounded-xl\">\n              <button onclick=\"window.toggleFAQ(this)\" class=\"w-full flex items-center justify-between text-left font-bold text-[#2d3436] text-base\">\n                <span>What exactly is GEO (Generative Engine Optimization) and how does TeamRion deliver it?</span>\n                <span class=\"text-[#ff4757] text-xl font-mono\">+</span>\n              </button>\n              <div class=\"hidden pt-3 text-sm text-[#4a5568] leading-relaxed border-t border-[#d1d9e6] mt-3\">\n                GEO is optimizing your brand's entity footprint so AI engines like ChatGPT, Perplexity, Claude, and Google AI Overviews cite and recommend your product when buyers ask open-ended questions. We achieve this via schema-rich entity graphs, high-authority citation seeding, structured fact tables, and prompt-intent matching.\n              </div>\n            </div>\n\n            <div class=\"bolted-card p-5 rounded-xl\">\n              <button onclick=\"window.toggleFAQ(this)\" class=\"w-full flex items-center justify-between text-left font-bold text-[#2d3436] text-base\">\n                <span>Why are your case study metrics marked with placeholder tags?</span>\n                <span class=\"text-[#ff4757] text-xl font-mono\">+</span>\n              </button>\n              <div class=\"hidden pt-3 text-sm text-[#4a5568] leading-relaxed border-t border-[#d1d9e6] mt-3\">\n                In strict adherence to our brand integrity policy (§4), we do not fabricate client logos or outcome metrics. All current proof components are structured with transparent placeholder badges (\"SAMPLE DATA — REPLACE BEFORE LAUNCH\") and will be populated with verified client telemetry as engagements mature.\n              </div>\n            </div>\n\n          </div>\n\n          <div class=\"text-center mt-8\">\n            <a href=\"#/faq\" class=\"btn-physical-secondary text-xs\">\n              <span>VIEW COMPLETE SCHEMA-MARKED FAQ &rarr;</span>\n            </a>\n          </div>\n\n        </div>\n      </section>\n\n      <!-- SECTION: FINAL CTA ENGINE TERMINAL (Light Neumorphic Layout) -->\n      <section class=\"py-20 bg-[#f0f2f5] border-t border-[#d1d9e6] relative overflow-hidden bg-blueprint-light\">\n        <div class=\"max-w-5xl mx-auto px-4 sm:px-6 lg:px-8\">\n          \n          <div class=\"bolted-card bg-[#f0f2f5] p-8 md:p-12 rounded-3xl border border-white shadow-floating relative\">\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 class=\"text-center max-w-2xl mx-auto space-y-6\">\n              <div class=\"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#ff4757]/15 border border-[#ff4757]/30 text-[#ff4757] text-xs font-mono font-bold\">\n                <span class=\"led-indicator led-glow-orange\"></span>\n                <span>INITIALIZE GROWTH PARTNERSHIP</span>\n              </div>\n\n              <h2 class=\"text-3xl md:text-5xl font-extrabold text-[#2d3436] tracking-tight\">\n                Ready to Replace the Freelancer Patchwork?\n              </h2>\n\n              <p class=\"text-sm md:text-base text-[#4a5568] leading-relaxed\">\n                Book a 30-minute Growth Strategy Briefing with our team of record. We will review your current channels, identify leaked pipeline, and deliver a custom 90-day execution roadmap.\n              </p>\n\n              <div class=\"flex flex-wrap items-center justify-center gap-4 pt-4\">\n                <a href=\"#/contact\" class=\"btn-physical-primary\">\n                  <span>BOOK STRATEGY BRIEFING</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=\"M14 5l7 7m0 0l-7 7m7-7H3\"/></svg>\n                </a>\n                <a href=\"#/growth-diagnostic\" class=\"btn-physical-secondary\">\n                  <span>START 60-SEC DIAGNOSTIC</span>\n                </a>\n              </div>\n\n              <div class=\"pt-4 flex items-center justify-center gap-6 text-[11px] font-mono text-[#718096]\">\n                <span>✓ SLA RESPONSE &lt; 2 HOURS</span>\n                <span>✓ ZERO PRESSURE AUDIT</span>\n                <span>✓ STRICT CONFIDENTIALITY</span>\n              </div>\n            </div>\n\n          </div>\n\n        </div>\n      </section>\n    \n</div>\n"
          },
          "elements": []
        }
      ]
    }
  ]
}