{"success":true,"slug":"technical\/agentic-knowledge-graph-cms","data":{"title":"EDN, Linked Data, and the Knowledge Graph CMS: Why Agentic Websites Need a Brain | Adopt the Web","description":"A whitepaper on knowledge graph-driven content management for agentic websites. How EDN, bidirectional linking, and typed entities create a substrate that AI agents can traverse, understand, and publish \u2014 the architecture behind DAPP.","head":"\n EDN, Linked Data, and the Knowledge Graph CMS: Why Agentic Websites Need a Brain | Adopt the Web<\/title>\n <meta name=\"title\" content=\"EDN, Linked Data, and the Knowledge Graph CMS: Why Agentic Websites Need a Brain | Adopt the Web\">\n <meta name=\"description\" content=\"A whitepaper on knowledge graph-driven content management for agentic websites. How EDN, bidirectional linking, and typed entities create a substrate that AI agents can traverse, understand, and publish \u2014 the architecture behind DAPP.\">\n <link rel=\"canonical\" href=\"https:\/\/adopttheweb.com\/technical\/agentic-knowledge-graph-cms\" \/>\n\n <!-- Robots: Allow full previews for search engines and LLMs (2026 SEO) -->\n <meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\">\n\n <!-- Alternate: Machine-readable versions -->\n <link rel=\"alternate\" type=\"text\/plain\" href=\"https:\/\/adopttheweb.com\/llms.txt\" title=\"LLM-friendly documentation\">\n <link rel=\"alternate\" type=\"application\/json\" href=\"https:\/\/successportal.app\/api\/atw\/page\/technical\/agentic-knowledge-graph-cms\" title=\"JSON API\">\n\n <!-- Open Graph \/ Facebook -->\n <meta property=\"og:type\" content=\"website\">\n <meta property=\"og:url\" content=\"https:\/\/adopttheweb.com\/technical\/agentic-knowledge-graph-cms\">\n <meta property=\"og:title\" content=\"EDN, Linked Data, and the Knowledge Graph CMS: Why Agentic Websites Need a Brain\">\n <meta property=\"og:description\" content=\"A whitepaper on knowledge graph-driven content management for agentic websites. How EDN, bidirectional linking, and typed entities create a substrate that AI agents can traverse, understand, and publish \u2014 the architecture behind DAPP.\">\n <meta property=\"og:image\" content=\"https:\/\/successportal.app\/p\/adopttheweb\/og-image.php?title=EDN%2C+Linked+Data%2C+and+the+Knowledge+Graph+CMS%3A+Why+Agentic+Websites+Need+a+Brain&v=2\">\n <meta property=\"og:image:secure_url\" content=\"https:\/\/successportal.app\/p\/adopttheweb\/og-image.php?title=EDN%2C+Linked+Data%2C+and+the+Knowledge+Graph+CMS%3A+Why+Agentic+Websites+Need+a+Brain&v=2\">\n <meta property=\"og:image:width\" content=\"1200\">\n <meta property=\"og:image:height\" content=\"630\">\n <meta property=\"og:image:alt\" content=\"EDN, Linked Data, and the Knowledge Graph CMS: Why Agentic Websites Need a Brain\">\n <meta property=\"og:site_name\" content=\"Adopt the Web\">\n <meta property=\"og:locale\" content=\"en_US\">\n\n <!-- Twitter Card -->\n <meta name=\"twitter:card\" content=\"summary_large_image\">\n <meta name=\"twitter:url\" content=\"https:\/\/adopttheweb.com\/technical\/agentic-knowledge-graph-cms\">\n <meta name=\"twitter:title\" content=\"EDN, Linked Data, and the Knowledge Graph CMS: Why Agentic Websites Need a Brain\">\n <meta name=\"twitter:description\" content=\"A whitepaper on knowledge graph-driven content management for agentic websites. How EDN, bidirectional linking, and typed entities create a substrate that AI agents can traverse, understand, and publish \u2014 the architecture behind DAPP.\">\n <meta name=\"twitter:image\" content=\"https:\/\/successportal.app\/p\/adopttheweb\/og-image.php?title=EDN%2C+Linked+Data%2C+and+the+Knowledge+Graph+CMS%3A+Why+Agentic+Websites+Need+a+Brain&v=2\">\n <meta name=\"twitter:site\" content=\"@adopttheweb\">\n\n <!-- Favicon -->\n <link rel=\"icon\" type=\"image\/svg+xml\" href=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/ATW-favicon.png\" \/>\n <!-- Theme initialization (prevents flash) - Default to light -->\n <script>\n (function() {\n const theme = localStorage.getItem('atw-theme') || 'light';\n if (theme === 'light') {\n document.documentElement.classList.add('light');\n }\n })();\n <\/script>\n <!-- Tailwind CSS - Pre-compiled for better performance (no JIT overhead) -->\n <link rel=\"stylesheet\" href=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/css\/tailwind.min.css\">\n\n <style>\n \/* ===== CRITICAL CSS: Above-the-fold styles inlined for fast FCP ===== *\/\n\n \/* Inter font fallback - actual font loaded asynchronously via preload *\/\n body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n margin: 0;\n }\n\n \/* Lovelo Font - via OnlineWebFonts CDN with font-display: swap for better FCP *\/\n @font-face {\n font-family: 'Lovelo';\n src: url('https:\/\/db.onlinewebfonts.com\/t\/088f292cf151a6e496fc8cdc5441b3e3.woff2') format('woff2'),\n url('https:\/\/db.onlinewebfonts.com\/t\/088f292cf151a6e496fc8cdc5441b3e3.woff') format('woff');\n font-weight: 900;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Lovelo';\n src: url('https:\/\/db.onlinewebfonts.com\/t\/c767626538286cc0ebb99ed1ac50dd08.woff2') format('woff2'),\n url('https:\/\/db.onlinewebfonts.com\/t\/c767626538286cc0ebb99ed1ac50dd08.woff') format('woff');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n\n \/* NOTE: @import removed - Google Fonts loaded asynchronously via preload in <head> *\/\n\n h1, h2, h3, .font-display {\n font-family: 'Lovelo', 'Inter', sans-serif;\n }\n\n \/* ===== THEME STYLES ===== *\/\n \/* Default is dark mode *\/\n :root {\n --bg-primary: #0a0f1a;\n --bg-secondary: #0f172a;\n --bg-card: rgba(255, 255, 255, 0.03);\n --bg-card-solid: #1e293b;\n --text-primary: #ffffff;\n --text-secondary: #9ca3af;\n --text-muted: #6b7280;\n --border-color: rgba(255, 255, 255, 0.08);\n --border-color-hover: rgba(255, 255, 255, 0.15);\n --nav-bg: rgba(5, 8, 16, 0.95);\n --overlay-bg: rgba(0, 0, 0, 0.6);\n }\n\n \/* Light mode *\/\n html.light {\n --bg-primary: #f8fafc;\n --bg-secondary: #f1f5f9;\n --bg-card: rgba(255, 255, 255, 0.8);\n --bg-card-solid: #ffffff;\n --text-primary: #0f172a;\n --text-secondary: #475569;\n --text-muted: #64748b;\n --border-color: rgba(0, 0, 0, 0.08);\n --border-color-hover: rgba(0, 0, 0, 0.15);\n --nav-bg: rgba(248, 250, 252, 0.95);\n --overlay-bg: rgba(0, 0, 0, 0.3);\n }\n\n \/* Theme-aware body styles *\/\n body {\n background-color: var(--bg-primary);\n color: var(--text-primary);\n transition: background-color 0.3s ease, color 0.3s ease;\n }\n\n \/* Theme-aware text colors *\/\n .theme-text { color: var(--text-primary); }\n .theme-text-secondary { color: var(--text-secondary); }\n .theme-text-muted { color: var(--text-muted); }\n .theme-bg { background-color: var(--bg-primary); }\n .theme-bg-secondary { background-color: var(--bg-secondary); }\n .theme-bg-card { background-color: var(--bg-card-solid); }\n .theme-border { border-color: var(--border-color); }\n\n \/* Theme-aware hero background *\/\n .theme-hero-bg {\n background: linear-gradient(135deg, #0a0f1a 0%, #0f172a 50%, #0a0f1a 100%);\n }\n html.light .theme-hero-bg {\n background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);\n }\n\n \/* ATW Gradient - Blue to Red via Purple *\/\n .gradient-text {\n background: linear-gradient(135deg, #2563eb 0%, #7c3aed 40%, #dc2626 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .gradient-text-alt {\n background: linear-gradient(135deg, #dc2626 0%, #7c3aed 50%, #2563eb 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n \/* Animated nav bar - theme aware *\/\n .nav-animated {\n background: linear-gradient(90deg,\n var(--nav-bg) 0%,\n rgba(37, 99, 235, 0.1) 25%,\n rgba(124, 58, 237, 0.1) 50%,\n rgba(220, 38, 38, 0.1) 75%,\n var(--nav-bg) 100%);\n background-size: 200% 100%;\n animation: nav-shimmer 8s ease infinite;\n border-bottom: 1px solid var(--border-color);\n transition: background 0.3s ease, border-color 0.3s ease;\n }\n\n @keyframes nav-shimmer {\n 0%, 100% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n }\n\n \/* Glass card - theme aware *\/\n .glass-card {\n background: var(--bg-card);\n backdrop-filter: blur(10px);\n border: 1px solid var(--border-color);\n transition: background 0.3s ease, border-color 0.3s ease;\n }\n\n html.light .glass-card {\n background: rgba(255, 255, 255, 0.8);\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n }\n\n .glow-atw {\n box-shadow: 0 0 60px rgba(37, 99, 235, 0.15), 0 0 40px rgba(220, 38, 38, 0.1);\n }\n\n html.light .glow-atw {\n box-shadow: 0 0 40px rgba(37, 99, 235, 0.1), 0 0 30px rgba(220, 38, 38, 0.08);\n }\n\n \/* Theme toggle button *\/\n .theme-toggle {\n position: relative;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n .theme-toggle:hover {\n background: var(--border-color);\n }\n\n .theme-toggle .sun-icon,\n .theme-toggle .moon-icon {\n position: absolute;\n transition: opacity 0.3s ease, transform 0.3s ease;\n }\n\n .theme-toggle .sun-icon {\n opacity: 0;\n transform: rotate(-90deg) scale(0);\n }\n\n .theme-toggle .moon-icon {\n opacity: 1;\n transform: rotate(0) scale(1);\n }\n\n html.light .theme-toggle .sun-icon {\n opacity: 1;\n transform: rotate(0) scale(1);\n }\n\n html.light .theme-toggle .moon-icon {\n opacity: 0;\n transform: rotate(90deg) scale(0);\n }\n\n \/* Light mode specific overrides for dark backgrounds *\/\n html.light .bg-atw-dark {\n background-color: var(--bg-secondary);\n }\n\n html.light .bg-slate-900 {\n background-color: var(--bg-secondary);\n }\n\n html.light .bg-gradient-to-b.from-slate-900 {\n background: linear-gradient(to bottom, var(--bg-secondary), var(--bg-primary));\n }\n\n html.light .text-white {\n color: var(--text-primary);\n }\n\n html.light .text-gray-400 {\n color: var(--text-secondary);\n }\n\n html.light .text-gray-500 {\n color: var(--text-muted);\n }\n\n html.light .border-white\\\/5,\n html.light .border-white\\\/10 {\n border-color: var(--border-color);\n }\n\n html.light .bg-white\\\/5,\n html.light .bg-white\\\/3 {\n background-color: rgba(0, 0, 0, 0.03);\n }\n\n html.light .bg-white\\\/10 {\n background-color: rgba(0, 0, 0, 0.06);\n }\n\n html.light .hover\\:bg-white\\\/5:hover {\n background-color: rgba(0, 0, 0, 0.05);\n }\n\n html.light .hover\\:bg-white\\\/10:hover {\n background-color: rgba(0, 0, 0, 0.08);\n }\n\n html.light .text-gray-300 {\n color: var(--text-secondary);\n }\n\n \/* Keep avatar borders visible in light mode *\/\n html.light .border-atw-dark {\n border-color: #ffffff;\n }\n\n \/* ===== LIGHT MODE: Product\/Sales Page Hero Section ===== *\/\n \/* Override dark gradient hero sections *\/\n html.light .bg-gradient-to-b.from-atw-dark,\n html.light section.bg-gradient-to-b[class*=\"from-atw-dark\"] {\n background: linear-gradient(to bottom, var(--bg-secondary), var(--bg-primary)) !important;\n }\n\n html.light .bg-gradient-to-b.from-slate-900.to-atw-dark,\n html.light section.bg-gradient-to-b[class*=\"from-slate-900\"][class*=\"to-atw-dark\"] {\n background: linear-gradient(to bottom, var(--bg-secondary), var(--bg-primary)) !important;\n }\n\n \/* Override via-slate-900 gradient variations *\/\n html.light section[class*=\"via-slate-900\"] {\n background: linear-gradient(to bottom, var(--bg-primary), var(--bg-secondary), var(--bg-primary)) !important;\n }\n\n \/* Override bg-gradient-to-br from dark colors (feedback page, etc.) *\/\n html.light .bg-gradient-to-br.from-atw-dark,\n html.light section.bg-gradient-to-br[class*=\"from-atw-dark\"] {\n background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary), var(--bg-primary)) !important;\n }\n\n \/* Ensure proper contrast in light mode sections with dark backgrounds that are now light *\/\n html.light section.bg-slate-900,\n html.light section[class*=\"bg-slate-900\"] {\n background-color: var(--bg-secondary) !important;\n }\n\n \/* Decorative gradient blobs - make them more subtle in light mode *\/\n html.light .bg-gradient-to-br[class*=\"opacity-10\"],\n html.light .bg-gradient-to-br[class*=\"opacity-20\"] {\n opacity: 0.05 !important;\n }\n\n html.light [class*=\"blur-[100px]\"],\n html.light [class*=\"blur-[120px]\"] {\n opacity: 0.3 !important;\n }\n\n \/* Glass card icon background - stays visible in light mode *\/\n html.light .glass-card svg.text-white {\n color: var(--text-primary);\n opacity: 0.6;\n }\n\n \/* Keep gradient text visible regardless of theme *\/\n .gradient-text,\n html.light .gradient-text {\n background: linear-gradient(135deg, #2563eb 0%, #7c3aed 40%, #dc2626 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n \/* Price gradient text - ensure visibility *\/\n html.light .bg-gradient-to-r.bg-clip-text.text-transparent,\n html.light [class*=\"bg-gradient-to-r\"][class*=\"bg-clip-text\"] {\n \/* Gradients already have good contrast, no override needed *\/\n }\n\n \/* Table and pricing section text in light mode *\/\n html.light table .text-white,\n html.light .glass-card .text-white:not(.bg-gradient-to-r *):not([class*=\"bg-gradient-to-br\"] *) {\n color: var(--text-primary);\n }\n\n html.light table .text-gray-400 {\n color: var(--text-muted);\n }\n\n \/* Button text should stay white on gradient backgrounds *\/\n html.light .bg-gradient-to-r .text-white,\n html.light [class*=\"bg-gradient-to-r\"]:not(.bg-clip-text) .text-white,\n html.light button.bg-gradient-to-r,\n html.light a.bg-gradient-to-r,\n html.light [class*=\"btn-atw\"] {\n color: white !important;\n }\n\n \/* Ensure CTA buttons retain white text *\/\n html.light .btn-atw,\n html.light button[class*=\"bg-gradient-to-r\"],\n html.light a[class*=\"bg-gradient-to-r\"]:not(.bg-clip-text) {\n color: white !important;\n }\n\n \/* Popular badge should stay white text *\/\n html.light span[class*=\"bg-gradient-to-r\"].text-white {\n color: white !important;\n }\n\n \/* Trust elements - ensure visibility *\/\n html.light .text-gray-500.text-sm {\n color: var(--text-muted);\n }\n\n \/* CTA buttons should always have white text *\/\n .cta-button {\n color: white !important;\n }\n\n \/* Pricing section gradient override *\/\n html.light .pricing-section,\n html.light section#pricing {\n background: linear-gradient(to bottom, var(--bg-secondary), var(--bg-primary)) !important;\n }\n\n \/* Hero section specific overrides *\/\n html.light .hero-section {\n background: linear-gradient(to bottom, var(--bg-primary), var(--bg-secondary), var(--bg-primary)) !important;\n }\n\n \/* Hero glow effect - more subtle in light mode *\/\n html.light .hero-glow {\n opacity: 0.1 !important;\n }\n\n \/* Hero icon card in light mode *\/\n html.light .hero-icon-card {\n background: var(--bg-card-solid);\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);\n }\n\n \/* Pricing card ring offset for light mode *\/\n html.light .pricing-card {\n background: var(--bg-card-solid);\n }\n\n html.light .ring-offset-bg-primary {\n --tw-ring-offset-color: var(--bg-primary);\n }\n\n \/* CTA section gradient override *\/\n html.light .cta-section {\n background: linear-gradient(to bottom, var(--bg-primary), var(--bg-secondary)) !important;\n }\n\n \/* CTA glow effects - subtle in light mode *\/\n html.light .cta-glow {\n opacity: 0.1 !important;\n }\n\n \/* ===== FORM STYLES ===== *\/\n \/* Select dropdowns - dark mode (default) *\/\n select,\n select option,\n select optgroup {\n background-color: #1e293b;\n color: #f1f5f9;\n }\n\n select {\n cursor: pointer;\n }\n\n select option {\n padding: 8px 12px;\n }\n\n select optgroup {\n font-weight: 600;\n color: #94a3b8;\n }\n\n \/* Select dropdowns - light mode *\/\n html.light select,\n html.light select option,\n html.light select optgroup {\n background-color: #ffffff;\n color: #0f172a;\n }\n\n html.light select optgroup {\n color: #64748b;\n }\n\n \/* Input and textarea styling for dark mode *\/\n input[type=\"text\"],\n input[type=\"email\"],\n input[type=\"tel\"],\n input[type=\"url\"],\n textarea {\n background-color: rgba(255, 255, 255, 0.05);\n color: #f1f5f9;\n }\n\n input::placeholder,\n textarea::placeholder {\n color: #64748b;\n }\n\n \/* Input and textarea styling for light mode *\/\n html.light input[type=\"text\"],\n html.light input[type=\"email\"],\n html.light input[type=\"tel\"],\n html.light input[type=\"url\"],\n html.light textarea {\n background-color: rgba(0, 0, 0, 0.03);\n color: #0f172a;\n }\n\n html.light input::placeholder,\n html.light textarea::placeholder {\n color: #94a3b8;\n }\n\n \/* Focus states for forms *\/\n select:focus,\n input:focus,\n textarea:focus {\n outline: none;\n border-color: #7c3aed;\n }\n\n \/* Accessible focus-visible styles for keyboard navigation *\/\n a:focus-visible,\n button:focus-visible,\n [role=\"button\"]:focus-visible,\n [tabindex]:focus-visible {\n outline: 2px solid #7c3aed;\n outline-offset: 2px;\n border-radius: 4px;\n }\n\n \/* Reduce motion for users who prefer it *\/\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n }\n\n .btn-atw {\n background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #dc2626 100%);\n background-size: 200% 200%;\n animation: gradient-shift 3s ease infinite;\n position: relative;\n overflow: hidden;\n }\n\n .btn-atw::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\n transform: translateX(-100%);\n animation: btn-shine 3s ease-in-out infinite;\n }\n\n @keyframes btn-shine {\n 0%, 100% { transform: translateX(-100%); }\n 50% { transform: translateX(100%); }\n }\n\n @keyframes gradient-shift {\n 0%, 100% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n }\n\n .animate-gradient-x {\n background-size: 200% 200%;\n animation: gradient-shift 3s ease infinite;\n }\n\n \/* ATW Logo styling *\/\n .atw-logo {\n background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #dc2626 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n font-family: 'Lovelo', sans-serif;\n font-weight: 900;\n letter-spacing: -0.02em;\n }\n\n .animate-float {\n animation: float 6s ease-in-out infinite;\n }\n\n @keyframes float {\n 0%, 100% { transform: translateY(0px); }\n 50% { transform: translateY(-10px); }\n }\n\n .team-card:hover .team-overlay {\n opacity: 1;\n }\n\n \/* Mobile Menu Styles *\/\n .mobile-menu {\n transform: translateX(100%);\n transition: transform 0.3s ease-in-out;\n }\n\n .mobile-menu.active {\n transform: translateX(0);\n }\n\n .mobile-menu-overlay {\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease-in-out;\n }\n\n .mobile-menu-overlay.active {\n opacity: 1;\n pointer-events: auto;\n }\n\n \/* Hamburger Animation *\/\n .hamburger-line {\n transition: all 0.3s ease-in-out;\n }\n\n .hamburger.active .hamburger-line:nth-child(1) {\n transform: rotate(45deg) translate(6px, 6px);\n }\n\n .hamburger.active .hamburger-line:nth-child(2) {\n opacity: 0;\n }\n\n .hamburger.active .hamburger-line:nth-child(3) {\n transform: rotate(-45deg) translate(6px, -6px);\n }\n\n \/* ===== MEGA MENU STYLES ===== *\/\n .mega-menu-trigger {\n position: relative;\n }\n\n .mega-menu-trigger .chevron-icon {\n transition: transform 0.3s ease;\n }\n\n .mega-menu-trigger:hover .chevron-icon,\n .mega-menu-trigger.active .chevron-icon {\n transform: rotate(180deg);\n }\n\n .mega-menu {\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%) translateY(10px);\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n z-index: 100;\n }\n\n .mega-menu.active {\n transform: translateX(-50%) translateY(0);\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n }\n\n .mega-menu-container {\n background: var(--bg-card-solid);\n border: 1px solid var(--border-color);\n border-radius: 16px;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n overflow: hidden;\n min-width: 720px;\n backdrop-filter: blur(20px);\n }\n\n html.light .mega-menu-container {\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);\n }\n\n \/* Mega menu animated gradient border *\/\n .mega-menu-container::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: 16px;\n padding: 1px;\n background: linear-gradient(135deg, #2563eb, #7c3aed, #dc2626);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .mega-menu.active .mega-menu-container::before {\n opacity: 1;\n }\n\n \/* Mega menu category item *\/\n .mega-menu-item {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px;\n border-radius: 12px;\n transition: all 0.2s ease;\n text-decoration: none;\n }\n\n .mega-menu-item:hover {\n background: var(--border-color);\n transform: translateX(4px);\n }\n\n .mega-menu-item .item-icon {\n width: 40px;\n height: 40px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: transform 0.2s ease;\n }\n\n .mega-menu-item:hover .item-icon {\n transform: scale(1.1);\n }\n\n .mega-menu-item .item-content h4 {\n font-weight: 600;\n margin-bottom: 2px;\n transition: color 0.2s ease;\n }\n\n .mega-menu-item:hover .item-content h4 {\n color: #7c3aed;\n }\n\n .mega-menu-item .item-content p {\n font-size: 13px;\n line-height: 1.4;\n }\n\n \/* Featured section in mega menu *\/\n .mega-menu-featured {\n background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(124, 58, 237, 0.1));\n padding: 24px;\n position: relative;\n overflow: hidden;\n }\n\n html.light .mega-menu-featured {\n background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(124, 58, 237, 0.05));\n }\n\n .mega-menu-featured::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -50%;\n width: 100%;\n height: 100%;\n background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 70%);\n animation: mega-glow 4s ease-in-out infinite;\n }\n\n @keyframes mega-glow {\n 0%, 100% { transform: translate(0, 0); opacity: 0.5; }\n 50% { transform: translate(-20%, 20%); opacity: 1; }\n }\n\n \/* Quick link pills in mega menu *\/\n .mega-menu-pill {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n background: var(--border-color);\n border-radius: 20px;\n font-size: 13px;\n font-weight: 500;\n transition: all 0.2s ease;\n text-decoration: none;\n }\n\n .mega-menu-pill:hover {\n background: linear-gradient(135deg, #2563eb, #7c3aed);\n color: white !important;\n transform: translateY(-2px);\n }\n\n \/* Mega menu arrow pointer *\/\n .mega-menu-arrow {\n position: absolute;\n top: -8px;\n left: 50%;\n transform: translateX(-50%);\n width: 16px;\n height: 16px;\n background: var(--bg-card-solid);\n border: 1px solid var(--border-color);\n border-right: none;\n border-bottom: none;\n transform: translateX(-50%) rotate(45deg);\n z-index: 1;\n }\n\n \/* Staggered animation for menu items *\/\n .mega-menu-item {\n opacity: 0;\n transform: translateY(10px);\n }\n\n .mega-menu.active .mega-menu-item {\n animation: mega-item-in 0.3s ease forwards;\n }\n\n .mega-menu.active .mega-menu-item:nth-child(1) { animation-delay: 0.05s; }\n .mega-menu.active .mega-menu-item:nth-child(2) { animation-delay: 0.1s; }\n .mega-menu.active .mega-menu-item:nth-child(3) { animation-delay: 0.15s; }\n .mega-menu.active .mega-menu-item:nth-child(4) { animation-delay: 0.2s; }\n .mega-menu.active .mega-menu-item:nth-child(5) { animation-delay: 0.25s; }\n .mega-menu.active .mega-menu-item:nth-child(6) { animation-delay: 0.3s; }\n\n @keyframes mega-item-in {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n <\/style>\n<!-- Google Analytics deferred: loaded via requestIdleCallback to reduce TBT -->\n<script>\n(function() {\n function loadGA() {\n var s = document.createElement('script');\n s.src = 'https:\/\/www.googletagmanager.com\/gtag\/js?id=UA-161579897-3';\n s.async = true;\n document.head.appendChild(s);\n window.dataLayer = window.dataLayer || [];\n function gtag(){dataLayer.push(arguments);}\n window.gtag = gtag;\n gtag('js', new Date());\n gtag('config', 'UA-161579897-3');\n }\n \/\/ Defer GA loading until browser is idle (reduces TBT)\n if ('requestIdleCallback' in window) {\n requestIdleCallback(loadGA, { timeout: 3000 });\n } else {\n setTimeout(loadGA, 2000);\n }\n})();\n<\/script>\n\n<script type=\"application\/ld+json\">\n{\n \"@context\": \"https:\/\/schema.org\",\n \"@graph\": [\n {\n \"@type\": \"Organization\",\n \"@id\": \"https:\/\/adopttheweb.com\/#organization\",\n \"name\": \"Adopt the Web\",\n \"alternateName\": \"ATW\",\n \"url\": \"https:\/\/adopttheweb.com\",\n \"logo\": {\n \"@type\": \"ImageObject\",\n \"@id\": \"https:\/\/adopttheweb.com\/#logo\",\n \"url\": \"https:\/\/adopttheweb.com\/assets\/images\/ATW-favicon.png\",\n \"contentUrl\": \"https:\/\/adopttheweb.com\/assets\/images\/ATW-favicon.png\",\n \"width\": 512,\n \"height\": 512,\n \"caption\": \"Adopt the Web Logo\"\n },\n \"image\": {\n \"@id\": \"https:\/\/adopttheweb.com\/#logo\"\n },\n \"description\": \"Web design, development, hosting, and SEO services for businesses. From websites and web apps to search optimization and beyond.\",\n \"foundingDate\": \"2010\",\n \"founder\": {\n \"@type\": \"Person\",\n \"@id\": \"https:\/\/adopttheweb.com\/#founder\",\n \"name\": \"Jarod Thornton\",\n \"jobTitle\": \"Founder & Lead Developer\"\n },\n \"address\": {\n \"@type\": \"PostalAddress\",\n \"addressLocality\": \"Lexington\",\n \"addressRegion\": \"KY\",\n \"postalCode\": \"40502\",\n \"addressCountry\": \"US\"\n },\n \"geo\": {\n \"@type\": \"GeoCoordinates\",\n \"latitude\": \"38.0406\",\n \"longitude\": \"-84.5037\"\n },\n \"telephone\": \"+1-859-800-6384\",\n \"email\": \"hello@adopttheweb.com\",\n \"contactPoint\": {\n \"@type\": \"ContactPoint\",\n \"contactType\": \"sales\",\n \"telephone\": \"+1-859-800-6384\",\n \"email\": \"hello@adopttheweb.com\",\n \"url\": \"https:\/\/adopttheweb.com\/contact\",\n \"availableLanguage\": \"English\"\n },\n \"sameAs\": [\n \"https:\/\/twitter.com\/adopttheweb\",\n \"https:\/\/www.facebook.com\/adopttheweb\",\n \"https:\/\/www.linkedin.com\/company\/adopt-the-web\",\n \"https:\/\/www.bbb.org\/us\/ky\/lexington\/profile\/web-design\/adopt-the-web-0402-211445364\"\n ],\n \"areaServed\": {\n \"@type\": \"Country\",\n \"name\": \"United States\"\n },\n \"knowsAbout\": [\n \"Web Development\",\n \"Web Design\",\n \"WordPress Development\",\n \"SEO\",\n \"Local SEO\",\n \"Web Hosting\",\n \"E-commerce\",\n \"Digital Marketing\",\n \"Website Maintenance\"\n ],\n \"slogan\": \"Your Digital Growth Partner\"\n },\n {\n \"@type\": \"WebSite\",\n \"@id\": \"https:\/\/adopttheweb.com\/#website\",\n \"url\": \"https:\/\/adopttheweb.com\",\n \"name\": \"Adopt the Web\",\n \"description\": \"Web design, development, hosting, and SEO services\",\n \"publisher\": {\n \"@id\": \"https:\/\/adopttheweb.com\/#organization\"\n },\n \"inLanguage\": \"en-US\",\n \"potentialAction\": {\n \"@type\": \"SearchAction\",\n \"target\": {\n \"@type\": \"EntryPoint\",\n \"urlTemplate\": \"https:\/\/adopttheweb.com\/?s={search_term_string}\"\n },\n \"query-input\": \"required name=search_term_string\"\n }\n },\n {\n \"@type\": \"WebPage\",\n \"@id\": \"https:\/\/adopttheweb.com\/technical\/agentic-knowledge-graph-cms#webpage\",\n \"url\": \"https:\/\/adopttheweb.com\/technical\/agentic-knowledge-graph-cms\",\n \"name\": \"EDN, Linked Data, and the Knowledge Graph CMS: Why Agentic Websites Need a Brain | Adopt the Web\",\n \"description\": \"A whitepaper on knowledge graph-driven content management for agentic websites. How EDN, bidirectional linking, and typed entities create a substrate that AI agents can traverse, understand, and publish \\u2014 the architecture behind DAPP.\",\n \"isPartOf\": {\n \"@id\": \"https:\/\/adopttheweb.com\/#website\"\n },\n \"about\": {\n \"@id\": \"https:\/\/adopttheweb.com\/#organization\"\n },\n \"publisher\": {\n \"@id\": \"https:\/\/adopttheweb.com\/#organization\"\n },\n \"inLanguage\": \"en-US\",\n \"datePublished\": \"2026-06-08T04:55:30+00:00\",\n \"dateModified\": \"2026-06-08T00:00:00+00:00\",\n \"breadcrumb\": {\n \"@id\": \"https:\/\/adopttheweb.com\/technical\/agentic-knowledge-graph-cms#breadcrumb\"\n },\n \"primaryImageOfPage\": {\n \"@type\": \"ImageObject\",\n \"@id\": \"https:\/\/adopttheweb.com\/technical\/agentic-knowledge-graph-cms#primaryimage\",\n \"url\": \"https:\/\/successportal.app\/p\/adopttheweb\/og-image.php?title=EDN%2C+Linked+Data%2C+and+the+Knowledge+Graph+CMS%3A+Why+Agentic+Websites+Need+a+Brain&v=2\",\n \"contentUrl\": \"https:\/\/successportal.app\/p\/adopttheweb\/og-image.php?title=EDN%2C+Linked+Data%2C+and+the+Knowledge+Graph+CMS%3A+Why+Agentic+Websites+Need+a+Brain&v=2\",\n \"width\": 1200,\n \"height\": 630\n }\n },\n {\n \"@type\": \"BreadcrumbList\",\n \"@id\": \"https:\/\/adopttheweb.com\/technical\/agentic-knowledge-graph-cms#breadcrumb\",\n \"itemListElement\": [\n {\n \"@type\": \"ListItem\",\n \"position\": 1,\n \"name\": \"Home\",\n \"item\": \"https:\/\/adopttheweb.com\"\n },\n {\n \"@type\": \"ListItem\",\n \"position\": 2,\n \"name\": \"Technical\",\n \"item\": \"https:\/\/adopttheweb.com\/technical\"\n },\n {\n \"@type\": \"ListItem\",\n \"position\": 3,\n \"name\": \"Agentic Knowledge Graph Cms\",\n \"item\": \"https:\/\/adopttheweb.com\/technical\/agentic-knowledge-graph-cms\"\n }\n ]\n }\n ]\n}\n<\/script>\n","body":"\n\n <!-- Skip to main content link (accessibility) -->\n <a href=\"#main-content\" class=\"sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[100] focus:px-4 focus:py-2 focus:bg-atw-blue focus:text-white focus:rounded-lg focus:outline-none\">\n Skip to main content\n <\/a>\n\n <!-- Navigation -->\n <nav class=\"fixed top-0 left-0 right-0 z-50 nav-animated backdrop-blur-xl\" aria-label=\"Main navigation\">\n <div class=\"max-w-7xl mx-auto px-6 py-4\">\n <div class=\"flex items-center justify-between\">\n <a href=\"\/\" class=\"flex items-center gap-3\" aria-label=\"Adopt the Web - Home\">\n <div class=\"px-3 py-2 bg-gradient-to-br from-atw-blue via-atw-purple to-atw-red flex items-center justify-center font-bold text-lg font-display tracking-tight\" style=\"color: white !important;\" aria-hidden=\"true\">ATW<\/div>\n <span class=\"text-xl font-bold hidden sm:inline font-display theme-text\">Adopt the Web<\/span>\n <\/a>\n\n <!-- Desktop Menu with Mega Menus -->\n <div class=\"hidden md:flex items-center gap-6\">\n\n <!-- About Mega Menu Trigger -->\n <div class=\"mega-menu-trigger relative\" data-megamenu=\"about\">\n <button class=\"flex items-center gap-1 theme-text-secondary hover:theme-text transition-colors py-2\"\n aria-expanded=\"false\"\n aria-haspopup=\"true\"\n aria-controls=\"megamenu-about\">\n About\n <svg class=\"w-4 h-4 chevron-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"\/>\n <\/svg>\n <\/button>\n\n <!-- About Mega Menu Panel -->\n <div class=\"mega-menu\" id=\"megamenu-about\" role=\"menu\" aria-hidden=\"true\">\n <div class=\"mega-menu-arrow\"><\/div>\n <div class=\"mega-menu-container\" style=\"min-width: 520px;\">\n <div class=\"grid grid-cols-2\">\n <!-- Left: Links -->\n <div class=\"p-6\">\n <div class=\"flex items-center gap-2 mb-4\">\n <span class=\"text-xs font-bold uppercase tracking-wider theme-text-muted\">About Us<\/span>\n <div class=\"flex-1 h-px bg-gradient-to-r from-atw-purple\/50 to-transparent\"><\/div>\n <\/div>\n <div class=\"space-y-1\">\n <a href=\"\/about\" class=\"mega-menu-item\">\n <div class=\"item-icon bg-gradient-to-br from-blue-500 to-purple-600\">\n <svg class=\"w-5 h-5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\/>\n <\/svg>\n <\/div>\n <div class=\"item-content\">\n <h4 class=\"theme-text\">Our Story<\/h4>\n <p class=\"theme-text-muted\">Who we are & what we do<\/p>\n <\/div>\n <\/a>\n <a href=\"\/about#team\" class=\"mega-menu-item\">\n <div class=\"item-icon bg-gradient-to-br from-indigo-500 to-violet-600\">\n <svg class=\"w-5 h-5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\"\/>\n <\/svg>\n <\/div>\n <div class=\"item-content\">\n <h4 class=\"theme-text\">Meet the Team<\/h4>\n <p class=\"theme-text-muted\">The people behind ATW<\/p>\n <\/div>\n <\/a>\n <a href=\"\/agile\" class=\"mega-menu-item\">\n <div class=\"item-icon bg-gradient-to-br from-emerald-500 to-teal-600\">\n <svg class=\"w-5 h-5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\/>\n <\/svg>\n <\/div>\n <div class=\"item-content\">\n <h4 class=\"theme-text\">Our Agile Approach<\/h4>\n <p class=\"theme-text-muted\">How we build projects<\/p>\n <\/div>\n <\/a>\n <a href=\"\/reviews\" class=\"mega-menu-item\">\n <div class=\"item-icon bg-gradient-to-br from-yellow-500 to-orange-600\">\n <svg class=\"w-5 h-5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.539-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z\"\/>\n <\/svg>\n <\/div>\n <div class=\"item-content\">\n <h4 class=\"theme-text\">Client Reviews<\/h4>\n <p class=\"theme-text-muted\">What our clients say<\/p>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n <!-- Right: Featured -->\n <div class=\"mega-menu-featured\">\n <div class=\"relative z-10\">\n <span class=\"inline-flex items-center gap-1.5 px-2 py-1 bg-gradient-to-r from-atw-blue to-atw-purple text-white text-xs font-bold rounded-full mb-3\">\n <svg class=\"w-3 h-3\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z\" clip-rule=\"evenodd\"\/>\n <path d=\"M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z\"\/>\n <\/svg>\n Since 2010\n <\/span>\n <h4 class=\"text-lg font-bold theme-text mb-2\">Let's Work Together<\/h4>\n <p class=\"text-sm theme-text-secondary mb-4\">We'd love to hear about your project. Schedule a free consultation to get started.<\/p>\n <button onclick=\"openConsultModal(); closeMegaMenus();\" class=\"w-full px-4 py-2.5 btn-atw text-white text-sm font-semibold rounded-lg\">\n Schedule a Call\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Services Mega Menu Trigger -->\n <div class=\"mega-menu-trigger relative\" data-megamenu=\"services\">\n <button class=\"flex items-center gap-1 theme-text-secondary hover:theme-text transition-colors py-2\"\n aria-expanded=\"false\"\n aria-haspopup=\"true\"\n aria-controls=\"megamenu-services\">\n Services\n <svg class=\"w-4 h-4 chevron-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"\/>\n <\/svg>\n <\/button>\n\n <!-- Services Mega Menu Panel -->\n <div class=\"mega-menu\" id=\"megamenu-services\" role=\"menu\" aria-hidden=\"true\">\n <div class=\"mega-menu-arrow\"><\/div>\n <div class=\"mega-menu-container\">\n <div class=\"grid grid-cols-3\">\n <!-- Left Column: Service Categories -->\n <div class=\"col-span-2 p-6\">\n <div class=\"flex items-center gap-2 mb-4\">\n <span class=\"text-xs font-bold uppercase tracking-wider theme-text-muted\">Our Services<\/span>\n <div class=\"flex-1 h-px bg-gradient-to-r from-atw-purple\/50 to-transparent\"><\/div>\n <\/div>\n <div class=\"grid grid-cols-2 gap-2\">\n <!-- Hosting -->\n <a href=\"\/products-services#hosting\" class=\"mega-menu-item\">\n <div class=\"item-icon bg-gradient-to-br from-blue-500 to-purple-600\">\n <svg class=\"w-5 h-5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2\"\/>\n <\/svg>\n <\/div>\n <div class=\"item-content\">\n <h4 class=\"theme-text\">Hosting<\/h4>\n <p class=\"theme-text-muted\">Fast, secure managed hosting<\/p>\n <\/div>\n <\/a>\n <!-- SEO -->\n <a href=\"\/products-services#seo\" class=\"mega-menu-item\">\n <div class=\"item-icon bg-gradient-to-br from-emerald-500 to-teal-600\">\n <svg class=\"w-5 h-5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"\/>\n <\/svg>\n <\/div>\n <div class=\"item-content\">\n <h4 class=\"theme-text\">SEO & Search<\/h4>\n <p class=\"theme-text-muted\">Get found online<\/p>\n <\/div>\n <\/a>\n <!-- Design -->\n <a href=\"\/products-services#design\" class=\"mega-menu-item\">\n <div class=\"item-icon bg-gradient-to-br from-violet-500 to-purple-600\">\n <svg class=\"w-5 h-5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\"\/>\n <\/svg>\n <\/div>\n <div class=\"item-content\">\n <h4 class=\"theme-text\">Design & Dev<\/h4>\n <p class=\"theme-text-muted\">Custom websites & apps<\/p>\n <\/div>\n <\/a>\n <!-- Marketing -->\n <a href=\"\/products-services#marketing\" class=\"mega-menu-item\">\n <div class=\"item-icon bg-gradient-to-br from-pink-500 to-rose-600\">\n <svg class=\"w-5 h-5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z\"\/>\n <\/svg>\n <\/div>\n <div class=\"item-content\">\n <h4 class=\"theme-text\">Marketing<\/h4>\n <p class=\"theme-text-muted\">Ads, social & content<\/p>\n <\/div>\n <\/a>\n <!-- Tools -->\n <a href=\"\/products-services#tools\" class=\"mega-menu-item\">\n <div class=\"item-icon bg-gradient-to-br from-green-500 to-emerald-600\">\n <svg class=\"w-5 h-5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\"\/>\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"\/>\n <\/svg>\n <\/div>\n <div class=\"item-content\">\n <h4 class=\"theme-text\">Smart Widgets<\/h4>\n <p class=\"theme-text-muted\">Powerful add-ons<\/p>\n <\/div>\n <\/a>\n <!-- Maintenance -->\n <a href=\"\/products-services\/website-maintenance\" class=\"mega-menu-item\">\n <div class=\"item-icon bg-gradient-to-br from-amber-500 to-orange-600\">\n <svg class=\"w-5 h-5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z\"\/>\n <\/svg>\n <\/div>\n <div class=\"item-content\">\n <h4 class=\"theme-text\">Support<\/h4>\n <p class=\"theme-text-muted\">Maintenance & help<\/p>\n <\/div>\n <\/a>\n <\/div>\n <!-- Quick Links -->\n <div class=\"mt-6 pt-4 border-t theme-border\">\n <div class=\"flex items-center gap-3 flex-wrap\">\n <span class=\"text-xs font-semibold theme-text-muted\">Popular:<\/span>\n <a href=\"\/products-services\/managed-wordpress\" class=\"mega-menu-pill theme-text-secondary\">\n <span class=\"w-2 h-2 rounded-full bg-blue-500\"><\/span>\n WordPress Hosting\n <\/a>\n <a href=\"\/products-services\/getreviews\" class=\"mega-menu-pill theme-text-secondary\">\n <span class=\"w-2 h-2 rounded-full bg-yellow-500\"><\/span>\n GetReviews\n <\/a>\n <a href=\"\/products-services\/optimized-search-solutions\" class=\"mega-menu-pill theme-text-secondary\">\n <span class=\"w-2 h-2 rounded-full bg-emerald-500\"><\/span>\n SEO Package\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <!-- Right Column: Featured -->\n <div class=\"mega-menu-featured\">\n <div class=\"relative z-10\">\n <span class=\"inline-flex items-center gap-1.5 px-2 py-1 bg-gradient-to-r from-atw-blue to-atw-purple text-white text-xs font-bold rounded-full mb-3\">\n <svg class=\"w-3 h-3\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/>\n <\/svg>\n Featured\n <\/span>\n <h4 class=\"text-lg font-bold theme-text mb-2\">Free Consultation<\/h4>\n <p class=\"text-sm theme-text-secondary mb-4\">Not sure where to start? Let's talk about your goals and find the perfect solution.<\/p>\n <button onclick=\"openConsultModal(); closeMegaMenus();\" class=\"w-full px-4 py-2.5 btn-atw text-white text-sm font-semibold rounded-lg\">\n Schedule a Call\n <\/button>\n <div class=\"mt-4 pt-4 border-t border-white\/10\">\n <a href=\"\/products\" class=\"flex items-center gap-2 text-sm font-medium theme-text hover:text-atw-purple transition-colors\">\n View All Products\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"\/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Projects Mega Menu Trigger -->\n <div class=\"mega-menu-trigger relative\" data-megamenu=\"projects\">\n <button class=\"flex items-center gap-1 theme-text-secondary hover:theme-text transition-colors py-2\"\n aria-expanded=\"false\"\n aria-haspopup=\"true\"\n aria-controls=\"megamenu-projects\">\n Work\n <svg class=\"w-4 h-4 chevron-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"\/>\n <\/svg>\n <\/button>\n\n <!-- Projects Mega Menu Panel -->\n <div class=\"mega-menu\" id=\"megamenu-projects\" role=\"menu\" aria-hidden=\"true\">\n <div class=\"mega-menu-arrow\"><\/div>\n <div class=\"mega-menu-container\" style=\"min-width: 500px;\">\n <div class=\"grid grid-cols-2\">\n <!-- Left: Links -->\n <div class=\"p-6\">\n <div class=\"flex items-center gap-2 mb-4\">\n <span class=\"text-xs font-bold uppercase tracking-wider theme-text-muted\">Our Work<\/span>\n <div class=\"flex-1 h-px bg-gradient-to-r from-atw-blue\/50 to-transparent\"><\/div>\n <\/div>\n <div class=\"space-y-1\">\n <a href=\"\/projects\" class=\"mega-menu-item\">\n <div class=\"item-icon bg-gradient-to-br from-blue-500 to-purple-600\">\n <svg class=\"w-5 h-5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\/>\n <\/svg>\n <\/div>\n <div class=\"item-content\">\n <h4 class=\"theme-text\">Portfolio<\/h4>\n <p class=\"theme-text-muted\">View our latest work<\/p>\n <\/div>\n <\/a>\n <a href=\"https:\/\/adopttheweb.com\/about#team\" class=\"mega-menu-item\">\n <div class=\"item-icon bg-gradient-to-br from-indigo-500 to-violet-600\">\n <svg class=\"w-5 h-5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\"\/>\n <\/svg>\n <\/div>\n <div class=\"item-content\">\n <h4 class=\"theme-text\">Meet the Team<\/h4>\n <p class=\"theme-text-muted\">The people behind ATW<\/p>\n <\/div>\n <\/a>\n <a href=\"https:\/\/adopttheweb.com\/reviews\" class=\"mega-menu-item\">\n <div class=\"item-icon bg-gradient-to-br from-yellow-500 to-orange-600\">\n <svg class=\"w-5 h-5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z\"\/>\n <\/svg>\n <\/div>\n <div class=\"item-content\">\n <h4 class=\"theme-text\">Reviews<\/h4>\n <p class=\"theme-text-muted\">What clients say<\/p>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n <!-- Right: Featured Project -->\n <div class=\"mega-menu-featured\">\n <div class=\"relative z-10\">\n <span class=\"inline-flex items-center gap-1.5 px-2 py-1 bg-gradient-to-r from-cyan-500 to-teal-500 text-white text-xs font-bold rounded-full mb-3\">\n <svg class=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z\"\/>\n <\/svg>\n Featured Project\n <\/span>\n <h4 class=\"text-lg font-bold theme-text mb-2\">Tarter Farm & Ranch<\/h4>\n <p class=\"text-sm theme-text-secondary mb-4\">Complete e-commerce redesign with custom product configurator.<\/p>\n <a href=\"\/projects\/tarter-usa\/\" class=\"inline-flex items-center gap-2 text-sm font-medium text-atw-blue hover:text-atw-purple transition-colors\">\n View Case Study\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"\/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <a href=\"https:\/\/adopttheweb.com\/weblog\" class=\"theme-text-secondary hover:theme-text transition-colors py-2\">Blog<\/a>\n <\/div>\n\n <!-- Desktop CTA -->\n <div class=\"hidden md:flex items-center gap-4\">\n <!-- Ask ATW Search (disabled temporarily while configuring Cloudflare AI Search)\n <button onclick=\"openAskATW()\" class=\"theme-text-secondary hover:theme-text transition-colors p-2 flex items-center gap-1.5 rounded-lg\" aria-label=\"Search with AI\" title=\"Ask ATW (Ctrl+K)\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" stroke-width=\"2\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.35-4.35\" stroke-linecap=\"round\"\/>\n <\/svg>\n <span class=\"hidden lg:inline text-sm\">Ask ATW<\/span>\n <\/button>\n -->\n <!-- Theme Toggle -->\n <button onclick=\"toggleTheme()\" class=\"theme-toggle\" aria-label=\"Toggle theme\" title=\"Toggle light\/dark mode\">\n <svg class=\"w-5 h-5 sun-icon text-amber-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z\"\/>\n <\/svg>\n <svg class=\"w-5 h-5 moon-icon theme-text-secondary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\"\/>\n <\/svg>\n <\/button>\n <a href=\"tel:8883368053\" class=\"hidden lg:flex items-center gap-2 theme-text-secondary hover:theme-text transition-colors\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\"\/>\n <\/svg>\n (888) 336-8053\n <\/a>\n <button onclick=\"openConsultModal()\" class=\"px-5 py-2.5 btn-atw font-semibold transition-all hover:shadow-lg hover:shadow-atw-purple\/25\">\n Let's Talk\n <\/button>\n <\/div>\n\n <!-- Mobile CTA & Menu Button -->\n <div class=\"md:hidden flex items-center gap-2\">\n <!-- Mobile Theme Toggle -->\n <button onclick=\"toggleTheme()\" class=\"theme-toggle\" aria-label=\"Toggle theme\" title=\"Toggle light\/dark mode\">\n <svg class=\"w-5 h-5 sun-icon text-amber-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z\"\/>\n <\/svg>\n <svg class=\"w-5 h-5 moon-icon theme-text-secondary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\"\/>\n <\/svg>\n <\/button>\n <button onclick=\"openConsultModal()\" class=\"px-3 py-2 btn-atw text-sm font-semibold transition-all hover:shadow-lg hover:shadow-atw-purple\/25 flex items-center gap-2\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z\"\/>\n <\/svg>\n <span class=\"hidden sm:inline\">Talk<\/span>\n <\/button>\n <button id=\"mobile-menu-button\" class=\"p-2 theme-text-secondary hover:theme-text transition-colors hamburger\"\n aria-label=\"Open navigation menu\"\n aria-expanded=\"false\"\n aria-controls=\"mobile-menu\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <line class=\"hamburger-line\" x1=\"4\" y1=\"8\" x2=\"20\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <line class=\"hamburger-line\" x1=\"4\" y1=\"16\" x2=\"20\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <line class=\"hamburger-line\" x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/nav>\n\n <!-- Mobile Menu Overlay -->\n <div id=\"mobile-menu-overlay\" class=\"mobile-menu-overlay fixed inset-0 backdrop-blur-sm z-40 md:hidden\" style=\"background: var(--overlay-bg);\" aria-hidden=\"true\"><\/div>\n\n <!-- Mobile Menu -->\n <div id=\"mobile-menu\" class=\"mobile-menu fixed top-0 right-0 bottom-0 w-80 max-w-[85vw] z-50 md:hidden shadow-2xl theme-border\" style=\"background: var(--bg-primary); border-left: 1px solid var(--border-color);\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Navigation menu\" aria-hidden=\"true\">\n <div class=\"flex flex-col h-full\">\n <!-- Mobile Menu Header -->\n <div class=\"flex items-center justify-between p-6 theme-border\" style=\"border-bottom: 1px solid var(--border-color);\">\n <div class=\"flex items-center gap-3\">\n <div class=\"px-3 py-2 bg-gradient-to-br from-atw-blue via-atw-purple to-atw-red flex items-center justify-center font-bold text-lg font-display tracking-tight\" style=\"color: white !important;\" aria-hidden=\"true\">ATW<\/div>\n <span class=\"text-lg font-bold font-display theme-text\">Menu<\/span>\n <\/div>\n <button id=\"mobile-menu-close\" class=\"p-2 theme-text-secondary hover:theme-text transition-colors\" aria-label=\"Close navigation menu\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"\/>\n <\/svg>\n <\/button>\n <\/div>\n\n <!-- Mobile Menu Links -->\n <div class=\"flex-1 overflow-y-auto py-6\">\n <nav class=\"space-y-1 px-4\" aria-label=\"Mobile navigation\">\n <a href=\"https:\/\/adopttheweb.com\/\" class=\"flex items-center gap-4 px-4 py-3 theme-text-secondary hover:theme-text rounded-lg transition-all group\" style=\"background: transparent;\" onmouseover=\"this.style.background='var(--border-color)'\" onmouseout=\"this.style.background='transparent'\">\n <svg class=\"w-5 h-5 text-atw-blue group-hover:scale-110 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6\"\/>\n <\/svg>\n <span class=\"font-medium\">Home<\/span>\n <\/a>\n <a href=\"https:\/\/adopttheweb.com\/about\" class=\"flex items-center gap-4 px-4 py-3 theme-text-secondary hover:theme-text rounded-lg transition-all group\" style=\"background: transparent;\" onmouseover=\"this.style.background='var(--border-color)'\" onmouseout=\"this.style.background='transparent'\">\n <svg class=\"w-5 h-5 text-atw-purple group-hover:scale-110 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\n <\/svg>\n <span class=\"font-medium\">About<\/span>\n <\/a>\n <a href=\"\/agile\" class=\"flex items-center gap-4 px-4 py-3 theme-text-secondary hover:theme-text rounded-lg transition-all group\" style=\"background: transparent;\" onmouseover=\"this.style.background='var(--border-color)'\" onmouseout=\"this.style.background='transparent'\">\n <svg class=\"w-5 h-5 text-emerald-500 group-hover:scale-110 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\/>\n <\/svg>\n <span class=\"font-medium\">Our Approach<\/span>\n <\/a>\n <a href=\"\/products-services\" class=\"flex items-center gap-4 px-4 py-3 theme-text-secondary hover:theme-text rounded-lg transition-all group\" style=\"background: transparent;\" onmouseover=\"this.style.background='var(--border-color)'\" onmouseout=\"this.style.background='transparent'\">\n <svg class=\"w-5 h-5 text-atw-red group-hover:scale-110 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\/>\n <\/svg>\n <span class=\"font-medium\">Services<\/span>\n <\/a>\n <a href=\"https:\/\/adopttheweb.com\/about#team\" class=\"flex items-center gap-4 px-4 py-3 theme-text-secondary hover:theme-text rounded-lg transition-all group\" style=\"background: transparent;\" onmouseover=\"this.style.background='var(--border-color)'\" onmouseout=\"this.style.background='transparent'\">\n <svg class=\"w-5 h-5 text-atw-blue group-hover:scale-110 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\"\/>\n <\/svg>\n <span class=\"font-medium\">Team<\/span>\n <\/a>\n <a href=\"https:\/\/adopttheweb.com\/reviews\" class=\"flex items-center gap-4 px-4 py-3 theme-text-secondary hover:theme-text rounded-lg transition-all group\" style=\"background: transparent;\" onmouseover=\"this.style.background='var(--border-color)'\" onmouseout=\"this.style.background='transparent'\">\n <svg class=\"w-5 h-5 text-atw-purple group-hover:scale-110 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z\"\/>\n <\/svg>\n <span class=\"font-medium\">Reviews<\/span>\n <\/a>\n <a href=\"https:\/\/adopttheweb.com\/weblog\" class=\"flex items-center gap-4 px-4 py-3 theme-text-secondary hover:theme-text rounded-lg transition-all group\" style=\"background: transparent;\" onmouseover=\"this.style.background='var(--border-color)'\" onmouseout=\"this.style.background='transparent'\">\n <svg class=\"w-5 h-5 text-atw-red group-hover:scale-110 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z\"\/>\n <\/svg>\n <span class=\"font-medium\">Blog<\/span>\n <\/a>\n <!-- Ask ATW mobile link (disabled temporarily while configuring Cloudflare AI Search)\n <a href=\"#\" onclick=\"event.preventDefault(); openAskATW(); closeMobileMenu();\" class=\"flex items-center gap-4 px-4 py-3 theme-text-secondary hover:theme-text rounded-lg transition-all group\" style=\"background: transparent;\" onmouseover=\"this.style.background='var(--border-color)'\" onmouseout=\"this.style.background='transparent'\">\n <svg class=\"w-5 h-5 text-atw-blue group-hover:scale-110 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" stroke-width=\"2\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.35-4.35\" stroke-linecap=\"round\"\/>\n <\/svg>\n <span class=\"font-medium\">Ask ATW<\/span>\n <\/a>\n -->\n <\/nav>\n\n <!-- Divider -->\n <div class=\"my-6\" style=\"border-top: 1px solid var(--border-color);\"><\/div>\n\n <!-- Contact Section -->\n <div class=\"px-4 space-y-4\">\n <a href=\"tel:8883368053\" class=\"flex items-center gap-4 px-4 py-3 theme-text-secondary hover:theme-text rounded-lg transition-all group\" style=\"background: transparent;\" onmouseover=\"this.style.background='var(--border-color)'\" onmouseout=\"this.style.background='transparent'\">\n <svg class=\"w-5 h-5 text-green-500 group-hover:scale-110 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\"\/>\n <\/svg>\n <div>\n <div class=\"text-xs theme-text-muted\">Call Us<\/div>\n <div class=\"font-semibold theme-text\">(888) 336-8053<\/div>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- Mobile Menu Footer -->\n <div class=\"p-6\" style=\"border-top: 1px solid var(--border-color);\">\n <button onclick=\"openConsultModal(); closeMobileMenu();\" class=\"w-full px-5 py-3 btn-atw font-semibold transition-all hover:shadow-lg hover:shadow-atw-purple\/25 text-center\">\n Let's Talk - Free Consultation\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ ===== MEGA MENU SYSTEM =====\n const megaMenuTriggers = document.querySelectorAll('.mega-menu-trigger');\n let megaMenuTimeout = null;\n let activeMegaMenu = null;\n\n function openMegaMenu(trigger) {\n const menuId = trigger.dataset.megamenu;\n const menu = document.getElementById('megamenu-' + menuId);\n const button = trigger.querySelector('button');\n\n if (!menu) return;\n\n \/\/ Close any other open menus\n closeMegaMenus();\n\n \/\/ Open this menu\n menu.classList.add('active');\n trigger.classList.add('active');\n activeMegaMenu = menu;\n\n \/\/ Accessibility: update ARIA states\n if (button) button.setAttribute('aria-expanded', 'true');\n menu.setAttribute('aria-hidden', 'false');\n }\n\n function closeMegaMenus() {\n document.querySelectorAll('.mega-menu').forEach(menu => {\n menu.classList.remove('active');\n menu.setAttribute('aria-hidden', 'true');\n });\n document.querySelectorAll('.mega-menu-trigger').forEach(trigger => {\n trigger.classList.remove('active');\n const button = trigger.querySelector('button');\n if (button) button.setAttribute('aria-expanded', 'false');\n });\n activeMegaMenu = null;\n }\n\n \/\/ Add hover listeners to triggers\n megaMenuTriggers.forEach(trigger => {\n trigger.addEventListener('mouseenter', () => {\n clearTimeout(megaMenuTimeout);\n openMegaMenu(trigger);\n });\n\n trigger.addEventListener('mouseleave', (e) => {\n const menu = document.getElementById('megamenu-' + trigger.dataset.megamenu);\n const relatedTarget = e.relatedTarget;\n\n \/\/ Check if moving to the mega menu panel\n if (menu && menu.contains(relatedTarget)) {\n return;\n }\n\n megaMenuTimeout = setTimeout(closeMegaMenus, 150);\n });\n\n \/\/ Click support for accessibility\n trigger.querySelector('button').addEventListener('click', (e) => {\n e.preventDefault();\n const menu = document.getElementById('megamenu-' + trigger.dataset.megamenu);\n if (menu.classList.contains('active')) {\n closeMegaMenus();\n } else {\n openMegaMenu(trigger);\n }\n });\n });\n\n \/\/ Add listeners to mega menu panels\n document.querySelectorAll('.mega-menu').forEach(menu => {\n menu.addEventListener('mouseenter', () => {\n clearTimeout(megaMenuTimeout);\n });\n\n menu.addEventListener('mouseleave', (e) => {\n const trigger = e.relatedTarget?.closest('.mega-menu-trigger');\n if (trigger && trigger.dataset.megamenu === menu.id.replace('megamenu-', '')) {\n return;\n }\n megaMenuTimeout = setTimeout(closeMegaMenus, 150);\n });\n });\n\n \/\/ Close mega menus on escape\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && activeMegaMenu) {\n closeMegaMenus();\n }\n });\n\n \/\/ Close mega menus when clicking outside\n document.addEventListener('click', (e) => {\n if (activeMegaMenu && !e.target.closest('.mega-menu-trigger') && !e.target.closest('.mega-menu')) {\n closeMegaMenus();\n }\n });\n\n \/\/ ===== MOBILE MENU TOGGLE =====\n const mobileMenuButton = document.getElementById('mobile-menu-button');\n const mobileMenu = document.getElementById('mobile-menu');\n const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');\n const mobileMenuClose = document.getElementById('mobile-menu-close');\n\n function openMobileMenu() {\n mobileMenu.classList.add('active');\n mobileMenuOverlay.classList.add('active');\n mobileMenuButton.classList.add('active');\n document.body.style.overflow = 'hidden';\n \/\/ Accessibility: update ARIA states\n mobileMenuButton.setAttribute('aria-expanded', 'true');\n mobileMenu.setAttribute('aria-hidden', 'false');\n \/\/ Focus the close button for keyboard users\n mobileMenuClose.focus();\n }\n\n function closeMobileMenu() {\n mobileMenu.classList.remove('active');\n mobileMenuOverlay.classList.remove('active');\n mobileMenuButton.classList.remove('active');\n document.body.style.overflow = '';\n \/\/ Accessibility: update ARIA states\n mobileMenuButton.setAttribute('aria-expanded', 'false');\n mobileMenu.setAttribute('aria-hidden', 'true');\n \/\/ Return focus to the menu button\n mobileMenuButton.focus();\n }\n\n mobileMenuButton.addEventListener('click', openMobileMenu);\n mobileMenuClose.addEventListener('click', closeMobileMenu);\n mobileMenuOverlay.addEventListener('click', closeMobileMenu);\n\n \/\/ Close mobile menu on escape key (mega menu escape handled above)\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && mobileMenu.classList.contains('active')) {\n closeMobileMenu();\n }\n });\n\n \/\/ Close menu when clicking a link (optional - smooth UX)\n document.querySelectorAll('#mobile-menu a').forEach(link => {\n link.addEventListener('click', () => {\n setTimeout(closeMobileMenu, 300);\n });\n });\n\n \/\/ Theme Toggle\n function toggleTheme() {\n const html = document.documentElement;\n const isLight = html.classList.contains('light');\n\n if (isLight) {\n html.classList.remove('light');\n localStorage.setItem('atw-theme', 'dark');\n } else {\n html.classList.add('light');\n localStorage.setItem('atw-theme', 'light');\n }\n }\n\n \/\/ Set default theme to light on first visit (ignore system preference)\n (function() {\n const savedTheme = localStorage.getItem('atw-theme');\n if (!savedTheme) {\n \/\/ Default to light mode for first-time visitors\n document.documentElement.classList.add('light');\n localStorage.setItem('atw-theme', 'light');\n }\n })();\n <\/script>\n\n<!-- Main Content Area (accessibility landmark) -->\n<main id=\"main-content\">\n\n<!-- Article Hero -->\n<section class=\"relative overflow-hidden bg-atw-dark pt-32 pb-12 lg:pt-36 lg:pb-16\">\n <div class=\"absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-atw-blue via-atw-purple to-atw-red\"><\/div>\n <div class=\"absolute inset-0 overflow-hidden pointer-events-none\">\n <div class=\"absolute -top-24 -left-24 w-72 h-72 bg-atw-blue\/10 rounded-full blur-3xl animate-pulse\"><\/div>\n <div class=\"absolute -top-24 -right-24 w-72 h-72 bg-gradient-to-br from-cyan-500 to-emerald-600 opacity-[0.08] rounded-full blur-3xl animate-pulse\" style=\"animation-delay: 2s;\"><\/div>\n <\/div>\n\n <div class=\"max-w-4xl mx-auto px-6 relative z-10\">\n <!-- Breadcrumb -->\n <nav class=\"flex items-center gap-2 text-sm mb-6\" aria-label=\"Breadcrumb\">\n <a href=\"\/\" class=\"text-gray-500 hover:text-white transition-colors\">Home<\/a>\n <svg class=\"w-4 h-4 text-gray-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"\/>\n <\/svg>\n <a href=\"\/technical\/\" class=\"text-gray-500 hover:text-white transition-colors\">Technical<\/a>\n <svg class=\"w-4 h-4 text-gray-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"\/>\n <\/svg>\n <span class=\"text-atw-blue font-medium\">Knowledge Graph CMS<\/span>\n <\/nav>\n\n <!-- Tags -->\n <div class=\"flex flex-wrap items-center gap-3 mb-6\">\n <span class=\"inline-flex items-center px-3 py-1 bg-emerald-500\/10 border border-emerald-500\/20 text-emerald-400 rounded-full text-xs font-medium\">\n AI & Automation <\/span>\n <span class=\"inline-flex items-center px-3 py-1 bg-cyan-500\/10 border border-cyan-500\/20 text-cyan-400 rounded-full text-xs font-medium\">\n Knowledge Graphs <\/span>\n <span class=\"inline-flex items-center px-3 py-1 bg-violet-500\/10 border border-violet-500\/20 text-violet-400 rounded-full text-xs font-medium\">\n Architecture <\/span>\n <span class=\"text-sm text-gray-500\">2026-03-09<\/span>\n <span class=\"text-sm text-gray-500\">\u2022 16 min read<\/span>\n <\/div>\n\n <h1 class=\"text-3xl sm:text-4xl lg:text-5xl font-extrabold leading-tight tracking-tight mb-6\">\n EDN, Linked Data, and the Knowledge Graph CMS: Why Agentic Websites Need a Brain <\/h1>\n\n <p class=\"text-xl text-gray-400 leading-relaxed\">\n The same graph logic behind personal knowledge tools \u2014 applied to websites that AI agents can reason about. <\/p>\n <\/div>\n <div class=\"absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white\/10 to-transparent\"><\/div>\n<\/section>\n\n<!-- Article Content -->\n<article class=\"py-12 lg:py-16 bg-atw-dark\">\n <div class=\"max-w-4xl mx-auto px-6\">\n <div class=\"prose prose-invert prose-lg max-w-none\">\n \n<!-- Abstract -->\n<div class=\"glass-card p-6 my-8 border-l-4 border-cyan-500\">\n <div class=\"flex items-center gap-2 text-cyan-400 font-semibold mb-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\/><\/svg>\n Abstract\n <\/div>\n <p class=\"text-gray-300 m-0\">Most websites store content in flat relational tables \u2014 title, body, slug, published date. This worked when websites were documents. But we're building something different now: sites that AI agents can traverse, reason about, and publish to. This paper argues that <strong>knowledge graphs<\/strong>, <strong>EDN as a data interchange format<\/strong>, and <strong>bidirectional linking<\/strong> \u2014 the same primitives that power personal knowledge tools like Obsidian and Logseq \u2014 are the ideal substrate for agentic website infrastructure. We describe the architecture behind DAPP, our production implementation of these ideas.<\/p>\n<\/div>\n\n<h2 class=\"text-2xl font-bold text-white mt-10 mb-4\">The Problem with Flat Content<\/h2>\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n A WordPress <code class=\"text-cyan-400\">wp_posts<\/code> row knows three things: its title, its body, and its publish date. It doesn't know that the service it describes is offered at two locations. It doesn't know that a related FAQ answers the question a visitor actually asked. It doesn't know that the provider mentioned in paragraph three also has a bio page, or that the outcome described in bullet point five has a dedicated testimonial.\n<\/p>\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n Flat content is legible to humans but opaque to machines. An AI agent asked to \"update the hearing aids page to mention the new Louisville office\" would need to understand the site's taxonomy, resolve entity relationships across tables, and know which other pages should cross-link. In a relational CMS, that context doesn't exist \u2014 it lives in the developer's head.\n<\/p>\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n This is the fundamental gap: <strong class=\"text-white\">the data model of traditional CMS platforms does not encode the relationships that make content meaningful<\/strong>. And without those relationships, AI agents are flying blind.\n<\/p>\n\n<h2 class=\"text-2xl font-bold text-white mt-10 mb-4\">What Personal Knowledge Tools Got Right<\/h2>\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n While the web publishing world was building bigger and bigger CMS dashboards, a parallel movement was happening in personal knowledge management. Tools like <strong class=\"text-white\">Obsidian<\/strong>, <strong class=\"text-white\">Logseq<\/strong>, <strong class=\"text-white\">Roam Research<\/strong>, and <strong class=\"text-white\">Athens<\/strong> converged on a set of primitives that turned out to be quietly revolutionary:\n<\/p>\n\n<div class=\"grid md:grid-cols-3 gap-4 my-8\">\n <div class=\"glass-card p-5\">\n <h4 class=\"font-bold text-white mb-2 flex items-center gap-2\">\n <span class=\"w-8 h-8 rounded-lg bg-cyan-500\/10 flex items-center justify-center\">\n <svg class=\"w-4 h-4 text-cyan-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1\"\/><\/svg>\n <\/span>\n Bidirectional Links\n <\/h4>\n <p class=\"text-gray-400 text-sm m-0\">When page A links to page B, page B automatically knows about the reference. No orphaned links, no manual backlink maintenance. The graph forms itself as you write.<\/p>\n <\/div>\n <div class=\"glass-card p-5\">\n <h4 class=\"font-bold text-white mb-2 flex items-center gap-2\">\n <span class=\"w-8 h-8 rounded-lg bg-emerald-500\/10 flex items-center justify-center\">\n <svg class=\"w-4 h-4 text-emerald-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A2 2 0 013 12V7a4 4 0 014-4z\"\/><\/svg>\n <\/span>\n Typed Entities\n <\/h4>\n <p class=\"text-gray-400 text-sm m-0\">Pages aren't just documents \u2014 they're typed with tags or classes. A \"Service\" page has different expected properties than a \"Location\" page. The schema is part of the content.<\/p>\n <\/div>\n <div class=\"glass-card p-5\">\n <h4 class=\"font-bold text-white mb-2 flex items-center gap-2\">\n <span class=\"w-8 h-8 rounded-lg bg-violet-500\/10 flex items-center justify-center\">\n <svg class=\"w-4 h-4 text-violet-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4\"\/><\/svg>\n <\/span>\n Block-Level Content\n <\/h4>\n <p class=\"text-gray-400 text-sm m-0\">Content is stored as ordered blocks, not monolithic blobs. Each block can be individually referenced, linked to, or queried \u2014 making content composable at a granular level.<\/p>\n <\/div>\n<\/div>\n\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n These tools were designed to help individuals think. But the underlying data structures \u2014 <strong class=\"text-white\">a knowledge graph with typed nodes, bidirectional edges, and block-level granularity<\/strong> \u2014 turn out to be exactly what agentic websites need. The same architecture that helps a researcher connect ideas across notes is what helps an AI agent reason about a business's content across an entire site.\n<\/p>\n\n<h2 class=\"text-2xl font-bold text-white mt-10 mb-4\">EDN: The Data Format That Preserves Meaning<\/h2>\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n <strong class=\"text-white\">EDN (Extensible Data Notation)<\/strong> is a Clojure-derived data format that occupies a unique niche: it's as portable as JSON but richer in type semantics. Where JSON gives you strings, numbers, arrays, and objects, EDN adds <strong class=\"text-white\">keywords<\/strong>, <strong class=\"text-white\">sets<\/strong>, <strong class=\"text-white\">UUIDs<\/strong>, <strong class=\"text-white\">dates<\/strong>, and <strong class=\"text-white\">tagged literals<\/strong> as first-class types.\n<\/p>\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n This matters for knowledge graphs because meaning survives the serialization boundary. Consider a page entity:\n<\/p>\n\n<div class=\"glass-card p-5 my-6 font-mono text-sm text-gray-300 overflow-x-auto\">\n<pre class=\"m-0 text-sm\">{:block\/title \"Hearing Aids\"\n :block\/tags #{:tag\/Service :tag\/WebPage}\n :block\/uuid #uuid \"a1b2c3d4-...\"\n :property\/slug \"hearing-aids\"\n :property\/route \"\/hearing-aids\/\"\n :property\/status :status\/published}<\/pre>\n<\/div>\n\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n In JSON, <code class=\"text-cyan-400\">:tag\/Service<\/code> would be a string \u2014 indistinguishable from a label. In EDN, it's a <strong class=\"text-white\">namespaced keyword<\/strong>: a typed, internable symbol that an agent can match, filter, and reason about without parsing. Tags are sets (not arrays), so order doesn't matter and duplicates are impossible. UUIDs are actual UUIDs, not strings that happen to look like UUIDs.\n<\/p>\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n EDN is the native export format of the knowledge graph databases used in personal knowledge tools. When we chose it as our interchange format, we weren't making an esoteric choice \u2014 we were preserving the semantic richness that makes the graph queryable by agents.\n<\/p>\n\n<div class=\"glass-card p-6 my-8 border-l-4 border-emerald-500\">\n <div class=\"flex items-center gap-2 text-emerald-400 font-semibold mb-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z\"\/><\/svg>\n Key Insight\n <\/div>\n <p class=\"text-gray-300 m-0\">JSON is a transport format \u2014 it moves data between systems. EDN is a <strong>knowledge format<\/strong> \u2014 it preserves the types, relationships, and semantics that AI agents need to reason about content. The choice of interchange format determines the ceiling of what your agents can understand.<\/p>\n<\/div>\n\n<h2 class=\"text-2xl font-bold text-white mt-10 mb-4\">Bidirectional Links as the Fabric of Agentic Content<\/h2>\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n In the personal knowledge world, bidirectional links are a thinking tool. You write <code class=\"text-cyan-400\">[[Hearing Loss]]<\/code> in your note about tinnitus, and your hearing loss note automatically shows the backlink. The graph emerges from the act of writing.\n<\/p>\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n For websites, the same mechanism creates something more powerful: <strong class=\"text-white\">a navigable content topology that agents can traverse<\/strong>. When every internal reference is a bidirectional edge in a graph, the site's structure becomes queryable:\n<\/p>\n\n<ul class=\"text-gray-400 mb-6 space-y-3\">\n <li>\n <strong class=\"text-white\">\"Which services are offered at the Louisville location?\"<\/strong> \u2014 Follow edges from the Location node to all Service nodes that reference it. No SQL JOIN, no taxonomy table \u2014 just graph traversal.\n <\/li>\n <li>\n <strong class=\"text-white\">\"What content mentions Dr. Smith?\"<\/strong> \u2014 Find all blocks that contain an entity reference to the Provider node. Bidirectional links mean the Provider page already has a list of every page that mentions it.\n <\/li>\n <li>\n <strong class=\"text-white\">\"Generate the sitemap with relationship context\"<\/strong> \u2014 Walk the graph. Every node knows its neighbors, its type, and its properties. An agent can describe the entire site topology without reading every page.\n <\/li>\n<\/ul>\n\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n This is the difference between a website as a <em>bag of pages<\/em> and a website as a <em>connected knowledge base<\/em>. AI agents don't read pages sequentially \u2014 they need to traverse relationships. Bidirectional links make that traversal native, not reconstructed.\n<\/p>\n\n<h2 class=\"text-2xl font-bold text-white mt-10 mb-4\">Datalog: Querying the Graph<\/h2>\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n Having a graph is only useful if you can ask it questions. Knowledge graph databases typically support <strong class=\"text-white\">Datalog<\/strong>, a declarative query language designed for graph traversal. Where SQL asks \"which rows match these conditions?\", Datalog asks \"which entities satisfy these relationships?\":\n<\/p>\n\n<div class=\"glass-card p-5 my-6 font-mono text-sm text-gray-300 overflow-x-auto\">\n<pre class=\"m-0 text-sm\">; Find all Services offered at Louisville\n[:find ?title\n :where\n [?service :block\/tags :tag\/Service]\n [?service :block\/title ?title]\n [?service :block\/refs ?location]\n [?location :property\/slug \"louisville\"]]<\/pre>\n<\/div>\n\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n This query is readable, composable, and \u2014 critically \u2014 <strong class=\"text-white\">expressible by an AI agent<\/strong>. An LLM can generate Datalog queries from natural language far more reliably than it can generate complex SQL JOINs across a CMS's non-obvious schema. The query language matches the data's shape.\n<\/p>\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n In our production system, this is exposed as a query bridge: an AI agent (or a human admin) can send Datalog queries to the graph and get structured results. This enables everything from \"count all published Service pages\" to \"find pages with no outbound links\" to \"which entities are referenced by more than five other pages?\".\n<\/p>\n\n<h2 class=\"text-2xl font-bold text-white mt-10 mb-4\">The \"Brand Brain\" Pattern<\/h2>\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n We call a client's knowledge graph their <strong class=\"text-white\">Brand Brain<\/strong>. It's the same concept as a personal knowledge graph \u2014 Obsidian calls it a \"vault\", Logseq calls it a \"graph\" \u2014 but scoped to a business entity. A Brand Brain contains:\n<\/p>\n\n<div class=\"grid md:grid-cols-2 gap-4 my-8\">\n <div class=\"glass-card p-5\">\n <h4 class=\"font-bold text-white mb-2\">Typed Entities<\/h4>\n <p class=\"text-gray-400 text-sm mb-2\">Every page is tagged with a class. A hearing aid provider's Brand Brain might have:<\/p>\n <ul class=\"text-gray-400 text-sm space-y-1 m-0\">\n <li><span class=\"text-cyan-400\">Service<\/span> \u2014 Hearing tests, tinnitus treatment, fittings<\/li>\n <li><span class=\"text-emerald-400\">Location<\/span> \u2014 Physical offices with addresses<\/li>\n <li><span class=\"text-violet-400\">Provider<\/span> \u2014 Audiologists and staff<\/li>\n <li><span class=\"text-amber-400\">HearingAid<\/span> \u2014 Products with specifications<\/li>\n <li><span class=\"text-pink-400\">Outcome<\/span> \u2014 Patient success stories<\/li>\n <li><span class=\"text-blue-400\">Resource<\/span> \u2014 Educational articles and FAQs<\/li>\n <\/ul>\n <\/div>\n <div class=\"glass-card p-5\">\n <h4 class=\"font-bold text-white mb-2\">Properties as Schema<\/h4>\n <p class=\"text-gray-400 text-sm mb-2\">Each entity type defines expected properties:<\/p>\n <ul class=\"text-gray-400 text-sm space-y-1 m-0\">\n <li><code class=\"text-cyan-400\">slug<\/code> \u2014 URL-safe identifier<\/li>\n <li><code class=\"text-cyan-400\">route<\/code> \u2014 The page's URL path<\/li>\n <li><code class=\"text-cyan-400\">description<\/code> \u2014 SEO meta description<\/li>\n <li><code class=\"text-cyan-400\">status<\/code> \u2014 draft, published, archived<\/li>\n <li><code class=\"text-cyan-400\">address<\/code> \u2014 for Location entities<\/li>\n <li><code class=\"text-cyan-400\">manufacturer<\/code> \u2014 for HearingAid entities<\/li>\n <\/ul>\n <\/div>\n<\/div>\n\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n The Brand Brain isn't a database schema designed by a developer \u2014 it's a <strong class=\"text-white\">domain model that emerges from the content<\/strong>. Add a new entity type (say, \"Insurance\" or \"Event\") and it immediately participates in the graph's link structure. No migration, no schema change, no plugin.\n<\/p>\n\n<h2 class=\"text-2xl font-bold text-white mt-10 mb-4\">From Knowledge Graph to Agentic Website<\/h2>\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n The architecture we've described \u2014 typed entities, bidirectional links, EDN interchange, Datalog queries \u2014 creates a content layer that AI agents can natively work with. Here's how it becomes a website:\n<\/p>\n\n<ol class=\"text-gray-400 mb-6 space-y-3\">\n <li>\n <strong class=\"text-white\">1. The graph is the source of truth<\/strong> \u2014 Structure, taxonomy, and entity relationships live in the knowledge graph. Each client gets their own graph, derived from their domain \u2014 complete isolation with no shared tables to partition.\n <\/li>\n <li>\n <strong class=\"text-white\">2. An editorial layer handles content<\/strong> \u2014 Editors write in markdown. They don't need to know HTML, the design system, or the graph's query language. A sidecar file stores their edits alongside the graph data, keeping the knowledge structure and the editorial prose separate but mergeable.\n <\/li>\n <li>\n <strong class=\"text-white\">3. AI generates the presentation<\/strong> \u2014 When content is queued for deployment, an AI agent receives the markdown, the page's metadata (type, route, description), and the full site's structural context from the graph. It generates design-system-compliant HTML \u2014 semantic, accessible, consistent. The graph gives the AI something a flat CMS never could: <em>awareness of the entire site's topology while generating a single page<\/em>.\n <\/li>\n <li>\n <strong class=\"text-white\">4. Edge delivery finishes the loop<\/strong> \u2014 The generated HTML is deployed to edge workers (we use Cloudflare Workers). API routes let the worker resolve any URL path to a page entity, fetch its blocks, and render the template. Content that lives in a graph, gets transformed by AI, and is served from 300+ edge locations worldwide.\n <\/li>\n<\/ol>\n\n<div class=\"glass-card p-6 my-8 border-l-4 border-violet-500\">\n <div class=\"flex items-center gap-2 text-violet-400 font-semibold mb-2\">\n <svg class=\"w-5 h-5\" 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 Why This Matters for AI Agents\n <\/div>\n <p class=\"text-gray-300 m-0\">When you ask an AI to \"update the Louisville page to mention the new tinnitus service,\" the agent doesn't need to figure out your database schema. It queries the graph: find the Location entity with slug \"louisville\", find the Service entity \"tinnitus-treatment\", check what content already references both, and generate an update that maintains cross-linking consistency. <strong>The graph is the agent's map of the business.<\/strong><\/p>\n<\/div>\n\n<h2 class=\"text-2xl font-bold text-white mt-10 mb-4\">The Model Context Protocol: Giving Agents Hands<\/h2>\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n Reading the graph is half the story. Agents also need to <strong class=\"text-white\">write<\/strong>. The <strong class=\"text-white\">Model Context Protocol (MCP)<\/strong> has emerged as a standard for giving AI models structured access to tools and data. In a knowledge graph CMS, MCP becomes the interface through which agents create and modify content:\n<\/p>\n\n<ul class=\"text-gray-400 mb-6 space-y-2\">\n <li><strong class=\"text-white\">List entities by type<\/strong> \u2014 \"Show me all Service pages\" is a single tool call<\/li>\n <li><strong class=\"text-white\">Inspect schema<\/strong> \u2014 The agent can discover what properties exist, what tags are defined, what the taxonomy looks like<\/li>\n <li><strong class=\"text-white\">Create entities<\/strong> \u2014 Add a new page with typed properties and block content in one operation<\/li>\n <li><strong class=\"text-white\">Query relationships<\/strong> \u2014 Datalog queries let agents ask arbitrary questions about the graph<\/li>\n<\/ul>\n\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n The key insight: MCP + knowledge graph means <strong class=\"text-white\">the agent doesn't need to understand your CMS's proprietary API<\/strong>. It works with universal primitives \u2014 entities, properties, links, queries. The same agent that can reason about an Obsidian vault can reason about a brand's website, because the underlying data model is the same.\n<\/p>\n\n<h2 class=\"text-2xl font-bold text-white mt-10 mb-4\">Knowledge Graph Visualization as an Editorial Tool<\/h2>\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n A side effect of graph-based content: you can <em>see<\/em> the site's structure. Force-directed visualizations render entities as nodes and relationships as edges. Clusters form around entity types \u2014 service pages gravitating toward the services they describe, locations grouping with the providers at those offices.\n<\/p>\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n This isn't decorative. It's an editorial tool with real utility:\n<\/p>\n<ul class=\"text-gray-400 mb-6 space-y-2\">\n <li><strong class=\"text-white\">Content gaps<\/strong> \u2014 A service page with no connected outcomes means missing social proof. An orphaned location means missing internal links.<\/li>\n <li><strong class=\"text-white\">Structural balance<\/strong> \u2014 If one entity type dominates the graph visually, the site's content is unbalanced. Too many resources, not enough services? The graph shows it at a glance.<\/li>\n <li><strong class=\"text-white\">Impact analysis<\/strong> \u2014 Before deleting or restructuring a page, see how many other pages reference it. In a flat CMS, this requires a full-text search and guessing.<\/li>\n<\/ul>\n\n<h2 class=\"text-2xl font-bold text-white mt-10 mb-4\">Why Not Just Use WordPress with a Plugin?<\/h2>\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n Fair question. WordPress has taxonomy systems, custom post types, and relationship plugins like ACF or Pods. You can approximate a knowledge graph. But there are structural limitations:\n<\/p>\n\n<div class=\"glass-card p-5 my-6 overflow-x-auto\">\n <table class=\"w-full text-sm\">\n <thead>\n <tr class=\"border-b border-white\/10\">\n <th class=\"text-left text-white py-2 pr-4\">Capability<\/th>\n <th class=\"text-left text-gray-400 py-2 pr-4\">Flat CMS (WordPress, Contentful)<\/th>\n <th class=\"text-left text-cyan-400 py-2\">Knowledge Graph CMS<\/th>\n <\/tr>\n <\/thead>\n <tbody class=\"text-gray-400\">\n <tr class=\"border-b border-white\/5\">\n <td class=\"py-2 pr-4 text-white\">Links<\/td>\n <td class=\"py-2 pr-4\">Unidirectional (manual)<\/td>\n <td class=\"py-2 text-cyan-400\">Bidirectional (automatic)<\/td>\n <\/tr>\n <tr class=\"border-b border-white\/5\">\n <td class=\"py-2 pr-4 text-white\">Schema<\/td>\n <td class=\"py-2 pr-4\">Predefined, requires migration<\/td>\n <td class=\"py-2 text-cyan-400\">Emergent, add types anytime<\/td>\n <\/tr>\n <tr class=\"border-b border-white\/5\">\n <td class=\"py-2 pr-4 text-white\">Query language<\/td>\n <td class=\"py-2 pr-4\">SQL (schema-dependent)<\/td>\n <td class=\"py-2 text-cyan-400\">Datalog (relationship-native)<\/td>\n <\/tr>\n <tr class=\"border-b border-white\/5\">\n <td class=\"py-2 pr-4 text-white\">AI traversal<\/td>\n <td class=\"py-2 pr-4\">Requires custom API + schema docs<\/td>\n <td class=\"py-2 text-cyan-400\">Native via MCP + graph queries<\/td>\n <\/tr>\n <tr class=\"border-b border-white\/5\">\n <td class=\"py-2 pr-4 text-white\">Content granularity<\/td>\n <td class=\"py-2 pr-4\">Page-level<\/td>\n <td class=\"py-2 text-cyan-400\">Block-level<\/td>\n <\/tr>\n <tr class=\"border-b border-white\/5\">\n <td class=\"py-2 pr-4 text-white\">Data format<\/td>\n <td class=\"py-2 pr-4\">JSON (lossy types)<\/td>\n <td class=\"py-2 text-cyan-400\">EDN (rich types preserved)<\/td>\n <\/tr>\n <tr>\n <td class=\"py-2 pr-4 text-white\">Multi-tenant<\/td>\n <td class=\"py-2 pr-4\">Multisite (shared DB, complex)<\/td>\n <td class=\"py-2 text-cyan-400\">One graph per client (isolated)<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n<\/div>\n\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n The difference isn't about features you can bolt on \u2014 it's about what the <em>native data model<\/em> supports. A knowledge graph makes relationships first-class. A relational CMS makes tables first-class and requires you to reconstruct relationships via JOINs, plugins, and conventions.\n<\/p>\n\n<h2 class=\"text-2xl font-bold text-white mt-10 mb-4\">DAPP: Our Production Implementation<\/h2>\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n <strong class=\"text-white\">DAPP (Digital Asset & Publishing Platform)<\/strong> is where these ideas run in production. It manages real client websites \u2014 not as a proof-of-concept, but as the daily publishing workflow for businesses. The architecture:\n<\/p>\n\n<div class=\"grid md:grid-cols-2 gap-4 my-8\">\n <div class=\"glass-card p-5\">\n <h4 class=\"font-bold text-white mb-2 flex items-center gap-2\">\n <span class=\"w-8 h-8 rounded-lg bg-cyan-500\/10 flex items-center justify-center\">\n <svg class=\"w-4 h-4 text-cyan-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4\"\/><\/svg>\n <\/span>\n Knowledge Graph (SQLite)\n <\/h4>\n <p class=\"text-gray-400 text-sm m-0\">Each client's Brand Brain is a SQLite-backed graph with typed entities, properties, and block content. Exported as EDN for the service layer, mutated via MCP for writes. One graph per client domain \u2014 total isolation.<\/p>\n <\/div>\n <div class=\"glass-card p-5\">\n <h4 class=\"font-bold text-white mb-2 flex items-center gap-2\">\n <span class=\"w-8 h-8 rounded-lg bg-emerald-500\/10 flex items-center justify-center\">\n <svg class=\"w-4 h-4 text-emerald-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\"\/><\/svg>\n <\/span>\n Markdown Editorial Layer\n <\/h4>\n <p class=\"text-gray-400 text-sm m-0\">Editors write markdown. A sidecar JSON file stores editorial overrides alongside the graph's structural data \u2014 keeping content and schema separate but mergeable at query time. Queue-based status tracking (Draft \u2192 Queued \u2192 Published).<\/p>\n <\/div>\n <div class=\"glass-card p-5\">\n <h4 class=\"font-bold text-white mb-2 flex items-center gap-2\">\n <span class=\"w-8 h-8 rounded-lg bg-violet-500\/10 flex items-center justify-center\">\n <svg class=\"w-4 h-4 text-violet-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z\"\/><\/svg>\n <\/span>\n AI Deploy Pipeline\n <\/h4>\n <p class=\"text-gray-400 text-sm m-0\">Queued markdown is fed to an LLM along with the full site's graph context \u2014 every entity, every route, every relationship. The AI generates design-system-compliant HTML with awareness of the entire site topology, not just the page being edited.<\/p>\n <\/div>\n <div class=\"glass-card p-5\">\n <h4 class=\"font-bold text-white mb-2 flex items-center gap-2\">\n <span class=\"w-8 h-8 rounded-lg bg-amber-500\/10 flex items-center justify-center\">\n <svg class=\"w-4 h-4 text-amber-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064\"\/><\/svg>\n <\/span>\n Edge Delivery\n <\/h4>\n <p class=\"text-gray-400 text-sm m-0\">Cloudflare Workers serve the generated content at the edge. A REST API resolves URL paths to graph entities, fetches their content blocks, and renders templates. Sub-50ms page loads globally.<\/p>\n <\/div>\n<\/div>\n\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n The system uses the same graph primitives as personal knowledge tools \u2014 bidirectional links, typed entities, block content, EDN interchange \u2014 but applied to multi-tenant website management. An agency managing 50 client sites has 50 independent Brand Brains, each one a self-contained knowledge graph that AI agents can reason about.\n<\/p>\n\n<h2 class=\"text-2xl font-bold text-white mt-10 mb-4\">The Agentic Future of CMS<\/h2>\n<p class=\"text-gray-400 leading-relaxed mb-6\">\n We think the CMS of the next decade will look less like a page editor and more like a knowledge base with agent access. The trajectory:\n<\/p>\n\n<ul class=\"text-gray-400 mb-6 space-y-3\">\n <li>\n <strong class=\"text-white\">Content as entities, not documents<\/strong> \u2014 A \"page\" is a node in a graph, with typed properties, relationships to other nodes, and block-level content that can be individually queried and composed.\n <\/li>\n <li>\n <strong class=\"text-white\">AI as a first-class collaborator<\/strong> \u2014 The graph gives agents the context they need: site topology, entity relationships, property schemas. Write markdown; the agent handles design, cross-linking, and consistency.\n <\/li>\n <li>\n <strong class=\"text-white\">EDN (or equivalent) as interchange<\/strong> \u2014 As AI agents move between systems, they need data formats that preserve semantic richness. JSON is the floor; typed, linked data formats are the ceiling.\n <\/li>\n <li>\n <strong class=\"text-white\">MCP as the standard interface<\/strong> \u2014 Instead of every CMS having a proprietary API, the Model Context Protocol gives agents a universal way to read, query, and write content \u2014 regardless of the underlying storage engine.\n <\/li>\n <li>\n <strong class=\"text-white\">Local-first, edge-delivered<\/strong> \u2014 Knowledge graphs backed by SQLite are portable, fast, and infrastructure-light. Edge workers serve the content globally. No running database servers to scale, no cloud vendor lock-in for the content itself.\n <\/li>\n<\/ul>\n\n<div class=\"glass-card p-6 my-8 border-l-4 border-cyan-500\">\n <div class=\"flex items-center gap-2 text-cyan-400 font-semibold mb-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\n The Bottom Line\n <\/div>\n <p class=\"text-gray-300 m-0\">The tools that made personal knowledge management a revolution \u2014 Obsidian, Logseq, Roam \u2014 proved that linked, typed, graph-structured data is how humans and machines both reason about complex domains. The same architecture, applied to websites, creates a content substrate that AI agents can natively understand, traverse, and publish to. That's what we're building. That's what DAPP is. Not another CMS \u2014 a brain for every brand.<\/p>\n<\/div>\n\n <\/div>\n\n <!-- Back Link -->\n <div class=\"mt-12 pt-8 border-t border-white\/10\">\n <a href=\"\/technical\/\" class=\"inline-flex items-center text-atw-blue hover:text-white transition-colors font-medium\">\n <svg class=\"w-4 h-4 mr-2\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 19l-7-7m0 0l7-7m-7 7h18\"\/>\n <\/svg>\n Back to Technical Articles\n <\/a>\n <\/div>\n <\/div>\n<\/article>\n\n\n<!-- Contact CTA Section -->\n<section id=\"contact\" class=\"py-24 bg-gradient-to-b from-atw-dark to-slate-900 cta-section \">\n <div class=\"max-w-4xl mx-auto px-6 text-center\">\n\n <div class=\"glass-card p-12 glow-atw relative overflow-hidden\">\n <!-- Background decoration -->\n <div class=\"absolute inset-0 overflow-hidden pointer-events-none\">\n <div class=\"absolute -top-24 -right-24 w-64 h-64 bg-atw-blue\/20 blur-3xl cta-glow\"><\/div>\n <div class=\"absolute -bottom-24 -left-24 w-64 h-64 bg-atw-red\/20 blur-3xl cta-glow\"><\/div>\n <\/div>\n\n <div class=\"relative z-10\">\n <h2 class=\"text-4xl lg:text-5xl font-bold mb-6 theme-text\">Ready to <span class=\"gradient-text\">Get Started?<\/span><\/h2>\n <p class=\"text-xl theme-text-secondary mb-8 max-w-2xl mx-auto\">Contact us today to learn how we can help your business succeed online. Schedule a free consultation with Jarod.<\/p>\n\n <div class=\"flex flex-col sm:flex-row gap-4 justify-center mb-8\">\n <button onclick=\"openConsultModal('sales')\" class=\"group inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-white btn-atw shadow-lg shadow-atw-purple\/25 hover:shadow-xl hover:shadow-atw-purple\/40 transform hover:-translate-y-1 transition-all duration-300 cta-button\">\n <svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"\/>\n <\/svg>\n Schedule Consultation <\/button>\n <a href=\"https:\/\/adopttheweb.com\/tech-support\/\" class=\"inline-flex items-center justify-center px-8 py-4 text-lg font-semibold theme-text glass-card hover:bg-white\/10 transition-all duration-300\">\n Request Support <\/a>\n <\/div>\n\n <div class=\"flex flex-col sm:flex-row items-center justify-center gap-6 theme-text-secondary\">\n <a href=\"tel:8598006384\" class=\"flex items-center gap-2 hover:theme-text transition-colors\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\"\/>\n <\/svg>\n (859) 800-6384 <\/a>\n <span class=\"hidden sm:inline theme-text-muted\">|<\/span>\n <a href=\"tel:8883368053\" class=\"flex items-center gap-2 hover:theme-text transition-colors\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\"\/>\n <\/svg>\n (888) 336-8053 (Toll Free)\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n<\/section>\n\n\n<\/main><!-- End main-content -->\n\n <!-- Clients Section -->\n \n <!-- Footer -->\n <footer class=\"py-16 theme-bg-secondary\" style=\"border-top: 1px solid var(--border-color);\">\n <div class=\"max-w-7xl mx-auto px-6\">\n\n <div class=\"grid grid-cols-3 md:grid-cols-3 gap-8 lg:gap-12 mb-12\">\n\n <!-- Brand -->\n <div>\n <a href=\"\/\" class=\"flex items-center gap-3 mb-6\">\n <div class=\"px-3 py-2 bg-gradient-to-br from-atw-blue via-atw-purple to-atw-red flex items-center justify-center font-bold text-lg tracking-tight\" style=\"color: #ffffff !important; font-family: 'Lovelo', 'Inter', sans-serif;\">ATW<\/div>\n <span class=\"text-xl font-bold hidden sm:inline theme-text\" style=\"font-family: 'Lovelo', 'Inter', sans-serif;\">Adopt the Web<\/span>\n <\/a>\n <p class=\"theme-text-secondary mb-6 max-w-md\">\n We love helping businesses grow online. We organize everything we do and keep communication clear and timely.\n <\/p>\n <div class=\"flex gap-4\">\n <a href=\"https:\/\/www.facebook.com\/adopttheweb\" target=\"_blank\" class=\"w-10 h-10 flex items-center justify-center theme-text-secondary hover:text-atw-purple transition-all\" style=\"background: var(--border-color);\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"\/><\/svg>\n <\/a>\n <a href=\"https:\/\/www.linkedin.com\/company\/adopt-the-web\" target=\"_blank\" class=\"w-10 h-10 flex items-center justify-center theme-text-secondary hover:text-atw-purple transition-all\" style=\"background: var(--border-color);\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"\/><\/svg>\n <\/a>\n <a href=\"https:\/\/twitter.com\/adopttheweb\" target=\"_blank\" class=\"w-10 h-10 flex items-center justify-center theme-text-secondary hover:text-atw-purple transition-all\" style=\"background: var(--border-color);\">\n <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- Quick Links -->\n <div>\n <h4 class=\"font-bold theme-text mb-6\">Quick Links<\/h4>\n <ul class=\"space-y-3\">\n <li><a href=\"https:\/\/adopttheweb.com\/about\" class=\"theme-text-secondary hover:text-atw-blue transition-colors\">About Us<\/a><\/li>\n <li><a href=\"https:\/\/adopttheweb.com\/shop\" class=\"theme-text-secondary hover:text-atw-blue transition-colors\">Services<\/a><\/li>\n <li><a href=\"https:\/\/adopttheweb.com\/projects\/\" class=\"theme-text-secondary hover:text-atw-blue transition-colors\">Portfolio<\/a><\/li>\n <li><a href=\"https:\/\/adopttheweb.com\/locations\/\" class=\"theme-text-secondary hover:text-atw-blue transition-colors\">Locations<\/a><\/li>\n <li><a href=\"https:\/\/adopttheweb.com\/weblog\" class=\"theme-text-secondary hover:text-atw-blue transition-colors\">Blog<\/a><\/li>\n <li><a href=\"https:\/\/adopttheweb.com\/meeting\" class=\"theme-text-secondary hover:text-atw-blue transition-colors\">Contact<\/a><\/li>\n <li><a href=\"https:\/\/share.google\/JyemGNvL7AEFc4cfM\" class=\"theme-text-secondary hover:text-atw-blue transition-colors\">Business Profile<\/a><\/li>\n <li><a href=\"https:\/\/share.google\/HztkKPH63DXFedSBx\" class=\"theme-text-secondary hover:text-atw-blue transition-colors\">Brand Profile<\/a><\/li>\n <\/ul>\n <\/div>\n\n <!-- Resources -->\n <div>\n <h4 class=\"font-bold theme-text mb-6\">Resources<\/h4>\n <ul class=\"space-y-3\">\n <li><a href=\"https:\/\/clients.successportal.app\/\" target=\"_blank\" class=\"theme-text-secondary hover:text-atw-blue transition-colors\">Client Portal<\/a><\/li>\n <li><a href=\"https:\/\/deliverables.adopttheweb.com\/\" target=\"_blank\" class=\"theme-text-secondary hover:text-atw-blue transition-colors\">Deliverables<\/a><\/li>\n <li><a href=\"https:\/\/knowledgebase.adopttheweb.com\/\" target=\"_blank\" class=\"theme-text-secondary hover:text-atw-blue transition-colors\">Knowledgebase<\/a><\/li>\n <li><a href=\"https:\/\/adopttheweb.com\/tech-support\/\" class=\"theme-text-secondary hover:text-atw-blue transition-colors\">Tech Support<\/a><\/li>\n <li><a href=\"https:\/\/adopttheweb.com\/network-systems-status\/\" class=\"theme-text-secondary hover:text-atw-blue transition-colors\">Server Status<\/a><\/li>\n <\/ul>\n <\/div>\n\n <\/div>\n\n <!-- Tech Partners & Stack Section -->\n \n\n<!-- Tech Partners & Stack Section \u2014 Two-Column Globe Layout -->\n<div id=\"tech-partners\" class=\"pt-8 pb-2 mb-6\" style=\"border-top: 1px solid var(--border-color);\">\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-10 items-center\">\n\n <!-- Left Column: Description -->\n <div class=\"text-center md:text-left\">\n <h4 class=\"font-semibold theme-text text-lg mb-2\">Our Technology Stack<\/h4>\n \n <p class=\"theme-text-secondary text-sm mb-4 leading-relaxed max-w-md mx-auto md:mx-0\">\n We leverage cutting-edge technologies to solve complex business challenges.\n We operate as agent owners\u2014building, deploying, and managing intelligence systems that drive real results.\n <\/p>\n\n <div class=\"flex flex-wrap items-center justify-center md:justify-start gap-2 mb-5\">\n <span class=\"px-2.5 py-0.5 text-[10px] font-medium rounded-full bg-blue-500\/10 text-blue-400 border border-blue-500\/20\">Google Certified Partner<\/span>\n <span class=\"px-2.5 py-0.5 text-[10px] font-medium rounded-full bg-purple-500\/10 text-purple-400 border border-purple-500\/20\">AI-Powered Agency<\/span>\n <span class=\"px-2.5 py-0.5 text-[10px] font-medium rounded-full bg-emerald-500\/10 text-emerald-400 border border-emerald-500\/20\">Agent Owner-Operator<\/span>\n <\/div>\n \n <!-- Partner count summary -->\n <p class=\"theme-text-muted text-xs\">\n <span class=\"text-blue-400 font-semibold\">25<\/span> technology partners & integrations\n <\/p>\n <\/div>\n\n <!-- Right Column: 3D Globe (desktop) \/ Fallback grid (mobile + no-JS) -->\n <div class=\"relative\">\n <!-- Globe Canvas Container (hidden by default; JS shows on desktop) -->\n <div id=\"tech-globe-container\"\n style=\"display:none; width:100%; height:420px; overflow:hidden;\"\n data-partners=\"[{"name":"Google Partner","svgData":"<svg fill=\\"#4285F4\\" role=\\"img\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\"><title>Google<\\\/title><path d=\\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\\"\\\/><\\\/svg>"},{"name":"Google Ads Certified","svgData":"<svg fill=\\"#4285F4\\" role=\\"img\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\"><title>Google Ads<\\\/title><path d=\\"M3.9998 22.9291C1.7908 22.9291 0 21.1383 0 18.9293s1.7908-3.9998 3.9998-3.9998 3.9998 1.7908 3.9998 3.9998-1.7908 3.9998-3.9998 3.9998zm19.4643-6.0004L15.4632 3.072C14.3586 1.1587 11.9121.5028 9.9988 1.6074S7.4295 5.1585 8.5341 7.0718l8.0009 13.8567c1.1046 1.9133 3.5511 2.5679 5.4644 1.4646 1.9134-1.1046 2.568-3.5511 1.4647-5.4644zM7.5137 4.8438L1.5645 15.1484A4.5 4.5 0 0 1 4 14.4297c2.5597-.0075 4.6248 2.1585 4.4941 4.7148l3.2168-5.5723-3.6094-6.25c-.4499-.7793-.6322-1.6394-.5878-2.4784z\\"\\\/><\\\/svg>"},{"name":"Google Cloud Partner","svgData":"<svg fill=\\"#4285F4\\" role=\\"img\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\"><title>Google Cloud<\\\/title><path d=\\"M12.19 2.38a9.344 9.344 0 0 0-9.234 6.893c.053-.02-.055.013 0 0-3.875 2.551-3.922 8.11-.247 10.941l.006-.007-.007.03a6.717 6.717 0 0 0 4.077 1.356h5.173l.03.03h5.192c6.687.053 9.376-8.605 3.835-12.35a9.365 9.365 0 0 0-2.821-4.552l-.043.043.006-.05A9.344 9.344 0 0 0 12.19 2.38zm-.358 4.146c1.244-.04 2.518.368 3.486 1.15a5.186 5.186 0 0 1 1.862 4.078v.518c3.53-.07 3.53 5.262 0 5.193h-5.193l-.008.009v-.04H6.785a2.59 2.59 0 0 1-1.067-.23h.001a2.597 2.597 0 1 1 3.437-3.437l3.013-3.012A6.747 6.747 0 0 0 8.11 8.24c.018-.01.04-.026.054-.023a5.186 5.186 0 0 1 3.67-1.69z\\"\\\/><\\\/svg>"},{"name":"Google Analytics Certified","svgData":"<svg fill=\\"#E37400\\" role=\\"img\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\"><title>Google Analytics<\\\/title><path d=\\"M22.84 2.9982v17.9987c.0086 1.6473-1.3197 2.9897-2.967 2.9984a2.9808 2.9808 0 01-.3677-.0208c-1.528-.226-2.6477-1.5558-2.6105-3.1V3.1204c-.0369-1.5458 1.0856-2.8762 2.6157-3.1 1.6361-.1915 3.1178.9796 3.3093 2.6158.014.1201.0208.241.0202.3619zM4.1326 18.0548c-1.6417 0-2.9726 1.331-2.9726 2.9726C1.16 22.6691 2.4909 24 4.1326 24s2.9726-1.3309 2.9726-2.9726-1.331-2.9726-2.9726-2.9726zm7.8728-9.0098c-.0171 0-.0342 0-.0513.0003-1.6495.0904-2.9293 1.474-2.891 3.1256v7.9846c0 2.167.9535 3.4825 2.3505 3.763 1.6118.3266 3.1832-.7152 3.5098-2.327.04-.1974.06-.3983.0593-.5998v-8.9585c.003-1.6474-1.33-2.9852-2.9773-2.9882z\\"\\\/><\\\/svg>"},{"name":"Anthropic","svgData":"<svg fill=\\"#191919\\" role=\\"img\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\"><title>Anthropic<\\\/title><path d=\\"M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z\\"\\\/><\\\/svg>"},{"name":"OpenAI","svgData":"<svg fill=\\"#412991\\" role=\\"img\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\"><title>OpenAI<\\\/title><path d=\\"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z\\"\\\/><\\\/svg>"},{"name":"Google Gemini","svgData":"<svg fill=\\"#8E75B2\\" role=\\"img\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\"><title>Google Gemini<\\\/title><path d=\\"M11.04 19.32Q12 21.51 12 24q0-2.49.93-4.68.96-2.19 2.58-3.81t3.81-2.55Q21.51 12 24 12q-2.49 0-4.68-.93a12.3 12.3 0 0 1-3.81-2.58 12.3 12.3 0 0 1-2.58-3.81Q12 2.49 12 0q0 2.49-.96 4.68-.93 2.19-2.55 3.81a12.3 12.3 0 0 1-3.81 2.58Q2.49 12 0 12q2.49 0 4.68.96 2.19.93 3.81 2.55t2.55 3.81\\"\\\/><\\\/svg>"},{"name":"Google Cloud","svgData":"<svg fill=\\"#4285F4\\" role=\\"img\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\"><title>Google Cloud<\\\/title><path d=\\"M12.19 2.38a9.344 9.344 0 0 0-9.234 6.893c.053-.02-.055.013 0 0-3.875 2.551-3.922 8.11-.247 10.941l.006-.007-.007.03a6.717 6.717 0 0 0 4.077 1.356h5.173l.03.03h5.192c6.687.053 9.376-8.605 3.835-12.35a9.365 9.365 0 0 0-2.821-4.552l-.043.043.006-.05A9.344 9.344 0 0 0 12.19 2.38zm-.358 4.146c1.244-.04 2.518.368 3.486 1.15a5.186 5.186 0 0 1 1.862 4.078v.518c3.53-.07 3.53 5.262 0 5.193h-5.193l-.008.009v-.04H6.785a2.59 2.59 0 0 1-1.067-.23h.001a2.597 2.597 0 1 1 3.437-3.437l3.013-3.012A6.747 6.747 0 0 0 8.11 8.24c.018-.01.04-.026.054-.023a5.186 5.186 0 0 1 3.67-1.69z\\"\\\/><\\\/svg>"},{"name":"AWS","svgData":"<svg xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\" viewBox=\\"0 0 100 40\\" fill=\\"#FF9900\\">\\n <text x=\\"50\\" y=\\"26\\" font-family=\\"Arial, sans-serif\\" font-size=\\"14\\" font-weight=\\"bold\\" text-anchor=\\"middle\\">AWS<\\\/text>\\n<\\\/svg>\\n"},{"name":"Liquid Web","svgData":"<svg xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\" viewBox=\\"0 0 120 40\\" fill=\\"#69BE28\\">\\n <text x=\\"60\\" y=\\"26\\" font-family=\\"Arial, sans-serif\\" font-size=\\"14\\" font-weight=\\"bold\\" text-anchor=\\"middle\\">Liquid Web<\\\/text>\\n<\\\/svg>\\n"},{"name":"Rocket.net","svgData":"<svg xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\" viewBox=\\"0 0 120 40\\" fill=\\"#5F4B8B\\">\\n <text x=\\"60\\" y=\\"26\\" font-family=\\"Arial, sans-serif\\" font-size=\\"14\\" font-weight=\\"bold\\" text-anchor=\\"middle\\">Rocket.net<\\\/text>\\n<\\\/svg>\\n"},{"name":"PHP","svgData":"<svg fill=\\"#777BB4\\" role=\\"img\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\"><title>PHP<\\\/title><path d=\\"M7.01 10.207h-.944l-.515 2.648h.838c.556 0 .97-.105 1.242-.314.272-.21.455-.559.55-1.049.092-.47.05-.802-.124-.995-.175-.193-.523-.29-1.047-.29zM12 5.688C5.373 5.688 0 8.514 0 12s5.373 6.313 12 6.313S24 15.486 24 12c0-3.486-5.373-6.312-12-6.312zm-3.26 7.451c-.261.25-.575.438-.917.551-.336.108-.765.164-1.285.164H5.357l-.327 1.681H3.652l1.23-6.326h2.65c.797 0 1.378.209 1.744.628.366.418.476 1.002.33 1.752a2.836 2.836 0 0 1-.305.847c-.143.255-.33.49-.561.703zm4.024.715l.543-2.799c.063-.318.039-.536-.068-.651-.107-.116-.336-.174-.687-.174H11.46l-.704 3.625H9.388l1.23-6.327h1.367l-.327 1.682h1.218c.767 0 1.295.134 1.586.401s.378.7.263 1.299l-.572 2.944h-1.389zm7.597-2.265a2.782 2.782 0 0 1-.305.847c-.143.255-.33.49-.561.703a2.44 2.44 0 0 1-.917.551c-.336.108-.765.164-1.286.164h-1.18l-.327 1.682h-1.378l1.23-6.326h2.649c.797 0 1.378.209 1.744.628.366.417.477 1.001.331 1.751zM17.766 10.207h-.943l-.516 2.648h.838c.557 0 .971-.105 1.242-.314.272-.21.455-.559.551-1.049.092-.47.049-.802-.125-.995s-.524-.29-1.047-.29z\\"\\\/><\\\/svg>"},{"name":"MySQL","svgData":"<svg fill=\\"#4479A1\\" role=\\"img\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\"><title>MySQL<\\\/title><path d=\\"M16.405 5.501c-.115 0-.193.014-.274.033v.013h.014c.054.104.146.18.214.273.054.107.1.214.154.32l.014-.015c.094-.066.14-.172.14-.333-.04-.047-.046-.094-.08-.14-.04-.067-.126-.1-.18-.153zM5.77 18.695h-.927a50.854 50.854 0 00-.27-4.41h-.008l-1.41 4.41H2.45l-1.4-4.41h-.01a72.892 72.892 0 00-.195 4.41H0c.055-1.966.192-3.81.41-5.53h1.15l1.335 4.064h.008l1.347-4.064h1.095c.242 2.015.384 3.86.428 5.53zm4.017-4.08c-.378 2.045-.876 3.533-1.492 4.46-.482.716-1.01 1.073-1.583 1.073-.153 0-.34-.046-.566-.138v-.494c.11.017.24.026.386.026.268 0 .483-.075.647-.222.197-.18.295-.382.295-.605 0-.155-.077-.47-.23-.944L6.23 14.615h.91l.727 2.36c.164.536.233.91.205 1.123.4-1.064.678-2.227.835-3.483zm12.325 4.08h-2.63v-5.53h.885v4.85h1.745zm-3.32.135l-1.016-.5c.09-.076.177-.158.255-.25.433-.506.648-1.258.648-2.253 0-1.83-.718-2.746-2.155-2.746-.704 0-1.254.232-1.65.697-.43.508-.646 1.256-.646 2.245 0 .972.19 1.686.574 2.14.35.41.877.615 1.583.615.264 0 .506-.033.725-.098l1.325.772.36-.622zM15.5 17.588c-.225-.36-.337-.94-.337-1.736 0-1.393.424-2.09 1.27-2.09.443 0 .77.167.977.5.224.362.336.936.336 1.723 0 1.404-.424 2.108-1.27 2.108-.445 0-.77-.167-.978-.5zm-1.658-.425c0 .47-.172.856-.516 1.156-.344.3-.803.45-1.384.45-.543 0-1.064-.172-1.573-.515l.237-.476c.438.22.833.328 1.19.328.332 0 .593-.073.783-.22a.754.754 0 00.3-.615c0-.33-.23-.61-.648-.845-.388-.213-1.163-.657-1.163-.657-.422-.307-.632-.636-.632-1.177 0-.45.157-.81.47-1.085.315-.278.72-.415 1.22-.415.512 0 .98.136 1.4.41l-.213.476a2.726 2.726 0 00-1.064-.23c-.283 0-.502.068-.654.206a.685.685 0 00-.248.524c0 .328.234.61.666.85.393.215 1.187.67 1.187.67.433.305.648.63.648 1.168zm9.382-5.852c-.535-.014-.95.04-1.297.188-.1.04-.26.04-.274.167.055.053.063.14.11.214.08.134.218.313.346.407.14.11.28.216.427.31.26.16.555.255.81.416.145.094.293.213.44.313.073.05.12.14.214.172v-.02c-.046-.06-.06-.147-.105-.214-.067-.067-.134-.127-.2-.193a3.223 3.223 0 00-.695-.675c-.214-.146-.682-.35-.77-.595l-.013-.014c.146-.013.32-.066.46-.106.227-.06.435-.047.67-.106.106-.027.213-.06.32-.094v-.06c-.12-.12-.21-.283-.334-.395a8.867 8.867 0 00-1.104-.823c-.21-.134-.476-.22-.697-.334-.08-.04-.214-.06-.26-.127-.12-.146-.19-.34-.275-.514a17.69 17.69 0 01-.547-1.163c-.12-.262-.193-.523-.34-.763-.69-1.137-1.437-1.826-2.586-2.5-.247-.14-.543-.2-.856-.274-.167-.008-.334-.02-.5-.027-.11-.047-.216-.174-.31-.235-.38-.24-1.364-.76-1.644-.072-.18.434.267.862.422 1.082.115.153.26.328.34.5.047.116.06.235.107.356.106.294.207.622.347.897.073.14.153.287.247.413.054.073.146.107.167.227-.094.136-.1.334-.154.5-.24.757-.146 1.693.194 2.25.107.166.362.534.703.393.3-.12.234-.5.32-.835.02-.08.007-.133.048-.187v.015c.094.188.188.367.274.555.206.328.566.668.867.895.16.12.287.328.487.402v-.02h-.015c-.043-.058-.1-.086-.154-.133a3.445 3.445 0 01-.35-.4 8.76 8.76 0 01-.747-1.218c-.11-.21-.202-.436-.29-.643-.04-.08-.04-.2-.107-.24-.1.146-.247.273-.32.453-.127.288-.14.642-.188 1.01-.027.007-.014 0-.027.014-.214-.052-.287-.274-.367-.46-.2-.475-.233-1.238-.06-1.785.047-.14.247-.582.167-.716-.042-.127-.174-.2-.247-.303a2.478 2.478 0 01-.24-.427c-.16-.374-.24-.788-.414-1.162-.08-.173-.22-.354-.334-.513-.127-.18-.267-.307-.368-.52-.033-.073-.08-.194-.027-.274.014-.054.042-.075.094-.09.088-.072.335.022.422.062.247.1.455.194.662.334.094.066.195.193.315.226h.14c.214.047.455.014.655.073.355.114.675.28.962.46a5.953 5.953 0 012.085 2.286c.08.154.115.295.188.455.14.33.313.663.455.982.14.315.275.636.476.897.1.14.502.213.682.286.133.06.34.115.46.188.23.14.454.3.67.454.11.076.443.243.463.378z\\"\\\/><\\\/svg>"},{"name":"Apache","svgData":"<svg fill=\\"#D22128\\" role=\\"img\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\"><title>Apache<\\\/title><path d=\\"M17.805 2.197v.066h.156v.44h.072v-.44h.156v-.066zm.9 0l-.175.353-.172-.353h-.087v.506h.067V2.3l.172.35h.045l.172-.35v.404h.066v-.506zm-4.257 1c-.204.31-.424.66-.66 1.06l-.04.062a44.457 44.457 0 00-1.265 2.29c-.187.36-.38.742-.577 1.146l2.267-.25c.66-.302.955-.578 1.242-.976a15.5 15.5 0 00.23-.342c.23-.363.46-.763.663-1.16.197-.386.37-.767.505-1.11.083-.22.15-.422.198-.6.042-.158.074-.307.1-.45-.884.15-1.965.295-2.668.33zM11.894 7.78l-.077.16c-.078.16-.157.32-.236.488-.086.18-.172.364-.26.552l-.132.287a75.265 75.265 0 00-1.427 3.3c-.163.397-.327.807-.493 1.23-.15.38-.297.765-.45 1.164l-.02.06c-.15.396-.3.802-.453 1.22l-.01.027.72-.08a.213.213 0 01-.042-.006c.863-.106 2.01-.75 2.75-1.547.342-.367.652-.8.94-1.306.213-.377.413-.795.604-1.258.168-.405.328-.843.48-1.318-.196.105-.423.18-.673.235a2.184 2.184 0 01-.273.046c.806-.31 1.314-.905 1.683-1.64a2.816 2.816 0 01-.968.428c-.06.012-.116.022-.174.03l-.043.006h.002c.278-.118.514-.248.718-.403a2.571 2.571 0 00.637-.698l.063-.104.077-.154a8.107 8.107 0 00.367-.85l.03-.088a3.04 3.04 0 00.123-.463.733.733 0 01-.094.065c-.243.145-.66.277-.996.34l.663-.074-.664.073h-.017l-.1.017c.006-.003.01-.006.017-.008l-2.265.25-.013.022zM8.27 16.45c-.117.323-.236.654-.355.992l-.005.015c-.016.046-.032.094-.05.142-.08.227-.15.432-.31.9.264.12.475.435.675.793a1.44 1.44 0 00-.466-.99c1.293.06 2.41-.27 2.99-1.217.05-.084.096-.173.14-.268-.26.333-.59.474-1.2.44 0 0-.004 0-.005.002l.004-.002c.9-.404 1.354-.79 1.754-1.433.094-.153.186-.32.28-.503-.788.81-1.702 1.04-2.664.865l-.72.078a6.43 6.43 0 00-.067.183zM15.42.112c-.376.222-1 .85-1.748 1.763l.686 1.294c.48-.687.97-1.307 1.462-1.836l.058-.062c-.02.02-.04.04-.057.062-.16.176-.644.74-1.375 1.863.703-.035 1.784-.18 2.666-.33.262-1.47-.258-2.142-.258-2.142s-.66-1.07-1.436-.61zm-3.084 6.402a40.253 40.253 0 011.306-2.26l.04-.064c.224-.352.45-.693.677-1.02l-.685-1.293-.157.192c-.197.245-.403.51-.613.79a39.853 39.853 0 00-2.016 2.97l-.022.038.893 1.763c.19-.378.38-.752.575-1.118zm-3.73 8.32c.158-.406.319-.81.483-1.225.156-.394.32-.79.484-1.19a91.133 91.133 0 011.6-3.604l.205-.424c.12-.243.237-.485.36-.724a.125.125 0 01.02-.04l-.895-1.763-.044.07c-.207.34-.414.687-.617 1.042a38.056 38.056 0 00-1.092 2.04l-.094.193a24.573 24.573 0 00-1.258 3.087 18.492 18.492 0 00-.52 1.997l.896 1.77c.117-.317.24-.638.364-.963zm-1.376-.476a13.38 13.38 0 00-.234 1.692c0 .02-.004.04-.005.06-.28-.45-1.03-.888-1.026-.884.537.778.944 1.55 1.005 2.31-.29.058-.684-.027-1.14-.195.475.436.83.556.97.588-.434.03-.89.328-1.346.67.668-.27 1.21-.38 1.596-.29-.61 1.74-1.23 3.655-1.843 5.69a.538.538 0 00.364-.354c.11-.368.84-2.786 1.978-5.965l.097-.27.028-.078c.12-.332.246-.672.374-1.02l.09-.237v-.004L7.24 14.3c-.003.02-.01.04-.012.06z\\"\\\/><\\\/svg>"},{"name":"Nginx","svgData":"<svg fill=\\"#009639\\" role=\\"img\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\"><title>NGINX<\\\/title><path d=\\"M12 0L1.605 6v12L12 24l10.395-6V6L12 0zm6 16.59c0 .705-.646 1.29-1.529 1.29-.631 0-1.351-.255-1.801-.81l-6-7.141v6.66c0 .721-.57 1.29-1.274 1.29H7.32c-.721 0-1.29-.6-1.29-1.29V7.41c0-.705.63-1.29 1.5-1.29.646 0 1.38.255 1.83.81l5.97 7.141V7.41c0-.721.6-1.29 1.29-1.29h.075c.72 0 1.29.6 1.29 1.29v9.18H18z\\"\\\/><\\\/svg>"},{"name":"WordPress","svgData":"<svg fill=\\"#21759B\\" role=\\"img\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\"><title>WordPress<\\\/title><path d=\\"M21.469 6.825c.84 1.537 1.318 3.3 1.318 5.175 0 3.979-2.156 7.456-5.363 9.325l3.295-9.527c.615-1.54.82-2.771.82-3.864 0-.405-.026-.78-.07-1.11m-7.981.105c.647-.03 1.232-.105 1.232-.105.582-.075.514-.93-.067-.899 0 0-1.755.135-2.88.135-1.064 0-2.85-.15-2.85-.15-.585-.03-.661.855-.075.885 0 0 .54.061 1.125.09l1.68 4.605-2.37 7.08L5.354 6.9c.649-.03 1.234-.1 1.234-.1.585-.075.516-.93-.065-.896 0 0-1.746.138-2.874.138-.2 0-.438-.008-.69-.015C4.911 3.15 8.235 1.215 12 1.215c2.809 0 5.365 1.072 7.286 2.833-.046-.003-.091-.009-.141-.009-1.06 0-1.812.923-1.812 1.914 0 .89.513 1.643 1.06 2.531.411.72.89 1.643.89 2.977 0 .915-.354 1.994-.821 3.479l-1.075 3.585-3.9-11.61.001.014zM12 22.784c-1.059 0-2.081-.153-3.048-.437l3.237-9.406 3.315 9.087c.024.053.05.101.078.149-1.12.393-2.325.609-3.582.609M1.211 12c0-1.564.336-3.05.935-4.39L7.29 21.709C3.694 19.96 1.212 16.271 1.211 12M12 0C5.385 0 0 5.385 0 12s5.385 12 12 12 12-5.385 12-12S18.615 0 12 0\\"\\\/><\\\/svg>"},{"name":"cPanel","svgData":"<svg fill=\\"#FF6C2C\\" role=\\"img\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\"><title>cPanel<\\\/title><path d=\\"M4.586 9.346a.538.538 0 00-.34.113.561.561 0 00-.197.299L2.74 14.654h.922a.528.528 0 00.332-.113.561.561 0 00.2-.291l.968-3.604h.744a.677.677 0 01.317.077.703.703 0 01.24.199.732.732 0 01.129.281.65.65 0 01-.01.326.698.698 0 01-.676.526h-.385a.538.538 0 00-.337.113.561.561 0 00-.2.291l-.24.896h1.201a1.939 1.939 0 001.62-.867 1.988 1.988 0 00.265-.586l.027-.1a1.854 1.854 0 00.026-.907 1.973 1.973 0 00-1.031-1.34 1.875 1.875 0 00-.88-.21H4.587zm18.447 0a.401.401 0 00-.25.082.377.377 0 00-.14.217l-1.334 5.01a1.7 1.7 0 00.57-.096 1.806 1.806 0 00.496-.266 1.74 1.74 0 00.385-.408 1.648 1.648 0 00.234-.531l.996-3.696a.23.23 0 00-.045-.217.246.246 0 00-.2-.095h-.712zM8.381 10.643l-.133.503a.564.564 0 00-.006.26.544.544 0 00.1.221.552.552 0 00.185.154.53.53 0 00.252.06h2.157a.101.101 0 01.084.038.098.098 0 01.015.088l-.02.072-.324 1.201-.013.055a.172.172 0 01-.067.105.205.205 0 01-.127.04H9.178a.147.147 0 01-.12-.057.136.136 0 01-.027-.13c.022-.074.071-.112.147-.112h.808a.53.53 0 00.332-.112.564.564 0 00.2-.293l.132-.498H8.84a1.131 1.131 0 00-.38.065 1.152 1.152 0 00-.323.176 1.194 1.194 0 00-.256.271 1.052 1.052 0 00-.156.346l-.028.1a1.095 1.095 0 00-.013.533 1.203 1.203 0 00.212.464 1.141 1.141 0 00.918.453l2.157.006a.899.899 0 00.875-.67l.525-1.95a1.101 1.101 0 00.01-.514 1.114 1.114 0 00-.205-.444 1.149 1.149 0 00-.377-.312 1.048 1.048 0 00-.498-.12H8.38zm-6.397.01a1.924 1.924 0 00-.638.107 1.989 1.989 0 00-.553.295 1.962 1.962 0 00-.7 1.045l-.027.1a1.936 1.936 0 00-.023.905 1.955 1.955 0 00.361.786 1.986 1.986 0 00.668.554 1.875 1.875 0 00.88.21h.464l.266-.983a.23.23 0 00-.043-.215.239.239 0 00-.198-.096h-.423a.702.702 0 01-.319-.074.67.67 0 01-.24-.195.732.732 0 01-.127-.281.706.706 0 01.01-.34.73.73 0 01.256-.377.675.675 0 01.42-.14h.697a.538.538 0 00.338-.114.561.561 0 00.199-.297l.232-.89h-1.5zm11.08 0l-.982 3.689a.23.23 0 00.045.217.238.238 0 00.195.095h.711a.413.413 0 00.248-.08.363.363 0 00.143-.21l.644-2.41h.745a.678.678 0 01.318.075.708.708 0 01.238.2.735.735 0 01.129.28.65.65 0 01-.01.327l-.398 1.506a.243.243 0 00.24.312h.713a.403.403 0 00.244-.08.366.366 0 00.143-.213l.332-1.248a1.897 1.897 0 00.029-.908 1.955 1.955 0 00-.361-.79 1.987 1.987 0 00-.668-.554 1.889 1.889 0 00-.885-.209h-1.813zm5.793 0a1.458 1.458 0 00-.488.081 1.489 1.489 0 00-.752.58 1.493 1.493 0 00-.205.454l-.406 1.505a1.018 1.018 0 00-.016.508 1.139 1.139 0 00.205.446 1.095 1.095 0 00.377.312 1.071 1.071 0 00.498.115h2.502a.528.528 0 00.332-.113.561.561 0 00.2-.291l.21-.791h-2.748a.2.2 0 01-.191-.252l.299-1.127a.34.34 0 01.113-.162.281.281 0 01.18-.064h1.232a.153.153 0 01.147.193l-.026.1c-.022.075-.071.113-.146.113h-.81a.538.538 0 00-.339.111.526.526 0 00-.191.293l-.133.49h2.004a.887.887 0 00.547-.181.864.864 0 00.32-.483l.12-.45a1.11 1.11 0 00.013-.513 1.076 1.076 0 00-.203-.443 1.146 1.146 0 00-.375-.313 1.047 1.047 0 00-.498-.119h-1.772Z\\"\\\/><\\\/svg>"},{"name":"Monday.com","svgData":"<svg xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\" viewBox=\\"0 0 120 40\\">\\n <circle cx=\\"20\\" cy=\\"20\\" r=\\"6\\" fill=\\"#FF3D57\\"\\\/>\\n <circle cx=\\"40\\" cy=\\"20\\" r=\\"6\\" fill=\\"#FFCB00\\"\\\/>\\n <circle cx=\\"60\\" cy=\\"20\\" r=\\"6\\" fill=\\"#00CA72\\"\\\/>\\n <text x=\\"90\\" y=\\"26\\" font-family=\\"Arial, sans-serif\\" font-size=\\"12\\" font-weight=\\"bold\\" fill=\\"#333333\\" text-anchor=\\"middle\\">monday<\\\/text>\\n<\\\/svg>\\n"},{"name":"Twilio","svgData":"<svg fill=\\"#F22F46\\" role=\\"img\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\"><title>Twilio<\\\/title><path d=\\"M12 0C5.381-.008.008 5.352 0 11.971V12c0 6.64 5.359 12 12 12 6.64 0 12-5.36 12-12 0-6.641-5.36-12-12-12zm0 20.801c-4.846.015-8.786-3.904-8.801-8.75V12c-.014-4.846 3.904-8.786 8.75-8.801H12c4.847-.014 8.786 3.904 8.801 8.75V12c.015 4.847-3.904 8.786-8.75 8.801H12zm5.44-11.76c0 1.359-1.12 2.479-2.481 2.479-1.366-.007-2.472-1.113-2.479-2.479 0-1.361 1.12-2.481 2.479-2.481 1.361 0 2.481 1.12 2.481 2.481zm0 5.919c0 1.36-1.12 2.48-2.481 2.48-1.367-.008-2.473-1.114-2.479-2.48 0-1.359 1.12-2.479 2.479-2.479 1.361-.001 2.481 1.12 2.481 2.479zm-5.919 0c0 1.36-1.12 2.48-2.479 2.48-1.368-.007-2.475-1.113-2.481-2.48 0-1.359 1.12-2.479 2.481-2.479 1.358-.001 2.479 1.12 2.479 2.479zm0-5.919c0 1.359-1.12 2.479-2.479 2.479-1.367-.007-2.475-1.112-2.481-2.479 0-1.361 1.12-2.481 2.481-2.481 1.358 0 2.479 1.12 2.479 2.481z\\"\\\/><\\\/svg>\\n"},{"name":"SendGrid","svgData":"<svg fill=\\"#51A9E3\\" role=\\"img\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\"><title>SendGrid<\\\/title><path d=\\"M.8 24h13.6c.88 0 1.6-.72 1.6-1.6v-4.8c0-.88-.72-1.6-1.6-1.6H9.6c-.88 0-1.6-.72-1.6-1.6V9.6C8 8.72 7.28 8 6.4 8H1.6C.72 8 0 8.72 0 9.6v13.6c0 .44.36.8.8.8zM23.2 0H9.6C8.72 0 8 .72 8 1.6v4.8C8 7.28 8.72 8 9.6 8h4.8c.88 0 1.6.72 1.6 1.6v4.8c0 .88.72 1.6 1.6 1.6h4.8c.88 0 1.6-.72 1.6-1.6V.8c0-.44-.36-.8-.8-.8Z\\"\\\/><\\\/svg>\\n"},{"name":"BBB A+ Rating","svgData":"<svg xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\" viewBox=\\"0 0 120 40\\" fill=\\"#0060A9\\">\\n <text x=\\"60\\" y=\\"26\\" font-family=\\"Arial, sans-serif\\" font-size=\\"16\\" font-weight=\\"bold\\" text-anchor=\\"middle\\">BBB A+<\\\/text>\\n<\\\/svg>\\n"},{"name":"Clutch Top Agency","svgData":"<svg xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\" viewBox=\\"0 0 120 40\\" fill=\\"#FF3D2E\\">\\n <text x=\\"60\\" y=\\"26\\" font-family=\\"Arial, sans-serif\\" font-size=\\"14\\" font-weight=\\"bold\\" text-anchor=\\"middle\\">Clutch<\\\/text>\\n<\\\/svg>\\n"},{"name":"Trustpilot","svgData":"<svg fill=\\"#00B67A\\" role=\\"img\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\"><title>Trustpilot<\\\/title><path d=\\"M17.227 16.67l2.19 6.742-7.413-5.388 5.223-1.354zM24 9.31h-9.165L12.005.589l-2.84 8.723L0 9.3l7.422 5.397-2.84 8.714 7.422-5.388 4.583-3.326L24 9.311z\\"\\\/><\\\/svg>"},{"name":"SEMrush Partner","svgData":"<svg fill=\\"#FF642D\\" role=\\"img\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\"><title>Semrush<\\\/title><path d=\\"M20.698 11.911c0 .444-.226.516-.79.516-.596 0-.706-.1-.77-.554-.118-1.152-.896-2.13-2.201-2.24-.418-.034-.518-.19-.518-.706 0-.48.074-.708.446-.708 2.265.01 3.833 1.832 3.833 3.69v.002zm3.3 0c0-3.456-2.338-7.11-7.74-7.11H5.52c-.218 0-.354.11-.354.31 0 .109.082.209.156.26.388.31.97.654 1.73 1.036.743.372 1.323.616 1.903.852.246.1.336.208.336.344 0 .19-.136.308-.4.308H.372c-.254 0-.372.164-.372.326 0 .136.044.254.162.372.69.726 1.796 1.596 3.4 2.604 1.466.91 2.98 1.74 4.533 2.492.236.11.308.236.308.372-.008.154-.126.28-.4.28H4.1c-.216 0-.344.12-.344.3 0 .1.08.226.19.326.888.808 2.311 1.688 4.207 2.494 2.53 1.08 5.094 1.721 7.98 1.721 5.465 0 7.867-4.087 7.867-7.289l-.002.002zm-7.133 5.104c-2.794 0-5.132-2.276-5.132-5.114 0-2.794 2.33-5.04 5.132-5.04 2.863 0 5.111 2.24 5.111 5.04a5.086 5.086 0 0 1-5.111 5.114z\\"\\\/><\\\/svg>"},{"name":"Commerce Lexington Member","svgData":"<svg xmlns=\\"http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\" viewBox=\\"0 0 140 40\\" fill=\\"#1E3A5F\\">\\n <text x=\\"70\\" y=\\"26\\" font-family=\\"Arial, sans-serif\\" font-size=\\"11\\" font-weight=\\"bold\\" text-anchor=\\"middle\\">Commerce Lexington<\\\/text>\\n<\\\/svg>\\n"}]\"\n aria-hidden=\"true\"><\/div>\n\n <!-- Fallback: Static Logo Grid (visible on mobile, or when JS\/WebGL unavailable) -->\n <div id=\"tech-globe-fallback\" class=\"space-y-4\">\n <div class=\"mb-6 last:mb-0\">\n <p class=\"text-[10px] font-semibold uppercase tracking-widest theme-text-muted mb-3 text-center\">Certifications & Partnerships<\/p>\n <div class=\"flex flex-wrap items-center justify-center gap-5 md:gap-6\">\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"Google Partner\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/certifications\/google-partner.svg\"\n alt=\"Google Partner\"\n title=\"Google Partner\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/certifications\/google-ads.svg\"\n alt=\"Google Ads Certified\"\n title=\"Google Ads Certified\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/div>\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/certifications\/google-cloud.svg\"\n alt=\"Google Cloud Partner\"\n title=\"Google Cloud Partner\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/div>\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/certifications\/google-analytics.svg\"\n alt=\"Google Analytics Certified\"\n title=\"Google Analytics Certified\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/div>\n <\/div>\n <\/div>\n <div class=\"mb-6 last:mb-0\">\n <p class=\"text-[10px] font-semibold uppercase tracking-widest theme-text-muted mb-3 text-center\">AI & LLM Platforms<\/p>\n <div class=\"flex flex-wrap items-center justify-center gap-5 md:gap-6\">\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"https:\/\/www.anthropic.com\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"Anthropic\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/ai\/anthropic.svg\"\n alt=\"Anthropic\"\n title=\"Anthropic\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"https:\/\/openai.com\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"OpenAI\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/ai\/openai.svg\"\n alt=\"OpenAI\"\n title=\"OpenAI\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"https:\/\/gemini.google.com\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"Google Gemini\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/ai\/google-gemini.svg\"\n alt=\"Google Gemini\"\n title=\"Google Gemini\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"mb-6 last:mb-0\">\n <p class=\"text-[10px] font-semibold uppercase tracking-widest theme-text-muted mb-3 text-center\">Hosting Partners<\/p>\n <div class=\"flex flex-wrap items-center justify-center gap-5 md:gap-6\">\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"https:\/\/cloud.google.com\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"Google Cloud\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/tech\/googlecloud.svg\"\n alt=\"Google Cloud\"\n title=\"Google Cloud\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"https:\/\/aws.amazon.com\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"AWS\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/tech\/aws.svg\"\n alt=\"AWS\"\n title=\"AWS\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"https:\/\/liquidweb.com\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"Liquid Web\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/tech\/liquidweb.svg\"\n alt=\"Liquid Web\"\n title=\"Liquid Web\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"https:\/\/rocket.net\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"Rocket.net\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/tech\/rocketdotnet.svg\"\n alt=\"Rocket.net\"\n title=\"Rocket.net\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"mb-6 last:mb-0\">\n <p class=\"text-[10px] font-semibold uppercase tracking-widest theme-text-muted mb-3 text-center\">Infrastructure & Tools<\/p>\n <div class=\"flex flex-wrap items-center justify-center gap-5 md:gap-6\">\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"https:\/\/php.net\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"PHP\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/tech\/php.svg\"\n alt=\"PHP\"\n title=\"PHP\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"https:\/\/mysql.com\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"MySQL\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/tech\/mysql.svg\"\n alt=\"MySQL\"\n title=\"MySQL\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"https:\/\/httpd.apache.org\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"Apache\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/tech\/apache.svg\"\n alt=\"Apache\"\n title=\"Apache\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"https:\/\/nginx.org\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"Nginx\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/tech\/nginx.svg\"\n alt=\"Nginx\"\n title=\"Nginx\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"https:\/\/wordpress.org\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"WordPress\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/tech\/wordpress.svg\"\n alt=\"WordPress\"\n title=\"WordPress\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"https:\/\/cpanel.net\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"cPanel\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/tech\/cpanel.svg\"\n alt=\"cPanel\"\n title=\"cPanel\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"https:\/\/monday.com\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"Monday.com\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/tech\/monday.svg\"\n alt=\"Monday.com\"\n title=\"Monday.com\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"https:\/\/www.twilio.com\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"Twilio\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/tech\/twilio.svg\"\n alt=\"Twilio\"\n title=\"Twilio\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"https:\/\/sendgrid.com\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"SendGrid\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/tech\/sendgrid.svg\"\n alt=\"SendGrid\"\n title=\"SendGrid\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"mb-6 last:mb-0\">\n <p class=\"text-[10px] font-semibold uppercase tracking-widest theme-text-muted mb-3 text-center\">Trust & Accreditations<\/p>\n <div class=\"flex flex-wrap items-center justify-center gap-5 md:gap-6\">\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"https:\/\/www.bbb.org\/us\/ky\/lexington\/profile\/web-design\/adopt-the-web-0402-211445364\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"BBB A+ Rating\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/trust\/bbb.svg\"\n alt=\"BBB A+ Rating\"\n title=\"BBB A+ Rating\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"https:\/\/clutch.co\/profile\/adopt-web\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"Clutch Top Agency\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/trust\/clutch.svg\"\n alt=\"Clutch Top Agency\"\n title=\"Clutch Top Agency\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"https:\/\/www.trustpilot.com\/review\/adopttheweb.com\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"Trustpilot\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/trust\/trustpilot.svg\"\n alt=\"Trustpilot\"\n title=\"Trustpilot\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"https:\/\/www.semrush.com\/agencies\/adopt-the-web\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"SEMrush Partner\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/trust\/semrush.svg\"\n alt=\"SEMrush Partner\"\n title=\"SEMrush Partner\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <div class=\"partner-logo opacity-60 hover:opacity-100 transition-all duration-300 grayscale-[60%] hover:grayscale-0\">\n <a href=\"https:\/\/www.commercelexington.com\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" title=\"Commerce Lexington Member\">\n <img src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/images\/partners\/trust\/commerce-lexington.svg\"\n alt=\"Commerce Lexington Member\"\n title=\"Commerce Lexington Member\"\n class=\"h-7 md:h-9 w-auto max-w-[90px] md:max-w-[110px] object-contain\"\n width=\"110\"\n height=\"36\"\n loading=\"lazy\"\n decoding=\"async\"\n onerror=\"this.parentElement.style.display='none'\">\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div><!-- \/grid -->\n<\/div>\n\n<!-- Three.js Globe Script (lazy-loaded) -->\n<script src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/js\/tech-globe.js?v=5\" defer><\/script>\n\n\n <div class=\"pt-8 flex flex-col md:flex-row items-center justify-between gap-4\" style=\"border-top: 1px solid var(--border-color);\">\n <p class=\"theme-text-muted text-sm\">\n \u00a9 2026 Adopt the Web. All rights reserved.\n <\/p>\n <div class=\"flex gap-6 text-sm\">\n <a href=\"https:\/\/adopttheweb.com\/privacy-policy\/\" class=\"theme-text-muted hover:text-atw-blue transition-colors\">Privacy Policy<\/a>\n <a href=\"https:\/\/adopttheweb.com\/tos\/\" class=\"theme-text-muted hover:text-atw-blue transition-colors\">Terms of Service<\/a>\n <\/div>\n <\/div>\n\n <\/div>\n <\/footer>\n\n<!-- Consultation Modal - Immersive Design -->\n<div id=\"consultModal\" class=\"fixed inset-0 z-[100] hidden\">\n <!-- Full frosted glass background -->\n <div class=\"absolute inset-0 glass-card\" onclick=\"closeConsultModal()\"><\/div>\n\n <!-- Animated background orbs -->\n <div class=\"absolute inset-0 overflow-hidden pointer-events-none\">\n <div class=\"absolute top-1\/4 -left-20 w-96 h-96 bg-atw-blue\/30 blur-3xl animate-pulse\"><\/div>\n <div class=\"absolute bottom-1\/4 -right-20 w-96 h-96 bg-atw-purple\/30 blur-3xl animate-pulse\" style=\"animation-delay: 1s;\"><\/div>\n <\/div>\n\n <!-- Modal Content - Centered -->\n <div class=\"relative h-full flex items-center justify-center p-4 md:p-12 lg:p-16\">\n <div class=\"relative w-full max-w-lg md:max-w-xl lg:max-w-2xl glass-card md:bg-transparent md:border-0 md:backdrop-blur-none p-6 md:p-8\">\n\n <!-- Close Button - Inside modal content (top right, square) -->\n <button onclick=\"closeConsultModal()\" class=\"absolute top-2 right-2 md:top-4 md:right-4 w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white bg-white\/5 hover:bg-white\/10 border border-white\/10 transition-all z-50\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"\/>\n <\/svg>\n <\/button>\n\n <!-- Step 1: Hero CTA (Default View) -->\n <div id=\"consultStep1\" class=\"modal-step text-center\">\n\n <!-- Jarod's Photo - Large & Personal -->\n <div class=\"relative inline-block mb-6\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-atw-blue via-atw-purple to-atw-red blur-xl opacity-50 scale-110 animate-pulse\"><\/div>\n <img src=\"https:\/\/www.gravatar.com\/avatar\/77769d7a8633b1dfc2e855090b8bb70e?s=200&d=mp\" alt=\"Jarod Thornton\"\n class=\"relative w-24 h-24 md:w-28 md:h-28 border-2 border-white\/20 shadow-2xl\">\n <div class=\"absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 border-3 border-gray-900 flex items-center justify-center shadow-lg\">\n <span class=\"w-2 h-2 bg-white animate-ping absolute\"><\/span>\n <span class=\"w-2 h-2 bg-white\"><\/span>\n <\/div>\n <\/div>\n\n <!-- Headline -->\n <h2 class=\"text-2xl md:text-3xl lg:text-4xl font-bold text-white mb-2 tracking-tight\">\n Let's Build Something\n <span class=\"block bg-gradient-to-r from-atw-blue via-atw-purple to-atw-red bg-clip-text text-transparent\">Amazing Together<\/span>\n <\/h2>\n\n <p class=\"text-gray-400 text-sm md:text-base mb-8 max-w-sm mx-auto\">\n 30-minute strategy call. No pitch, just solutions.\n <\/p>\n\n <!-- Dual CTA Buttons -->\n <div class=\"flex flex-col sm:flex-row gap-3 md:gap-4 mb-6\">\n <!-- Primary: Schedule Call -->\n <button onclick=\"showCalendarStep()\"\n class=\"group flex-1 flex items-center justify-center gap-3 px-6 md:px-8 py-4 bg-gradient-to-r from-atw-blue via-atw-purple to-atw-red text-white font-semibold shadow-lg shadow-atw-purple\/25 hover:shadow-xl hover:shadow-atw-purple\/40 hover:scale-[1.02] transition-all duration-300 whitespace-nowrap\">\n <svg class=\"w-5 h-5 flex-shrink-0\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"\/>\n <\/svg>\n <span>Schedule a Call<\/span>\n <svg class=\"w-4 h-4 flex-shrink-0 opacity-0 -ml-2 group-hover:opacity-100 group-hover:ml-0 transition-all\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"\/>\n <\/svg>\n <\/button>\n\n <!-- Secondary: Text\/Call Jarod -->\n <a href=\"tel:+18593799422\"\n class=\"group flex-1 flex items-center justify-center gap-3 px-6 md:px-8 py-4 bg-white\/5 border border-white\/10 text-white font-semibold hover:bg-white\/10 hover:border-white\/20 hover:scale-[1.02] transition-all duration-300 whitespace-nowrap\">\n <svg class=\"w-5 h-5 text-green-400 flex-shrink-0\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\"\/>\n <\/svg>\n <span>Call or Text Me<\/span>\n <\/a>\n <\/div>\n\n <!-- Trust Elements -->\n <div class=\"flex items-center justify-center gap-6 text-gray-500 text-xs\">\n <div class=\"flex items-center gap-1.5\">\n <svg class=\"w-4 h-4 text-green-500\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"\/>\n <\/svg>\n <span>Free \u2022 No obligation<\/span>\n <\/div>\n <div class=\"flex items-center gap-1.5\">\n <svg class=\"w-4 h-4 text-green-500\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"\/>\n <\/svg>\n <span>Get a roadmap<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Step 2: Calendar Selection -->\n <div id=\"consultStep2\" class=\"modal-step hidden\">\n <div class=\"glass-card p-5 md:p-6\">\n <!-- Header -->\n <div class=\"flex items-center gap-3 mb-5\">\n <button onclick=\"showHeroStep()\" class=\"w-8 h-8 flex items-center justify-center text-gray-400 hover:text-white bg-white\/5 hover:bg-white\/10 transition-all\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"\/>\n <\/svg>\n <\/button>\n <div>\n <h3 class=\"text-lg font-bold text-white\">Pick a Time<\/h3>\n <p class=\"text-gray-400 text-xs\">30-minute strategy call with Jarod<\/p>\n <\/div>\n <\/div>\n\n <!-- Calendar Loading -->\n <div id=\"calendarLoading\" class=\"text-center py-8\">\n <div class=\"inline-block w-6 h-6 border-2 border-atw-blue border-t-transparent animate-spin\"><\/div>\n <p class=\"text-gray-400 text-sm mt-3\">Loading available times...<\/p>\n <\/div>\n\n <!-- Calendar Content -->\n <div id=\"calendarContent\" class=\"hidden\">\n <!-- Week navigation -->\n <div class=\"flex items-center justify-between mb-3\">\n <button onclick=\"ConsultModal.prevWeek()\" id=\"prevWeekBtn\" class=\"p-2 bg-white\/5 border border-white\/10 hover:border-atw-blue\/50 hover:bg-atw-blue\/10 transition-all disabled:opacity-30 disabled:cursor-not-allowed\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"\/>\n <\/svg>\n <\/button>\n <span id=\"weekLabel\" class=\"text-gray-300 text-sm font-medium\"><\/span>\n <button onclick=\"ConsultModal.nextWeek()\" id=\"nextWeekBtn\" class=\"p-2 bg-white\/5 border border-white\/10 hover:border-atw-blue\/50 hover:bg-atw-blue\/10 transition-all\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"\/>\n <\/svg>\n <\/button>\n <\/div>\n <div id=\"dateSelector\" class=\"flex gap-1.5 overflow-x-auto pb-3 mb-4 scrollbar-hide\"><\/div>\n <div id=\"timeSlots\" class=\"grid grid-cols-3 gap-2 max-h-48 overflow-y-auto\"><\/div>\n <\/div>\n\n <!-- Quick Call Alternative -->\n <div class=\"mt-4 pt-4 border-t border-white\/10 text-center\">\n <p class=\"text-gray-500 text-xs mb-2\">Prefer to call or text?<\/p>\n <a href=\"tel:+18593799422\"\n class=\"inline-flex items-center gap-2 text-green-400 hover:text-green-300 text-sm font-medium transition-colors\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\"\/>\n <\/svg>\n (859) 379-9422\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Step 3: Contact Info -->\n <div id=\"consultStep3\" class=\"modal-step hidden\">\n <div class=\"glass-card p-5 md:p-6\">\n <!-- Header -->\n <div class=\"flex items-center gap-3 mb-5\">\n <button onclick=\"showCalendarStep()\" class=\"w-8 h-8 flex items-center justify-center text-gray-400 hover:text-white bg-white\/5 hover:bg-white\/10 transition-all\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"\/>\n <\/svg>\n <\/button>\n <div>\n <h3 class=\"text-lg font-bold text-white\">Almost There!<\/h3>\n <p id=\"selectedDateTime\" class=\"text-atw-blue text-xs font-medium\"><\/p>\n <\/div>\n <\/div>\n\n <!-- Contact Form -->\n <div class=\"space-y-3\">\n <div>\n <label class=\"block text-xs text-gray-400 mb-1.5\">Your Name<\/label>\n <input type=\"text\" id=\"bookingName\"\n class=\"w-full px-4 py-3 bg-white\/5 border border-white\/10 focus:border-atw-blue focus:outline-none transition-colors text-white placeholder-gray-500\"\n placeholder=\"Jane Smith\">\n <\/div>\n <div>\n <label class=\"block text-xs text-gray-400 mb-1.5\">Email<\/label>\n <input type=\"email\" id=\"bookingEmail\"\n class=\"w-full px-4 py-3 bg-white\/5 border border-white\/10 focus:border-atw-blue focus:outline-none transition-colors text-white placeholder-gray-500\"\n placeholder=\"jane@company.com\">\n <\/div>\n <div>\n <label class=\"block text-xs text-gray-400 mb-1.5\">What's on your mind? <span class=\"opacity-50\">(optional)<\/span><\/label>\n <textarea id=\"bookingDetails\" rows=\"2\"\n class=\"w-full px-4 py-3 bg-white\/5 border border-white\/10 focus:border-atw-blue focus:outline-none transition-colors resize-none text-white placeholder-gray-500\"\n placeholder=\"Tell us about your project...\"><\/textarea>\n <\/div>\n\n <button onclick=\"submitBooking()\" id=\"submitBtn\"\n class=\"w-full py-3.5 bg-gradient-to-r from-atw-blue via-atw-purple to-atw-red text-white font-semibold shadow-lg shadow-atw-purple\/25 hover:shadow-xl hover:shadow-atw-purple\/40 hover:scale-[1.01] transition-all duration-300 flex items-center justify-center gap-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"\/>\n <\/svg>\n Confirm My Call\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Step 4: Success Confirmation -->\n <div id=\"consultStep4\" class=\"modal-step hidden text-center\">\n <div class=\"mb-6\">\n <div class=\"inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-green-500 to-emerald-600 mb-4 shadow-lg shadow-green-500\/30\">\n <svg class=\"w-10 h-10 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"\/>\n <\/svg>\n <\/div>\n <h2 class=\"text-2xl md:text-3xl font-bold text-white mb-2\">You're All Set!<\/h2>\n <p class=\"text-gray-400 text-sm max-w-xs mx-auto\">\n Check your email for confirmation. Looking forward to chatting!\n <\/p>\n <\/div>\n\n <div class=\"glass-card p-4 mb-4\">\n <p id=\"confirmationDetails\" class=\"text-atw-blue font-medium\"><\/p>\n <\/div>\n\n <!-- Meet link container (populated dynamically) -->\n <div id=\"meetLinkContainer\" class=\"mb-6 hidden\"><\/div>\n\n <button onclick=\"closeConsultModal()\" class=\"px-6 py-3 bg-gradient-to-r from-atw-blue via-atw-purple to-atw-red text-white font-semibold shadow-lg hover:shadow-xl transition-all\">\n Done\n <\/button>\n <\/div>\n\n <\/div>\n <\/div>\n<\/div>\n<!-- Quote Request Modal -->\n<div id=\"quoteModal\" class=\"fixed inset-0 z-[100] hidden\">\n <!-- Backdrop -->\n <div class=\"absolute inset-0 bg-black\/80 backdrop-blur-sm\" onclick=\"closeQuoteModal()\"><\/div>\n\n <!-- Modal Container -->\n <div class=\"absolute inset-4 md:inset-10 lg:inset-20 flex items-center justify-center\">\n <div class=\"relative w-full max-w-2xl max-h-full overflow-auto glass-card glow-atw\">\n\n <!-- Close Button -->\n <button onclick=\"closeQuoteModal()\" class=\"absolute top-4 right-4 w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white transition-colors z-10\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"\/>\n <\/svg>\n <\/button>\n\n <!-- Modal Content -->\n <div class=\"p-6 md:p-10\">\n\n <!-- Header -->\n <div class=\"text-center mb-8\">\n <div class=\"inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-atw-purple\/20 to-atw-blue\/20 border border-white\/10 rounded-full text-sm mb-4\">\n <svg class=\"w-4 h-4 text-atw-purple\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\/>\n <\/svg>\n Free Quote\n <\/div>\n <h2 class=\"text-2xl md:text-3xl font-bold mb-2 theme-text\">Request a Quote<\/h2>\n <p id=\"quoteModalSubtitle\" class=\"theme-text-secondary\">Tell us about your project and we'll get back to you within 24 hours<\/p>\n <\/div>\n\n <!-- Quote Form -->\n <form id=\"quoteForm\" onsubmit=\"submitQuoteForm(event)\">\n <input type=\"hidden\" id=\"quoteProduct\" name=\"product\" value=\"\">\n \n <div class=\"space-y-5\">\n <!-- Name & Email Row -->\n <div class=\"grid md:grid-cols-2 gap-4\">\n <div>\n <label class=\"block text-sm theme-text-secondary mb-2\">Your Name <span class=\"text-red-400\">*<\/span><\/label>\n <input type=\"text\" id=\"quoteName\" name=\"name\" required \n class=\"w-full px-4 py-3 bg-white\/5 border border-white\/10 rounded-lg focus:border-atw-purple focus:outline-none transition-colors theme-text\" \n placeholder=\"Jane Smith\">\n <\/div>\n <div>\n <label class=\"block text-sm theme-text-secondary mb-2\">Email Address <span class=\"text-red-400\">*<\/span><\/label>\n <input type=\"email\" id=\"quoteEmail\" name=\"email\" required \n class=\"w-full px-4 py-3 bg-white\/5 border border-white\/10 rounded-lg focus:border-atw-purple focus:outline-none transition-colors theme-text\" \n placeholder=\"jane@company.com\">\n <\/div>\n <\/div>\n\n <!-- Phone & Company Row -->\n <div class=\"grid md:grid-cols-2 gap-4\">\n <div>\n <label class=\"block text-sm theme-text-secondary mb-2\">Phone Number<\/label>\n <input type=\"tel\" id=\"quotePhone\" name=\"phone\" \n class=\"w-full px-4 py-3 bg-white\/5 border border-white\/10 rounded-lg focus:border-atw-purple focus:outline-none transition-colors theme-text\" \n placeholder=\"(555) 123-4567\">\n <\/div>\n <div>\n <label class=\"block text-sm theme-text-secondary mb-2\">Company\/Organization<\/label>\n <input type=\"text\" id=\"quoteCompany\" name=\"company\" \n class=\"w-full px-4 py-3 bg-white\/5 border border-white\/10 rounded-lg focus:border-atw-purple focus:outline-none transition-colors theme-text\" \n placeholder=\"Acme Inc.\">\n <\/div>\n <\/div>\n\n <!-- Project Type (hidden when product-specific) -->\n <div id=\"quoteTypeWrapper\">\n <label class=\"block text-sm theme-text-secondary mb-2\">What are you looking for? <span class=\"text-red-400\">*<\/span><\/label>\n <select id=\"quoteType\" name=\"project_type\" required\n class=\"w-full px-4 py-3 bg-white\/5 border border-white\/10 rounded-lg focus:border-atw-purple focus:outline-none transition-colors theme-text\">\n <option value=\"\">Select a service...<\/option>\n <optgroup label=\"Static Websites\">\n <option value=\"landing-page\">Landing Page ($300+)<\/option>\n <option value=\"starter-static\">Starter Static Site - 3-5 pages ($500+)<\/option>\n <option value=\"brochure-site\">Brochure Site - up to 10 pages ($900+)<\/option>\n <\/optgroup>\n <optgroup label=\"WordPress Websites\">\n <option value=\"wp-starter\">WordPress Starter - 5 pages ($750+)<\/option>\n <option value=\"wp-professional\">WordPress Professional - 10 pages ($1,500+)<\/option>\n <option value=\"wp-business\">WordPress Business - 20+ pages ($2,500+)<\/option>\n <option value=\"wp-ecommerce\">WordPress E-Commerce ($3,500+)<\/option>\n <\/optgroup>\n <optgroup label=\"SEO & Marketing\">\n <option value=\"seo-audit\">SEO Audit<\/option>\n <option value=\"optimized-search-solutions\">Optimized Search Solutions<\/option>\n <option value=\"citation-local-listings\">Citation & Local Listings<\/option>\n <option value=\"monthly-blog-content\">Monthly Blog Content<\/option>\n <option value=\"seo-llm-video\">SEO & LLM Optimized Video<\/option>\n <option value=\"paid-ads-management\">Paid Ads Management<\/option>\n <option value=\"social-media-management\">Social Media Management<\/option>\n <\/optgroup>\n <optgroup label=\"Hosting & Maintenance\">\n <option value=\"managed-wordpress\">Managed WordPress Hosting<\/option>\n <option value=\"managed-vps\">Managed VPS<\/option>\n <option value=\"static-hosting\">Static Hosting<\/option>\n <option value=\"website-maintenance\">Website Maintenance<\/option>\n <\/optgroup>\n <optgroup label=\"Other Services\">\n <option value=\"custom-development\">Custom Development<\/option>\n <option value=\"platform-design\">Platform Design<\/option>\n <option value=\"redesign\">Website Redesign<\/option>\n <option value=\"other\">Other \/ Not Sure<\/option>\n <\/optgroup>\n <\/select>\n <\/div>\n\n <!-- Selected Service Display (shown when product-specific) -->\n <div id=\"quoteServiceDisplay\" class=\"hidden\">\n <label class=\"block text-sm theme-text-secondary mb-2\">Service<\/label>\n <div class=\"px-4 py-3 bg-gradient-to-r from-atw-purple\/10 to-atw-blue\/10 border border-atw-purple\/30 rounded-lg\">\n <span id=\"quoteServiceName\" class=\"theme-text font-medium\"><\/span>\n <\/div>\n <\/div>\n\n <!-- Budget Range (hidden when product-specific) -->\n <div id=\"quoteBudgetWrapper\">\n <label class=\"block text-sm theme-text-secondary mb-2\">Budget Range<\/label>\n <select id=\"quoteBudget\" name=\"budget\"\n class=\"w-full px-4 py-3 bg-white\/5 border border-white\/10 rounded-lg focus:border-atw-purple focus:outline-none transition-colors theme-text\">\n <option value=\"\">Select a range...<\/option>\n <option value=\"under-500\">Under $500<\/option>\n <option value=\"500-1000\">$500 - $1,000<\/option>\n <option value=\"1000-2500\">$1,000 - $2,500<\/option>\n <option value=\"2500-5000\">$2,500 - $5,000<\/option>\n <option value=\"5000-10000\">$5,000 - $10,000<\/option>\n <option value=\"over-10000\">$10,000+<\/option>\n <option value=\"not-sure\">Not sure yet<\/option>\n <\/select>\n <\/div>\n\n <!-- Project Details -->\n <div>\n <label id=\"quoteDetailsLabel\" class=\"block text-sm theme-text-secondary mb-2\">Tell us about your project <span class=\"text-red-400\">*<\/span><\/label>\n <textarea id=\"quoteDetails\" name=\"details\" rows=\"4\" required\n class=\"w-full px-4 py-3 bg-white\/5 border border-white\/10 rounded-lg focus:border-atw-purple focus:outline-none transition-colors resize-none theme-text\"\n placeholder=\"What are your goals? Any specific features you need? Do you have existing branding\/content?\"\n data-default-placeholder=\"What are your goals? Any specific features you need? Do you have existing branding\/content?\"><\/textarea>\n <\/div>\n\n <!-- Timeline -->\n <div>\n <label class=\"block text-sm theme-text-secondary mb-3\">When do you need this?<\/label>\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-2\">\n <label class=\"cursor-pointer\">\n <input type=\"radio\" name=\"timeline\" value=\"asap\" class=\"sr-only peer\">\n <div class=\"p-3 text-center bg-white\/5 border border-white\/10 rounded-lg peer-checked:border-atw-purple peer-checked:bg-atw-purple\/10 hover:border-white\/20 transition-all\">\n <div class=\"text-sm font-medium theme-text\">ASAP<\/div>\n <\/div>\n <\/label>\n <label class=\"cursor-pointer\">\n <input type=\"radio\" name=\"timeline\" value=\"1-2-weeks\" class=\"sr-only peer\">\n <div class=\"p-3 text-center bg-white\/5 border border-white\/10 rounded-lg peer-checked:border-atw-purple peer-checked:bg-atw-purple\/10 hover:border-white\/20 transition-all\">\n <div class=\"text-sm font-medium theme-text\">1-2 Weeks<\/div>\n <\/div>\n <\/label>\n <label class=\"cursor-pointer\">\n <input type=\"radio\" name=\"timeline\" value=\"1-month\" class=\"sr-only peer\" checked>\n <div class=\"p-3 text-center bg-white\/5 border border-white\/10 rounded-lg peer-checked:border-atw-purple peer-checked:bg-atw-purple\/10 hover:border-white\/20 transition-all\">\n <div class=\"text-sm font-medium theme-text\">~1 Month<\/div>\n <\/div>\n <\/label>\n <label class=\"cursor-pointer\">\n <input type=\"radio\" name=\"timeline\" value=\"flexible\" class=\"sr-only peer\">\n <div class=\"p-3 text-center bg-white\/5 border border-white\/10 rounded-lg peer-checked:border-atw-purple peer-checked:bg-atw-purple\/10 hover:border-white\/20 transition-all\">\n <div class=\"text-sm font-medium theme-text\">Flexible<\/div>\n <\/div>\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Submit Button -->\n <div class=\"mt-8\">\n <button type=\"submit\" id=\"quoteSubmitBtn\" class=\"w-full py-4 btn-atw font-semibold text-lg flex items-center justify-center gap-2\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 19l9 2-9-18-9 18 9-2zm0 0v-8\"\/>\n <\/svg>\n Get My Free Quote\n <\/button>\n <p class=\"text-center text-sm theme-text-muted mt-3\">We typically respond within 24 hours<\/p>\n <\/div>\n <\/form>\n\n <!-- Success State (hidden by default) -->\n <div id=\"quoteSuccess\" class=\"hidden text-center py-8\">\n <div class=\"w-20 h-20 mx-auto bg-gradient-to-br from-green-500 to-emerald-600 rounded-full flex items-center justify-center mb-6\">\n <svg class=\"w-10 h-10 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"\/>\n <\/svg>\n <\/div>\n <h3 class=\"text-2xl font-bold mb-2 theme-text\">Quote Request Received!<\/h3>\n <p class=\"theme-text-secondary mb-6\">We'll review your project and get back to you within 24 hours with a detailed quote.<\/p>\n <button onclick=\"closeQuoteModal()\" class=\"px-8 py-3 btn-atw font-semibold\">\n Done\n <\/button>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n <!-- Conversion Tracking (must load early to capture page views) -->\n <script src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/js\/tracking.js\"><\/script>\n\n <!-- Ask ATW Intelligence Layer (disabled temporarily while configuring Cloudflare AI Search)\n <script src=\"https:\/\/successportal.app\/p\/adopttheweb\/assets\/js\/ask-atw.js\"><\/script>\n -->\n\n <!-- Quote Modal JS -->\n <script>\n const QuoteModal = {\n \/\/ Product-specific placeholders for the details textarea\n placeholders: {\n 'seo-llm-video': 'Tell us about your business and target audience. What topics would you like video content about? Do you have existing video assets?',\n 'optimized-search-solutions': 'What are your primary business goals? Who is your target audience? What geographic areas do you serve?',\n 'citation-local-listings': 'How many business locations do you have? What directories are you currently listed on? Any specific citations you need help with?',\n 'monthly-blog-content': 'What topics are relevant to your business? Who is your target audience? Do you have brand voice guidelines?',\n 'paid-ads-management': 'What platforms are you interested in (Google, Meta, etc.)? What is your monthly ad budget? What are your conversion goals?',\n 'social-media-management': 'Which platforms do you need managed? What is your posting frequency goal? Do you have existing content or brand guidelines?',\n 'website-design': 'What is the purpose of your website? Do you have examples of sites you like? Do you have existing branding\/content?',\n 'custom-development': 'What functionality do you need built? Do you have wireframes or specifications? What is your preferred technology stack?',\n 'managed-wordpress': 'Tell us about your current website. What is your monthly traffic? Do you need migration assistance?',\n 'managed-vps': 'What applications will you be running? What are your resource requirements? Do you need migration support?',\n 'website-maintenance': 'What CMS is your site built on? What kind of updates do you typically need? Any current issues we should know about?',\n 'default': 'What are your goals? Any specific features you need? Do you have existing branding\/content?'\n },\n\n open(productNameOrConfig = '') {\n const modal = document.getElementById('quoteModal');\n if (!modal) {\n console.error('Quote modal not found');\n return;\n }\n modal.classList.remove('hidden');\n document.body.style.overflow = 'hidden';\n\n \/\/ Reset form\n document.getElementById('quoteForm').reset();\n document.getElementById('quoteForm').classList.remove('hidden');\n document.getElementById('quoteSuccess').classList.add('hidden');\n\n \/\/ Get DOM elements\n const typeWrapper = document.getElementById('quoteTypeWrapper');\n const typeSelect = document.getElementById('quoteType');\n const serviceDisplay = document.getElementById('quoteServiceDisplay');\n const serviceName = document.getElementById('quoteServiceName');\n const budgetWrapper = document.getElementById('quoteBudgetWrapper');\n const detailsField = document.getElementById('quoteDetails');\n const subtitle = document.getElementById('quoteModalSubtitle');\n const productField = document.getElementById('quoteProduct');\n\n \/\/ Determine if this is a product-specific quote\n let productName = '';\n let productSlug = '';\n\n if (typeof productNameOrConfig === 'object' && productNameOrConfig !== null) {\n \/\/ Config object passed: { name: 'Product Name', slug: 'product-slug' }\n productName = productNameOrConfig.name || '';\n productSlug = productNameOrConfig.slug || '';\n } else {\n \/\/ String passed (legacy support)\n productName = productNameOrConfig;\n }\n\n if (productName) {\n \/\/ Product-specific mode\n productField.value = productName;\n subtitle.textContent = `Get a custom quote for ${productName}`;\n\n \/\/ Hide service dropdown, show service display\n typeWrapper.classList.add('hidden');\n typeSelect.removeAttribute('required');\n serviceDisplay.classList.remove('hidden');\n serviceName.textContent = productName;\n\n \/\/ Set the project type value to the product slug if it matches an option, otherwise 'other'\n if (productSlug && Array.from(typeSelect.options).some(opt => opt.value === productSlug)) {\n typeSelect.value = productSlug;\n } else {\n typeSelect.value = 'other';\n }\n\n \/\/ Hide budget dropdown for product-specific quotes\n budgetWrapper.classList.add('hidden');\n\n \/\/ Set product-specific placeholder\n const placeholder = this.placeholders[productSlug] || this.placeholders['default'];\n detailsField.placeholder = placeholder;\n\n } else {\n \/\/ Generic mode - show all fields\n subtitle.textContent = \"Tell us about your project and we'll get back to you within 24 hours\";\n\n typeWrapper.classList.remove('hidden');\n typeSelect.setAttribute('required', 'required');\n serviceDisplay.classList.add('hidden');\n budgetWrapper.classList.remove('hidden');\n\n \/\/ Reset placeholder\n detailsField.placeholder = detailsField.dataset.defaultPlaceholder || this.placeholders['default'];\n }\n },\n\n close() {\n const modal = document.getElementById('quoteModal');\n if (!modal) return;\n modal.classList.add('hidden');\n document.body.style.overflow = '';\n },\n\n async submit(event) {\n event.preventDefault();\n\n const form = document.getElementById('quoteForm');\n const btn = document.getElementById('quoteSubmitBtn');\n const originalText = btn.innerHTML;\n\n \/\/ Show loading\n btn.disabled = true;\n btn.innerHTML = '<span class=\"inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin\"><\/span> Sending...';\n\n \/\/ Collect form data\n const formData = new FormData(form);\n const data = Object.fromEntries(formData.entries());\n data.timeline = formData.get('timeline') || 'not-specified';\n\n \/\/ Add tracking data for attribution\n const tracking = window.ATWTracking ? window.ATWTracking.getTrackingData() : {};\n data.landing_page = tracking.landing_page || '';\n data.referrer_url = tracking.referrer_url || '';\n data.utm_source = tracking.utm_source || '';\n data.utm_medium = tracking.utm_medium || '';\n data.utm_campaign = tracking.utm_campaign || '';\n data.utm_content = tracking.utm_content || '';\n data.utm_term = tracking.utm_term || '';\n data.gclid = tracking.gclid || '';\n data.fbclid = tracking.fbclid || '';\n data.conversion_path = tracking.conversion_path || '[]';\n\n try {\n const response = await fetch('https:\/\/successportal.app\/api\/quote-request', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify(data)\n });\n\n const result = await response.json();\n\n if (result.success) {\n \/\/ Show success state\n form.classList.add('hidden');\n document.getElementById('quoteSuccess').classList.remove('hidden');\n } else {\n alert(result.error || 'Something went wrong. Please try again.');\n btn.disabled = false;\n btn.innerHTML = originalText;\n }\n } catch (error) {\n console.error('Quote submission error:', error);\n alert('Something went wrong. Please try again or call us at (888) 336-8053.');\n btn.disabled = false;\n btn.innerHTML = originalText;\n }\n }\n };\n\n \/\/ Global functions for onclick handlers\n \/\/ Accepts either a string (product name) or object { name, slug }\n function openQuoteModal(productNameOrConfig) { QuoteModal.open(productNameOrConfig); }\n function closeQuoteModal() { QuoteModal.close(); }\n function submitQuoteForm(event) { QuoteModal.submit(event); }\n <\/script>\n\n <!-- Consultation Modal JS - Immersive Design -->\n <script>\n const ConsultModal = {\n state: {\n currentStep: 1,\n projectType: 'consultation', \/\/ Default for simplified flow\n timeline: 'flexible',\n selectedDate: '',\n selectedTime: '',\n selectedTimeDisplay: '',\n schedulingUrl: '',\n eventTypeUri: '',\n availability: {},\n weekOffset: 0\n },\n\n open(context = 'default') {\n const modal = document.getElementById('consultModal');\n if (!modal) {\n console.error('Consult modal not found on this page');\n window.location.href = 'https:\/\/adopttheweb.com\/#consult';\n return;\n }\n\n modal.classList.remove('hidden');\n document.body.style.overflow = 'hidden';\n\n \/\/ Reset state\n this.state.weekOffset = 0;\n this.state.availability = {};\n this.state.selectedDate = '';\n this.state.selectedTime = '';\n this.state.selectedTimeDisplay = '';\n this.state.schedulingUrl = '';\n\n \/\/ Show hero step\n this.showStep('consultStep1');\n },\n\n close() {\n const modal = document.getElementById('consultModal');\n if (!modal) return;\n modal.classList.add('hidden');\n document.body.style.overflow = '';\n },\n\n showStep(stepId) {\n document.querySelectorAll('.modal-step').forEach(s => s.classList.add('hidden'));\n const step = document.getElementById(stepId);\n if (step) step.classList.remove('hidden');\n },\n\n \/\/ Called when \"Schedule a Call\" is clicked\n loadCalendar() {\n this.showStep('consultStep2');\n if (Object.keys(this.state.availability).length === 0) {\n this.loadAvailability();\n }\n },\n\n async loadAvailability() {\n const loadingEl = document.getElementById('calendarLoading');\n const contentEl = document.getElementById('calendarContent');\n\n loadingEl.classList.remove('hidden');\n contentEl.classList.add('hidden');\n\n \/\/ Calculate date range based on week offset\n const startDate = new Date();\n startDate.setDate(startDate.getDate() + (this.state.weekOffset * 7));\n const endDate = new Date(startDate);\n endDate.setDate(endDate.getDate() + 6);\n\n const pad = n => String(n).padStart(2, '0');\n const startStr = `${startDate.getFullYear()}-${pad(startDate.getMonth()+1)}-${pad(startDate.getDate())}`;\n const endStr = `${endDate.getFullYear()}-${pad(endDate.getMonth()+1)}-${pad(endDate.getDate())}`;\n\n \/\/ Update week label\n const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n document.getElementById('weekLabel').textContent =\n `${monthNames[startDate.getMonth()]} ${startDate.getDate()} - ${monthNames[endDate.getMonth()]} ${endDate.getDate()}`;\n\n \/\/ Update prev button state (can't go before today)\n document.getElementById('prevWeekBtn').disabled = this.state.weekOffset === 0;\n\n \/\/ Limit how far ahead (e.g., 8 weeks)\n document.getElementById('nextWeekBtn').disabled = this.state.weekOffset >= 8;\n\n try {\n const url = `https:\/\/successportal.app\/api\/calendly?action=availability&start_date=${startStr}&end_date=${endStr}`;\n const res = await fetch(url);\n const data = await res.json();\n\n if (data.success && data.dates && data.dates.length > 0) {\n this.state.eventTypeUri = data.event_type;\n this.state.availability = data.slots_by_date;\n this.renderCalendar(data.dates, data.slots_by_date);\n } else if (data.dates && data.dates.length === 0) {\n document.getElementById('dateSelector').innerHTML = '<div class=\"col-span-full text-center text-gray-400 py-4\">No availability this week<\/div>';\n document.getElementById('timeSlots').innerHTML = '<div class=\"col-span-3 text-center text-gray-500 py-4\">Try another week \u2192<\/div>';\n } else {\n console.error('API error:', data.error || 'Unknown error');\n document.getElementById('dateSelector').innerHTML = '<div class=\"text-center text-red-400 py-4\">Failed to load availability<\/div>';\n }\n } catch (err) {\n console.error('Failed to load availability:', err);\n document.getElementById('dateSelector').innerHTML = '<div class=\"text-center text-red-400 py-4\">Failed to load availability<\/div>';\n }\n\n loadingEl.classList.add('hidden');\n contentEl.classList.remove('hidden');\n },\n\n prevWeek() {\n if (this.state.weekOffset > 0) {\n this.state.weekOffset--;\n this.loadAvailability();\n }\n },\n\n nextWeek() {\n if (this.state.weekOffset < 8) {\n this.state.weekOffset++;\n this.loadAvailability();\n }\n },\n\n renderCalendar(dates, slotsByDate) {\n const dateSelector = document.getElementById('dateSelector');\n const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n\n dateSelector.innerHTML = dates.map(dateStr => {\n const date = new Date(dateStr + 'T12:00:00');\n const dayName = dayNames[date.getDay()];\n const dayNum = date.getDate();\n const month = monthNames[date.getMonth()];\n\n return `\n <button onclick=\"ConsultModal.selectDate('${dateStr}')\"\n class=\"date-btn flex-shrink-0 w-20 py-4 bg-white\/5 border border-white\/10 hover:border-atw-blue\/50 hover:bg-atw-blue\/10 transition-all text-center\"\n data-date=\"${dateStr}\">\n <div class=\"text-xs text-gray-400 uppercase\">${dayName}<\/div>\n <div class=\"text-2xl font-bold\">${dayNum}<\/div>\n <div class=\"text-xs text-gray-400\">${month}<\/div>\n <\/button>\n `;\n }).join('');\n\n \/\/ Auto-select first date\n if (dates.length > 0) {\n this.selectDate(dates[0]);\n }\n },\n\n selectDate(dateStr) {\n this.state.selectedDate = dateStr;\n\n \/\/ Update date button styles\n document.querySelectorAll('.date-btn').forEach(btn => {\n if (btn.dataset.date === dateStr) {\n btn.classList.add('border-atw-blue', 'bg-atw-blue\/10');\n } else {\n btn.classList.remove('border-atw-blue', 'bg-atw-blue\/10');\n }\n });\n\n \/\/ Render time slots\n const slots = this.state.availability[dateStr] || [];\n const timeSlots = document.getElementById('timeSlots');\n\n timeSlots.innerHTML = slots.map(slot => {\n \/\/ Use start_local from native API or fallback to parsing\n const timeStr = slot.start_local || new Date(slot.start).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });\n\n return `\n <button onclick=\"ConsultModal.selectTime('${slot.start}', '${timeStr}')\"\n class=\"time-btn py-3 px-4 bg-white\/5 border border-white\/10 hover:border-atw-blue\/50 hover:bg-atw-blue\/10 transition-all text-center\"\n data-time=\"${slot.start}\">\n ${timeStr}\n <\/button>\n `;\n }).join('');\n\n if (slots.length === 0) {\n timeSlots.innerHTML = '<div class=\"col-span-3 text-center text-gray-400 py-8\">No times available for this date<\/div>';\n }\n },\n\n selectTime(isoTime, displayTime) {\n this.state.selectedTime = isoTime;\n this.state.selectedTimeDisplay = displayTime;\n\n \/\/ Update time button styles\n document.querySelectorAll('.time-btn').forEach(btn => {\n if (btn.dataset.time === isoTime) {\n btn.classList.add('border-atw-blue', 'bg-atw-blue\/10');\n } else {\n btn.classList.remove('border-atw-blue', 'bg-atw-blue\/10');\n }\n });\n\n \/\/ Update contact step display with selected date\/time\n const date = new Date(this.state.selectedDate + 'T12:00:00');\n const dateDisplay = date.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' });\n const dateTimeEl = document.getElementById('selectedDateTime');\n if (dateTimeEl) dateTimeEl.textContent = `${dateDisplay} at ${displayTime}`;\n\n \/\/ Go to contact step after brief delay\n setTimeout(() => this.showStep('consultStep3'), 300);\n },\n\n async submitBooking() {\n const name = document.getElementById('bookingName').value.trim();\n const email = document.getElementById('bookingEmail').value.trim();\n const details = document.getElementById('bookingDetails').value.trim();\n\n if (!name || !email) {\n alert('Please enter your name and email');\n return;\n }\n\n const btn = document.getElementById('submitBtn');\n btn.disabled = true;\n btn.innerHTML = '<div class=\"w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin\"><\/div> Booking...';\n\n try {\n \/\/ Get tracking data for attribution\n const tracking = window.ATWTracking ? window.ATWTracking.getTrackingData() : {};\n\n const res = await fetch('https:\/\/successportal.app\/api\/calendly?action=book', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({\n start_time: this.state.selectedTime,\n name: name,\n email: email,\n project_type: this.state.projectType,\n timeline: this.state.timeline,\n notes: details,\n \/\/ Conversion tracking\n landing_page: tracking.landing_page || '',\n referrer_url: tracking.referrer_url || '',\n utm_source: tracking.utm_source || '',\n utm_medium: tracking.utm_medium || '',\n utm_campaign: tracking.utm_campaign || '',\n utm_content: tracking.utm_content || '',\n utm_term: tracking.utm_term || '',\n gclid: tracking.gclid || '',\n fbclid: tracking.fbclid || '',\n conversion_path: tracking.conversion_path || '[]',\n })\n });\n\n const data = await res.json();\n\n if (data.success) {\n \/\/ Show success step\n this.showConfirmation(data);\n } else {\n throw new Error(data.error || 'Booking failed');\n }\n } catch (err) {\n alert('Failed to book: ' + err.message);\n btn.disabled = false;\n btn.innerHTML = `<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"\/><\/svg> Book My Call`;\n }\n },\n\n showConfirmation(data) {\n \/\/ Update confirmation step content\n const startDate = new Date(data.start_time);\n const dateStr = startDate.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' });\n const timeStr = startDate.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });\n\n const confirmDetails = document.getElementById('confirmationDetails');\n if (confirmDetails) {\n confirmDetails.innerHTML = `${dateStr} at ${timeStr}`;\n }\n\n \/\/ If there's a meet link, show it\n if (data.meet_link) {\n const meetLinkContainer = document.getElementById('meetLinkContainer');\n if (meetLinkContainer) {\n meetLinkContainer.innerHTML = `\n <a href=\"${data.meet_link}\" target=\"_blank\"\n class=\"flex items-center justify-center gap-2 px-4 py-3 bg-white\/5 border border-white\/10 text-atw-blue hover:bg-white\/10 transition-all\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z\"\/>\n <\/svg>\n <span>Join Google Meet<\/span>\n <\/a>\n `;\n meetLinkContainer.classList.remove('hidden');\n }\n }\n\n \/\/ Show success step\n this.showStep('consultStep4');\n }\n };\n\n \/\/ Global functions for onclick handlers\n function openConsultModal(context) { ConsultModal.open(context); }\n function closeConsultModal() { ConsultModal.close(); }\n function showHeroStep() { ConsultModal.showStep('consultStep1'); }\n function showCalendarStep() { ConsultModal.loadCalendar(); }\n function showContactStep() { ConsultModal.showStep('consultStep3'); }\n function showSuccessStep() { ConsultModal.showStep('consultStep4'); }\n function submitBooking() { ConsultModal.submitBooking(); }\n <\/script>\n\n\n","body_attrs":"class=\"antialiased overflow-x-hidden\"","updated_at":"2026-03-09 08:56:07"}}