PageSourceSearch

https://navedas.ai/

html navedas.ai collected 2026-10-05 14:06:40 UTC 239,994 bytes, 3,693 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" style="overflow-x:hidden;max-width:100vw;">
3<head>
4<script src="/public/gtag.js" async></script>
4
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
8  <!-- Preconnect: open DNS+TCP+TLS to external origins before they're needed -->
9  <link rel="preconnect" href="https://fonts.googleapis.com">
10  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11  <link rel="preconnect" href="https://cdnjs.cloudflare.com">
12
13  <!-- FOUC-prevention: above-the-fold Tailwind utilities, inlined -->
14  <!-- Paints the hero correctly before cdn.tailwindcss.com (browser JIT) compiles -->
15  <style id="nv-no-fouc">
16    .max-w-7xl{max-width:80rem}
17    .mx-auto{margin-left:auto;margin-right:auto}
18    .w-full{width:100%}
19    .relative{position:relative}
20    .z-10{z-index:10}
21    .mb-6{margin-bottom:1.5rem}
22    .grid{display:grid}
23    .flex{display:flex}
24    .items-center{align-items:center}
25    .justify-center{justify-content:center}
26    .gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}
27    .px-6{padding-left:1.5rem;padding-right:1.5rem}
28    .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
29    @media(min-width:768px){
30      .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
31      .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
32    }
33    @media(min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}
34  </style>
35
36  <title>Navedas Intelligence | Vertical AI for CX & Operations</title>
37  <meta name="description" content="Vertical AI for CX and Operations. Two field engineers embed, build the governance layer, and leave you owning the AI. CSAT.AI live since 2021.">
38  <meta name="keywords" content="Vertical AI, CX AI, back-office AI, margin leakage, customer winback, AI engineering partner, FDE, Co-Build, US Patent 11,748,414, CSAT.AI, AI harness, AI agent harness, runtime harness, vertical AI harness">
39  <meta name="robots" content="index, follow">
40  <link rel="canonical" href="https://navedas.ai/">
41  <meta property="og:title" content="Navedas Intelligence | Vertical AI for CX & Operations">
42  <meta property="og:description" content="Embedded AI engineering for CX and Operations. Two field engineers embed in your operation, build the governance layer, and leave you owning the AI. CSAT.AI runs live since 2021. US Patent 11,748,414.">
43  <meta property="og:url" content="https://navedas.ai/">
44  <meta property="og:type" content="website">
45  <meta property="og:site_name" content="Navedas Intelligence">
46  <meta property="og:image" content="https://navedas.ai/public/og-image.jpg">
47  <meta property="og:image:width" content="1200">
48  <meta property="og:image:height" content="630">
49  <meta property="og:image:alt" content="Navedas Intelligence: Vertical AI for CX and Back-Office Operations.">
50  <meta name="twitter:image" content="https://navedas.ai/public/og-image.jpg">
51  <meta name="twitter:card" content="summary_large_image">
52  <meta name="twitter:title" content="Navedas Intelligence | Vertical AI for CX & Operations">
53  <meta name="twitter:description" content="Embedded AI engineering for CX and Operations. Two field engineers embed in your operation, build the governance layer, and leave you owning the AI. CSAT.AI runs live since 2021.">
54  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
55  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
56  
56<script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
56
57  
57<script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
57
58
59  <!-- ═══════════════════════════════════════════════════════════
60       VARIANT D THEME OVERRIDE — geometric light, Geist, hairlines
61       Scoped to homepage only (index.html). Other pages keep old style.
62  ═══════════════════════════════════════════════════════════ -->
63<style>
64    .orb-1, .orb-2 { display: none !important; }
65    #hero, #trusted, #problem, #solution, #promise, #pillars, #how, #governance-engine, #where-it-works, #dashboard, #faq, #get-started { overflow-x: hidden; }
66
67    /* ── TOKENS (CSAT.AI Design System) ───────────────── */
68    :root {
69      --primary:        #0A0A0A;
70      --primary-medium: #1A1A1A;
71      --primary-light:  #525252;
72      --accent:         #3BAA96;
73      --accent-light:   #5CC8B4;
74      --dark:           #0A0A0A;
75      --bg:             #FAFAFA;
76      --bg-warm:        #FFF8F7;
77      --card-bg:        #FFFFFF;
78      --border:         #E5E5E5;
79      --text-primary:   #0A0A0A;
80      --text-secondary: #525252;
81      --text-muted:     #A3A3A3;
82      --color-red:      #D94452;
83      --color-green:    #1A8A5C;
84      --color-amber:    #D4850A;
85      --radius-lg:      16px;
86      --radius-pill:    100px;
87    }
88
89    /* ── SCROLL OFFSET (fixed navbar compensation) ── */
90    section[id], div[id] { scroll-margin-top: 80px; }
91
92    /* ── NAVBAR ─────────────────────────────────────── */
93    #navbar {
94      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
95      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
96      background: rgba(255,255,255,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
97    }
98    #navbar.scrolled {
99      background: rgba(255, 255, 255, 0.92);
100      backdrop-filter: blur(20px);
101      -webkit-backdrop-filter: blur(20px);
102      border-bottom: 1px solid #E5E5E5;
103      box-shadow: 0 4px 24px rgba(0,0,0, 0.06);
104    }
105    .nav-link {
106      color: var(--text-secondary);
107      font-size: 0.9rem;
108      font-weight: 500;
109      transition: color 0.2s;
110      position: relative;
111    }
112    .nav-link::after {
113      content: '';
114      position: absolute; bottom: -4px; left: 0; right: 0;
115      height: 2px; background: var(--primary);
116      transform: scaleX(0);
117      transition: transform 0.25s ease;
118      border-radius: 2px;
119    }
120    .nav-link:hover { color: var(--primary); }
121    .nav-link:hover::after { transform: scaleX(1); }
122
123    /* ── DROPDOWN ── */
124    .nav-dropdown { position: relative; }
125    .nav-dropdown-menu {
126      display: none;
127      position: absolute; top: 100%; left: 50%;
128      transform: translateX(-50%);
129      background: #FFFFFF;
130      border: 1px solid var(--border);
131      border-radius: var(--radius-lg);
132      box-shadow: 0 16px 48px rgba(0,0,0,0.12);
133      min-width: 260px;
134      white-space: nowrap;
135      padding: 0.5rem;
136      z-index: 999;
137    }
138    .nav-dropdown.open .nav-dropdown-menu,.nav-dropdown:hover .nav-dropdown-menu { display: block; }
139    .nav-dropdown-menu::before { content:''; position:absolute; top:-16px; left:0; right:0; height:16px; }
140    .nav-dropdown-menu a {
141      display: flex; align-items: center; gap: 0.6rem;
142      padding: 0.65rem 1rem;
143      font-size: 0.875rem; font-weight: 500; color: var(--text-secondary);
144      text-decoration: none; border-radius: 10px;
145      transition: all 0.15s;
146    }
147    .nav-dropdown-menu a:hover { background: rgba(0,0,0,0.06); color: var(--primary); }
148    .nav-dropdown-menu a .dd-icon {
149      width: 26px; height: 26px; border-radius: 7px;
150      display: flex; align-items: center; justify-content: center;
151      background: rgba(0,0,0,0.08); flex-shrink: 0;
152    }
153    .nav-dropdown > .nav-link .chevron {
154      display: inline-block; margin-left: 3px;
155      transition: transform 0.2s;
156    }
157    .nav-dropdown.open > .nav-link .chevron { transform: rotate(180deg); }
158
159    .btn-demo {
160      background: var(--primary);
161      color: white;
162      font-size: 0.875rem;
163      font-weight: 600;
164      padding: 0.55rem 1.3rem;
165      border-radius: var(--radius-pill);
166      transition: all 0.25s ease;
167      box-shadow: 0 4px 16px rgba(0,0,0, 0.3);
168    }
169    .btn-demo:hover {
170      background: var(--primary-medium);
171      transform: translateY(-1px);
172      box-shadow: 0 8px 24px rgba(0,0,0, 0.4);
173    }
174
175    /* ── HERO ───────────────────────────────────────── */
176    #hero {
177      display: block !important;
178      position: relative;
179      overflow: hidden;
180      padding: 5rem 0 3rem !important;
181      min-height: 0 !important;
182      background: #FFFFFF;
183    }
184
185    /* Gradient orbs — hero only, controlled intensity */
186    .orb {
187      position: absolute;
188      border-radius: 50%;
189      filter: blur(100px);
190      opacity: 0.22;
191      pointer-events: none;
192    }
193    .orb-1 {
194      width: 500px; height: 500px;
195      background: radial-gradient(circle, rgba(0,0,0, 0.18) 0%, transparent 70%);
196      top: -150px; right: -150px;
197      animation: orbFloat 14s ease-in-out infinite;
198    }
199    .orb-2 {
200      width: 400px; height: 400px;
201      background: radial-gradient(circle, rgba(59, 170, 150, 0.15) 0%, transparent 70%);
202      bottom: -80px; left: -80px;
203      animation: orbFloat 18s ease-in-out infinite reverse;
204    }
205    @media(max-width:768px){ .orb-1,.orb-2,.orb-3{ display:none !important; } }
206    #metrics { width:100vw; margin-left:calc((100% - 100vw)/2); }
207    .orb-3 { display: none; }
208
209    /* Dot grid */
210    .dot-grid {
211      position: absolute; inset: 0;
212      background-image: radial-gradient(circle, rgba(0,0,0, 0.1) 1.5px, transparent 1.5px);
213      background-size: 36px 36px;
214      mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
215      -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
216    }
217
218    @keyframes orbFloat {
219      0%, 100% { transform: translate(0, 0) scale(1); }
220      33%       { transform: translate(30px, -40px) scale(1.04); }
221      66%       { transform: translate(-20px, 20px) scale(0.97); }
222    }
223
224    /* Badge */
225    .hero-badge {
226      display: inline-flex;
227      align-items: center;
228      gap: 0.5rem;
229      background: rgba(0,0,0, 0.07);
230      border: 1px solid rgba(0,0,0, 0.18);
231      color: var(--primary);
232      font-size: 0.75rem;
233      font-weight: 700;
234      letter-spacing: 0.08em;
235      text-transform: uppercase;
236      padding: 0.4rem 1rem;
237      border-radius: var(--radius-pill);
238    }
239    .hero-badge .dot {
240      width: 6px; height: 6px;
241      border-radius: 50%;
242      background: var(--accent);
243      animation: pulse-dot 2s ease-in-out infinite;
244    }
245    @keyframes pulse-dot {
246      0%, 100% { opacity: 1; transform: scale(1); }
247      50%       { opacity: 0.5; transform: scale(1.4); }
248    }
249
250    /* Headline gradient */
251    .gradient-text {
252      color: #0A0A0A;
253      -webkit-text-fill-color: #0A0A0A;
254    }
255
256    /* CTA buttons */
257    .btn-primary {
258      background: var(--primary);
259      color: white;
260      font-weight: 700;
261      font-size: 0.875rem;
262      padding: 0.85rem 1.6rem;
263      border-radius: var(--radius-pill);
264      display: inline-flex;
265      align-items: center;
266      gap: 0.5rem;
267      transition: all 0.2s ease;
268      box-shadow: 0 4px 20px rgba(0,0,0, 0.3);
269      text-decoration: none;
270      -webkit-text-fill-color: white !important;
271      background: #0A0A0A !important;
272    }
273    .btn-primary:hover {
274      background: var(--primary-medium);
275      transform: translateY(-1px);
276      box-shadow: 0 8px 28px rgba(0,0,0, 0.4);
277    }
278    .btn-secondary {
279      background: white;
280      color: var(--primary);
281      font-weight: 700;
282      font-size: 0.875rem;
283      padding: 0.85rem 1.6rem;
284      border-radius: var(--radius-pill);
285      display: inline-flex;
286      align-items: center;
287      gap: 0.5rem;
288      transition: all 0.2s ease;
289      border: 2px solid var(--primary);
290      text-decoration: none;
291    }
292    .btn-secondary:hover {
293      background: var(--primary);
294      color: white;
295      transform: translateY(-1px);
296    }
297
298    /* ── FLOATING CARDS (hero visual) ───────────────── */
299    .hero-visual {
300      position: relative;
301      height: 560px;
302      overflow: visible;
303      margin-top: -2rem;
304    }
305
306    .float-card {
307      position: absolute;
308      background: white;
309      border-radius: 16px;
310      padding: 16px 20px;
311      box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 0 0 1px #E5E5E5;
312      animation: cardFloat 7s ease-in-out infinite;
313    }
314    .float-card:nth-child(2) { animation-delay: -2s; }
315    .float-card:nth-child(3) { animation-delay: -4s; }
316    .float-card:nth-child(4) { animation-delay: -1s; }
317
318    @keyframes cardFloat {
319      0%, 100% { transform: translateY(0px); }
320      50%       { transform: translateY(-12px); }
321    }
322
323    /* Central AI node */
324    .ai-node {
325      position: absolute;
326      top: 50%; left: 50%;
327      transform: translate(-50%, -50%);
328      width: 160px; height: 160px;
329      border-radius: 50%;
330      background: linear-gradient(135deg, var(--primary), var(--primary-medium));
331      display: flex;
332      align-items: center;
333      justify-content: center;
334      box-shadow: 0 8px 32px rgba(0,0,0,0.22);
335      z-index: 5;
336    }
337    @keyframes nodePulse {
338      0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.22); }
339      50%       { box-shadow: 0 12px 40px rgba(0,0,0,0.28); }
340    }
341
342    /* SVG connection lines */
343    .connections-svg {
344      position: absolute; inset: 0;
345      width: 100%; height: 100%;
346      z-index: 2;
347    }
348    .conn-line {
349      stroke: url(#lineGrad);
350      stroke-width: 1.5;
351      fill: none;
352      stroke-dasharray: 6 4;
353      animation: dashMove 3s linear infinite;
354    }
355    @keyframes dashMove {
356      to { stroke-dashoffset: -40; }
357    }
358
359    /* Stat pill */
360    .stat-pill {
361      display: inline-flex;
362      align-items: center;
363      gap: 0.4rem;
364      background: rgba(59, 170, 150, 0.1);
365      border: 1px solid rgba(59, 170, 150, 0.3);
366      color: #3BAA96;
367      font-size: 0.78rem;
368      font-weight: 600;
369      padding: 0.25rem 0.6rem;
370      border-radius: var(--radius-pill);
371    }
372
373    /* ── SCROLL FADE-IN ─────────────────────────────── */
374    .fade-up {
375      opacity: 0;
376      transform: translateY(20px);
377      transition: opacity 0.45s ease-out, transform 0.45s ease-out;
378    }
379    /* Hero is above the fold — show immediately, never fade. */
380    #hero .fade-up,
381    #hero.fade-up,
382    #hero-copy .fade-up,
383    #hero-copy.fade-up { opacity: 1 !important; transform: none !important; }
384    /* Fallback: if observer never fires, ensure content is visible */
385    @media (prefers-reduced-motion: reduce) {
386      .fade-up { opacity: 1 !important; transform: none !important; }
387    }
388    .fade-up.visible {
389      opacity: 1;
390      transform: translateY(0);
391    }
392
393    /* ── MOBILE MENU ───────────────────────────────── */
394    #mobile-menu {
395      display: none;
396      background: white;
397      border-top: 1px solid var(--border);
398      padding: 1rem 1.5rem 1.5rem;
399      box-shadow: 0 8px 32px rgba(0,0,0,0.08);
400    }
401    #mobile-menu.open { display: block; }
402    .mobile-nav-link {
403      display: block;
404      color: #4A4A68;
405      font-size: 1rem;
406      font-weight: 500;
407      padding: 0.75rem 0;
408      border-bottom: 1px solid rgba(0,0,0,0.08);
409      transition: color 0.2s;
410    }
411    .mobile-nav-link:hover { color: var(--primary); }
412
413    /* ═══════════════════════════════════════════════════
414       STEP 6 — HOW IT WORKS
415    ═══════════════════════════════════════════════════ */
416    #how-it-works { padding: 7rem 0; background: var(--bg); position: relative; overflow: hidden; }
417
418    .step-connector {
419      flex: 1;
420      height: 2px;
421      background: linear-gradient(90deg, #0A0A0A, #3BAA96);
422      position: relative;
423      margin: 0 0.5rem;
424      align-self: flex-start;
425      margin-top: 32px;
426    }
427    .step-connector::after {
428      content: '';
429      position: absolute;
430      right: -6px; top: -5px;
431      width: 0; height: 0;
432      border-left: 8px solid #3BAA96;
433      border-top: 5px solid transparent;
434      border-bottom: 5px solid transparent;
435    }
436    .hiw-step {
437      display: flex;
438      flex-direction: column;
439      align-items: center;
440      text-align: center;
441      flex: 1;
442      min-width: 0;
443    }
444    .hiw-icon-ring {
445      width: 64px; height: 64px;
446      border-radius: 50%;
447      display: flex; align-items: center; justify-content: center;
448      margin-bottom: 1.25rem;
449      position: relative;
450      flex-shrink: 0;
451    }
452    .hiw-icon-ring::before {
453      content: '';
454      position: absolute; inset: -6px;
455      border-radius: 50%;
456      border: 1px solid rgba(0,0,0,0.12);
457    }
458
459    .hiw-card {
460      background: white;
461      border-radius: var(--radius-lg);
462      padding: 1.75rem;
463      border: 1px solid var(--border);
464      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
465      transition: all 0.3s ease;
466      width: 100%;
467    }
468    .hiw-card:hover {
469      transform: translateY(-3px);
470      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
471    }
472
473    .hiw-step-new { display:flex;flex-direction:column;align-items:center;text-align:center; }
474    .hiw-badge { width:64px;
474height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 12px rgba(0,0,0,0.12); }
475    .hiw-step-new .hiw-card { text-align:left; }
476    .hiw-step-new.fade-up.visible .hiw-badge { animation:badgePop 0.5s cubic-bezier(.34,1.56,.64,1) both; }
477    @keyframes badgePop { from{transform:scale(0.6);opacity:0} to{transform:scale(1);opacity:1} }
478
479    /* ═══════════════════════════════════════════════════
480       STEP 7 — METRICS / IMPACT
481    ═══════════════════════════════════════════════════ */
482    #metrics {
483      padding: 7rem 0;
484      background: #FAFAFA;
485    }
486    .metric-card {
487      background: white;
488      border-radius: var(--radius-lg);
489      padding: 2.25rem 2rem;
490      border: 1px solid var(--border);
491      box-shadow: 0 2px 12px rgba(0,0,0,0.05);
492      text-align: center;
493      transition: all 0.3s ease;
494      position: relative;
495      overflow: hidden;
496    }
497    .metric-card:hover {
498      transform: translateY(-2px);
499      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
500    }
501
502    .metric-num {
503      font-size: clamp(2.8rem, 5vw, 4rem);
504      font-weight: 900;
505      line-height: 1;
506      letter-spacing: -0.04em;
507      margin-bottom: 0.4rem;
508    }
509
510    /* ═══════════════════════════════════════════════════
511       FINAL CTA + FOOTER
512    ═══════════════════════════════════════════════════ */
513    #final-cta {
514      padding: 8rem 0;
515      background: linear-gradient(150deg, #0A0A0A 0%, #0A0A0A 50%, #0A0A0A 100%);
516      position: relative;
517      overflow: hidden;
518    }
519    .cta-glow {
520      position: absolute;
521      border-radius: 50%;
522      filter: blur(100px);
523      pointer-events: none;
524    }
525
526    #footer {
527      background: #0A0A0A;
528      border-top: 1px solid rgba(255,255,255,0.06);
529      padding: 4rem 0 2rem;
530    }
531    .footer-link {
532      color: rgba(255,255,255,0.8);
533      font-size: 0.85rem;
534      text-decoration: none;
535      transition: color 0.2s;
536      display: block;
537      margin-bottom: 0.6rem;
538    }
539    .footer-link:hover { color: #fff; }
540    .footer-col-title {
541      font-size: 0.72rem;
542      font-weight: 700;
543      letter-spacing: 0.1em;
544      text-transform: uppercase;
545      color: rgba(255,255,255,0.9);
546      margin-bottom: 1rem;
547    }
548
549    /* ═══════════════════════════════════════════════════
550       STEP 4 — AI THAT AUDITS AI
551    ═══════════════════════════════════════════════════ */
552    #audit {
553      padding: 8rem 0;
554      background: linear-gradient(160deg, #0A0A0A 0%, #0A0A0A 60%, #0A0A0A 100%);
555      position: relative;
556      overflow: hidden;
557    }
558
559    /* star field */
560    .star-field {
561      position: absolute; inset: 0;
562      background-image:
563        radial-gradient(1.5px 1.5px at 10% 20%, rgba(162,155,254,0.5) 0%, transparent 100%),
564        radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.3) 0%, transparent 100%),
565        radial-gradient(1px 1px at 55% 15%, rgba(255,255,255,0.4) 0%, transparent 100%),
566        radial-gradient(1.5px 1.5px at 75% 45%, rgba(59,170,150,0.4) 0%, transparent 100%),
567        radial-gradient(1px 1px at 90% 75%, rgba(255,255,255,0.3) 0%, transparent 100%),
568        radial-gradient(1px 1px at 20% 85%, rgba(162,155,254,0.4) 0%, transparent 100%),
569        radial-gradient(1.5px 1.5px at 65% 90%, rgba(255,255,255,0.25) 0%, transparent 100%);
570      pointer-events: none;
571    }
572
573    /* audit flow container */
574    .audit-flow {
575      display: flex;
576      align-items: center;
577      justify-content: center;
578      gap: 0;
579      position: relative;
580    }
581
582    /* node boxes */
583    .audit-node {
584      background: rgba(255,255,255,0.05);
585      border: 1px solid rgba(255,255,255,0.1);
586      border-radius: 16px;
587      padding: 1rem 1.1rem;
588      text-align: center;
589      backdrop-filter: blur(10px);
590      position: relative;
591      transition: all 0.3s ease;
592      min-width: 120px;
593      flex-shrink: 0;
594    }
595    .audit-node:hover {
596      background: rgba(255,255,255,0.09);
597      border-color: rgba(162,155,254,0.4);
598      transform: translateY(-4px);
599    }
600    .audit-node.primary-ai {
601      background: rgba(0,0,0,0.15);
602      border-color: rgba(0,0,0,0.4);
603    }
604    .audit-node.navedas-node {
605      background: linear-gradient(135deg, rgba(0,0,0,0.25), rgba(59,170,150,0.15)
605);
606      border-color: rgba(0,0,0,0.6);
607      box-shadow: 0 0 40px rgba(0,0,0,0.25), 0 0 80px rgba(0,0,0,0.1);
608      min-width: 150px;
609      padding: 1rem 1.25rem;
610    }
611    .audit-node.override-node {
612      background: rgba(59,170,150,0.1);
613      border-color: rgba(59,170,150,0.4);
614    }
615
616    /* connector arrows */
617    .audit-arrow {
618      display: flex;
619      flex-direction: column;
620      align-items: center;
621      flex-shrink: 0;
622      gap: 4px;
623      padding: 0 0.4rem;
624      min-width: 52px;
625    }
626    .arrow-line {
627      height: 2px;
628      width: 100%;
629      background: linear-gradient(90deg, rgba(0,0,0,0.4), rgba(59,170,150,0.4));
630      position: relative;
631    }
632    .arrow-line::after {
633      content: '›';
634      position: absolute;
635      right: -8px;
636      top: -11px;
637      color: rgba(162,155,254,0.8);
638      font-size: 1.2rem;
639    }
640    .arrow-label {
641      font-size: 0.65rem;
642      font-weight: 600;
643      color: rgba(255,255,255,0.35);
644      text-align: center;
645      letter-spacing: 0.05em;
646    }
647
648    /* floating badges on diagram */
649    .audit-badge {
650      position: absolute;
651      background: rgba(255,255,255,0.07);
652      border: 1px solid rgba(255,255,255,0.12);
653      border-radius: 10px;
654      padding: 0.5rem 0.8rem;
655      font-size: 0.7rem;
656      color: rgba(255,255,255,0.7);
657      backdrop-filter: blur(8px);
658      white-space: nowrap;
659      animation: badgeFloat 5s ease-in-out infinite;
660    }
661    @keyframes badgeFloat {
662      0%,100% { transform: translateY(0); }
663      50% { transform: translateY(-8px); }
664    }
665
666    /* glow ring on navedas node */
667    .navedas-ring {
668      position: absolute;
669      inset: -12px;
670      border-radius: 28px;
671      border: 1px solid rgba(0,0,0,0.2);
672      animation: ringPulse 3s ease-in-out infinite;
673      pointer-events: none;
674    }
675    .navedas-ring-2 {
676      position: absolute;
677      inset: -24px;
678      border-radius: 36px;
679      border: 1px solid rgba(0,0,0,0.1);
680      animation: ringPulse 3s ease-in-out infinite 0.8s;
681      pointer-events: none;
682    }
683    @keyframes ringPulse {
684      0%,100% { opacity: 0.6; transform: scale(1); }
685      50% { opacity: 1; transform: scale(1.02); }
686    }
687
688    /* stats strip */
689    .audit-stat {
690      text-align: center;
691      padding: 1.5rem 2rem;
692      border-right: 1px solid rgba(255,255,255,0.08);
693    }
694    .audit-stat:last-child { border-right: none; }
695
696    /* ═══════════════════════════════════════════════════
697       STEP 5 — FEATURES GRID
698    ═══════════════════════════════════════════════════ */
699    #features {
700      padding: 7rem 0;
701      background: var(--bg);
702    }
703
704    .feat-card {
705      background: white;
706      border-radius: var(--radius-lg);
707      padding: 2rem;
708      border: 1px solid var(--border);
709      box-shadow: 0 2px 12px rgba(0,0,0,0.05);
710      transition: all 0.3s ease;
711      position: relative;
712      overflow: hidden;
713    }
714    .feat-card:hover {
715      transform: translateY(-3px);
716      box-shadow: 0 4px 16px rgba(0,0,0,0.09);
717      border-color: rgba(0,0,0,0.15);
718    }
719    .feat-card-icon {
720      width: 48px; height: 48px;
721      border-radius: 12px;
722      display: flex; align-items: center; justify-content: center;
723      margin-bottom: 1.25rem;
724      flex-shrink: 0;
725    }
726    .feat-card-glow {
727      position: absolute;
728      width: 140px; height: 140px;
729      border-radius: 50%;
730      top: -40px; right: -40px;
731      opacity: 0.05;
732      filter: blur(30px);
733      pointer-events: none;
734    }
735
736    /* Featured (large) card */
737    .feat-card-large {
738      background: linear-gradient(160deg, #0A0A0A 0%, #0A0A0A 100%);
739      border: 1px solid rgba(0,0,0,0.35);
740      box-shadow: 0 8px 40px rgba(0,0,0,0.2);
741    }
742    .feat-card-large:hover {
743      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
744      transform: translateY(-4px);
745    }
746
747    /* ═══════════════════════════════════════════════════
748       STEP 2 — TRUSTED BY
749    ═══════════════════════════════════════════════════ */
750    #trusted { padding: 4rem 0 5rem; background: #FAFAFA; }
751
752    .logo-track {
753      display: flex;
754      gap: 0;
755      align-items: center;
756      animation: logoScroll 28s linear infinite;
757      width: max-content;
758    }
759    .logo-track:hover { animation-play-state: paused; }
760    .logo-wrap { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); }
761
762    @keyframes logoScroll {
763      0%   { transform: translateX(0); }
764      100% { transform: translateX(-50%); }
765    }
766
767    .logo-item {
768      display: flex;
769      align-items: center;
770      justify-content: center;
771      flex-shrink: 0;
772      padding: 0 2.5rem;
773      transition: all 0.3s;
774    }
775    .logo-item img {
776      height: 40px;
777      width: auto;
778      max-width: 180px;
779      object-fit: contain;
780      display: block;
781      opacity: 0.75;
782      /* Backgrounds were stripped from the source SVGs; this grayscale
783         just tones down multi-brand color noise so the strip reads as
784         one row, not six competing palettes. */
785      filter: grayscale(0.65) contrast(1.02);
786      transition: opacity 0.3s, filter 0.3s;
787    }
788    .logo-item:hover img { opacity: 1; filter: grayscale(0) contrast(1); }
789    /* Logos with portrait/square viewBoxes (built-in padding) need taller
790       height to render the wordmark at a readable size in the row.
791       (pyypl source PNG is intrinsically low-contrast; size is the only
792       lever we have until a higher-quality source file lands.) */
793    .logo-item img[src*="landit"],
794    .logo-item img[src*="pyypl"] { height: 60px; }
795    /* Wordmark logo entry — used when no brand SVG is available.
796       Sized + toned to sit alongside the SVG logos in the same row. */
797    .logo-wordmark {
798      font-family: 'Geist', 'Inter', system-ui, sans-serif;
799      font-size: 1.4rem;
800      font-weight: 800;
801      letter-spacing: -0.02em;
802      color: #1A1714;
803      opacity: 0.55;
804      line-height: 1;
805      transition: opacity 0.3s;
806    }
807    .logo-item:hover .logo-wordmark { opacity: 0.85; }
808
809    /* Problem section */
810    #problem { padding: 6rem 0; background: var(--bg); }
811
812    .problem-card {
813      background: white;
814      border-radius: 16px;
815      padding: 2rem;
816      border: 1px solid #EDE9F8 !important;
817      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
818      transition: all 0.3s ease;
819      position: relative;
820      overflow: hidden;
821    }
822    .problem-card:hover {
823      transform: translateY(-3px);
824      border-color: rgba(0,0,0,0.15);
825      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
826    }
827
828    .problem-icon {
829      width: 48px; height: 48px;
830      border-radius: 12px;
831      display: flex; align-items: center; justify-content: center;
832      margin-bottom: 1.2rem;
833      background: rgba(217,68,82,0.15);
834      border: 1px solid rgba(217,68,82,0.25);
835    }
836
837    /* ═══════════════════════════════════════════════════
838       STEP 3 — SOLUTION
839    ═══════════════════════════════════════════════════ */
840    #solution {
841      padding: 7rem 0;
842      background: #FFFFFF;
843      position: relative;
844    }
845
846    .solution-pill {
847      display: inline-block;
848      background: rgba(0,0,0,0.08);
849      color: var(--primary);
850      font-size: 0.72rem;
851      font-weight: 700;
852      letter-spacing: 0.1em;
853      text-transform: uppercase;
854      padding: 6px 14px;
855      border-radius: var(--radius-pill);
856    }
857
858    .solution-block {
859      background: white;
860      border-radius: var(--radius-lg);
861      padding: 2.5rem;
862      border: 1px solid var(--border);
863      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
864      position: relative;
865      transition: all 0.3s ease;
866      overflow: hidden;
867    }
868    .solution-block:hover {
869      transform: translateY(-3px);
870      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
871      border-color: rgba(0,0,0,0.3);
872    }
873    .solution-block .card-arrow {
874      display:inline-flex;align-items:center;gap:6px;
875      font-size:0.78rem;font-weight:700;color:#0A0A0A;
876      margin-top:1rem;transition:gap 0.2s;
877    }
878    .solution-block:hover .card-arrow { gap:10px; }
879    .solution-block::after {
880      content: '';
881      position: absolute;
882      bottom: 0; left: 0; right: 0;
883      height: 3px;
884      opacity: 0;
885      transition: opacity 0.3s;
886    }
887    .solution-block:hover::after { opacity: 1; }
888    .sol-1::after { background: linear-gradient(90deg,#0A0A0A,#525252); }
889    .sol-2::after { background: linear-gradient(90deg,#3BAA96,#5CC8B4); }
890    .sol-3::after { background: linear-gradient(90deg,#1A1A1A,#3BAA96); }
891    .sol-4::after { background: linear-gradient(90deg,#525252,#3BAA96); }
892
893    .step-num {
894      font-size: 4rem;
895      font-weight: 900;
896      line-height: 1;
897      background: linear-gradient(135deg, rgba(0,0,0,0.1), rgba(0,0,0,0.03));
898      -webkit-background-clip: text;
899      -webkit-text-fill-color: transparent;
900      background-clip: text;
901      position: absolute;
902      top: 1.5rem; right: 2rem;
903    }
904
905    .sol-icon-wrap {
906      width: 56px; height: 56px;
907      border-radius: 14px;
908      display: flex; align-items: center; justify-content: center;
909      margin-bottom: 1.5rem;
910    }
911    .sol-1 .sol-icon-wrap { background: rgba(0,0,0,0.08); }
912    .sol-2 .sol-icon-wrap { background: rgba(59,170,150,0.1); }
913    .sol-3 .sol-icon-wrap { background: rgba(107,63,160,0.08); }
914    .sol-4 .sol-icon-wrap { background: rgba(0,0,0,0.08); }
915
916    /* Mini sparkline */
917    .sparkline { display: flex; align-items: end; gap: 3px; height: 28px; margin-top: 1.25rem; }
918    .spark-bar {
919      flex: 1; border-radius: 3px 3px 0 0;
920      transition: height 0.5s ease;
921    }
922
923    /* Global card standard */
924    .card {
925      background: #FFFFFF;
926      border: 1px solid var(--border);
927      border-radius: var(--radius-lg);
928      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
929      transition: box-shadow 0.25s ease, transform 0.25s ease;
930    }
931    .card:hover {
932      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
933      transform: translateY(-2px);
934    }
935
936    /* Feature tag */
937    .feat-tag {
938      display: inline-flex;
939      align-items: center;
940      gap: 0.3rem;
941      background: rgba(0,0,0,0.07);
942      color: #0A0A0A;
943      font-size: 0.72rem;
944      font-weight: 600;
945      padding: 0.2rem 0.6rem;
946      border-radius: 6px;
947    }
948    .feat-tag.green { background: rgba(59,170,150,0.1); color: #3BAA96; }
949    .feat-tag.peach { background: rgba(0,0,0,0.08); color: #1A1A1A; }
950    .feat-tag.blue  { background: rgba(59,170,150,0.08); color: #3BAA96; }
951
952  /* ═══════════════════════════════════════════
953     GLOBAL PREMIUM UPGRADE SYSTEM
954  ═══════════════════════════════════════════ */
955
956  /* Section gradient surfaces */
957  #problem  { background: linear-gradient(160deg,#F5F1E8 0%,#F4F0F8 100%) !important; }
958  #solution { background: linear-gradient(180deg,#FFFFFF 0%,#F5F1E8 100%) !important; }
959  #how      { background: linear-gradient(160deg,#F5F1E8 0%,#F4F0F8 100%) !important; }
960  #governance-engine { background: linear-gradient(180deg,#F5F1E8 0%,#FFFFFF 100%) !important; }
961  #compare  { background: linear-gradient(160deg,#FFFFFF 0%,#F5F1E8 100%) !important; }
962  #metrics  { background: linear-gradient(180deg,#F4F0F8 0%,#F5F1E8 100%) !important; }
963  #faq      { background: linear-gradient(160deg,#F5F1E8 0%,#FFFFFF 100%) !important; }
964
965  /* Card universal upgrade */
966  .card, .hiw-card, .pain-box, .compare-card, details.hiw-card {
967    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
968  }
969  .card:hover {
970    transform: translateY(-4px) scale(1.012) !important;
971    box-shadow: 0 12px 36px rgba(0,0,0,0.11) !important;
972    border-color: rgba(0,0,0,0.18) !important;
973  }
974
975  /* Button micro-interaction */
976  .btn-primary:hover { transform: translateY(-2px) scale(1.03) !important; }
977  .btn-secondary:hover { transform: translateY(-2px) !important; }
978
979  /* Typography refinement */
980  h1,h2,h3 { letter-spacing:-0.03em; line-height:1.1; }
981  p { line-height:1.75; }
982  section { padding-top:7rem !important; padding-bottom:7rem !important; }
983
984  /* Marquee system */
985  .marquee-track { overflow:hidden; width:100%; }
986  .marquee-inner {
987    display:flex; gap:1.5rem; width:max-content;
988    animation: marquee-left 32s linear infinite;
989  }
990  .marquee-inner.right { animation: marquee-right 36s linear infinite; }
991  .marquee-inner:hover { animation-play-state:paused; }
992  @keyframes marquee-left  { from{transform:translateX(0)} to{transform:translateX(-50%)} }
993  @keyframes marquee-right { from{transform:translateX(-50%)} to{transform:translateX(0)} }
994  .marquee-pill {
995    display:inline-flex; align-items:center; gap:0.55rem; white-space:nowrap;
996    background:#FFFFFF; border:1px solid #E5E5E5; border-radius:100px;
997    padding:0.55rem 1.1rem; font-size:0.82rem; font-weight:600; color:#0A0A0A;
998    box-shadow:0 2px 8px rgba(0,0,0,0.06);
999    transition:transform 0.2s ease, box-shadow 0.2s ease;
1000  }
1001  .marquee-pill:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.1); }
1002  .marquee-pill .dot { width:7px;height:7px;border-radius:50%;flex-shrink:0; }
1003
1004  /* Scroll stagger system */
1005  .stagger-child {
1006    opacity:0; transform:translateY(22px);
1007    transition:opacity 0.55s ease-out, transform 0.55s ease-out;
1008    /* Fallback: visible if JS/observer fails */
1009  }
1010  .stagger-child.sv { opacity:1; transform:translateY(0); }
1011
1012  /* Gradient accent cards */
1013  .accent-card-purple { background:linear-gradient(135deg,rgba(0,0,0,0.05),rgba(0,0,0,0.02)); }
1014  .accent-card-teal   { background:linear-gradient(135deg,rgba(59,170,150,0.06),rgba(59,170,150,0.02)); }
1015  #metrics { background:#0A0A0A !important; }
1016  #metrics .card div:first-child { color:#fff !important; }
1017  #metrics .card { background:rgba(255,255,255,0.07) !important; border-color:rgba(255,255,255,0.12) !important; }
1018  #metrics .solution-pill { background:rgba(0,0,0,0.35) !important; color:#A3A3A3 !important; }
1019  #metrics h2 { color:#fff !important; }
1020  #metrics p { color:rgba(255,255,255,0.55) !important; }
1021
1022  /* Floating animation for nodes */
1023  @keyframes float-slow { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
1024  .float-slow { animation:float-slow 4s ease-in-out infinite; }
1025
1026  /* Circular progress rings */
1027  .ring-svg circle.ring-track { fill:none; stroke:#E5E5E5; }
1028  .ring-svg circle.ring-fill  { fill:none; stroke-linecap:round; transition:stroke-dashoffset 1.4s ease-out; }
1029
1030  /* Section dividers */
1031  .section-divider {
1032    height:1px; background:linear-gradient(90deg,transparent,rgba(0,0,0,0.12),transparent);
1033    margin:0 auto; max-width:600px;
1034  }
1035  </style>
1036  
1036<script type="application/ld+json">
1037  {
1038    "@context": "https://schema.org",
1039    "@graph": [
1040      {
1041        "@type": "Organization",
1042        "name": "Navedas Intelligence",
1043        "url": "https://navedas.ai",
1044        "logo": "https://navedas.ai/public/navedas-badge-512.png",
1045        "description": "Vertical AI for CX and Back-Office Operations platform for enterprise CX, operations, and compliance teams.",
1046        "sameAs": [
1047          "https://www.linkedin.com/company/navedas",
1048          "https://patents.google.com/patent/US11748414B2/"
1049        ]
1050      },
1051      {
1052        "@type": "SoftwareApplication",
1053        "name": "Navedas Decision Engine",
1054        "applicationCategory": "BusinessApplication",
1055        "offers": {
1056          "@type": "AggregateOffer",
1057          "lowPrice": "500",
1058          "highPrice": "250000",
1059          "priceCurrency": "USD",
1060          "description": "Three-tier path: $500 Audit, $10K–$20K/mo Pilot, $80K–$250K/yr Platform."
1061        },
1062        "description": "Embedded AI for CX and Back-Office Operations. Every refund, approval, and escalation governed, traced, and proven before it commits."
1063      }
1064    ]
1065  }
1066  </script>
1066
1067<style>
1068
1069#metrics .metric-card:hover{transform:translateY(-6px)!important;box-shadow:0 16px 44px rgba(0,0,0,.12)!important;}
1070.pain-box:hover{transform:translateY(-4px)!important;}
1071#testimonials .card:hover{transform:translateY(-5px)!important;box-shadow:0 16px 40px rgba(0,0,0,.12)!important;}
1072
1073</style>
1074<style>
1075
1076/* Hero h1 gradient — every page */
1077.hero h1,.hero-title{background:linear-gradient(135deg,#0A0A0A 0%,#0A0A0A 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
1078/* Section title weight contrast */
1079.section-title{letter-spacing:-0.03em!important;line-height:1.15!important;}
1080/* Chip radius variation — breaks perfect symmetry */
1081.chip:nth-child(1){border-radius:6px!important;}
1082.chip:nth-child(2){border-radius:10px!important;}
1083.chip:nth-child(3){border-radius:8px!important;}
1084.chip:nth-child(4){border-radius:12px!important;}
1085/* Card radius micro-imperfection per nth */
1086.card:nth-child(1){border-radius:10px!important;}
1087.card:nth-child(2){border-radius:14px!important;}
1088.card:nth-child(3){border-radius:12px!important;}
1089/* Section spacing asymmetry */
1090.section:nth-of-type(1){padding-top:88px!important;padding-bottom:56px!important;}
1091.section:nth-of-type(2){padding-top:52px!important;padding-bottom:80px!important;}
1092.section:nth-of-type(3){padding-top:64px!important;padding-bottom:60px!important;}
1093/* Metric card radius variation */
1094.metric-card:nth-child(1){border-radius:10px!important;}
1095.metric-card:nth-child(2){border-radius:14px!important;}
1096.metric-card:nth-child(3){border-radius:12px!important;}
1097.metric-card:nth-child(4){border-radius:16px!important;}
1098/* CTA glow */
1099.cta-section,.cta-inner{box-shadow:0 32px 80px rgba(0,0,0,.25);}
1100/* Section subtitle contrast */
1101.section-subtitle{font-size:0.95rem!important;line-height:1.8!important;}
1102
1103#metrics{background:#F2F0FB;margin-left:-48px;margin-right:-48px;padding:64px 48px;border-top:1px solid #E4E0F5;border-bottom:1px solid #E4E0F5;}
1104#how{background:linear-gradient(180deg,#fff 0%,#FAFAFA 100%);padding-top:80px!important;}
1105
1106</style>
1107
1108<style>.btn-purple{background:#0A0A0A!important;background-color:#0A0A0A!important;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-background-clip:padding-box!important;background-clip:padding-box!important;opacity:1!important;}</style>
1109  <link rel="preconnect" href="https://fonts.googleapis.com">
1110  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1111  <link rel="stylesheet" href="/public/navedas-core.css">
1112<script src="/public/seo.js" defer></script>
vendor: 1 bytes, line 1112
1112
1113<script type="application/ld+json">
1114{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[
1115{"@type":"Question","name":"Why can't we just use the guardrails built into our chatbot or AI platform?","acceptedAnswer":{"@type":"Answer","text":"Guardrails are probabilistic and cover only the bot. Navedas is one deterministic engine for every decision-maker, citing policy nodes, not confidence scores."}},
1116{"@type":"Question","name":"We already have QA processes. Why do we need real-time policy enforcement?","acceptedAnswer":{"@type":"Answer","text":"QA catches problems weeks later, after the money's gone. Navedas intercepts before the decision commits."}},
1117{"@type":"Question","name":"How is this different from a rules engine or workflow automation?","acceptedAnswer":{"@type":"Answer","text":"Rules engines match keywords. Navedas reasons over LTV, claim history, fraud signals, and precedent, against your atomized SOP, not \"refund > $500.\""}},
1118{"@type":"Question","name":"What does \"No Citation, No Output\" actually mean?","acceptedA
1118nswer":{"@type":"Answer","text":"Every verdict must cite a policy node: RETURN-001 §3.2, DISCOUNT-002 §2.1. No citation, no action. The architectural guarantee against hallucination."}},
1119{"@type":"Question","name":"How long does deployment take?","acceptedAnswer":{"@type":"Answer","text":"SOP atomization in 48 hours. Precedents in 2–3 days. Live in a week. No infrastructure changes."}}
1120]}
1121</script>
1121
1122<link rel="icon" href="/favicon.ico" sizes="32x32"><link rel="icon" type="image/svg+xml" href="/public/navedas-badge.svg">
1123<link rel="apple-touch-icon" href="/public/apple-touch-icon.png">
1124<meta name="theme-color" content="#0A0A0A">
1125  <link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,[email protected],400;500;600;700&display=swap" rel="stylesheet">
1126  <link rel="stylesheet" href="/public/variant-d-theme.css">
1127</head>
1128<body style="margin:0;overflow-x:hidden;max-width:100vw;position:relative;">
1129<a class="skip-link" href="#main" onclick="var m=document.querySelector('main,section,article,[role=main]');if(m){m.setAttribute('tabindex','-1');m.focus();m.scrollIntoView({behavior:'smooth',block:'start'});event.preventDefault();}">Skip to content</a>
1130
1131
1132<div id="nv-nav-root" style="min-height:57px;"></div>
1133<script src="/public/nav.js" defer></script>
1133
1134
1135
1136<!-- ═══════════════════════════════════════════════════════
1137     HERO
1138════════════════════════════════════════════════════════ -->
1139<section id="hero" style="overflow:hidden;position:relative;">
1140  <!-- Background effects -->
1141  <div class="dot-grid"></div>
1142  <div class="orb orb-1"></div>
1143  <div class="orb orb-2"></div>
1144  <div class="orb orb-3"></div>
1145
1146  <!-- Document title block (H9 first-pass: audit-report idiom) -->
1147  <style>
1148    @media(max-width:900px){ #hero-titleblock{ display:none !important; } }
1149  </style>
1150  <div id="hero-titleblock" style="position:absolute;top:18px;right:24px;z-index:6;font-family:'Geist Mono',ui-monospace,monospace;font-size:0.58rem;font-weight:500;color:#7A7268;letter-spacing:0.1em;text-transform:uppercase;text-align:right;line-height:1.7;border-right:1.5px solid rgba(122,114,104,0.35);padding-right:10px;pointer-events:none;">
1151    <div>Report Ref · NV-2026-002</div>
1152    <div>Period · Q2 2026</div>
1153    <div>Prepared by Navedas Intelligence</div>
1154  </div>
1155
1156  <div class="max-w-7xl mx-auto px-6 lg:px-8 w-full relative z-10">
1157    <div class="grid items-center hero-grid" style="grid-template-columns:1fr 1fr;gap:3rem;">
1158
1159      <!-- LEFT: Copy -->
1160      <div id="hero-copy" style="min-width:0;font-family:'Geist',-apple-system,system-ui,sans-serif;">
1161
1162        <!-- Variant D inline styles -->
1163        <style>
1164          #hero-copy *,#hero-copy *::before,#hero-copy *::after{font-family:'Geist',-apple-system,system-ui,sans-serif;}
1165          #hero-copy .vd-mono{font-family:'Geist Mono',ui-monospace,SFMono-Regular,monospace;}
1166          #hero-copy .vd-eyebrow{font-family:'Geist Mono',ui-monospace,monospace;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:#A3A3A3;display:inline-flex;align-items:center;gap:10px;margin-bottom:2.25rem;font-weight:500;background:transparent;border:none;padding:0;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
1167          #hero-copy .vd-eyebrow::before{content:"";width:6px;height:6px;background:#0A0A0A;border-radius:50%;}
1168          #hero-copy .vd-h1{font-size:clamp(2.4rem,5vw,4.2rem);font-weight:600;line-height:1.0;letter-spacing:-0.04em;color:#0A0A0A;margin:0 0 1.5rem;}
1169          #hero-copy .vd-h1 .accent{color:#525252;}
1170          #hero-copy .vd-sub{font-size:1.04rem;color:#525252;line-height:1.55;max-width:500px;margin:0 0 2rem;font-weight:400;}
1171          #hero-copy .vd-sub a{color:#0A0A0A;text-decoration:none;border-bottom:1px solid #D4D4D4;padding-bottom:1px;transition:border-color 0.15s;}
1172          #hero-copy .vd-sub a:hover{border-bottom-color:#0A0A0A;}
1173          #hero-copy .vd-triple{display:grid;gap:0;margin:0 0 2rem;max-width:500px;}
1174          #hero-copy .vd-triple a{padding:14px 0;border-top:1px solid #E5E5E5;display:flex;align-items:baseline;gap:16px;text-decoration:none;color:#0A0A0A;transition:padding-left 0.2s,color 0.15s;}
1175          #hero-copy .vd-triple a:hover{padding-left:8px;color:#0A0A0A;}
1176          #hero-copy .vd-triple a:hover .vd-num{color:#0A0A0A;}
1177          #hero-copy .vd-triple a:last-child{border-bottom:1px solid #E5E5E5;}
1178          #hero-copy .vd-num{font-family:'Source Serif 4','Source Serif Pro','Tiempos Headline',Georgia,serif;font-size:1.05rem;font-weight:500;color:#604289;letter-spacing:-0.005em;min-width:26px;transition:color 0.15s;}
1179          #hero-copy .vd-line{font-size:1.06rem;font-weight:500;letter-spacing:-0.015em;flex:1;}
1180          #hero-copy .vd-triple a:last-child .vd-line{font-weight:600;}
1181          #hero-copy .vd-triple .vd-icon{margin-left:auto;color:#A3A3A3;flex-shrink:0;transition:color 0.15s,transform 0.2s;}
1182          #hero-copy .vd-triple a:hover .vd-icon{color:#0A0A0A;transform:translateX(2px);}
1183          #hero-copy .vd-cta-row{display:flex;gap:10px;align-items:center;margin:0 0 2.5rem;flex-wrap:wrap;}
1184          #hero-copy .vd-cta-primary{background:#0A0A0A;color:white;padding:11px 18px;font-size:0.86rem;text-decoration:none;border-radius:6px;font-weight:500;display:inline-flex;align-items:center;gap:10px;transition:background 0.15s;}
1185          #hero-copy .vd-cta-primary:hover{background:#262626;}
1186          #hero-copy .vd-cta-primary .vd-price{font-family:'Geist Mono',monospace;opacity:0.6;font-size:0.78rem;}
1187          #hero-copy .vd-cta-secondary{color:#0A0A0A;padding:11px 18px;font-size:0.86rem;text-decoration:none;border:1px solid #D4D4D4;border-radius:6px;font-weight:500;transition:border-color 0.15s;}
1188          #hero-copy .vd-cta-secondary:hover{border-color:#0A0A0A;}
1189          /* Proof strip scoped beyond #hero-copy so it works as full-width band */
1190          .vd-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid #E5E5E5;padding-top:1.5rem;width:100%;max-width:none;}
1191          .vd-proof-cell{padding:0 24px;border-right:1px solid #E5E5E5;min-width:0;font-family:'Geist',sans-serif;}
1192          .vd-proof-cell:first-child{padding-left:0;}
1193          .vd-proof-cell:last-child{border-right:0;padding-right:0;}
1194          .vd-proof-label{font-family:'Geist Mono',monospace;font-size:0.62rem;color:#A3A3A3;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:8px;white-space:nowrap;}
1195          .vd-proof-val{font-size:1.7rem;font-weight:500;color:#0A0A0A;letter-spacing:-0.02em;line-height:1.05;margin-bottom:5px;white-space:nowrap;font-family:'Source Serif 4','Source Serif Pro','Tiempos Headline',Georgia,serif;}
1196          .vd-proof-sub{font-size:0.78rem;color:#525252;line-height:1.4;font-family:'Geist',sans-serif;}
1197          #hero-copy .vd-patent{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid #E5E5E5;max-width:580px;}
1198          #hero-copy .vd-patent a{font-family:'Geist Mono',monospace;font-size:0.72rem;color:#525252;text-decoration:none;letter-spacing:0.04em;display:inline-flex;align-items:center;gap:8px;transition:color 0.15s;}
1199          #hero-copy .vd-patent a:hover{color:#0A0A0A;}
1200          @media(max-width:768px){.vd-proof{grid-template-columns:1fr 1fr;}.vd-proof-cell{padding:12px 0;border-right:0;border-bottom:1px solid #E5E5E5;}#hero-copy .vd-eyebrow{white-space:normal;overflow:visible;text-overflow:clip;}#hero-copy .vd-eyebrow::before{flex-shrink:0;}}
1201        </style>
1202
1203        <!-- Eyebrow (mono caps) -->
1204        <div class="vd-eyebrow fade-up" id="hero-badge" style="transition-delay:0s;">Embedded AI Engineering · CX &amp; Operations</div>
1205
1206        <!-- H1 (Geist Sans, grayscale on second clause) -->
1207        <h1 id="hero-h1" class="vd-h1 fade-up" style="transition-delay:0.1s;">
1208          <span class="h1-line">We build your Ops.</span><span class="accent">You own the AI.</span>
1209        </h1>
1210
1211        <!-- Sub (domain-pain triple + operator-founder credential) -->
1212        <p id="hero-sub" class="vd-sub fade-up" style="transition-delay:0.15s;">
1213          Your AI ships refunds your policy would deny, and resolutions your auditor can't reconstruct. Two field engineers embed, build the layer you own, and leave. <strong style="font-weight:500;color:#0A0A0A;">CSAT.AI</strong> in production since 2021, <a href="https://patents.google.com/patent/US11748414B2/" target="_blank" rel="noopener">patent-backed</a>.
1214        </p>
1215
1216        <!-- Triple (numbered hairline-divided list, each beat links to its use-case page) -->
1217        <div id="hero-triple" class="vd-triple fade-up" style="transition-delay:0.2s;">
1218          <a href="/use-cases/margin-leakage">
1219            <span class="vd-num">01</span>
1220            <span class="vd-line">Stop the Margin Leak.</span>
1221            <svg class="vd-icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4h18l-7 9v6l-4 2v-8L3 4z"/></svg>
1222          </a>
1223          <a href="/use-cases/customer-winback">
1224            <span class="vd-num">02</span>
1225            <span class="vd-line">Win Back the Customer.</span>
1226            <svg class="vd-icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-3-6.7"/><path d="M21 3v5h-5"/></svg>
1227          </a>
1228          <a href="/use-cases/audit-ready">
1229            <span class="vd-num">03</span>
1230            <span class="vd-line">Defend Every Decision.</span>
1231            <svg class="vd-icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2L4 5v6c0 4.5 3.3 8.7 8 10 4.7-1.3 8-5.5 8-10V5l-8-3z"/><path d="M9 12l2 2 4-4"/></svg>
1232          </a>
1233        </div>
1234
1235        <!-- CTAs (Variant D rounded buttons) -->
1236        <div id="hero-ctas" class="vd-cta-row fade-up" style="transition-delay:0.25s;">
1237          <a href="/exposure-calculator" class="vd-cta-primary">
1238            Run a Margin Leakage Audit
1239          </a>
1240          <a href="https://calendly.com/navedas-ai/navedas-platform-demo" target="_blank" rel="noopener" class="vd-cta-secondary">Talk to the inventors</a>
1241        </div>
1242        <p style="font-family:'Geist Mono',monospace;font-size:0.72rem;color:#A3A3A3;letter-spacing:0.04em;margin:0.5rem 0 0;">Audit starts at $500 · Results in 48 hrs</p>
1243
1244      </div>
1245
1246      <!-- RIGHT: Visual -->
1247      <div class="relative" style="min-width:0;">
1248        <div class="hero-visual" style="height:auto;overflow:hidden;width:100%;">
1249
1250          <!-- Recovery Report composite (H6: scope-as-deliverable preview) -->
1251          <div id="hero-report" style="width:100%;position:relative;background:#FFFFFF;border-radius:10px;border:1px solid #E5E5E5;overflow:hidden;font-family:'Geist',sans-serif;">
1252
1253            <!-- Report header -->
1254            <div style="padding:14px 18px;border-bottom:1px solid #E5E5E5;background:#FAFAFA;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;">
1255              <div>
1256                <div style="font-family:'Geist Mono',monospace;font-size:0.6rem;font-weight:600;color:#604289;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:3px;">Recovery Report</div>
1257                <div style="font-family:'Source Serif 4','Source Serif Pro',Georgia,serif;font-size:0.96rem;font-weight:500;color:#0A0A0A;letter-spacing:-0.01em;">CX Operations · Q3 Report</div>
1258              </div>
1259              <div style="text-align:right;font-family:'Geist Mono',monospace;font-size:0.58rem;color:#A3A3A3;letter-spacing:0.06em;line-height:1.55;">
1260                <div>RPT-2026-Q3-014</div>
1261                <div>1,000 decisions</div>
1262                <div>48-hour turnaround</div>
1263              </div>
1264            </div>
1265
1266            <!-- Column headers -->
1267            <div style="display:grid;grid-template-columns:42px 1fr 1.15fr 80px;gap:10px;padding:10px 18px 6px;border-bottom:1px solid #F0F0F0;font-family:'Geist Mono',monospace;font-size:0.56rem;font-weight:600;color:#A3A3A3;letter-spacing:0.1em;text-transform:uppercase;">
1268              <span>ID</span>
1269              <span>Decision</span>
1270              <span>Policy Violated</span>
1271              <span style="text-align:right;">Exposure</span>
1272            </div>
1273
1274            <!-- Rows -->
1275            <div style="padding:4px 18px 0;">
1276              <div style="display:grid;grid-template-columns:42px 1fr 1.15fr 80px;gap:10px;padding:7px 0;border-bottom:1px solid #F5F5F5;font-size:0.72rem;color:#0A0A0A;align-items:center;">
1277                <span style="font-family:'Geist Mono',monospace;font-size:0.62rem;color:#A3A3A3;">D-01</span>
1278                <span>Refund approval</span>
1279                <span style="font-family:'Geist Mono',monospace;font-size:0.62rem;color:#525252;">RETURN-001 §3.2</span>
1280                <span style="text-align:right;font-family:'Geist Mono',monospace;font-weight:600;">$1,249</span>
1281              </div>
1282              <div style="display:grid;grid-template-columns:42px 1fr 1.15fr 80px;gap:10px;padding:7px 0;border-bottom:1px solid #F5F5F5;font-size:0.72rem;color:#0A0A0A;align-items:center;">
1283                <span style="font-family:'Geist Mono',monospace;font-size:0.62rem;color:#A3A3A3;">D-02</span>
1284                <span>Refund approval</span>
1285                <span style="font-family:'Geist Mono',monospace;font-size:0.62rem;color:#525252;">RETURN-001 §3.2</span>
1286                <span style="text-align:right;font-family:'Geist Mono',monospace;font-weight:600;">$987</span>
1287              </div>
1288              <div style="display:grid;grid-template-columns:42px 1fr 1.15fr 80px;gap:10px;padding:7px 0;border-bottom:1px solid #F5F5F5;font-size:0.72rem;color:#0A0A0A;align-items:center;">
1289                <span style="font-family:'Geist Mono',monospace;font-size:0.62rem;color:#A3A3A3;">D-03</span>
1290                <span>Discount stack</span>
1291                <span style="font-family:'Geist Mono',monospace;font-size:0.62rem;color:#525252;">DISCOUNT-002 §2.1</span>
1292                <span style="text-align:right;font-family:'Geist Mono',monospace;font-weight:600;">$340</span>
1293              </div>
1294              <div style="display:grid;grid-template-columns:42px 1fr 1.15fr 80px;gap:10px;padding:7px 0;border-bottom:1px solid #F5F5F5;font-size:0.72rem;color:#0A0A0A;align-items:center;">
1295                <span style="font-family:'Geist Mono',monospace;font-size:0.62rem;color:#A3A3A3;">D-04</span>
1296                <span>
1296Escalation override</span>
1297                <span style="font-family:'Geist Mono',monospace;font-size:0.62rem;color:#525252;">SLA-MATRIX-V3 §4.7</span>
1298                <span style="text-align:right;font-family:'Geist Mono',monospace;font-weight:600;">$4,200</span>
1299              </div>
1300              <div style="display:grid;grid-template-columns:42px 1fr 1.15fr 80px;gap:10px;padding:7px 0;border-bottom:1px solid #F5F5F5;font-size:0.72rem;color:#0A0A0A;align-items:center;">
1301                <span style="font-family:'Geist Mono',monospace;font-size:0.62rem;color:#A3A3A3;">D-05</span>
1302                <span>VIP retention credit</span>
1303                <span style="font-family:'Geist Mono',monospace;font-size:0.62rem;color:#525252;">LTV-OVERRIDE §1.3</span>
1304                <span style="text-align:right;font-family:'Geist Mono',monospace;font-weight:600;">$12,400</span>
1305              </div>
1306              <div style="display:grid;grid-template-columns:42px 1fr 1.15fr 80px;gap:10px;padding:7px 0;border-bottom:1px solid #F5F5F5;font-size:0.72rem;color:#0A0A0A;align-items:center;">
1307                <span style="font-family:'Geist Mono',monospace;font-size:0.62rem;color:#A3A3A3;">D-06</span>
1308                <span>Goodwill credit</span>
1309                <span style="font-family:'Geist Mono',monospace;font-size:0.62rem;color:#525252;">GOODWILL-002 §1.3</span>
1310                <span style="text-align:right;font-family:'Geist Mono',monospace;font-weight:600;">$215</span>
1311              </div>
1312              <div style="display:grid;grid-template-columns:42px 1fr 1.15fr 80px;gap:10px;padding:7px 0;border-bottom:1px solid #F5F5F5;font-size:0.72rem;color:#0A0A0A;align-items:center;">
1313                <span style="font-family:'Geist Mono',monospace;font-size:0.62rem;color:#A3A3A3;">D-07</span>
1314                <span>Chargeback dispute</span>
1315                <span style="font-family:'Geist Mono',monospace;font-size:0.62rem;color:#525252;">FRAUD-003 §1.1</span>
1316                <span style="text-align:right;font-family:'Geist Mono',monospace;font-weight:600;">$2,890</span>
1317              </div>
1318              <div style="display:grid;grid-template-columns:42px 1fr 1.15fr 80px;gap:10px;padding:7px 0;border-bottom:1px solid #F5F5F5;font-size:0.72rem;color:#0A0A0A;align-items:center;">
1319                <span style="font-family:'Geist Mono',monospace;font-size:0.62rem;color:#A3A3A3;">D-08</span>
1320                <span>Shipping reship</span>
1321                <span style="font-family:'Geist Mono',monospace;font-size:0.62rem;color:#525252;">FULFILL-004 §3.5</span>
1322                <span style="text-align:right;font-family:'Geist Mono',monospace;font-weight:600;">$476</span>
1323              </div>
1324              <div style="display:grid;grid-template-columns:42px 1fr 1.15fr 80px;gap:10px;padding:7px 0;font-size:0.7rem;color:#A3A3A3;align-items:center;font-style:italic;">
1325                <span style="font-family:'Geist Mono',monospace;font-size:0.6rem;">···</span>
1326                <span>312 more decisions</span>
1327                <span></span>
1328                <span></span>
1329              </div>
1330            </div>
1331
1332            <!-- Footer summary -->
1333            <div style="background:#0A0A0A;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;color:#FAF7EE;">
1334              <div style="font-family:'Geist Mono',monospace;font-size:0.6rem;font-weight:600;color:rgba(250,247,238,0.75);letter-spacing:0.1em;text-transform:uppercase;">Total quarterly exposure</div>
1335              <div style="font-family:'Source Serif 4','Source Serif Pro',Georgia,serif;font-size:1.2rem;font-weight:500;color:#FAF7EE;letter-spacing:-0.01em;">$340,125</div>
1336            </div>
1337
1338          </div>
1339
1340          <!-- Honest disclosure -->
1341          <p style="font-family:'Geist',sans-serif;font-size:0.7rem;color:#7A7268;text-align:center;margin:0.7rem 0 0;line-height:1.5;font-style:italic;">
1342            Composite. Line items anonymized from four engagements.
1343          </p>
1344
1345
1346        </div>
1347      </div>
1348    </div>
1349
1350    <!-- Proof strip — FULL WIDTH band spanning both hero columns -->
1351    <div id="hero-proof" class="vd-proof fade-up" style="transition-delay:0.3s;margin-top:3rem;">
1352      <div class="vd-proof-cell">
1353        <div class="vd-proof-label">Recovery</div>
1354        <div class="vd-proof-val">$120K+</div>
1355        <div class="vd-proof-sub">per workflow / quarter</div>
1356      </div>
1357      <div class="vd-proof-cell">
1358        <div class="vd-proof-label">Audit Turnaround</div>
1359        <div class="vd-proof-val">48 hrs</div>
1360        <div class="vd-proof-sub">data to Recovery Report</div>
1361      </div>
1362      <div class="vd-proof-cell">
1363        <div class="vd-proof-label">Citation Accuracy</div>
1364        <div class="vd-proof-val">99.7%</div>
1365        <div class="vd-proof-sub">per decision, audit-ready</div>
1366      </div>
1367      <div class="vd-proof-cell">
1368        <div class="vd-proof-label">Patent</div>
1369        <div class="vd-proof-val" style="font-size:1.4rem;letter-spacing:-0.01em;">US&nbsp;11,748,414</div>
1370        <div class="vd-proof-sub">granted 2023 · active until 2042</div>
1371      </div>
1372    </div>
1373
1374    <p class="fade-up" style="transition-delay:0.35s;font-family:'Geist',sans-serif;font-size:0.78rem;color:#7A7268;text-align:center;margin:1.25rem auto 0;max-width:760px;line-height:1.55;">
1375      Drawn from live engagements across CX, fulfillment, and compliance workloads. Recovery figures vary by ticket volume, policy complexity, and existing governance maturity.
1376    </p>
1377
1378  </div>
1379
1380  <!-- Bottom wave separator -->
1381  <div style="position:absolute;bottom:-1px;left:0;right:0;line-height:0;z-index:5;">
1382    <svg viewBox="0 0 1440 80" fill="none" preserveAspectRatio="none" style="width:100%;height:80px;">
1383      <path d="M0 40 C240 80 480 0 720 40 C960 80 1200 0 1440 40 L1440 80 L0 80 Z" fill="#FAFAFA"/>
1384    </svg>
1385  </div>
1386</section>
1387
1388
1389
1390
1391
1392
1393<!-- ═══════════════════════════════════════════════════════
1394     DELIVERY POSITIONING — We don't ship software (FDE)
1395     Moved above #credentials per Type-2 services-led repositioning
1396════════════════════════════════════════════════════════ -->
1397<section id="delivery" style="padding:4.5rem 0;background:#FCFAF4;border-top:1px solid #E5DFD0;border-bottom:1px solid #E5DFD0;">
1398  <div class="max-w-7xl mx-auto px-6 lg:px-8">
1399    <div style="display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:center;" class="two-col">
1400
1401      <div>
1402        <div style="display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:#604289;font-weight:700;background:rgba(96,66,137,0.08);border:1px solid rgba(96,66,137,0.22);padding:6px 12px;border-radius:100px;margin-bottom:1.25rem;">
1403          <span style="width:6px;height:6px;border-radius:50%;background:#604289;"></span>
1404          Engagement Model
1405        </div>
1406        <h2 style="font-family:'Source Serif 4','Source Serif Pro',Georgia,serif;font-size:clamp(2rem,4.4vw,3.2rem);font-weight:500;line-height:1.05;letter-spacing:-0.025em;color:#1A1714;margin:0 0 1.25rem;">
1407          We don't ship software.<br>
1408          <span style="color:#604289;">We embed engineers.</span>
1409        </h2>
1410        <p style="font-family:'Geist',sans-serif;font-size:1.05rem;color:#4D453A;line-height:1.65;max-width:520px;margin:0 0 1rem;">
1411          Five stages. Three commercial milestones. One engagement. Two field engineers embed in your operation: onsite, hybrid, or remote based on your data residency rules. You own the AI when we leave.
1412        </p>
1413        <div style="display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:0.7rem;letter-spacing:0.08em;color:#604289;background:rgba(96,66,137,0.06);border:1px solid rgba(96,66,137,0.18);padding:5px 10px;border-radius:6px;max-width:520px;">
1414          <svg width="11" height="11" fill="none" viewBox="0 0 24 24" aria-hidden="true" style="flex-shrink:0;"><path d="M12 2L3 7v5c0 5.25 3.75 10.15 9 11.35C17.25 22.15 21 17.25 21 12V7l-9-5z" stroke="#604289" stroke-width="1.8" stroke-linejoin="round"/></svg>
1415          Onshore-only delivery available for HIPAA, FedRAMP, and EU-sovereignty workloads.
1416        </div>
1417      </div>
1418
1419      <div style="display:flex;flex-direction:column;gap:0;border-left:1px solid #E5DFD0;padding-left:2.5rem;">
1420        <div style="display:grid;grid-template-columns:96px 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid #E5DFD0;">
1421          <div style="font-family:'Geist Mono',monospace;font-size:0.7rem;color:#604289;letter-spacing:0.1em;font-weight:600;padding-top:4px;">01·48h</div>
1422          <div>
1423            <div style="font-family:'Geist',sans-serif;font-size:0.95rem;font-weight:700;color:#1A1714;margin-bottom:0.25rem;">Diagnose</div>
1424            <div style="font-family:'Geist',sans-serif;font-size:0.85rem;color:#4D453A;line-height:1.55;">1,000 of your decisions mapped to your policies. You see where margin leaks.</div>
1425          </div>
1426        </div>
1427        <div style="display:grid;grid-template-columns:96px 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid #E5DFD0;">
1428          <div style="font-family:'Geist Mono',monospace;font-size:0.7rem;color:#604289;letter-spacing:0.1em;font-weight:600;padding-top:4px;">02·CO-BUILD</div>
1429          <div>
1430            <div style="font-family:'Geist',sans-serif;font-size:0.95rem;font-weight:700;color:#1A1714;margin-bottom:0.25rem;">Two FDEs embed</div>
1431            <div style="font-family:'Geist',sans-serif;font-size:0.85rem;color:#4D453A;line-height:1.55;">Field engineers build the AI for your use case, harden it for your stack, scale it to production volume.</div>
1432          </div>
1433        </div>
1434        <div style="display:grid;grid-template-columns:96px 1fr;gap:1rem;padding:1rem 0;">
1435          <div style="font-family:'Geist Mono',monospace;font-size:0.7rem;color:#604289;letter-spacing:0.1em;font-weight:600;padding-top:4px;">03·OPERATE</div>
1436          <div>
1437            <div style="font-family:'Geist',sans-serif;font-size:0.95rem;font-weight:700;color:#1A1714;margin-bottom:0.25rem;">You own the AI</div>
1438            <div style="font-family:'Geist',sans-serif;font-size:0.85rem;color:#4D453A;line-height:1.55;">Your team runs it on infrastructure you already own. We tune models, ship monthly audit packs, handle incidents.</div>
1439          </div>
1440        </div>
1441      </div>
1442
1443    </div>
1444  </div>
1445</section>
1446
1447
1448<!-- ═══════════════════════════════════════════════════════
1449     MULTI-AGENT WORKFORCE — new section from revised doc
1450════════════════════════════════════════════════════════ -->
1451<section id="workforce" style="padding:5rem 0;background:#FFFFFF;border-top:1px solid #E5E5E5;">
1452  <div class="max-w-7xl mx-auto px-6 lg:px-8">
1453
1454    <div style="max-width:780px;margin:0 auto 3.5rem;text-align:center;">
1455      <div style="display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:#604289;font-weight:700;background:rgba(96,66,137,0.08);border:1px solid rgba(96,66,137,0.22);padding:6px 12px;border-radius:100px;margin-bottom:1.5rem;">
1456        <span style="width:6px;height:6px;border-radius:50%;background:#604289;"></span>
1457        Workforce Architecture
1458      </div>
1459      <h2 style="font-family:'Geist',sans-serif;font-size:clamp(2rem,3.8vw,3rem);font-weight:600;color:#0A0A0A;letter-spacing:-0.035em;line-height:1.05;margin:0 0 1.25rem;">You don't need a smarter chatbot.<br><span style="color:#A3A3A3;">You need an engineered workforce.</span></h2>
1460      <p style="font-family:'Geist',sans-serif;font-size:1.04rem;color:#525252;line-height:1.65;margin:0;">Most AI deployments give one model broad access to your APIs and hope policy emerges from the prompt. We don't. Navedas structures your automation as a multi-agent organization inside your VPC. Each agent has a defined role, a sandboxed scope, and an exposure budget.</p>
1461    </div>
1462
1463    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;" class="two-col">
1464
1465      <div style="background:#FAFAFA;border:1px solid #E5E5E5;border-radius:14px;padding:2rem;">
1466        <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;">
1467          <div style="width:40px;height:40px;border-radius:10px;background:rgba(96,66,137,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
1468            <svg width="22" height="22" fill="none" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3L4 7v5c0 4.5 3.6 8.7 8 9.9 4.4-1.2 8-5.4 8-9.9V7l-8-4z" stroke="#604289" stroke-width="1.6" stroke-linejoin="round"/></svg>
1469          </div>
1470          <div style="font-family:'Geist Mono',monospace;font-size:0.66rem;font-weight:700;color:#604289;letter-spacing:0.12em;text-transform:uppercase;">Intake Agent</div>
1471        </div>
1472        <h3 style="font-family:'Geist',sans-serif;font-size:1rem;font-weight:700;color:#0A0A0A;margin:0 0 0.6rem;">Receives and classifies</h3>
1473        <p style="font-family:'Geist',sans-serif;font-size:0.88rem;color:#525252;line-height:1.6;margin:0;">Receives the inbound event, classifies intent, and locks the record in your helpdesk to prevent race conditions. Every interaction enters one door.</p>
1474      </div>
1475
1476      <div style="background:#FAFAFA;border:1px solid #E5E5E5;border-radius:14px;padding:2rem;">
1477        <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;">
1478          <div style="width:40px;height:40px;border-radius:10px;background:rgba(96,66,137,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
1479            <svg width="22" height="22" fill="none" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3" stroke="#604289" stroke-width="1.6"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" stroke="#604289" stroke-width="1.6" stroke-linecap="round"/></svg>
1480          </div>
1481          <div style="font-family:'Geist Mono',monospace;font-size:0.66rem;font-weight:700;color:#604289;letter-spacing:0.12em;text-transform:uppercase;">Domain Agents</div>
1482        </div>
1483        <h3 style="font-family:'Geist',sans-serif;font-size:1rem;font-weight:700;color:#0A0A0A;margin:0 0 0.6rem;">Scoped to your operation</h3>
1484        <p style="font-family:'Geist',sans-serif;font-size:0.88rem;color:#525252;line-height:1.6;margin:0;">Refunds, retention, escalation, fulfillment: each agent references the Context Graph to construct a resolution payload. None has cross-domain access. Authorization is structural, not prompt-based.</p>
1485      </div>
1486
1487      <div style="background:#FAFAFA;border:1px solid #E5E5E5;border-radius:14px;padding:2rem;">
1488        <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;">
1489          <div style="width:40px;height:40px;border-radius:10px;background:rgba(96,66,137,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
1490            <svg width="22" height="22" fill="none" viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="7" width="20" height="14" rx="2" stroke="#604289" stroke-width="1.6"/><path d="M16 7V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2" stroke="#604289" stroke-width="1.6"/><line x1="12" y1="12" x2="12" y2="16" stroke="#604289" stroke-width="1.6" stroke-linecap="round"/><line x1="10" y1="14" x2="14" y2="14" stroke="#604289" stroke-width="1.6" stroke-linecap="round"/></svg>
1491          </div>
1492          <div style="font-family:'Geist Mono',monospace;font-size:0.66rem;font-weight:700;color:#604289;letter-spacing:0.12em;text-transform:uppercase;">Budget Layer</div>
1493        </div>
1494        <h3 style="font-family:'Geist',sans-serif;font-size:1rem;font-weight:700;color:#0A0A0A;margin:0 0 0.6rem;">Caps authorized exposure</h3>
1495        <p style="font-family:'Geist',sans-serif;font-size:0.88rem;color:#525252;line-height:1.6;margin:0;">Each agent operates with a defined dollar cap per quarter. A refund agent at $50K of governed decisions is a different operational posture than the same agent with no cap. The runaway-cost case never reaches the customer.</p>
1496      </div>
1497
1498    </div>
1499
1500    <p style="font-family:'Geist Mono',monospace;font-size:0.78rem;color:#A3A3A3;text-align:center;margin:2.5rem 0 0;letter-spacing:0.04em;">
1500Three agents or thirty. The structure is the same. Each agent operates with the authority you defined. Nothing else.</p>
1501
1502  </div>
1503</section>
1504
1505
1506<!-- ═══════════════════════════════════════════════════════
1507     ORIGIN — warm-dark editorial moment (production, not patent)
1508════════════════════════════════════════════════════════ -->
1509<section id="credentials" style="padding:3.5rem 0;background:#0A0A0A;color:#FAF7EE;">
1510  <div class="max-w-7xl mx-auto px-6 lg:px-8" style="text-align:center;">
1511    <div style="font-family:'Geist Mono',monospace;font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;color:#B89BD4;font-weight:600;margin-bottom:1rem;">
1512      ● Proven, then productized
1513    </div>
1514    <p style="font-family:'Source Serif 4','Source Serif Pro',Georgia,serif;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.2;font-weight:500;color:#FAF7EE;max-width:880px;margin:0 auto 1rem;letter-spacing:-0.015em;">
1515      We built CSAT.AI first. <span style="color:rgba(250,247,238,0.55);">Then we built it for you.</span>
1516    </p>
1517    <p style="font-family:'Geist',sans-serif;font-size:0.95rem;line-height:1.6;color:rgba(250,247,238,0.7);max-width:620px;margin:0 auto;">
1518      Four years inside customer-experience operations before we shipped the platform. The Decision Gate isn't a thesis. It's the load-bearing engine our first customers have been running since 2021.
1519    </p>
1520  </div>
1521</section>
1522
1523<!-- Logo carousel + revenue strip -->
1524<section id="trusted" style="padding:3rem 0 4rem;background:#FCFAF4;">
1525  <div class="max-w-7xl mx-auto px-6 lg:px-8">
1526
1527    <div class="fade-up" style="display:flex;align-items:center;justify-content:center;gap:0.75rem;margin-bottom:2rem;">
1528      <span style="font-family:'Geist Mono',monospace;font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:#604289;font-weight:600;">Deployed inside</span>
1529      <span style="font-family:'Geist Mono',monospace;font-size:0.72rem;color:#1A1714;letter-spacing:0.04em;">$400M Apparel &nbsp;·&nbsp; $2B Fintech &nbsp;·&nbsp; $280M D2C &nbsp;·&nbsp; $1.4B Retail &nbsp;·&nbsp; $1.8B Marketplace</span>
1530    </div>
1531
1532    <div class="logo-wrap" style="mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);">
1533      <div class="logo-track">
1534        <div class="logo-item"><img src="/public/landit-B9-zfm0_.svg" alt="Landit" loading="lazy"></div>
1535        <div class="logo-item"><img src="/public/pyypl-YYPUf4IY.svg" alt="pyypl" loading="lazy"></div>
1536        <div class="logo-item"><img src="/public/logic-broker-DFyhaVqw.svg" alt="logicbroker" loading="lazy"></div>
1537        <div class="logo-item"><img src="/public/rotho-2qQqpJV5.svg" alt="Rotho" loading="lazy"></div>
1538        <div class="logo-item"><img src="/public/elevatepay-BRR9JahS.svg" alt="ElevatePay" loading="lazy"></div>
1539        <div class="logo-item"><img src="/public/dyme-wG3Qtzok.svg" alt="dyme" loading="lazy"></div>
1540        <div class="logo-item"><span class="logo-wordmark" aria-label="Bombas">Bombas</span></div>
1541        <div class="logo-item"><img src="/public/landit-B9-zfm0_.svg" alt="" aria-hidden="true" loading="lazy"></div>
1542        <div class="logo-item"><img src="/public/pyypl-YYPUf4IY.svg" alt="" aria-hidden="true" loading="lazy"></div>
1543        <div class="logo-item"><img src="/public/logic-broker-DFyhaVqw.svg" alt="" aria-hidden="true" loading="lazy"></div>
1544        <div class="logo-item"><img src="/public/rotho-2qQqpJV5.svg" alt="" aria-hidden="true" loading="lazy"></div>
1545        <div class="logo-item"><img src="/public/elevatepay-BRR9JahS.svg" alt="" aria-hidden="true" loading="lazy"></div>
1546        <div class="logo-item"><img src="/public/dyme-wG3Qtzok.svg" alt="" aria-hidden="true" loading="lazy"></div>
1547        <div class="logo-item"><span class="logo-wordmark" aria-hidden="true">Bombas</span></div>
1548      </div>
1549    </div>
1550  </div>
1551</section>
1552
1553
1554<!-- ═══════════════════════════════════════════════════════
1555     STEP 2B — PROBLEM CARDS
1556════════════════════════════════════════════════════════ -->
1557<section id="problem" style="background:#FAFAFA;padding:5rem 0;">
1558  <div class="max-w-7xl mx-auto px-6 lg:px-8">
1559
1560    <!-- Heading -->
1561    <div class="fade-up" style="text-align:center;margin-bottom:3.5rem;">
1562      <div style="display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:#604289;font-weight:700;background:rgba(96,66,137,0.08);border:1px solid rgba(96,66,137,0.22);padding:6px 12px;border-radius:100px;margin-bottom:1.25rem;">
1563        <span style="width:6px;height:6px;border-radius:50%;background:#604289;"></span>
1564        The Exposure
1565      </div>
1566      <h2 style="font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:900;color:#0A0A0A;letter-spacing:-0.03em;margin:0 0 1rem;">
1567        This is happening inside your operation right now
1568      </h2>
1569      <p style="font-size:1.05rem;color:#525252;max-width:520px;margin:0 auto;line-height:1.65;">
1570        Every hour, decisions ship without policy enforcement. You won't see the cost until the P&amp;L review.
1571      </p>
1572    </div>
1573
1574    <!-- 2×2 alert cards grid -->
1575    <div class="stagger-parent" style="display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;">
1576
1577      <!-- Card 1 — AI agent -->
1578      <div class="card stagger-child" style="padding:1.75rem 1.75rem 2rem;background:#FCFAF4;border-color:rgba(0,0,0,0.08)!important;">
1579        <div style="font-family:'Source Serif 4','Source Serif Pro',Georgia,serif;font-size:2.6rem;font-weight:500;color:#0A0A0A;letter-spacing:-0.025em;line-height:1;margin-bottom:0.35rem;">$340K</div>
1580        <div style="font-family:'Geist Mono',monospace;font-size:0.66rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#604289;margin-bottom:1.5rem;">Quarterly · ungoverned AI refunds</div>
1581        <h3 style="font-size:0.98rem;font-weight:600;color:#1A1714;margin:0 0 0.5rem;line-height:1.45;letter-spacing:-0.005em;">Your AI agent approved a $1,249 refund your policy says to deny</h3>
1582        <p style="font-size:0.85rem;color:#525252;line-height:1.65;margin:0;">74-day refund, 60-day policy. The bot read the customer's frustration, not your SOP.</p>
1583      </div>
1584
1585      <!-- Card 2 — Human agent -->
1586      <div class="card stagger-child" style="padding:1.75rem 1.75rem 2rem;background:#FCFAF4;border-color:rgba(0,0,0,0.08)!important;">
1587        <div style="font-family:'Source Serif 4','Source Serif Pro',Georgia,serif;font-size:2.6rem;font-weight:500;color:#0A0A0A;letter-spacing:-0.025em;line-height:1;margin-bottom:0.35rem;">$84K</div>
1588        <div style="font-family:'Geist Mono',monospace;font-size:0.66rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#604289;margin-bottom:1.5rem;">Quarterly · losses the team had no tool to prevent</div>
1589        <h3 style="font-size:0.98rem;font-weight:600;color:#1A1714;margin:0 0 0.5rem;line-height:1.45;letter-spacing:-0.005em;">A hostile call, a policy that changed last Tuesday, and no one told the floor</h3>
1590        <p style="font-size:0.85rem;color:#525252;line-height:1.65;margin:0;">BBB threat, 90 seconds to respond, an updated SOP no one pushed to the screen. The gap wasn't their judgment. It was ours.</p>
1591      </div>
1592
1593      <!-- Card 3 — Serial claimants -->
1594      <div class="card stagger-child" style="padding:1.75rem 1.75rem 2rem;background:#FCFAF4;border-color:rgba(0,0,0,0.08)!important;">
1595        <div style="font-family:'Source Serif 4','Source Serif Pro',Georgia,serif;font-size:2.6rem;font-weight:500;color:#0A0A0A;letter-spacing:-0.025em;line-height:1;margin-bottom:0.35rem;">3.2%</div>
1596        <div style="font-family:'Geist Mono',monospace;font-size:0.66rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#604289;margin-bottom:1.5rem;">Of your refund volume · serial-claimant abuse</div>
1597        <h3 style="font-size:0.98rem;font-weight:600;color:#1A1714;margin:0 0 0.5rem;line-height:1.45;letter-spacing:-0.005em;">Serial claimants already know your Customer 360 can't stop them</h3>
1598        <p style="font-size:0.85rem;color:#525252;line-height:1.65;margin:0;">Four accounts, one household, twelve refunds in 90 days. The Customer 360 sees four separate customers. The bot approved a fifth.</p>
1599      </div>
1600
1601      <!-- Card 4 — Reasoning Ledger -->
1602      <div class="card stagger-child" style="padding:1.75rem 1.75rem 2rem;background:#FCFAF4;border-color:rgba(0,0,0,0.08)!important;">
1603        <div style="font-family:'Source Serif 4','Source Serif Pro',Georgia,serif;font-size:2.6rem;font-weight:500;color:#0A0A0A;letter-spacing:-0.025em;line-height:1;margin-bottom:0.35rem;">4&ndash;6 hrs</div>
1604        <div style="font-family:'Geist Mono',monospace;font-size:0.66rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#604289;margin-bottom:1.5rem;">Per audit inquiry · unquantified liability</div>
1605        <h3 style="font-size:0.98rem;font-weight:600;color:#1A1714;margin:0 0 0.5rem;line-height:1.45;letter-spacing:-0.005em;">Your auditor asked 'why' and the system never captured the answer</h3>
1606        <p style="font-size:0.85rem;color:#525252;line-height:1.65;margin:0;">Six hours digging through Slack because no one built a place to record the 'why' in the first place.</p>
1607      </div>
1608
1609    </div>
1610  </div>
1611</section>
1612
1613
1614<!-- ═══════════════════════════════════════════════════════
1615     THE PLATFORM
1616════════════════════════════════════════════════════════ -->
1617<section id="solution" style="padding:4rem 0;background:#FFFFFF;">
1618  <div class="max-w-7xl mx-auto px-6 lg:px-8">
1619
1620    <!-- Heading — eyebrow unified to purple per F4 Option A; sage stays inside cards as semantic accent -->
1621    <div class="fade-up" style="text-align:center;margin-bottom:4rem;">
1622      <div style="display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:#604289;font-weight:700;background:rgba(96,66,137,0.08);border:1px solid rgba(96,66,137,0.22);padding:6px 12px;border-radius:100px;margin-bottom:1.25rem;">
1623        <span style="width:6px;height:6px;border-radius:50%;background:#604289;"></span>
1624        The Governance Layer
1625      </div>
1626      <h2 style="font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:900;color:#0A0A0A;letter-spacing:-0.03em;margin:0 0 1rem;">
1627        One engine governs every<br><span class="gradient-text">decision-maker in your organization</span>
1628      </h2>
1629      <p style="font-size:1.05rem;color:#525252;max-width:540px;margin:0 auto;line-height:1.65;">
1630        Same gates. Same trace. Same ledger. Human and AI, one engine.
1631      </p>
1632    </div>
1633
1634    <!-- 2 unified cards -->
1635    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem;" class="fade-up two-col">
1636
1637      <!-- AI Agent card -->
1638      <div class="card" style="padding:2rem;border-left:3px solid #5A7A3F;">
1639        <div class="feat-tag" style="margin-bottom:1rem;background:rgba(90,122,63,0.10);border:1px solid rgba(90,122,63,0.22);color:#5A7A3F;">AI Agent</div>
1640        <h3 style="font-size:1.15rem;font-weight:800;color:#0A0A0A;margin:0 0 0.65rem;">When Your AI Agent Acts</h3>
1641        <p style="font-size:0.9rem;color:#525252;line-height:1.65;margin:0 0 1.25rem;">Every refund, discount, or escalation hits a policy gate before it commits. Violations never reach the customer.</p>
1642        <div style="background:rgba(90,122,63,0.05);border:1px solid rgba(90,122,63,0.15);border-radius:12px;padding:1rem;">
1643          <div style="font-size:0.7rem;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:#A3A3A3;margin-bottom:0.65rem;">Live Example</div>
1644          <p style="font-family:'Geist Mono',monospace;font-size:0.74rem;color:#525252;margin:0 0 0.6rem;line-height:1.55;letter-spacing:-0.005em;">AI-Agent-07 &rarr; $1,249 refund &rarr; RETURN-001 §3.2 (74d &gt; 60d) &rarr; FRAUD-003 §1.1 (3rd claim in 90d)</p>
1645          <div style="display:flex;align-items:center;gap:0.4rem;font-size:0.78rem;font-weight:700;color:#4E2C78;">
1646            <svg width="13" height="13" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#4E2C78" stroke-width="1.8"/><path d="M15 9l-6 6M9 9l6 6" stroke="#4E2C78" stroke-width="1.8" stroke-linecap="round"/></svg>
1647            Blocked before customer sees the response
1648          </div>
1649        </div>
1650      </div>
1651
1652      <!-- Human Agent card -->
1653      <div class="card" style="padding:2rem;border-left:3px solid #5A7A3F;">
1654        <div class="feat-tag green" style="margin-bottom:1rem;background:rgba(90,122,63,0.10);border:1px solid rgba(90,122,63,0.22);color:#5A7A3F;">Human Agent</div>
1655        <h3 style="font-size:1.15rem;font-weight:800;color:#0A0A0A;margin:0 0 0.65rem;">When Your Human Agent Acts</h3>
1656        <p style="font-size:0.9rem;color:#525252;line-height:1.65;margin:0 0 1.25rem;">Under pressure, your agent sees the right policy, the fiscal impact, and a defensible alternative. All on one screen.</p>
1657        <div style="background:rgba(59,170,150,0.04);border:1px solid rgba(59,170,150,0.15);border-radius:12px;padding:1rem;">
1658          <div style="font-size:0.7rem;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:#A3A3A3;margin-bottom:0.65rem;">Live Example</div>
1659          <p style="font-family:'Geist Mono',monospace;font-size:0.74rem;color:#525252;margin:0 0 0.6rem;line-height:1.55;letter-spacing:-0.005em;">Human-Sarah.K &rarr; 35% discount &rarr; DISCOUNT-002 §2.1 (35% &gt; 20% max) &rarr; LTV $2,400 does not qualify</p>
1660          <div style="display:flex;align-items:center;gap:0.4rem;font-size:0.78rem;font-weight:700;color:#3BAA96;">
1661            <svg width="13" height="13" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#3BAA96" stroke-width="1.8"/><path d="M8 12l3 3 5-6" stroke="#3BAA96" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
1662            Agent sees: "20% max per DISCOUNT-002 §2.1. Offer store credit alternative."
1663          </div>
1664        </div>
1665      </div>
1666    </div>
1667
1668    <!-- Pipeline + Features row -->
1669    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem;" class="fade-up two-col">
1670
1671      <!-- Governance Pipeline -->
1672      <div class="card" style="padding:2rem;">
1673        <div style="font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#A3A3A3;margin-bottom:1.5rem;">The Governance Pipeline</div>
1674        <div id="gp-steps" style="display:flex;flex-direction:column;gap:0;">
1675
1676          <div class="gp-step" style="display:flex;gap:1rem;align-items:flex-start;">
1677            <div style="display:flex;flex-direction:column;align-items:center;flex-shrink:0;">
1678              <div style="width:34px;height:34px;border-radius:10px;background:rgba(0,0,0,0.1);display:flex;align-items:center;justify-content:center;">
1679                <svg width="14" height="14" fill="none" viewBox="0 0 24 24">
1679<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="#0A0A0A" stroke-width="1.8" stroke-linejoin="round"/></svg>
1680              </div>
1681              <div class="gp-line" style="width:1px;height:20px;background:linear-gradient(to bottom,#0A0A0A,#3BAA96);margin:4px 0;transform-origin:top;transform:scaleY(0);transition:transform 0.3s ease;"></div>
1682            </div>
1683            <div style="padding-bottom:1.25rem;">
1684              <div style="font-size:0.875rem;font-weight:700;color:#0A0A0A;margin-bottom:0.2rem;">Interaction Enters</div>
1685              <div style="font-size:0.8rem;color:#A3A3A3;">From any channel: chat, phone, email, AI bot</div>
1686            </div>
1687          </div>
1688
1689          <div class="gp-step" style="display:flex;gap:1rem;align-items:flex-start;">
1690            <div style="display:flex;flex-direction:column;align-items:center;flex-shrink:0;">
1691              <div style="width:34px;height:34px;border-radius:10px;background:rgba(0,0,0,0.1);display:flex;align-items:center;justify-content:center;">
1692                <svg width="14" height="14" fill="none" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="#0A0A0A" stroke-width="1.6"/></svg>
1693              </div>
1694              <div class="gp-line" style="width:1px;height:20px;background:linear-gradient(to bottom,#0A0A0A,#3BAA96);margin:4px 0;transform-origin:top;transform:scaleY(0);transition:transform 0.3s ease;"></div>
1695            </div>
1696            <div style="padding-bottom:1.25rem;">
1697              <div style="font-size:0.875rem;font-weight:700;color:#0A0A0A;margin-bottom:0.2rem;">Policy Gates Fire</div>
1698              <div style="font-size:0.8rem;color:#A3A3A3;">Identity → Eligibility → Fiscal → Fraud → Sentiment</div>
1699            </div>
1700          </div>
1701
1702          <div class="gp-step" style="display:flex;gap:1rem;align-items:flex-start;">
1703            <div style="display:flex;flex-direction:column;align-items:center;flex-shrink:0;">
1704              <div style="width:34px;height:34px;border-radius:10px;background:rgba(212,133,10,0.1);display:flex;align-items:center;justify-content:center;">
1705                <svg width="14" height="14" fill="none" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8" stroke="#D4850A" stroke-width="1.6"/><path d="M21 21l-4.35-4.35" stroke="#D4850A" stroke-width="1.6" stroke-linecap="round"/></svg>
1706              </div>
1707              <div class="gp-line" style="width:1px;height:20px;background:linear-gradient(to bottom,#0A0A0A,#3BAA96);margin:4px 0;transform-origin:top;transform:scaleY(0);transition:transform 0.3s ease;"></div>
1708            </div>
1709            <div style="padding-bottom:1.25rem;">
1710              <div style="font-size:0.875rem;font-weight:700;color:#0A0A0A;margin-bottom:0.2rem;">Precedent + Policy Lookup</div>
1711              <div style="font-size:0.8rem;color:#A3A3A3;">Graph search: similar tickets + matching policy nodes</div>
1712            </div>
1713          </div>
1714
1715          <div class="gp-step" style="display:flex;gap:1rem;align-items:flex-start;">
1716            <div style="display:flex;flex-direction:column;align-items:center;flex-shrink:0;">
1717              <div style="width:34px;height:34px;border-radius:10px;background:rgba(59,170,150,0.1);display:flex;align-items:center;justify-content:center;">
1718                <svg width="14" height="14" fill="none" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#3BAA96" stroke-width="1.8" stroke-linecap="round"/></svg>
1719              </div>
1720              <div class="gp-line" style="width:1px;height:20px;background:linear-gradient(to bottom,#0A0A0A,#3BAA96);margin:4px 0;transform-origin:top;transform:scaleY(0);transition:transform 0.3s ease;"></div>
1721            </div>
1722            <div style="padding-bottom:1.25rem;">
1723              <div style="font-size:0.875rem;font-weight:700;color:#0A0A0A;margin-bottom:0.2rem;">Deterministic Verdict</div>
1724              <div style="font-size:0.8rem;color:#A3A3A3;">Approved, Blocked, or Escalated. With full citation.</div>
1725            </div>
1726          </div>
1727
1728          <div class="gp-step" style="display:flex;gap:1rem;align-items:flex-start;">
1729            <div style="display:flex;flex-direction:column;align-items:center;flex-shrink:0;">
1730              <div style="width:34px;height:34px;border-radius:10px;background:rgba(59,170,150,0.1);display:flex;align-items:center;justify-content:center;">
1731                <svg width="14" height="14" fill="none" viewBox="0 0 24 24">
1731<path d="M4 19.5A2.5 2.5 0 016.5 17H20" stroke="#3BAA96" stroke-width="1.6"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z" stroke="#3BAA96" stroke-width="1.6"/></svg>
1732              </div>
1733            </div>
1734            <div>
1735              <div style="font-size:0.875rem;font-weight:700;color:#0A0A0A;margin-bottom:0.2rem;">Reasoning Ledger</div>
1736              <div style="font-size:0.8rem;color:#A3A3A3;">Every decision persisted with audit-grade traceability</div>
1737            </div>
1738          </div>
1739
1740        </div>
1741      </div>
1742
1743      <!-- 4 Engine Features -->
1744      <div style="display:flex;flex-direction:column;gap:1rem;">
1745
1746        <div class="card" style="padding:1.25rem;display:flex;gap:1rem;align-items:flex-start;">
1747          <div style="width:36px;height:36px;border-radius:10px;background:rgba(217,68,82,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
1748            <svg width="15" height="15" fill="none" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12" stroke="#D94452" stroke-width="2" stroke-linecap="round"/></svg>
1749          </div>
1750          <div>
1751            <div style="font-size:0.875rem;font-weight:800;color:#0A0A0A;margin-bottom:0.25rem;">The Interceptor</div>
1752            <p style="font-size:0.8rem;color:#525252;line-height:1.6;margin:0;">A realtime gate between decision and action. Violations are blocked before the customer sees a response. Works identically for bots and human keystrokes.</p>
1753          </div>
1754        </div>
1755
1756        <div class="card" style="padding:1.25rem;display:flex;gap:1rem;align-items:flex-start;">
1757          <div style="width:36px;height:36px;border-radius:10px;background:rgba(0,0,0,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
1758            <svg width="15" height="15" fill="none" viewBox="0 0 24 24"><path d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" stroke="#0A0A0A" stroke-width="1.6"/></svg>
1759          </div>
1760          <div>
1761            <div style="font-size:0.875rem;font-weight:800;color:#0A0A0A;margin-bottom:0.25rem;">The Reasoning Ledger</div>
1762            <p style="font-size:0.8rem;color:#525252;line-height:1.6;margin:0;">Every gate, citation, and fiscal step documented. When your auditor asks "why was this denied?", the answer is one click away.</p>
1763          </div>
1764        </div>
1765
1766        <div class="card" style="padding:1.25rem;display:flex;gap:1rem;align-items:flex-start;">
1767          <div style="width:36px;height:36px;border-radius:10px;background:rgba(59,170,150,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
1768            <svg width="15" height="15" fill="none" viewBox="0 0 24 24"><path 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" stroke="#3BAA96" stroke-width="1.6" stroke-linecap="round"/></svg>
1769          </div>
1770          <div>
1771            <div style="font-size:0.875rem;font-weight:800;color:#0A0A0A;margin-bottom:0.25rem;">Institutional Memory</div>
1772            <p style="font-size:0.8rem;color:#525252;line-height:1.6;margin:0;">Every verified resolution becomes a precedent. After 1,000 tickets, the engine knows your playbook better than your best supervisor.</p>
1773          </div>
1774        </div>
1775
1776        <div class="card" style="padding:1.25rem;display:flex;gap:1rem;align-items:flex-start;">
1777          <div style="width:36px;height:36px;border-radius:10px;background:rgba(0,0,0,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
1778            <svg width="15" height="15" fill="none" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" stroke="#0A0A0A" stroke-width="1.6" stroke-linecap="round"/><circle cx="9" cy="7" r="4" stroke="#0A0A0A" stroke-width="1.6"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75" stroke="#0A0A0A" stroke-width="1.6" stroke-linecap="round"/></svg>
1779          </div>
1780          <div>
1781            <div style="font-size:0.875rem;font-weight:800;color:#0A0A0A;margin-bottom:0.25rem;">Identity-Stitched Policy Enforcement</div>
1782            <p style="font-size:0.8rem;color:#525252;line-height:1.6;margin:0;">Your CRM shows one identity. Navedas stitches linked accounts, devices, and channels, so the policy threshold fires whether the request hits the agent, the bot, or self-serve.</p>
1783          </div>
1784        </div>
1785
1786      </div>
1787    </div>
1788
1789
1790  </div>
1791</section>
1792
1793
1794<!-- ═══════════════════════════════════════════════════════
1795     COMPARE SECTION
1796════════════════════════════════════════════════════════ -->
1797<section style="padding:5rem 0;background:#FFFFFF;">
1798  <div style="max-width:1180px;margin:0 auto;padding:0 2rem;">
1799    <div class="fade-up" style="text-align:center;margin-bottom:3.5rem;">
1800      <div style="display:inline-flex;align-items:center;gap:10px;font-family:'Geist Mono',monospace;font-size:0.72rem;font-weight:600;color:#525252;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:1.25rem;">
1801        <span style="width:6px;height:6px;border-radius:50%;background:#0A0A0A;"></span>
1802        Guardrails &ne; Decision Gate
1803      </div>
1804      <h2 style="font-family:'Geist',sans-serif;font-size:clamp(2rem,3.8vw,3rem);font-weight:600;color:#0A0A0A;letter-spacing:-0.035em;line-height:1.05;margin:0 0 1.25rem;">Your AI's guardrails<br>aren't <span style="color:#A3A3A3;">a Decision Gate.</span></h2>
1805      <p style="font-family:'Geist',sans-serif;font-size:1.04rem;color:#525252;max-width:540px;margin:0 auto;line-height:1.6;">Every AI platform ships with guardrails. Here's what they miss.</p>
1806    </div>
1807    <div class="fade-up" style="display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;">
1808      <!-- Left: Today's AI guardrails -->
1809      <div style="background:#FFFFFF;border:1px solid #E5E5E5;border-radius:14px;padding:2rem;">
1810        <div style="display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:0.66rem;font-weight:600;color:#525252;letter-spacing:0.14em;text-transform:uppercase;padding:6px 12px;border:1px solid #E5E5E5;border-radius:100px;margin-bottom:1.75rem;">
1811          <span style="width:6px;height:6px;border-radius:50%;background:#C44B5C;"></span>
1812          Today's AI guardrails
1813        </div>
1814        <div style="display:flex;flex-direction:column;gap:1rem;">
1815          <div style="display:flex;gap:0.85rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid #F0F0F0;">
1816            <div style="width:22px;height:22px;border-radius:6px;background:#FAFAFA;border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;"><svg width="10" height="10" fill="none" viewBox="0 0 14 14"><path d="M2 2l10 10M12 2L2 12" stroke="#C44B5C" stroke-width="1.8" stroke-linecap="round"/></svg></div>
1817            <div><strong style="font-family:'Geist',sans-serif;font-size:0.88rem;font-weight:600;color:#0A0A0A;display:block;margin-bottom:4px;">Conflict of interest</strong><span style="font-family:'Geist',sans-serif;font-size:0.875rem;color:#525252;line-height:1.6;">The model vendor writes the LLM, writes the guardrails, and writes the logs. In no other regulated industry would the same entity creating decisions be the one certifying them.</span></div>
1818          </div>
1819          <div style="display:flex;gap:0.85rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid #F0F0F0;">
1820            <div style="width:22px;height:22px;border-radius:6px;background:#FAFAFA;border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;"><svg width="10" height="10" fill="none" viewBox="0 0 14 14"><path d="M2 2l10 10M12 2L2 12" stroke="#C44B5C" stroke-width="1.8" stroke-linecap="round"/></svg></div>
1821            <div><strong style="font-family:'Geist',sans-serif;font-size:0.88rem;font-weight:600;color:#0A0A0A;display:block;margin-bottom:4px;">AI-only coverage</strong><span style="font-family:'Geist',sans-serif;font-size:0.875rem;color:#525252;line-height:1.6;">Governs the bot. Your human agents and back-office have zero coverage.</span></div>
1822          </div>
1823          <div style="display:flex;gap:0.85rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid #F0F0F0;">
1824            <div style="width:22px;height:22px;border-radius:6px;background:#FAFAFA;border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;"><svg width="10" height="10" fill="none" viewBox="0 0 14 14"><path d="M2 2l10 10M12 2L2 12" stroke="#C44B5C" stroke-width="1.8" stroke-linecap="round"/></svg></div>
1825            <div><strong style="font-family:'Geist',sans-serif;font-size:0.88rem;font-weight:600;color:#0A0A0A;display:block;margin-bottom:4px;">No policy-node citations</strong><span style="font-family:'Geist',sans-serif;font-size:0.875rem;color:#525252;line-height:1.6;">RAG cites "our documentation." An auditor needs the specific policy node that governed the decision. POL-042 &sect;3.2, not a vague paragraph.</span></div>
1826          </div>
1827          <div style="display:flex;gap:0.85rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid #F0F0F0;">
1828            <div style="width:22px;height:22px;border-radius:6px;background:#FAFAFA;border:1px solid #E5E5E5;
1828display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;"><svg width="10" height="10" fill="none" viewBox="0 0 14 14"><path d="M2 2l10 10M12 2L2 12" stroke="#C44B5C" stroke-width="1.8" stroke-linecap="round"/></svg></div>
1829            <div><strong style="font-family:'Geist',sans-serif;font-size:0.88rem;font-weight:600;color:#0A0A0A;display:block;margin-bottom:4px;">Hallucinations under pressure</strong><span style="font-family:'Geist',sans-serif;font-size:0.875rem;color:#525252;line-height:1.6;">At 3 a.m., ambiguous SOP, angry customer. The model fabricates policy to resolve the conversation. Faster, not safer.</span></div>
1830          </div>
1831          <div style="display:flex;gap:0.85rem;align-items:flex-start;">
1832            <div style="width:22px;height:22px;border-radius:6px;background:#FAFAFA;border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;"><svg width="10" height="10" fill="none" viewBox="0 0 14 14"><path d="M2 2l10 10M12 2L2 12" stroke="#C44B5C" stroke-width="1.8" stroke-linecap="round"/></svg></div>
1833            <div><strong style="font-family:'Geist',sans-serif;font-size:0.88rem;font-weight:600;color:#0A0A0A;display:block;margin-bottom:4px;">Post-hoc, not pre-action</strong><span style="font-family:'Geist',sans-serif;font-size:0.875rem;color:#525252;line-height:1.6;">Logs are what auditors read after a six-figure dispute. A Decision Gate intercepts before the bad decision commits.</span></div>
1834          </div>
1835        </div>
1836      </div>
1837      <!-- Right: Navedas Decision Gate -->
1838      <div style="background:#0A0A0A;border:1px solid #0A0A0A;border-radius:14px;padding:2rem;color:#FFFFFF;">
1839        <div style="display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:0.66rem;font-weight:600;color:#FFFFFF;letter-spacing:0.14em;text-transform:uppercase;padding:6px 12px;border:1px solid rgba(255,255,255,0.18);border-radius:100px;margin-bottom:1.75rem;">
1840          <span style="width:6px;height:6px;border-radius:50%;background:#7FD1B5;"></span>
1841          Navedas Decision Gate
1842        </div>
1843        <div style="display:flex;flex-direction:column;gap:1rem;">
1844          <div style="display:flex;gap:0.85rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,0.1);">
1845            <div style="width:22px;height:22px;border-radius:6px;background:rgba(127,209,181,0.12);border:1px solid rgba(127,209,181,0.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;"><svg width="10" height="10" fill="none" viewBox="0 0 14 14"><path d="M2 7l3.5 3.5L12 3" stroke="#7FD1B5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1846            <div><strong style="font-family:'Geist',sans-serif;font-size:0.88rem;font-weight:600;color:#FFFFFF;display:block;margin-bottom:4px;">Deterministic</strong><span style="font-family:'Geist',sans-serif;font-size:0.875rem;color:rgba(255,255,255,0.75);line-height:1.6;">Each decision traced to a policy node. 99.7% accuracy. No citation, no action.</span></div>
1847          </div>
1848          <div style="display:flex;gap:0.85rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,0.1);">
1849            <div style="width:22px;height:22px;border-radius:6px;background:rgba(127,209,181,0.12);border:1px solid rgba(127,209,181,0.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;"><svg width="10" height="10" fill="none" viewBox="0 0 14 14"><path d="M2 7l3.5 3.5L12 3" stroke="#7FD1B5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1850            <div><strong style="font-family:'Geist',sans-serif;font-size:0.88rem;font-weight:600;color:#FFFFFF;display:block;margin-bottom:4px;">Human + AI unified</strong><span style="font-family:'Geist',sans-serif;font-size:0.875rem;color:rgba(255,255,255,0.75);line-height:1.6;">One engine for bots, agents, fulfillment, and compliance. Same rules. Same trace.</span></div>
1851          </div>
1852          <div style="display:flex;gap:0.85rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,0.1);">
1853            <div style="width:22px;height:22px;border-radius:6px;background:rgba(127,209,181,0.12);border:1px solid rgba(127,209,181,0.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;"><svg width="10" height="10" fill="none" viewBox="0 0 14 14"><path d="M2 7l3.5 3.5L12 3" stroke="#7FD1B5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1854            <div><strong style="font-family:'Geist',sans-serif;font-size:0.88rem;font-weight:600;color:#FFFFFF;display:block;margin-bottom:4px;">Reasoning Ledger</strong><span style="font-family:'Geist',sans-serif;font-size:0.875rem;color:rgba(255,255,255,0.75);line-height:1.6;">Every verdict cites rule, section, clause. Auditor answers in seconds.</span></div>
1855          </div>
1856          <div style="display:flex;gap:0.85rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,0.1);">
1857            <div style="width:22px;height:22px;border-radius:6px;background:rgba(127,209,181,0.12);border:1px solid rgba(127,209,181,0.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;"><svg width="10" height="10" fill="none" viewBox="0 0 14 14"><path d="M2 7l3.5 3.5L12 3" stroke="#7FD1B5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1858            <div><strong style="font-family:'Geist',sans-serif;font-size:0.88rem;font-weight:600;color:#FFFFFF;display:block;margin-bottom:4px;">Context Graph</strong><span style="font-family:'Geist',sans-serif;font-size:0.875rem;color:rgba(255,255,255,0.75);line-height:1.6;">SOPs converted into a live, enforceable policy graph with vector embeddings. Not keyword matching.</span></div>
1859          </div>
1860          <div style="display:flex;gap:0.85rem;align-items:flex-start;">
1861            <div style="width:22px;height:22px;border-radius:6px;background:rgba(127,209,181,0.12);border:1px solid rgba(127,209,181,0.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;"><svg width="10" height="10" fill="none" viewBox="0 0 14 14"><path d="M2 7l3.5 3.5L12 3" stroke="#7FD1B5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1862            <div><strong style="font-family:'Geist',sans-serif;font-size:0.88rem;font-weight:600;color:#FFFFFF;display:block;margin-bottom:4px;">Compounding intelligence</strong><span style="font-family:'Geist',sans-serif;font-size:0.875rem;color:rgba(255,255,255,0.75);line-height:1.6;">Every verified resolution becomes a precedent. The engine learns your playbook.</span></div>
1863          </div>
1864        </div>
1865      </div>
1866    </div>
1867  </div>
1868</section>
1869
1870<!-- ═══════════════════════════════════════════════════════
1871     ENGAGEMENT ≠ SUBSCRIPTION (Type 2 category claim)
1872════════════════════════════════════════════════════════ -->
1873<section style="padding:5rem 0;background:#FAFAFA;">
1874  <div style="max-width:1180px;margin:0 auto;padding:0 2rem;">
1875    <div class="fade-up" style="text-align:center;margin-bottom:3.5rem;">
1876      <div style="display:inline-flex;align-items:center;gap:10px;font-family:'Geist Mono',monospace;font-size:0.72rem;font-weight:600;color:#525252;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:1.25rem;">
1877        <span style="width:6px;height:6px;border-radius:50%;background:#604289;"></span>
1878        Engagement &ne; Subscription
1879      </div>
1880      <h2 style="font-family:'Geist',sans-serif;font-size:clamp(2rem,3.8vw,3rem);font-weight:600;color:#0A0A0A;letter-spacing:-0.035em;line-height:1.05;margin:0 0 1.25rem;">This isn't a SaaS subscription.<br>It's <span style="color:#A3A3A3;">an engineering engagement.</span></h2>
1881      <p style="font-family:'Geist',sans-serif;font-size:1.04rem;color:#525252;max-width:560px;margin:0 auto;line-height:1.6;">How a vendor relationship with Navedas differs from buying SaaS.</p>
1882    </div>
1883    <div class="fade-up" style="display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;">
1884
1885      <!-- Left: SaaS subscription model -->
1886      <div style="background:#FFFFFF;border:1px solid #E5E5E5;border-radius:14px;padding:2rem;">
1887        <div style="display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:0.66rem;font-weight:600;color:#525252;letter-spacing:0.14em;text-transform:uppercase;padding:6px 12px;border:1px solid #E5E5E5;border-radius:100px;margin-bottom:1.75rem;">
1888          <span style="width:6px;height:6px;border-radius:50%;background:#C44B5C;"></span>
1889          The SaaS subscription model
1890        </div>
1891        <div style="display:flex;flex-direction:column;gap:1rem;">
1892          <div style="display:flex;gap:0.85rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid #F0F0F0;">
1893            <div style="width:22px;height:22px;border-radius:6px;background:#FAFAFA;border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;"><svg width="10" height="10" fill="none" viewBox="0 0 14 14"><path d="M2 2l10 10M12 2L2 12" stroke="#C44B5C" stroke-width="1.8" stroke-linecap="round"/></svg></div>
1894            <div><strong style="font-family:'Geist',sans-serif;font-size:0.88rem;font-weight:600;color:#0A0A0A;display:block;margin-bottom:4px;">You configure their platform</strong><span style="font-family:'Geist',sans-serif;font-size:0.875rem;color:#525252;line-height:1.6;">Pre-built features and templates. Your operation bends to fit the tool.</span></div>
1895          </div>
1896          <div style="display:flex;gap:0.85rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid #F0F0F0;">
1897            <div style="width:22px;height:22px;border-radius:6px;background:#FAFAFA;border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;"><svg width="10" height="10" fill="none" viewBox="0 0 14 14"><path d="M2 2l10 10M12 2L2 12" stroke="#C44B5C" stroke-width="1.8" stroke-linecap="round"/></svg></div>
1898            <div><strong style="font-family:'Geist',sans-serif;font-size:0.88rem;font-weight:600;color:#0A0A0A;display:block;margin-bottom:4px;">Onboarding via documentation</strong><span style="font-family:'Geist',sans-serif;font-size:0.875rem;color:#525252;line-height:1.6;">Solutions engineers schedule calls. Your team self-serves the rest.</span></div>
1899          </div>
1900          <div style="display:flex;gap:0.85rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid #F0F0F0;">
1901            <div style="width:22px;height:22px;border-radius:6px;background:#FAFAFA;border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;"><svg width="10" height="10" fill="none" viewBox="0 0 14 14"><path d="M2 2l10 10M12 2L2 12" stroke="#C44B5C" stroke-width="1.8" stroke-linecap="round"/></svg></div>
1902            <div><strong style="font-family:'Geist',sans-serif;font-size:0.88rem;font-weight:600;color:#0A0A0A;display:block;margin-bottom:4px;">Your data flows to their infrastructure</strong><span style="font-family:'Geist',sans-serif;font-size:0.875rem;color:#525252;line-height:1.6;">Tickets, transcripts, PII, customer records. All on a tenant in their VPC.</span></div>
1903          </div>
1904          <div style="display:flex;gap:0.85rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid #F0F0F0;">
1905            <div style="width:22px;height:22px;border-radius:6px;background:#FAFAFA;border:1px solid #E5E5E5;
1905display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;"><svg width="10" height="10" fill="none" viewBox="0 0 14 14"><path d="M2 2l10 10M12 2L2 12" stroke="#C44B5C" stroke-width="1.8" stroke-linecap="round"/></svg></div>
1906            <div><strong style="font-family:'Geist',sans-serif;font-size:0.88rem;font-weight:600;color:#0A0A0A;display:block;margin-bottom:4px;">Renewal equals continued access</strong><span style="font-family:'Geist',sans-serif;font-size:0.875rem;color:#525252;line-height:1.6;">Stop paying, lose the product. You own nothing at the end.</span></div>
1907          </div>
1908          <div style="display:flex;gap:0.85rem;align-items:flex-start;">
1909            <div style="width:22px;height:22px;border-radius:6px;background:#FAFAFA;border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;"><svg width="10" height="10" fill="none" viewBox="0 0 14 14"><path d="M2 2l10 10M12 2L2 12" stroke="#C44B5C" stroke-width="1.8" stroke-linecap="round"/></svg></div>
1910            <div><strong style="font-family:'Geist',sans-serif;font-size:0.88rem;font-weight:600;color:#0A0A0A;display:block;margin-bottom:4px;">Generic policy templates</strong><span style="font-family:'Geist',sans-serif;font-size:0.875rem;color:#525252;line-height:1.6;">Industry-standard playbooks. Your actual SOPs sit in a side document the model never reads.</span></div>
1911          </div>
1912        </div>
1913      </div>
1914
1915      <!-- Right: Navedas engagement model -->
1916      <div style="background:#0A0A0A;border:1px solid #0A0A0A;border-radius:14px;padding:2rem;color:#FFFFFF;">
1917        <div style="display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:0.66rem;font-weight:600;color:#FFFFFF;letter-spacing:0.14em;text-transform:uppercase;padding:6px 12px;border:1px solid rgba(255,255,255,0.18);border-radius:100px;margin-bottom:1.75rem;">
1918          <span style="width:6px;height:6px;border-radius:50%;background:#B89BD4;"></span>
1919          The Navedas engagement model
1920        </div>
1921        <div style="display:flex;flex-direction:column;gap:1rem;">
1922          <div style="display:flex;gap:0.85rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,0.1);">
1923            <div style="width:22px;height:22px;border-radius:6px;background:rgba(184,155,212,0.14);border:1px solid rgba(184,155,212,0.28);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;"><svg width="10" height="10" fill="none" viewBox="0 0 14 14"><path d="M2 7l3.5 3.5L12 3" stroke="#B89BD4" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1924            <div><strong style="font-family:'Geist',sans-serif;font-size:0.88rem;font-weight:600;color:#FFFFFF;display:block;margin-bottom:4px;">We build yours</strong><span style="font-family:'Geist',sans-serif;font-size:0.875rem;color:rgba(255,255,255,0.75);line-height:1.6;">No pre-built tool to fit into. The AI gets built around your policies, your data, your operation.</span></div>
1925          </div>
1926          <div style="display:flex;gap:0.85rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,0.1);">
1927            <div style="width:22px;height:22px;border-radius:6px;background:rgba(184,155,212,0.14);border:1px solid rgba(184,155,212,0.28);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;"><svg width="10" height="10" fill="none" viewBox="0 0 14 14"><path d="M2 7l3.5 3.5L12 3" stroke="#B89BD4" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1928            <div><strong style="font-family:'Geist',sans-serif;font-size:0.88rem;font-weight:600;color:#FFFFFF;display:block;margin-bottom:4px;">Engineers embedded in your operation</strong><span style="font-family:'Geist',sans-serif;font-size:0.875rem;color:rgba(255,255,255,0.75);line-height:1.6;">Two FDEs onsite, hybrid, or remote based on your data residency rules. Not a CSM. Not a partner referral.</span></div>
1929          </div>
1930          <div style="display:flex;gap:0.85rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,0.1);">
1931            <div style="width:22px;height:22px;border-radius:6px;background:rgba(184,155,212,0.14);border:1px solid rgba(184,155,212,0.28);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;"><svg width="10" height="10" fill="none" viewBox="0 0 14 14"><path d="M2 7l3.5 3.5L12 3" stroke="#B89BD4" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1932            <div><strong style="font-family:'Geist',sans-serif;font-size:0.88rem;font-weight:600;color:#FFFFFF;display:block;margin-bottom:4px;">The AI runs in your VPC</strong><span style="font-family:'Geist',sans-serif;font-size:0.875rem;color:rgba(255,255,255,0.75);line-height:1.6;">Onshore-only deployment available for HIPAA, FedRAMP, and EU-sovereignty workloads. You own it.</span></div>
1933          </div>
1934          <div style="display:flex;gap:0.85rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,0.1);">
1935            <div style="width:22px;height:22px;border-radius:6px;background:rgba(184,155,212,0.14);border:1px solid rgba(184,155,212,0.28);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;"><svg width="10" height="10" fill="none" viewBox="0 0 14 14"><path d="M2 7l3.5 3.5L12 3" stroke="#B89BD4" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1936            <div><strong style="font-family:'Geist',sans-serif;font-size:0.88rem;font-weight:600;color:#FFFFFF;display:block;margin-bottom:4px;">Renewal equals continued engineering</strong><span style="font-family:'Geist',sans-serif;font-size:0.875rem;color:rgba(255,255,255,0.75);line-height:1.6;">Stop the engagement and you still own the AI. The engine is yours, the policies are yours, the Operator Console is yours.</span></div>
1937          </div>
1938          <div style="display:flex;gap:0.85rem;align-items:flex-start;">
1939            <div style="width:22px;height:22px;border-radius:6px;background:rgba(184,155,212,0.14);border:1px solid rgba(184,155,212,0.28);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;"><svg width="10" height="10" fill="none" viewBox="0 0 14 14"><path d="M2 7l3.5 3.5L12 3" stroke="#B89BD4" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
1940            <div><strong style="font-family:'Geist',sans-serif;font-size:0.88rem;font-weight:600;color:#FFFFFF;display:block;margin-bottom:4px;">Your actual policies, encoded</strong><span style="font-family:'Geist',sans-serif;font-size:0.875rem;color:rgba(255,255,255,0.75);line-height:1.6;">SOPs converted into a live policy graph. Auditor reads the same node the AI cited.</span></div>
1941          </div>
1942        </div>
1943      </div>
1944
1945    </div>
1946  </div>
1947</section>
1948
1949<!-- ═══════════════════════════════════════════════════════
1950     MID-PAGE $500 AUDIT INVITATION (T7 — second touch-point)
1951════════════════════════════════════════════════════════ -->
1952<section style="padding:3.5rem 0;background:#FCFAF4;border-top:1px solid #E5DFD0;border-bottom:1px solid #E5DFD0;">
1953  <div class="max-w-7xl mx-auto px-6 lg:px-8" style="text-align:center;">
1954    <p style="font-family:'Source Serif 4','Source Serif Pro',Georgia,serif;font-size:clamp(1.4rem,2.4vw,2rem);font-style:italic;color:#1A1714;line-height:1.4;max-width:680px;margin:0 auto 1.5rem;">
1955      See the leak before you commit. Send 1,000 tickets. 48 hours. $25K minimum or your money back.
1956    </p>
1957    <a href="/exposure-calculator" style="display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:#0A0A0A;color:#fff;border-radius:100px;font-family:'Geist',sans-serif;font-size:0.95rem;font-weight:700;text-decoration:none;">
1958      Start your $500 audit
1959      <span style="font-family:'Geist Mono',monospace;font-size:0.78rem;opacity:0.7;">→</span>
1960    </a>
1961  </div>
1962</section>
1963
1964
1965<!-- ═══════════════════════════════════════════════════════
1966     MULTI-MODEL DECISION GATE & INTERCEPTION PROXY
1967════════════════════════════════════════════════════════ -->
1968<section id="multi-model-gate" class="section-dark" style="padding:5.5rem 0;background:#0A0A0A;border-bottom:1px solid rgba(255,255,255,0.08);">
1969  <style>
1970    #multi-model-gate .mmg-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:start;margin-bottom:3rem;}
1971    #multi-model-gate .mmg-metric{border:1px solid rgba(255,255,255,0.14);border-radius:12px;padding:1.4rem 1.5rem;background:rgba(255,255,255,0.03);}
1972    #multi-model-gate .mmg-tabbtn{font-family:'Geist Mono',monospace;font-size:0.68rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.45);background:none;border:none;border-bottom:2px solid transparent;padding:10px 4px;cursor:pointer;transition:color .15s,border-color .15s;}
1973    #multi-model-gate .mmg-tabbtn:hover{color:rgba(255,255,255,0.8);}
1974    #multi-model-gate .mmg-tabbtn[aria-selected="true"]{color:#FAF7EE;border-bottom-color:#B89BD4;}
1975    #multi-model-gate .mmg-panel{display:none;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);border-radius:0 12px 12px 12px;padding:1.5rem 1.6rem;overflow-x:auto;}
1976    #multi-model-gate .mmg-panel.active{display:block;}
1977    #multi-model-gate .mmg-panel pre{margin:0;font-family:'Geist Mono',ui-monospace,monospace;font-size:0.78rem;line-height:1.65;color:rgba(250,247,238,0.85);white-space:pre;}
1978    #multi-model-gate .mmg-k{color:#B89BD4;}
1979    #multi-model-gate .mmg-s{color:#EFE9DC;}
1980    #multi-model-gate .mmg-n{color:#8FBCDB;}
1981    #multi-model-gate .mmg-c{color:rgba(255,255,255,0.38);}
1982    #multi-model-gate .mmg-pass{color:#34D399;font-weight:700;}
1983    #multi-model-gate .mmg-block{color:#F87171;font-weight:700;}
1984    @media(max-width:860px){#multi-model-gate .mmg-grid{grid-template-columns:1fr;gap:2rem;}}
1985    #multi-model-gate .mmg-arch{display:grid;grid-template-columns:1fr auto 1.35fr;gap:0;align-items:stretch;}
1986    #multi-model-gate .mmg-node{border:1px solid rgba(255,255,255,0.18);border-radius:12px;padding:1.2rem 1.3rem;background:rgba(255,255,255,0.03);}
1987    #multi-model-gate .mmg-node-title{font-family:'Geist Mono',monospace;font-size:0.66rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#FAF7EE;margin-bottom:0.7rem;}
1988    #multi-model-gate .mmg-node-sub{font-family:'Geist Mono',monospace;font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;color:rgba(250,247,238,0.45);margin:-0.45rem 0 0.7rem;}
1989    #multi-model-gate .mmg-route{font-family:'Geist Mono',monospace;font-size:0.74rem;color:rgba(250,247,238,0.72);padding:5px 9px;border:1px solid rgba(255,255,255,0.12);border-radius:7px;margin-bottom:6px;background:rgba(255,255,255,0.03);}
1990    #multi-model-gate .mmg-step{display:flex;gap:9px;align-items:baseline;font-family:'Geist',sans-serif;font-size:0.85rem;color:rgba(250,247,238,0.78);margin-bottom:7px;line-height:1.45;}
1991    #multi-model-gate .mmg-step b{font-family:'Geist Mono',monospace;font-size:0.7rem;color:#B89BD4;flex-shrink:0;}
1992    #multi-model-gate .mmg-wire{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 1.1rem;gap:6px;}
1993    #multi-model-gate .mmg-wire-lbl{font-family:'Geist Mono',monospace;font-size:0.6rem;letter-spacing:0.14em;color:rgba(250,247,238,0.4);}
1994    #multi-model-gate .mmg-wire-arrow{color:#B89BD4;font-size:1.1rem;line-height:1;}
1995    #multi-model-gate .mmg-outcomes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}
1996    #multi-model-gate .mmg-outcome{border-radius:12px;padding:1rem 1.2rem;border:1px solid rgba(255,255,255,0.12);}
1997    #multi-model-gate .mmg-outcome .mmg-verdict{font-family:'Geist Mono',monospace;font-size:0.72rem;font-weight:700;letter-spacing:0.1em;margin-bottom:0.4rem;}
1998    #multi-model-gate .mmg-outcome p{font-family:'Geist',sans-serif;font-size:0.83rem;color:rgba(250,247,238,0.65);line-height:1.55;margin:0;}
1999    #multi-model-gate .mmg-outcome.pass{border-color:rgba(52,211,153,0.35);background:rgba(52,211,153,0.06);}
2000    #multi-model-gate .mmg-outcome.blocked{border-color:rgba(248,113,113,0.35);background:rgba(248,113,113,0.06);}
2001    #multi-model-gate .mmg-fork{display:flex;justify-content:center;gap:0;margin-top:10px;}
2002    #multi-model-gate .mmg-fork span{color:rgba(250,247,238,0.35);font-size:1rem;}
2003    @media(max-width:720px){
2004      #multi-model-gate .mmg-arch{grid-template-columns:1fr;}
2005      #multi-model-gate .mmg-wire{flex-direction:row;padding:0.8rem 0;}
2006      #multi-model-gate .mmg-wire-arrow{transform:rotate(90deg);}
2007      #multi-model-gate .mmg-outcomes{grid-template-columns:1fr;}
2008      #multi-model-gate .mmg-fork .mmg-fork-two{display:none;}
2009      #multi-model-gate .mmg-fork .mmg-fork-one{display:inline !important;}
2010    }
2011    #multi-model-gate .mmg-prompt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
2012    #multi-model-gate .mmg-prompt-block{border:1px solid rgba(255,255,255,0.14);border-radius:10px;padding:1rem 1.1rem;background:rgba(255,255,255,0.02);overflow-x:auto;}
2013    #multi-model-gate .mmg-prompt-lbl{font-family:'Geist Mono',monospace;font-size:0.62rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#B89BD4;margin-bottom:0.7rem;}
2014    #multi-model-gate .mmg-prompt-block pre{font-size:0.73rem;}
2015    @media(max-width:860px){#multi-model-gate .mmg-prompt-grid{grid-template-columns:1fr;}}
2016    @media(max-width:560px){
2017      #multi-model-gate [role="tablist"]{gap:0.9rem;flex-wrap:wrap;}
2018      #multi-model-gate .mmg-tabbtn{font-size:0.62rem;padding:8px 2px;}
2019      #multi-model-gate .mmg-panel{padding:1.1rem 1rem;border-radius:0 0 12px 12px;}
2020      #multi-model-gate .mmg-metric{padding:1.1rem 1.2rem;}
2021    }
2022  </style>
2023  <div class="max-w-7xl mx-auto px-6 lg:px-8">
2024
2025    <div class="fade-up" style="margin-bottom:3rem;">
2026      <div style="display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:#B89BD4;font-weight:700;background:rgba(184,155,212,0.10);border:1px solid rgba(184,155,212,0.28);padding:6px 12px;border-radius:100px;margin-bottom:1.75rem;">
2027        ● Model-agnostic · Private AI ready
2028      </div>
2029      <h2 style="font-family:'Source Serif 4','Source Serif Pro',Georgia,serif;font-size:clamp(1.9rem,4vw,2.7rem);font-weight:600;color:#FAF7EE;letter-spacing:-0.02em;line-height:1.15;margin:0;max-width:720px;">
2030        Multi-Model Decision Gate<br><span style="color:rgba(250,247,238,0.55);">&amp; Interception Proxy.</span>
2031      </h2>
2032    </div>
2033
2034    <div class="mmg-grid fade-up">
2035      <p style="font-family:'Geist',sans-serif;font-size:1.08rem;line-height:1.75;color:rgba(250,247,238,0.8);margin:0;max-width:56ch;">
2036        Route operations dynamically across OpenAI, Anthropic, private on-prem models, or your own fine-tunes without fracturing your corporate governance. Navedas acts as a stateless, high-speed interception layer: catching prompts and evaluating agent outputs against your deterministic policy graph before payloads reach a customer or database. Swap the model. Keep the rules. The Gate does not care which brain wrote the output, only whether the output can cite its authority. And because the proxy is stateless, it runs wherever your models do: cloud, VPC, or fully on-prem, so regulated workloads never leave your boundary.
2037      </p>
2038      <div style="display:flex;flex-direction:column;gap:14px;">
2039        <div class="mmg-metric">
2040          <div style="font-family:'Geist Mono',monospace;font-size:1.7rem;font-weight:700;color:#FAF7EE;letter-spacing:-0.02em;">0ms</div>
2041          <div style="font-family:'Geist',sans-serif;font-size:0.82rem;color:rgba(250,247,238,0.6);margin-top:4px;">Infrastructure lock-in. The proxy fronts any provider; switching models is a routing change, not a re-platform.</div>
2042        </div>
2043        <div class="mmg-metric">
2044          <div style="font-family:'Geist Mono',monospace;font-size:1.15rem;font-weight:700;color:#FAF7EE;letter-spacing:0.01em;">US 11,748,414</div>
2045          <div style="font-family:'Geist',sans-serif;font-size:0.82rem;color:rgba(250,247,238,0.6);margin-top:4px;">Patented inference evaluation. Granted 2023, active until 2042.</div>
2046        </div>
2047        <div class="mmg-metric">
2048          <div style="font-family:'Geist Mono',monospace;font-size:1.7rem;font-weight:700;color:#FAF7EE;letter-spacing:-0.02em;">100%</div>
2049          <div style="font-family:'Geist',sans-serif;font-size:0.82rem;color:rgba(250,247,238,0.6);margin-top:4px;">In your boundary. Gate and models deploy cloud, VPC, or fully on-prem for private AI and regulated workloads.</div>
2050        </div>
2051      </div>
2052    </div>
2053
2054    <div class="fade-up">
2055      <div role="tablist" aria-label="Multi-model architecture demo" style="display:flex;gap:1.5rem;border-bottom:1px solid rgba(255,255,255,0.12);margin-bottom:0;">
2056        <button class="mmg-tabbtn" role="tab" id="mmg-tab-arch" aria-selected="true" aria-controls="mmg-panel-arch">[ Architecture ]</button>
2057        <button class="mmg-tabbtn" role="tab" id="mmg-tab-prompt" aria-selected="false" aria-controls="mmg-panel-prompt">[ System Prompt ]</button>
2058        <button class="mmg-tabbtn" role="tab" id="mmg-tab-ledger" aria-selected="false" aria-controls="mmg-panel-ledger">[ JSON Ledger Payload ]</button>
2059      </div>
2060
2061      <div class="mmg-panel active" id="mmg-panel-arch" role="tabpanel" aria-labelledby="mmg-tab-arch">
2062        <div class="mmg-arch">
2063          <div class="mmg-node">
2064            <div class="mmg-node-title">App UI / Model Router</div>
2065            <div class="mmg-route">openai/gpt-5.2</div>
2066            <div class="mmg-route">anthropic/sonnet-5</div>
2067            <div class="mmg-route">internal/ft-support</div>
2068            <div class="mmg-route">onprem/private-llm</div>
2069          </div>
2070          <div class="mmg-wire" aria-hidden="true">
2071            <span class="mmg-wire-lbl">HTTPS</span>
2072            <span class="mmg-wire-arrow">&#10230;</span>
2073          </div>
2074          <div class="mmg-node" style="border-color:rgba(184,155,212,0.4);">
2075            <div class="mmg-node-title" style="color:#B89BD4;">Navedas Decision Gate Proxy</div>
2076            <div class="mmg-node-sub">stateless &middot; in your VPC</div>
2077            <div class="mmg-step"><b>01</b><span>Intercept prompt and output</span></div>
2078            <div class="mmg-step"><b>02</b><span>Evaluate against the policy graph</span></div>
2079            <div class="mmg-step"><b>03</b><span>Stamp the Reasoning Ledger</span></div>
2080          </div>
2081        </div>
2082        <div class="mmg-fork" aria-hidden="true"><span class="mmg-fork-two">&#8595;&nbsp;&nbsp;&nbsp;&nbsp;&#8595;</span><span class="mmg-fork-one" style="display:none;">&#8595;</span></div>
2083        <div class="mmg-outcomes">
2084          <div class="mmg-outcome pass">
2085            <div class="mmg-verdict mmg-pass">&#10003; COMPLIANT OUTPUT</div>
2086            <p>Passed to the customer with the citation attached.</p>
2087          </div>
2088          <div class="mmg-outcome blocked">
2089            <div class="mmg-verdict mmg-block">&#10007; VIOLATION</div>
2090            <p>Blocked before delivery. Escalated to an operator.</p>
2091          </div>
2092        </div>
2093      </div>
2094
2095      <div class="mmg-panel" id="mmg-panel-prompt" role="tabpanel" aria-labelledby="mmg-tab-prompt">
2096        <div class="mmg-prompt-grid">
2097          <div class="mmg-prompt-block">
2098            <div class="mmg-prompt-lbl">1 · Injected directive</div>
2099<pre><span class="mmg-c"># Added by the Gate to every
2100# routed model, any provider.</span>
2101<span class="mmg-k">SYSTEM</span>
2102You are operating behind the
2103Navedas Decision Gate. Every
2104response that proposes an
2105action MUST end with a policy
2106citation block.</pre>
2107          </div>
2108          <div class="mmg-prompt-block">
2109            <div class="mmg-prompt-lbl">2 · Citation format</div>
2110<pre><span class="mmg-k">[POLICY_CITATION]</span>
2111<span class="mmg-k">nodes:</span>  <span class="mmg-s">&lt;policy_node_ids&gt;</span>
2112<span class="mmg-k">clause:</span> <span class="mmg-s">&lt;verbatim reference&gt;</span>
2113<span class="mmg-k">confidence:</span> <span class="mmg-n">&lt;0.00–1.00&gt;</span>
2114<span class="mmg-k">[/POLICY_CITATION]</span>
2115
2116<span class="mmg-c"># Node IDs must come from
2117# tools.policy_lookup().</span></pre>
2118          </div>
2119          <div class="mmg-prompt-block">
2120            <div class="mmg-prompt-lbl">3 · Rules &amp; enforcement</div>
2121<pre>1. No applicable node?
2122   Do not answer. Return
2123   <span class="mmg-s">ACTION_ESCALATE</span>.
21242. Never exceed the cap in
2125   the cited node.
2126
2127<span class="mmg-c"># Responses without a parseable
2128# block are dropped by the Gate.
2129# No citation, no output.</span></pre>
2130          </div>
2131        </div>
2132      </div>
2133
2134      <div class="mmg-panel" id="mmg-panel-ledger" role="tabpanel" aria-labelledby="mmg-tab-ledger">
2135<pre>{
2136  <span class="mmg-k">"ledger_id"</span>: <span class="mmg-s">"LGR-2026-081432"</span>,
2137  <span class="mmg-k">"timestamp"</span>: <span class="mmg-s">"2026-07-31T14:02:11Z"</span>,
2138  <span class="mmg-k">"model_route"</span>: <span class="mmg-s">"anthropic/sonnet-5"</span>,
2139  <span class="mmg-k">"decision"</span>: <span class="mmg-s">"REFUND_PARTIAL"</span>,
2140  <span class="mmg-k">"verdict"</span>: <span class="mmg-s">"APPROVED"</span>,
2141  <span class="mmg-k">"reasoning_pathway"</span>: [
2142    <span class="mmg-s">"intent.classify        → refund_request"</span>,
2143    <span class="mmg-s">"policy_lookup          → RETURN-001 §3.2"</span>,
2144    <span class="mmg-s">"window_check           → day 41 of 60 · within window"</span>,
2145    <span class="mmg-s">"amount_check           → $86.00 ≤ $150.00 cap"</span>,
2146    <span class="mmg-s">"precedent_match        → 3 prior approvals, same SKU class"</span>
2147  ],
2148  <span class="mmg-k">"policy_nodes_referenced"</span>: [<span class="mmg-s">"RETURN-001.3.2"</span>, <span class="mmg-s">"CAP-REFUND-B2C"</span>, <span class="mmg-s">"PRECEDENT-8841"</span>],
2149  <span class="mmg-k">"action_required"</span>: <span class="mmg-s">"none"</span>,
2150  <span class="mmg-k">"citation_confidence"</span>: <span class="mmg-n">0.97</span>,
2151  <span class="mmg-k">"ledger_hash"</span>: <span class="mmg-s">"sha256:7f3a…c91e"</span>
2152}</pre>
2153      </div>
2154    </div>
2155
2156  </div>
2157  
2157<script>
2158    (function(){
2159      var tabs = document.querySelectorAll('#multi-model-gate .mmg-tabbtn');
2160      tabs.forEach(function(tab){
2161        tab.addEventListener('click', function(){
2162          tabs.forEach(function(t){
2163            t.setAttribute('aria-selected','false');
2164            document.getElementById(t.getAttribute('aria-controls')).classList.remove('active');
2165          });
2166          tab.setAttribute('aria-selected','true');
2167          document.getElementById(tab.getAttribute('aria-controls')).classList.add('active');
2168        });
2169        tab.addEventListener('keydown', function(e){
2170          if(e.key==='ArrowRight'||e.key==='ArrowLeft'){
2171            var arr=Array.prototype.slice.call(tabs), i=arr.indexOf(tab);
2172            var next=arr[(i+(e.key==='ArrowRight'?1:arr.length-1))%arr.length];
2173            next.focus(); next.click();
2174          }
2175        });
2176      });
2177    })();
2178  </script>
2178
2179</section>
2180
2181<!-- ═══════════════════════════════════════════════════════
2182     NO CITATION, NO OUTPUT
2183════════════════════════════════════════════════════════ -->
2184<section id="promise" style="padding:5.5rem 0 6rem;background:#0A0A0A;">
2185  <div class="max-w-7xl mx-auto px-6 lg:px-8">
2186
2187    <!-- Header -->
2188    <div class="fade-up" style="text-align:center;margin-bottom:4.5rem;">
2189      <div style="display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:#B89BD4;font-weight:700;background:rgba(184,155,212,0.10);border:1px solid rgba(184,155,212,0.28);padding:6px 12px;border-radius:100px;margin-bottom:1.75rem;">
2190        <span style="width:6px;height:6px;border-radius:50%;background:#B89BD4;"></span>
2191        Evidence of Citation
2192      </div>
2193      <h2 style="font-family:'Source Serif 4','Source Serif Pro','Tiempos Headline',Georgia,serif;font-size:clamp(2.4rem,5.2vw,4rem);font-weight:500;color:#FAF7EE;letter-spacing:-0.025em;margin:0 0 1.5rem;line-height:1.04;">
2194        No citation.<br>
2195        <span style="background:linear-gradient(180deg,transparent 0%,transparent 62%,rgba(184,155,212,0.32) 62%,rgba(184,155,212,0.32) 92%,transparent 92%);padding:0 .14em;">No output.</span>
2196      </h2>
2197      <p style="font-family:'Geist',sans-serif;font-size:1.08rem;color:rgba(250,247,238,0.7);max-width:580px;margin:0 auto;line-height:1.65;">
2198        Every verdict traces back to a specific policy line. If the engine can't cite the rule, it doesn't act.
2199      </p>
2200    </div>
2201
2202    <!-- 3 cards — distinct icon families, 01/02/03 numerals, mono citation in card 1 -->
2203    <div class="grid md:grid-cols-3 gap-6 fade-up">
2204
2205      <div class="nv-card-hover" style="position:relative;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-top:1px solid rgba(184,155,212,0.35);border-radius:14px;padding:2.25rem 1.75rem 2rem;">
2206        <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;">
2207          <div style="width:36px;height:36px;border-radius:10px;background:rgba(184,155,212,0.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
2208            <svg width="18" height="18" fill="none" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2L3 7v6c0 5 4 9 9 9s9-4 9-9V7L12 2z" stroke="#B89BD4" stroke-width="1.6" stroke-linejoin="round"/><path d="M9 12l2 2 4-4" stroke="#B89BD4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
2209          </div>
2210          <div style="font-family:'Geist',sans-serif;font-size:1.04rem;font-weight:700;color:#FAF7EE;line-height:1.3;">Your auditor sees the rule</div>
2211        </div>
2212        <div style="font-family:'Geist Mono',monospace;font-size:0.72rem;color:#B89BD4;letter-spacing:-0.005em;margin-bottom:0.5rem;line-height:1.5;">RETURN-001 §3.2 &nbsp;·&nbsp; FRAUD-003 §1.1</div>
2213        <p style="font-family:'Geist',sans-serif;font-size:0.88rem;color:rgba(250,247,238,0.65);line-height:1.6;margin:0;">The exact rule, clause, and subsection behind every decision. Named, not narrated.</p>
2214      </div>
2215
2216      <div class="nv-card-hover" style="position:relative;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-top:1px solid rgba(184,155,212,0.35);border-radius:14px;padding:2.25rem 1.75rem 2rem;">
2217        <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;">
2218          <div style="width:36px;height:36px;border-radius:10px;background:rgba(184,155,212,0.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
2219            <svg width="18" height="18" fill="none" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 016.5 17H20" stroke="#B89BD4" stroke-width="1.6" stroke-linecap="round"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z" stroke="#B89BD4" stroke-width="1.6"/></svg>
2220          </div>
2221          <div style="font-family:'Geist',sans-serif;font-size:1.04rem;font-weight:700;color:#FAF7EE;line-height:1.3;">The Reasoning Ledger answers <em style="font-style:italic;">why</em></div>
2222        </div>
2223        <p style="font-family:'Geist',sans-serif;font-size:0.88rem;color:rgba(250,247,238,0.65);line-height:1.6;margin:0;">An immutable record of who decided, when, why, under which policy. Auditor answers in seconds, not weeks.</p>
2224      </div>
2225
2226      <div class="nv-card-hover" style="position:relative;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-top:1px solid rgba(184,155,212,0.35);border-radius:14px;padding:2.25rem 1.75rem 2rem;">
2227        <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;">
2228          <div style="width:36px;height:36px;border-radius:10px;background:rgba(184,155,212,0.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
2229            <svg width="18" height="18" fill="none" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4" stroke="#B89BD4" stroke-width="1.6"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" stroke="#B89BD4" stroke-width="1.6" stroke-linecap="round"/></svg>
2230          </div>
2231          <div style="font-family:'Geist',sans-serif;font-size:1.04rem;font-weight:700;color:#FAF7EE;line-height:1.3;">Your team makes the call</div>
2232        </div>
2233        <p style="font-family:'Geist',sans-serif;font-size:0.88rem;color:rgba(250,247,238,0.65);line-height:1.6;margin:0;">Navedas surfaces the policy and the governed alternative on one screen. Your people decide, backed by evidence.</p>
2234      </div>
2235
2236    </div>
2237  </div>
2238</section>
2239
2240
2241<!-- ═══════════════════════════════════════════════════════
2242     OPERATOR CONSOLE — Human Authority at the Boundary
2243════════════════════════════════════════════════════════ -->
2244<section id="operator-console" style="padding:5rem 0;background:#FFFFFF;border-top:1px solid #E5E5E5;">
2245  <div class="max-w-7xl mx-auto px-6 lg:px-8">
2246
2247    <div style="display:grid;grid-template-columns:1fr 1fr;gap:5rem;
2247align-items:center;" class="two-col">
2248
2249      <!-- LEFT: Copy -->
2250      <div>
2251        <div style="display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:#604289;font-weight:700;background:rgba(96,66,137,0.08);border:1px solid rgba(96,66,137,0.22);padding:6px 12px;border-radius:100px;margin-bottom:1.5rem;">
2252          <span style="width:6px;height:6px;border-radius:50%;background:#604289;"></span>
2253          Human Authority
2254        </div>
2255        <h2 style="font-family:'Geist',sans-serif;font-size:clamp(2rem,3.8vw,3rem);font-weight:600;color:#0A0A0A;letter-spacing:-0.035em;line-height:1.05;margin:0 0 1.25rem;">Your team doesn't fix typos.<br><span style="color:#A3A3A3;">They authorize exceptions.</span></h2>
2256        <p style="font-family:'Geist',sans-serif;font-size:1.04rem;color:#525252;line-height:1.65;margin:0 0 2rem;">Standard AI uses humans as a backup when the model fails. Navedas inverts that: humans operate at the boundaries of your corporate authority, not as cleanup crew for routine decisions.</p>
2257
2258        <div style="display:flex;flex-direction:column;gap:1rem;">
2259          <div style="display:flex;gap:1rem;align-items:flex-start;">
2260            <div style="width:8px;height:8px;border-radius:50%;background:#604289;flex-shrink:0;margin-top:6px;"></div>
2261            <div>
2262              <div style="font-family:'Geist',sans-serif;font-size:0.92rem;font-weight:700;color:#0A0A0A;margin-bottom:3px;">Policy blind spot</div>
2263              <div style="font-family:'Geist',sans-serif;font-size:0.85rem;color:#525252;line-height:1.55;">The action falls outside any policy in the Context Graph. A human decides whether to extend authority.</div>
2264            </div>
2265          </div>
2266          <div style="display:flex;gap:1rem;align-items:flex-start;">
2267            <div style="width:8px;height:8px;border-radius:50%;background:#604289;flex-shrink:0;margin-top:6px;"></div>
2268            <div>
2269              <div style="font-family:'Geist',sans-serif;font-size:0.92rem;font-weight:700;color:#0A0A0A;margin-bottom:3px;">High-risk threshold</div>
2270              <div style="font-family:'Geist',sans-serif;font-size:0.85rem;color:#525252;line-height:1.55;">The action exceeds a dollar limit you defined: refunds over $500, retention offers over $1K. A human authorizes the exception.</div>
2271            </div>
2272          </div>
2273          <div style="display:flex;gap:1rem;align-items:flex-start;">
2274            <div style="width:8px;height:8px;border-radius:50%;background:#604289;flex-shrink:0;margin-top:6px;"></div>
2275            <div>
2276              <div style="font-family:'Geist',sans-serif;font-size:0.92rem;font-weight:700;color:#0A0A0A;margin-bottom:3px;">Budget exhaustion</div>
2277              <div style="font-family:'Geist',sans-serif;font-size:0.85rem;color:#525252;line-height:1.55;">The agent has reached its per-quarter exposure cap. A human decides whether to extend it. Every decision is stamped to the audit trail.</div>
2278            </div>
2279          </div>
2280        </div>
2281      </div>
2282
2283      <!-- RIGHT: Console mockup -->
2284      <div style="background:#0A0A0A;border-radius:16px;padding:1.75rem;font-family:'Geist Mono',monospace;">
2285        <div style="font-size:0.68rem;font-weight:600;color:#B89BD4;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:1.25rem;">Operator Console · Pending Authorization</div>
2286
2287        <div style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-radius:10px;padding:1.25rem;margin-bottom:1rem;">
2288          <div style="font-size:0.62rem;color:#A3A3A3;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:0.5rem;">Decision Blocked</div>
2289          <div style="font-size:0.88rem;font-weight:600;color:#FAF7EE;margin-bottom:0.35rem;">Refund · $250 · Order #91-4872</div>
2290          <div style="font-size:0.72rem;color:rgba(250,247,238,0.55);line-height:1.5;">Policy RETURN-001 §3.2 — 60-day window. Ticket age: 74 days. Exception required.</div>
2291        </div>
2292
2293        <div style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-radius:10px;padding:1.25rem;margin-bottom:1rem;">
2294          <div style="font-size:0.62rem;color:#A3A3A3;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:0.5rem;">Customer Context</div>
2295          <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;">
2296            <div><div style="font-size:0.62rem;color:#A3A3A3;margin-bottom:2px;">LTV</div><div style="font-size:0.85rem;font-weight:600;color:#FAF7EE;">$14,200</div></div>
2297            <div><div style="font-size:0.62rem;color:#A3A3A3;margin-bottom:2px;">Prior claims</div><div style="font-size:0.85rem;font-weight:600;color:#FAF7EE;">0 of 4 flagged</div></div>
2298            <div><div style="font-size:0.62rem;color:#A3A3A3;margin-bottom:2px;">Tenure</div><div style="font-size:0.85rem;font-weight:600;color:#FAF7EE;">3.2 years</div></div>
2299            <div><div style="font-size:0.62rem;color:#A3A3A3;margin-bottom:2px;">Governed alternative</div><div style="font-size:0.85rem;font-weight:600;color:#B89BD4;">Store credit $250</div></div>
2300          </div>
2301        </div>
2302
2303        <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;">
2304          <button style="background:#604289;color:#fff;border:none;border-radius:8px;padding:10px;font-family:'Geist',sans-serif;font-size:0.82rem;font-weight:700;cursor:pointer;">Authorize Exception</button>
2305          <button style="background:rgba(255,255,255,0.06);color:#FAF7EE;border:1px solid rgba(255,255,255,0.14);border-radius:8px;padding:10px;font-family:'Geist',sans-serif;font-size:0.82rem;font-weight:600;cursor:pointer;">Offer Store Credit</button>
2306        </div>
2307      </div>
2308
2309    </div>
2310  </div>
2311</section>
2312
2313
2314<!-- ═══════════════════════════════════════════════════════
2315     HOW IT WORKS
2316════════════════════════════════════════════════════════ -->
2317<style>
2318  /* HOW IT WORKS — animated connector + node entrance */
2319  @keyframes hiw-node-in {
2320    from { opacity:0; transform:scale(0.5); }
2321    to   { opacity:1; transform:scale(1); }
2322  }
2323  @keyframes hiw-line-draw {
2324    from { width:0; }
2325    to   { width:100%; }
2326  }
2327  @keyframes hiw-card-up {
2328    from { opacity:0; transform:translateY(20px); }
2329    to   { opacity:1; transform:translateY(0); }
2330  }
2331  .hiw-node {
2332    width:56px; height:56px; border-radius:50%;
2333    display:flex; align-items:center; justify-content:center;
2334    opacity:0; position:relative; z-index:2;
2335  }
2336  .hiw-node.hiw-active { animation: hiw-node-in 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards; }
2337  .hiw-line-track {
2338    position:absolute; top:27px; left:calc(16.66%); right:calc(16.66%);
2339    height:2px; background:#E5E5E5; z-index:1; overflow:hidden;
2340  }
2341  .hiw-line-fill {
2342    height:100%; width:0; background:linear-gradient(90deg,#0A0A0A,#3BAA96,#0A0A0A);
2343    border-radius:2px;
2344  }
2345  .hiw-line-fill.hiw-active { animation: hiw-line-draw 0.9s ease-out 0.3s forwards; }
2346  #hiw-wrapper .hiw-card {
2347    background:#FFFFFF; border:1px solid #E5E5E5; border-radius:16px;
2348    padding:2rem; opacity:0;
2349    transition:transform 0.25s ease, box-shadow 0.25s ease;
2350  }
2351  #hiw-wrapper .hiw-card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,0.1); }
2352  #faq details.hiw-card:hover { background:rgba(0,0,0,0.06); border:1.5px solid #525252 !important; box-shadow:0 8px 28px rgba(0,0,0,0.1); transform:translateY(-2px); }
2353  #hiw-wrapper .hiw-card.hiw-active { animation: hiw-card-up 0.5s ease-out forwards; }
2354</style>
2355
2356<!-- ═══════════════════════════════════════════════════════
2357     PULL QUOTE — editorial rhythm break (60vh, giant serif)
2358════════════════════════════════════════════════════════ -->
2359<section id="pullquote" style="background:#FCFAF4;padding:7rem 0;border-top:1px solid #E5DFD0;border-bottom:1px solid #E5DFD0;">
2360  <div class="max-w-7xl mx-auto px-6 lg:px-8" style="text-align:center;">
2361    <div style="font-family:'Geist Mono',monospace;font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;color:#604289;font-weight:600;margin-bottom:1.75rem;">
2362      ● The thesis
2363    </div>
2364    <h2 class="pq-line fade-up" style="font-family:'Source Serif 4','Source Serif Pro',Georgia,serif;font-size:clamp(2.4rem,6.5vw,5.6rem);font-weight:500;line-height:1.05;letter-spacing:-0.03em;color:#1A1714;max-width:1080px;margin:0 auto;">
2365      Six gates. Five seconds.<br>
2366      <span style="background:linear-gradient(180deg,transparent 0%,transparent 62%,rgba(96,66,137,0.28) 62%,rgba(96,66,137,0.28) 92%,transparent 92%);padding:0 .12em;">One verdict.</span>
2367    </h2>
2368    <p class="fade-up" style="transition-delay:0.12s;font-family:'Geist',sans-serif;font-size:1.1rem;color:#4D453A;line-height:1.6;max-width:620px;margin:2.25rem auto 0;">
2369      Every refund, discount, escalation, settlement, checked against your policy graph before the customer sees an answer. No citation, no output.
2370    </p>
2371  </div>
2372</section>
2373
2374<section id="how" style="padding:4rem 0;background:#FAFAFA;">
2375  <div class="max-w-7xl mx-auto px-6 lg:px-8">
2376
2377    <!-- Heading — unchanged -->
2378    <div class="fade-up" style="text-align:center;margin-bottom:4rem;">
2379      <div class="solution-pill" style="margin-bottom:1rem;">How It Works</div>
2380      <h2 style="font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:900;color:#0A0A0A;letter-spacing:-0.03em;margin:0 0 1rem;">
2381        From your SOPs to<br><span style="color:#0A0A0A;">defended decisions in 3 steps</span>
2382      </h2>
2383      <p style="font-size:1.05rem;color:#525252;max-width:520px;margin:0 auto;line-height:1.65;">
2384        50-page SOP → 100+ policy nodes in 48 hours. Live in a week. No infrastructure changes.
2385      </p>
2386    </div>
2387
2388    <div id="hiw-wrapper">
2389      <!-- Node row -->
2390      <div style="position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:0;">
2391        <!-- Connector track -->
2392        <div class="hiw-line-track"><div class="hiw-line-fill" id="hiw-line"></div></div>
2393        <!-- Node 1 — Purple -->
2394        <div style="display:flex;justify-content:center;">
2395          <div class="hiw-node" id="hiw-n1" style="background:linear-gradient(135deg,#0A0A0A,#1A1A1A);box-shadow:0 4px 18px rgba(0,0,0,0.35);">
2396            <svg width="22" height="22" fill="none" viewBox="0 0 24 24"><path d="M4 6h16M4 10h16M4 14h10" stroke="white" stroke-width="1.8" stroke-linecap="round"/></svg>
2397          </div>
2398        </div>
2399        <!-- Node 2 — Teal -->
2400        <div style="display:flex;justify-content:center;">
2401          <div class="hiw-node" id="hiw-n2" style="background:linear-gradient(135deg,#3BAA96,#2D9E88);box-shadow:0 4px 18px rgba(59,170,150,0.35);">
2402            <svg width="22" height="22" fill="none" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="white" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
2403          </div>
2404        </div>
2405        <!-- Node 3 — Dark -->
2406        <div style="display:flex;justify-content:center;">
2407          <div class="hiw-node" id="hiw-n3" style="background:linear-gradient(135deg,#0A0A0A,#4A3060);box-shadow:0 4px 18px rgba(45,32,71,0.35);">
2408            <svg width="22" height="22" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" stroke="white" stroke-width="1.8"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" stroke="white" stroke-width="1.6" stroke-linecap="round"/></svg>
2409          </div>
2410        </div>
2411      </div>
2412
2413      <!-- Cards -->
2414      <div class="stagger-parent" style="display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1.5rem;">
2415
2416        <!-- Step 1 — content unchanged -->
2417        <div class="hiw-card stagger-child" id="hiw-c1">
2418          <div style="font-size:0.65rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#A3A3A3;margin-bottom:0.75rem;">Step 01</div>
2419          <h3 style="font-size:1.05rem;font-weight:800;color:#0A0A0A;margin:0 0 0.65rem;">Build Your Context Graph</h3>
2420          <p style="font-size:0.875rem;color:#525252;line-height:1.7;margin:0 0 1.25rem;">Your SOPs, refund matrices, and escalation trees become a live policy graph, each rule enforceable, citeable, and searchable.</p>
2421          <div style="display:flex;align-items:flex-start;gap:0.5rem;font-size:0.8rem;color:#0A0A0A;font-weight:600;">
2422            <svg width="14" height="14" fill="none" viewBox="0 0 16 16" style="flex-shrink:0;margin-top:2px;"><path d="M3 8h10M9 4l4 4-4 4" stroke="#0A0A0A" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
2423            100+ policy nodes from your documents, ready in 48 hours
2424          </div>
2425        </div>
2426
2427        <!-- Step 2 — content unchanged -->
2428        <div class="hiw-card stagger-child accent-card-teal" id="hiw-c2">
2429          <div style="font-size:0.65rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#A3A3A3;margin-bottom:0.75rem;">Step 02</div>
2430          <h3 style="font-size:1.05rem;font-weight:800;color:#0A0A0A;margin:0 0 0.65rem;">Load Your Precedents</h3>
2431          <p style="font-size:0.875rem;color:#525252;line-height:1.7;margin:0 0 1.25rem;">Your best resolved tickets become precedent nodes linked to the graph. Every new resolution sharpens the engine.</p>
2432          <div style="display:flex;align-items:flex-start;gap:0.5rem;font-size:0.8rem;color:#3BAA96;font-weight:600;">
2433            <svg width="14" height="14" fill="none" viewBox="0 0 16 16" style="flex-shrink:0;margin-top:2px;"><path d="M3 8h10M9 4l4 4-4 4" stroke="#3BAA96" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
2434            After 1,000 tickets, the engine knows your playbook better than your best supervisor
2435          </div>
2436        </div>
2437
2438        <!-- Step 3 — content unchanged -->
2439        <div class="hiw-card stagger-child accent-card-purple" id="hiw-c3">
2440          <div style="font-size:0.65rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#A3A3A3;margin-bottom:0.75rem;">Step 03</div>
2441          <h3 style="font-size:1.05rem;font-weight:800;color:#0A0A0A;margin:0 0 0.65rem;">Govern in Real-Time</h3>
2442          <p style="font-size:0.875rem;color:#525252;line-height:1.7;margin:0 0 1.25rem;">Every interaction flows through the engine. Gates fire, precedents match, verdicts ship. All before the action reaches your customer.</p>
2443          <div style="display:flex;align-items:flex-start;gap:0.5rem;font-size:0.8rem;color:#0A0A0A;font-weight:600;">
2444            <svg width="14" height="14" fill="none" viewBox="0 0 16 16" style="flex-shrink:0;margin-top:2px;"><path d="M3 8h10M9 4l4 4-4 4" stroke="#0A0A0A" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
2445            Sub-second policy decisions on every interaction, 24/7
2446          </div>
2447        </div>
2448
2449      </div>
2450
2451      <!-- Bottom bar -->
2452      <div id="hiw-bar" style="margin-top:2rem;background:#FFFFFF;border:1px solid #E5E5E5;border-radius:14px;padding:1.1rem 2rem;display:flex;justify-content:center;gap:3rem;flex-wrap:wrap;opacity:0;transition:opacity 0.5s ease;">
2453        <div style="display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;color:#525252;">
2454          <div style="width:7px;height:7px;border-radius:50%;background:#0A0A0A;flex-shrink:0;"></div>
2455          50-page SOP → <strong style="color:#0A0A0A;font-weight:700;">&nbsp;100+ policy nodes in 48 hours</strong>
2456        </div>
2457        <div style="display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;color:#525252;">
2458          <div style="width:7px;height:7px;border-radius:50%;background:#3BAA96;flex-shrink:0;"></div>
2459          Live in a week. <strong style="color:#0A0A0A;font-weight:700;">&nbsp;No infrastructure changes</strong>
2460        </div>
2461        <div style="display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;color:#525252;">
2462          <div style="width:7px;height:7px;border-radius:50%;background:#0A0A0A;flex-shrink:0;"></div>
2463          Every decision <strong style="color:#0A0A0A;font-weight:700;">&nbsp;governed before it ships</strong>
2464        </div>
2465      </div>
2466    </div>
2467
2468  </div>
2469</section>
2470
2471<script>
2472(function(){
2473  var fired = false;
2474  var seq = [
2475    {id:'hiw-n1', delay:0},
2476    {id:'hiw-n2', delay:180},
2477    {id:'hiw-n3', delay:360},
2478    {id:'hiw-line', delay:300, cls:'hiw-active'},
2479    {id:'hiw-c1', delay:600},
2480    {id:'hiw-c2', delay:740},
2481    {id:'hiw-c3', delay:880},
2482  ];
2483  function run(){
2484    seq.forEach(function(s){
2485      setTimeout(function(){
2486        var el = document.getElementById(s.id);
2487        if(!el) return;
2488        el.classList.add(s.cls || 'hiw-active');
2489      }, s.delay);
2490    });
2491    setTimeout(function(){
2492      var bar = document.getElementById('hiw-bar');
2493      if(bar) bar.style.opacity = '1';
2494    }, 1100);
2495  }
2496  var wrap = document.getElementById('hiw-wrapper');
2497  if(!wrap) return;
2498  var obs = new IntersectionObserver(function(entries){
2499    if(entries[0].isIntersecting && !fired){
2500      fired = true;
2501      run();
2502      obs.disconnect();
2503    }
2504  },{threshold:0.2});
2505  obs.observe(wrap);
2506})();
2507</script>
2507
2508
2509
2510<!-- ═══════════════════════════════════════════════════════
2511     COMPARISON — YOUR CHATBOT GUARDRAILS AREN'T GOVERNANCE
2512════════════════════════════════════════════════════════ -->
2513<!-- ═══════════════════════════════════════════════════════
2514     INFOGRAPHIC — AI + HUMAN = GOVERNANCE
2515════════════════════════════════════════════════════════ -->
2516<style>
2517  /* Governance infographic nodes */
2518  .gov-node {
2519    background:linear-gradient(135deg,#FFFFFF,#F5F1E8);
2520    border:1px solid #E5E5E5;
2521    border-radius:16px;
2522    padding:1.75rem 1.5rem;
2523    text-align:center;
2524    transition:transform 0.25s ease,box-shadow 0.25s ease;
2525    opacity:0;
2526    transform:translateY(16px);
2527  }
2528  .gov-node:hover {
2529    transform:translateY(-2px);
2530    box-shadow:0 6px 24px rgba(0,0,0,0.1);
2531  }
2532  .gov-engine {
2533    background:#FFFFFF;
2534    border:1.5px solid rgba(0,0,0,0.22);
2535    border-radius:20px;
2536    padding:2.25rem 2rem;
2537    text-align:center;
2538    box-shadow:0 4px 20px rgba(0,0,0,0.12);
2539    position:relative;
2540    overflow:hidden;
2541    transition:transform 0.25s ease,box-shadow 0.25s ease;
2542    opacity:0;
2543    transform:translateY(16px);
2544  }
2545  .gov-engine:hover {
2546    transform:translateY(-2px);
2547    box-shadow:0 8px 28px rgba(0,0,0,0.16);
2548  }
2549  .gov-outcome {
2550    border-radius:14px;
2551    padding:1.25rem 1rem;
2552    text-align:center;
2553    opacity:0;
2554    transform:translateY(12px);
2555    transition:transform 0.25s ease,box-shadow 0.25s ease;
2556  }
2557  .gov-outcome:hover { transform:translateY(-2px); }
2558  /* Connector lines */
2559  .gov-connector {
2560    opacity:0;
2561    transition:opacity 0.4s ease;
2562  }
2563  /* Animated states */
2564  .gov-node.gv-visible    { animation:gvFadeUp 0.5s ease-out forwards; }
2565  .gov-engine.gv-visible  { animation:gvFadeUp 0.5s ease-out forwards; }
2566  .gov-outcome.gv-visible { animation:gvFadeUp 0.45s ease-out forwards; }
2567  .gov-connector.gv-visible { opacity:1; }
2568  @keyframes gvFadeUp {
2569    from { opacity:0; transform:translateY(16px); }
2570    to   { opacity:1; transform:translateY(0); }
2571  }
2572</style>
2573
2574<section id="governance-engine" style="padding:4rem 0 5rem;background:#FAFAFA;">
2575  <div style="max-width:960px;margin:0 auto;padding:0 2rem;">
2576
2577    <!-- Header -->
2578    <div class="fade-up" style="text-align:center;margin-bottom:3.5rem;">
2579      <div class="solution-pill" style="margin-bottom:1rem;">How Governance Works</div>
2580      <h2 style="font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:900;color:#0A0A0A;letter-spacing:-0.03em;margin:0 0 0.75rem;">
2581        AI + Human = <span class="gradient-text">one policy</span>
2582      </h2>
2583      <p style="font-size:1rem;color:#525252;max-width:480px;margin:0 auto;line-height:1.65;">
2584        Every intent, human or AI, flows through one compile-time boundary before it reaches your customer.
2585      </p>
2586    </div>
2587
2588    <!-- New diagram -->
2589    <style>
2590      .nv-flow { font-family:'Geist','Inter',system-ui,sans-serif; }
2591      .nv-flow-group { border-radius:14px; padding:1.25rem 1.25rem 1rem; }
2592      .nv-flow-group-label { font-family:'Geist Mono',monospace; font-size:0.62rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:0.85rem; }
2593      .nv-flow-main-node { border-radius:10px; padding:0.75rem 1rem; text-align:center; font-size:0.88rem; font-weight:700; }
2594      .nv-flow-pills { display:flex; flex-wrap:wrap; justify-content:center; gap:0.4rem; margin-top:0.65rem; }
2595      .nv-flow-pill { font-size:0.68rem; font-weight:500; padding:0.2rem 0.6rem; border-radius:100px; white-space:nowrap; }
2596      .nv-flow-arrow { display:flex; justify-content:center; align-items:center; height:32px; }
2597      .nv-flow-arrow-line { width:1px; height:22px; }
2598      @media(max-width:768px){
2599        .nv-flow-outcomes { grid-template-columns:1fr !important; }
2600        .nv-flow-inputs { grid-template-columns:1fr !important; }
2601        .nv-flow-arrows-3 { grid-template-columns:1fr !important; }
2602      }
2603    </style>
2604
2605    <div class="nv-flow fade-up" id="gov-infographic">
2606
2607      <!-- ROW 1: Three input groups -->
2608      <div class="nv-flow-inputs" style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-bottom:0;">
2609
2610        <!-- Human Judgment -->
2611        <div class="nv-flow-group" style="background:#F5F5F4;border:1px solid #E5E5E5;">
2612          <div class="nv-flow-group-label" style="color:#737373;">Human Judgment</div>
2613          <div class="nv-flow-main-node" style="background:#fff;border:1.5px solid #D4D4D4;color:#0A0A0A;">CRM Manual Override</div>
2614          <div class="nv-flow-pills">
2615            <span class="nv-flow-pill" style="background:#E8E8E8;color:#525252;">Salesforce</span>
2616            <span class="nv-flow-pill" style="background:#E8E8E8;color:#525252;">Zendesk</span>
2617            <span class="nv-flow-pill" style="background:#E8E8E8;color:#525252;">Gladly</span>
2618          </div>
2619        </div>
2620
2621        <!-- AI Execution (restored from previous version) -->
2622        <div class="nv-flow-group" style="background:#F5F5F4;border:1px solid #E5E5E5;">
2623          <div class="nv-flow-group-label" style="color:#737373;">AI Execution</div>
2624          <div class="nv-flow-main-node" style="background:#fff;border:1.5px solid #D4D4D4;color:#0A0A0A;">Bot Action</div>
2625          <div class="nv-flow-pills">
2626            <span class="nv-flow-pill" style="background:#E8E8E8;color:#525252;">Speed</span>
2627            <span class="nv-flow-pill" style="background:#E8E8E8;color:#525252;">Scale</span>
2628          </div>
2629        </div>
2630
2631        <!-- Multi-Agent Runtime -->
2632        <div class="nv-flow-group" style="background:rgba(96,66,137,0.06);border:1px solid rgba(96,66,137,0.22);">
2633          <div class="nv-flow-group-label" style="color:#604289;">Multi-Agent Runtime</div>
2634          <div class="nv-flow-main-node" style="background:#fff;border:1.5px solid rgba(96,66,137,0.28);color:#0A0A0A;">Domain Agent Payload</div>
2635          <div class="nv-flow-pills">
2636            <span class="nv-flow-pill" style="background:rgba(96,66,137,0.1);color:#4A2B7E;">CEO Agent Triage</span>
2637          </div>
2638        </div>
2639
2640      </div>
2641
2642      <!-- Converging arrows (3 columns) -->
2643      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin:0;">
2644        <div class="nv-flow-arrow"><div style="display:flex;flex-direction:column;align-items:center;"><div class="nv-flow-arrow-line" style="background:linear-gradient(180deg,#A3A3A3,#4A2B7E);"></div><svg width="9" height="6" fill="none" viewBox="0 0 9 6"><path d="M1 1l3.5 4L8 1" stroke="#4A2B7E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div></div>
2645        <div class="nv-flow-arrow"><div style="display:flex;flex-direction:column;align-items:center;"><div class="nv-flow-arrow-line" style="background:linear-gradient(180deg,#A3A3A3,#4A2B7E);"></div><svg width="9" height="6" fill="none" viewBox="0 0 9 6"><path d="M1 1l3.5 4L8 1" stroke="#4A2B7E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div></div>
2646        <div class="nv-flow-arrow"><div style="display:flex;flex-direction:column;align-items:center;"><div class="nv-flow-arrow-line" style="background:linear-gradient(180deg,#604289,#4A2B7E);"></div><svg width="9" height="6" fill="none" viewBox="0 0 9 6"><path d="M1 1l3.5 4L8 1" stroke="#4A2B7E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div></div>
2647      </div>
2648
2649      <!-- Decision Engine — brand purple -->
2650      <div class="nv-flow-group" style="background:rgba(74,43,126,0.07);border:2px solid #4A2B7E;text-align:center;">
2651        <div class="nv-flow-group-label" style="color:#4A2B7E;">Decision Engine</div>
2652        <div style="font-size:1rem;font-weight:800;color:#0A0A0A;letter-spacing:-0.02em;margin-bottom:0.2rem;">The Compile-Time Boundary</div>
2653        <div style="font-size:0.85rem;font-weight:700;color:#604289;margin-bottom:0.85rem;font-family:'Geist Mono',monospace;letter-spacing:0.02em;">No Citation. No Output.</div>
2654        <div class="nv-flow-pills" style="justify-content:center;">
2655          <span class="nv-flow-pill" style="background:rgba(74,43,126,0.1);color:#4A2B7E;">Context Graph Eval</span>
2656          <span class="nv-flow-pill" style="background:rgba(74,43,126,0.1);color:#4A2B7E;">Policy-Node Match</span>
2657          <span class="nv-flow-pill" style="background:rgba(74,43,126,0.1);color:#4A2B7E;">Pre-Execution Gate</span>
2658          <span class="nv-flow-pill" style="background:rgba(74,43,126,0.1);color:#4A2B7E;">Reasoning Ledger</span>
2659        </div>
2660      </div>
2661
2662      <!-- Arrow down to outcomes -->
2663      <div class="nv-flow-arrow"><div style="display:flex;flex-direction:column;align-items:center;"><div class="nv-flow-arrow-line" style="background:linear-gradient(180deg,#4A2B7E,#A3A3A3);"></div><svg width="9" height="6" fill="none" viewBox="0 0 9 6"><path d="M1 1l3.5 4L8 1" stroke="#A3A3A3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div></div>
2664
2665      <!-- Outcomes -->
2666      <div class="nv-flow-outcomes" style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.85rem;">
2667
2668        <div class="nv-flow-group" style="background:#E6F4EA;border:2px solid #1E8E3E;text-align:center;">
2669          <div class="nv-flow-group-label" style="color:#1E8E3E;">Approved</div>
2670          <div style="font-size:0.82rem;font-weight:600;color:#1E8E3E;line-height:1.55;">Automated API Writeback<br><span style="font-weight:500;color:#166534;">Ledger Stamped</span></div>
2671        </div>
2672
2673        <div class="nv-flow-group" style="background:#FCE8E6;border:2px solid #D93025;text-align:center;">
2674          <div class="nv-flow-group-label" style="color:#D93025;">Blocked</div>
2675          <div style="font-size:0.82rem;font-weight:600;color:#D93025;line-height:1.55;">Hard Compile-Time Stop<br><span style="font-weight:500;color:#991B1B;">Execution Frozen</span></div>
2676        </div>
2677
2678        <div class="nv-flow-group" style="background:#FEF7E0;border:2px solid #F9AB00;text-align:center;">
2679          <div class="nv-flow-group-label" style="color:#B45309;">Escalated</div>
2680          <div style="font-size:0.82rem;font-weight:600;color:#B45309;line-height:1.55;">Operator Console<br><span style="font-weight:500;color:#92400E;">
2680Strategic Override</span></div>
2681        </div>
2682
2683      </div>
2684
2685    </div><!-- /gov-infographic -->
2686  </div>
2687</section>
2688
2689
2690
2691<!-- ═══════════════════════════════════════════════════════
2692     THE SOLUTION
2693════════════════════════════════════════════════════════ -->
2694
2695
2696<!-- ═══════════════════════════════════════════════════════
2697     WHERE NAVEDAS WORKS
2698════════════════════════════════════════════════════════ -->
2699<section id="where-it-works" style="padding:6rem 0;background:var(--bg);">
2700  <div class="max-w-7xl mx-auto px-6 lg:px-8">
2701
2702    <div class="fade-up" style="text-align:center;margin-bottom:4rem;">
2703      <div class="solution-pill" style="margin-bottom:1rem;">Solutions</div>
2704      <h2 style="font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:900;color:#0A0A0A;letter-spacing:-0.03em;margin:0 0 1rem;">Your workflow. Your policies.<br><span class="gradient-text">One decision engine.</span></h2>
2705      <p style="font-size:1.05rem;color:#525252;max-width:560px;margin:0 auto;line-height:1.65;">CX, fulfillment, compliance. One engine. Every decision traceable.</p>
2706    </div>
2707
2708    <div class="grid md:grid-cols-2 gap-6">
2709
2710      <!-- Card 1: Revenue & Margin Recovery -->
2711      <a href="/solutions/revenue-recovery" class="solution-block fade-up" style="transition-delay:0.05s;position:relative;overflow:hidden;text-decoration:none;display:block;">
2712        <div style="position:absolute;top:0;right:0;width:120px;height:120px;background:radial-gradient(circle,rgba(0,0,0,0.06),transparent 70%);pointer-events:none;"></div>
2713        <div class="sol-icon-wrap" style="background:rgba(0,0,0,0.08);border:1px solid rgba(0,0,0,0.15);">
2714          <svg width="24" height="24" fill="none" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" stroke="#0A0A0A" stroke-width="1.6"/><path d="M8 10s1-2 4-2 4 2 4 2" stroke="#0A0A0A" stroke-width="1.6" stroke-linecap="round"/><path d="M9 15s1 2 3 2 3-2 3-2" stroke="#525252" stroke-width="1.6" stroke-linecap="round"/></svg>
2715        </div>
2716        
2717        <h3 style="font-size:1.2rem;font-weight:800;color:#0A0A0A;margin:0 0 0.75rem;letter-spacing:-0.02em;">Revenue &amp; Margin Recovery</h3>
2718        <p style="font-size:0.92rem;color:#525252;line-height:1.65;margin:0 0 1.25rem;">Settlement drift draining margin silently, caught before it reaches your P&amp;L.</p>
2719        <div style="display:flex;align-items:center;gap:8px;font-size:0.75rem;font-weight:700;color:#0A0A0A;background:rgba(0,0,0,0.06);padding:8px 12px;border-radius:8px;">
2720          <svg width="12" height="12" fill="none"><circle cx="6" cy="6" r="4" stroke="#0A0A0A" stroke-width="1.5"/><path d="M6 4v2l1.5 1.5" stroke="#0A0A0A" stroke-width="1.5" stroke-linecap="round"/></svg>
2721          Every one traced, every one citeable
2722        </div>
2723        <div class="card-arrow">Explore <svg width="14" height="14" fill="none" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
2724      </a>
2725
2726      <!-- Card 2: AI Risk Containment -->
2727      <a href="/solutions/operational-governance" class="solution-block fade-up" style="transition-delay:0.12s;position:relative;overflow:hidden;text-decoration:none;display:block;">
2728        <div style="position:absolute;top:0;right:0;width:120px;height:120px;background:radial-gradient(circle,rgba(59,170,150,0.06),transparent 70%);pointer-events:none;"></div>
2729        <div class="sol-icon-wrap" style="background:rgba(59,170,150,0.08);border:1px solid rgba(59,170,150,0.15);">
2730          <svg width="24" height="24" fill="none" viewBox="0 0 24 24"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-1.5 6h11" stroke="#3BAA96" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><circle cx="9" cy="21" r="1" fill="#3BAA96"/><circle cx="17" cy="21" r="1" fill="#3BAA96"/></svg>
2731        </div>
2732        
2733        <h3 style="font-size:1.2rem;font-weight:800;color:#0A0A0A;margin:0 0 0.75rem;letter-spacing:-0.02em;">AI Risk Containment</h3>
2734        <p style="font-size:0.92rem;color:#525252;line-height:1.65;margin:0 0 1.25rem;">AI agents in production, governed at inference-time. Policy-compl
2734iant before it ships.</p>
2735        <div style="display:flex;align-items:center;gap:8px;font-size:0.75rem;font-weight:700;color:#3BAA96;background:rgba(59,170,150,0.06);padding:8px 12px;border-radius:8px;">
2736          <svg width="12" height="12" fill="none"><path d="M2 6l3 3 5-5" stroke="#3BAA96" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
2737          The engine knew before fulfillment did
2738        </div>
2739        <div class="card-arrow">Explore <svg width="14" height="14" fill="none" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
2740      </a>
2741
2742      <!-- Card 3: Partner SLA Enforcement -->
2743      <a href="/solutions/b2b-orchestration" class="solution-block fade-up" style="transition-delay:0.19s;position:relative;overflow:hidden;text-decoration:none;display:block;">
2744        <div style="position:absolute;top:0;right:0;width:120px;height:120px;background:radial-gradient(circle,rgba(212,133,10,0.06),transparent 70%);pointer-events:none;"></div>
2745        <div class="sol-icon-wrap" style="background:rgba(212,133,10,0.08);border:1px solid rgba(212,133,10,0.15);">
2746          <svg width="24" height="24" fill="none" viewBox="0 0 24 24"><path d="M4 16l4-5 3 3 4-6 3 3" stroke="#D4850A" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 20h16" stroke="#D4850A" stroke-width="1.6" stroke-linecap="round"/></svg>
2747        </div>
2748        
2749        <h3 style="font-size:1.2rem;font-weight:800;color:#0A0A0A;margin:0 0 0.75rem;letter-spacing:-0.02em;">Partner SLA Enforcement</h3>
2750        <p style="font-size:0.92rem;color:#525252;line-height:1.65;margin:0 0 1.25rem;">Hundreds of partner SLAs, each enforced automatically by the Partner Context Graph.</p>
2751        <div style="display:flex;align-items:center;gap:8px;font-size:0.75rem;font-weight:700;color:#D4850A;background:rgba(212,133,10,0.06);padding:8px 12px;border-radius:8px;">
2752          <svg width="12" height="12" fill="none"><rect x="2" y="2" width="8" height="8" rx="1" stroke="#D4850A" stroke-width="1.5"/><path d="M6 4v4M4 6h4" stroke="#D4850A" stroke-width="1.5" stroke-linecap="round"/></svg>
2753          Cited and ready before the client calls
2754        </div>
2755        <div class="card-arrow">Explore <svg width="14" height="14" fill="none" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
2756      </a>
2757
2758      <!-- Card 4: Audit-Ready Compliance -->
2759      <a href="/solutions/compliance-risk" class="solution-block fade-up" style="transition-delay:0.26s;position:relative;overflow:hidden;text-decoration:none;display:block;">
2760        <div style="position:absolute;top:0;right:0;width:120px;height:120px;background:radial-gradient(circle,rgba(37,99,235,0.06),transparent 70%);pointer-events:none;"></div>
2761        <div class="sol-icon-wrap" style="background:rgba(37,99,235,0.08);border:1px solid rgba(37,99,235,0.15);">
2762          <svg width="24" height="24" fill="none" viewBox="0 0 24 24"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2" stroke="#2563EB" stroke-width="1.6"/><rect x="9" y="3" width="6" height="4" rx="1" stroke="#2563EB" stroke-width="1.6"/><path d="M9 12l2 2 4-4" stroke="#2563EB" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
2763        </div>
2764        
2765        <h3 style="font-size:1.2rem;font-weight:800;color:#0A0A0A;margin:0 0 0.75rem;letter-spacing:-0.02em;">Audit-Ready Compliance</h3>
2766        <p style="font-size:0.92rem;color:#525252;line-height:1.65;margin:0 0 1.25rem;">Zero-deviation logic for healthcare admin, fintech, and GDPR, where "close enough" is a regulatory failure.</p>
2767        <div style="display:flex;align-items:center;gap:8px;font-size:0.75rem;font-weight:700;color:#2563EB;background:rgba(37,99,235,0.06);padding:8px 12px;border-radius:8px;">
2768          <svg width="12" height="12" fill="none"><path d="M2 6l3 3 5-5" stroke="#2563EB" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
2769          The engine proved it automatically
2770        </div>
2771        <div class="card-arrow">Explore <svg width="14" height="14" fill="none" viewBox="0 0 24 24">
2771<path d="M5 12h14M13 6l6 6-6 6" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
2772      </a>
2773
2774    </div>
2775  </div>
2776</section>
2777
2778
2779<!-- ═══════════════════════════════════════════════════════
2780     STEP 4 — AI THAT AUDITS AI  ⭐ WOW SECTION
2781════════════════════════════════════════════════════════ -->
2782
2783
2784<style>
2785  /* ── MICRO-INTERACTIONS ─────────────────────────── */
2786  .float-card, .problem-card, .feat-card, .solution-block, .metric-card {
2787    transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.28s ease !important;
2788  }
2789  .float-card:hover, .problem-card:hover, .feat-card:hover, .solution-block:hover, .metric-card:hover {
2790    transform: translateY(-6px) !important;
2791    box-shadow: 0 20px 50px rgba(0,0,0,0.18), 0 0 0 1.5px rgba(0,0,0,0.12) !important;
2792  }
2793  /* CTA button scale glow */
2794  .btn-primary, .btn-demo {
2795    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease !important;
2796  }
2797  .btn-primary:hover { transform: scale(1.03) !important; box-shadow: 0 12px 36px rgba(0,0,0,0.55) !important; }
2798  .btn-demo:hover    { transform: scale(1.03) !important; }
2799  /* Hero node breathing glow */
2800  @keyframes heroBreath {
2801    0%,100% { box-shadow: 0 0 0 20px rgba(0,0,0,0.10), 0 0 0 40px rgba(0,0,0,0.05), 0 20px 60px rgba(0,0,0,0.30); transform: translate(-50%,-50%) scale(1); }
2802    50%     { box-shadow: 0 0 0 26px rgba(0,0,0,0.16), 0 0 0 52px rgba(0,0,0,0.07), 0 24px 80px rgba(0,0,0,0.45); transform: translate(-50%,-50%) scale(1.03); }
2803  }
2804  .ai-node { animation: heroBreath 4s ease-in-out infinite !important; }
2805  /* Confidence badges */
2806  .conf-badge {
2807    display:inline-flex;align-items:center;gap:4px;
2808    background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.15);
2809    border-radius:20px;padding:3px 9px;font-size:0.62rem;font-weight:700;
2810    color:rgba(255,255,255,0.75);letter-spacing:0.04em;margin-top:6px;
2811  }
2812  .conf-badge.high { border-color:rgba(59,170,150,0.5);color:#3BAA96;background:rgba(59,170,150,0.1); }
2813  /* Override badge pulse */
2814  @keyframes overridePulse {
2815    0%,100% { opacity:1; transform:scale(1); }
2816    50%     { opacity:0.7; transform:scale(1.06); }
2817  }
2818  .override-badge {
2819    display:inline-flex;align-items:center;gap:5px;
2820    background:rgba(217,68,82,0.18);border:1px solid rgba(217,68,82,0.45);
2821    border-radius:20px;padding:4px 10px;font-size:0.63rem;font-weight:700;
2822    color:#F87171;letter-spacing:0.04em;margin-top:8px;
2823    animation: overridePulse 2s ease-in-out infinite;
2824  }
2825  /* Navedas node override glow */
2826  @keyframes navGlow {
2827    0%,100% { box-shadow: 0 0 30px rgba(59,170,150,0.2); }
2828    50%     { box-shadow: 0 0 60px rgba(59,170,150,0.5), 0 0 100px rgba(0,0,0,0.3); }
2829  }
2830  .navedas-node { animation: navGlow 2.5s ease-in-out infinite !important; }
2831  /* Scroll fade-up (upgrade existing) */
2832  .fade-up { opacity:0; transform:translateY(22px); transition:opacity 0.6s ease, transform 0.6s ease !important; }
2833  .fade-up.visible { opacity:1 !important; transform:translateY(0) !important; }
2834
2835  @keyframes barPop {
2836    0%,100% { transform: scaleY(1); }
2837    50% { transform: scaleY(1.2); transform-origin: bottom; }
2838  }
2839  @media (max-width: 768px) {
2840    .features-bento {
2841      grid-template-columns: 1fr !important;
2842    }
2843    .features-bento > div[style*="grid-column:span 2"],
2844    .features-bento > div[style*="grid-row:span 2"] {
2845      grid-column: 1 !important;
2846      grid-row: auto !important;
2847    }
2848    .audit-flow { flex-direction: column !important; }
2849  }
2850
2851  /* ── COMPREHENSIVE MOBILE STYLES ── */
2852  @media (max-width: 768px) {
2853    /* Nav */
2854    .nav-links, .nav-right { display: none !important; }
2855    #hamburger { display: flex !important; }
2856    .max-w-7xl, .max-w-4xl { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
2857
2858    /* Global overflow fix */
2859    body { overflow-x: hidden !important; }
2860    * { max-width: 100%; }
2861    img, video, iframe { max-width: 100% !important; }
2862
2863    /* Hero */
2864    #hero { padding: 6rem 1.25rem 3rem !important; }
2865    #hero .grid, .hero-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
2866    #hero-ctas { flex-wrap: wrap !important; }
2867    #hero-ctas a { white-space: normal !important; font-size: 0.85rem !important; }
2868    #hero-proof { flex-wrap: wrap !important; gap: 1rem !important; row-gap: 0.75rem !important; }
2869    #hero-proof > div[style*="width:1px"] { display: none !important; }
2870    .hero-visual { max-width: 100% !important; overflow: hidden !important; }
2871
2872    /* Problem */
2873    #problem .stagger-parent { grid-template-columns: 1fr !important; }
2874
2875    /* Platform / Solution */
2876    .two-col { grid-template-columns: 1fr !important; }
2877
2878    /* How It Works */
2879    #how .stagger-parent { grid-template-columns: 1fr !important; }
2880    #how [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; }
2881    #how [style*="gap:3rem"] { gap: 1.5rem !important; }
2882
2883    /* Decision Engine */
2884    #governance-engine [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
2885    #governance-engine [style*="80px"] { grid-template-columns: 1fr !important; }
2886
2887    /* Compare */
2888    section [style*="grid-template-columns:1fr 80px 1fr"] { grid-template-columns: 1fr !important; }
2889    section [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
2890
2891    /* Promise section promise-cards */
2892    #promise [style*="display:grid"] { grid-template-columns: 1fr !important; }
2893
2894    /* Pillars */
2895    #pillars [style*="grid"] { grid-template-columns: 1fr !important; }
2896
2897    /* Solutions */
2898    #where-it-works [style*="grid"] { grid-template-columns: 1fr 1fr !important; }
2899
2900    /* Metrics */
2901    #metrics [style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; }
2902    #metrics [style*="repeat(3"] { grid-template-columns: 1fr !important; }
2903
2904    /* Dashboard — hide rail, collapse to ticket list + verdict */
2905    #dashboard [style*="background:#0A0A0A"] { display: none !important; }
2906    #dashboard [style*="grid-template-columns:48px"] { grid-template-columns: 1fr 170px !important; }
2907    #dashboard .fade-up > div[style*="border-radius:16px"] { overflow: visible !important; }
2908
2909    /* CTA */
2910    #get-started [style*="grid"] { grid-template-columns: 1fr !important; }
2911    #get-started [style*="flex-wrap:nowrap"] { flex-wrap: wrap !important; }
2912
2913    /* Footer */
2914    footer { flex-direction: column !important; gap: 2rem !important; padding: 2.5rem 1.25rem !important; }
2915    .footer-links { flex-wrap: wrap !important; gap: 1rem !important; }
2916    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; }
2917
2918    /* How It Works node row — hide on mobile, show only cards */
2919    #hiw-wrapper > div:first-child { display: none !important; }
2920    #hiw-wrapper .stagger-parent { grid-template-columns: 1fr !important; margin-top: 0 !important; }
2921
2922    /* Governance engine outcomes 3-col */
2923    [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
2924
2925    /* Solution cards 2-col */
2926    #solution [style*="grid"] { grid-template-columns: 1fr !important; }
2927
2928    /* General section padding + clip overflow */
2929    section { overflow-x: clip !important; }
2930    #metrics .max-w-7xl { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
2931
2932    /* Hero container box-sizing — prevents padding from adding to 100% 
2932width */
2933    .max-w-7xl, .max-w-4xl { box-sizing: border-box !important; }
2934
2935    /* Hero report table — drop Policy Violated column, keep ID / Decision / Exposure */
2936    #hero-report [style*="grid-template-columns:42px 1fr 1.15fr 80px"] {
2937      grid-template-columns: 32px 1fr 70px !important;
2938      padding-left: 12px !important;
2939      padding-right: 12px !important;
2940      gap: 8px !important;
2941    }
2942    #hero-report [style*="grid-template-columns:42px 1fr 1.15fr 80px"] > :nth-child(3) {
2943      display: none !important;
2944    }
2945    /* Also fix the header padding */
2946    #hero-report [style*="padding:10px 18px"] {
2947      padding-left: 12px !important;
2948      padding-right: 12px !important;
2949    }
2950    #hero-report [style*="padding:4px 18px"] {
2951      padding-left: 12px !important;
2952      padding-right: 12px !important;
2953    }
2954    #hero-report [style*="padding:7px 0"] {
2955      padding-left: 0 !important;
2956      padding-right: 0 !important;
2957    }
2958  }
2959</style>
2960
2961
2962<!-- ═══════════════════════════════════════════════════════
2963     WITHOUT VS WITH NAVEDAS
2964════════════════════════════════════════════════════════ -->
2965
2966
2967
2968<!-- ═══════════════════════════════════════════════════════
2969     FAQ
2970════════════════════════════════════════════════════════ -->
2971<section id="faq" style="padding:3.5rem 0 7rem;background:var(--bg);">
2972  <div class="max-w-4xl mx-auto px-6 lg:px-8">
2973    <div class="fade-up" style="text-align:center;margin-bottom:4rem;">
2974      <div class="solution-pill" style="margin-bottom:1rem;">FAQ</div>
2975      <h2 style="font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:900;color:#0A0A0A;letter-spacing:-0.03em;margin:0;">Questions your team<br>is already asking</h2>
2976    </div>
2977    <div class="fade-up" style="display:flex;flex-direction:column;gap:0.75rem;">
2978
2979      <div class="faq-item hiw-card" style="padding:0;cursor:pointer;border-radius:var(--radius-lg);overflow:hidden;">
2980        <div class="faq-q" style="padding:1.25rem 1.5rem;font-size:0.95rem;font-weight:600;color:#0A0A0A;display:flex;justify-content:space-between;align-items:center;gap:1rem;">Why can't we just use the guardrails built into our chatbot or AI platform?<svg class="faq-q svg" width="14" height="14" fill="none" viewBox="0 0 14 14" style="flex-shrink:0;transition:transform .25s;"><path d="M2 4l5 5 5-5" stroke="#A3A3A3" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
2981        <div class="faq-a" style=""><div style="padding:0 1.5rem 1.25rem;font-size:0.88rem;color:#525252;line-height:1.7;">Guardrails are probabilistic and cover only the bot. Navedas is one deterministic engine for every decision-maker, citing policy nodes, not confidence scores.</div></div>
2982      </div>
2983
2984      <div class="faq-item hiw-card" style="padding:0;cursor:pointer;border-radius:var(--radius-lg);overflow:hidden;">
2985        <div class="faq-q" style="padding:1.25rem 1.5rem;font-size:0.95rem;font-weight:600;color:#0A0A0A;display:flex;justify-content:space-between;align-items:center;gap:1rem;">We already have QA processes. Why do we need real-time policy enforcement?<svg class="faq-q svg" width="14" height="14" fill="none" viewBox="0 0 14 14" style="flex-shrink:0;transition:transform .25s;"><path d="M2 4l5 5 5-5" stroke="#A3A3A3" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
2986        <div class="faq-a" style=""><div style="padding:0 1.5rem 1.25rem;font-size:0.88rem;color:#525252;line-height:1.7;">QA catches problems weeks later. After the money's gone. Navedas intercepts before the decision commits.</div></div>
2987      </div>
2988
2989      <div class="faq-item hiw-card" style="padding:0;cursor:pointer;border-radius:var(--radius-lg);overflow:hidden;">
2990        <div class="faq-q" style="padding:1.25rem 1.5rem;font-size:0.95rem;font-weight:600;color:#0A0A0A;display:flex;justify-content:space-between;align-items:center;gap:1rem;">How is this different from a rules engine or workflow automation?<svg class="faq-q svg" width="14" height="14" fill="none" viewBox="0 0 14 14" style="flex-shrink:0;transition:transform .25s;"><path d="M2 4l5 5 5-5" stroke="#A3A3A3" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
2991        <div class="faq-a" style=""><div style="padding:0 1.5rem 1.25rem;font-size:0.88rem;color:#525252;line-height:1.7;">Rules engines match keywords. Navedas reasons over LTV, claim history, fraud signals, and precedent, against your atomized SOP, not "refund &gt; $500."</div></div>
2992      </div>
2993
2994      <div class="faq-item hiw-card" style="padding:0;cursor:pointer;border-radius:var(--radius-lg);overflow:hidden;">
2995        <div class="faq-q" style="padding:1.25rem 1.5rem;font-size:0.95rem;font-weight:600;color:#0A0A0A;display:flex;justify-content:space-between;align-items:center;gap:1rem;">What does "No Citation, No Output" actually mean?<svg class="faq-q svg" width="14" height="14" fill="none" viewBox="0 0 14 14" style="flex-shrink:0;transition:transform .25s;"><path d="M2 4l5 5 5-5" stroke="#A3A3A3" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
2996        <div class="faq-a" style=""><div style="padding:0 1.5rem 1.25rem;font-size:0.88rem;color:#525252;line-height:1.7;">
2996Every verdict must cite a policy node: RETURN-001 §3.2, DISCOUNT-002 §2.1. No citation, no action. The architectural guarantee against hallucination.</div></div>
2997      </div>
2998
2999      <div class="faq-item hiw-card" style="padding:0;cursor:pointer;border-radius:var(--radius-lg);overflow:hidden;">
3000        <div class="faq-q" style="padding:1.25rem 1.5rem;font-size:0.95rem;font-weight:600;color:#0A0A0A;display:flex;justify-content:space-between;align-items:center;gap:1rem;">When will my next board meeting have real numbers?<svg class="faq-q svg" width="14" height="14" fill="none" viewBox="0 0 14 14" style="flex-shrink:0;transition:transform .25s;"><path d="M2 4l5 5 5-5" stroke="#A3A3A3" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
3001        <div class="faq-a" style=""><div style="padding:0 1.5rem 1.25rem;font-size:0.88rem;color:#525252;line-height:1.7;">48 hours to a Revenue Recovery Report. A week to live governance. 30 days to numbers you can put on a slide.</div></div>
3002      </div>
3003
3004      <div class="faq-item hiw-card" style="padding:0;cursor:pointer;border-radius:var(--radius-lg);overflow:hidden;">
3005        <div class="faq-q" style="padding:1.25rem 1.5rem;font-size:0.95rem;font-weight:600;color:#0A0A0A;display:flex;justify-content:space-between;align-items:center;gap:1rem;">What happens if we stop the engagement?<svg class="faq-q svg" width="14" height="14" fill="none" viewBox="0 0 14 14" style="flex-shrink:0;transition:transform .25s;"><path d="M2 4l5 5 5-5" stroke="#A3A3A3" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
3006        <div class="faq-a" style=""><div style="padding:0 1.5rem 1.25rem;font-size:0.88rem;color:#525252;line-height:1.7;">You own the AI we built. The policy graph, the Reasoning Ledger, the Operator Console, all the precedents we trained on your data. Yours. The engagement is engineering; the engine is yours.</div></div>
3007      </div>
3008
3009    </div>
3010
3011    <div class="fade-up" style="text-align:center;margin-top:2rem;">
3012      <a href="/faq" class="nv-arrow-link" style="display:inline-flex;align-items:center;gap:8px;font-size:0.88rem;font-weight:600;color:#0A0A0A;text-decoration:none;">
3013        View all FAQs
3014        <svg width="14" height="14" fill="none" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
3015      </a>
3016    </div>
3017  </div>
3018</section>
3019
3020
3021<!-- ═══════════════════════════════════════════════════════
3022     BUILT FOR TWO AUDIENCES — ICP-split messaging
3023════════════════════════════════════════════════════════ -->
3024<section id="who" style="padding:5rem 0 3rem;background:#fff;">
3025  <div style="max-width:1180px;margin:0 auto;padding:0 24px;">
3026    <div style="text-align:center;max-width:640px;margin:0 auto 3rem;">
3027      <div style="display:inline-block;background:rgba(0,0,0,0.08);color:#0A0A0A;font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:1.25rem;">Built for two audiences</div>
3028      <h2 style="font-size:clamp(1.85rem,3.6vw,2.5rem);color:#1E2A4A;letter-spacing:-0.028em;line-height:1.12;margin-bottom:0;">Ops sees one story. Your CFO sees another.</h2>
3029    </div>
3030
3031    <div class="nv-icp-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
3032
3033      <!-- CX Managers -->
3034      <div style="background:#FAFAFA;border:1px solid #E5E5E5;border-radius:16px;padding:2.25rem 2rem;">
3035        <div style="display:inline-flex;align-items:center;gap:8px;background:rgba(0,0,0,0.08);color:#0A0A0A;font-size:0.68rem;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;padding:5px 12px;border-radius:100px;margin-bottom:1.25rem;">
3036          <svg width="12" height="12" fill="none" viewBox="0 0 24 24" aria-hidden="true"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
3037          For CX &amp; Operations
3038        </div>
3039        <h3 style="font-size:1.3rem;color:#0A0A0A;letter-spacing:-0.02em;margin-bottom:0.75rem;line-height:1.2;">Agents don't take the blame for policy they didn't write.</h3>
3040        <p style="font-size:0.95rem;color:#525252;line-height:1.7;margin-bottom:1.5rem;">The <strong style="color:#0A0A0A;">Operator Console</strong> shows agents the right threshold before they click approve, and flags bot decisions that violate policy in realtime, with the reason in plain English, right in the queue.</p>
3041        <ul style="list-style:none;padding:0;margin:0;font-size:0.9rem;color:#0A0A0A;line-height:1.9;">
3042          <li style="padding:2px 0 2px 22px;position:relative;"><span style="position:absolute;
3042left:0;color:#0A0A0A;font-weight:700;">·</span>Policy backup for human agents</li>
3043          <li style="padding:2px 0 2px 22px;position:relative;"><span style="position:absolute;left:0;color:#0A0A0A;font-weight:700;">·</span>Realtime intercepts on bots and self-serve</li>
3044          <li style="padding:2px 0 2px 22px;position:relative;"><span style="position:absolute;left:0;color:#0A0A0A;font-weight:700;">·</span>Settlement drift caught before it compounds</li>
3045        </ul>
3046      </div>
3047
3048      <!-- Senior Management / CFO -->
3049      <div style="background:#FAFAFA;border:1px solid #E5E5E5;border-radius:16px;padding:2.25rem 2rem;">
3050        <div style="display:inline-flex;align-items:center;gap:8px;background:rgba(59,170,150,0.1);color:#2A7F6E;font-size:0.68rem;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;padding:5px 12px;border-radius:100px;margin-bottom:1.25rem;">
3051          <svg width="12" height="12" fill="none" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
3052          For CFO &amp; Leadership
3053        </div>
3054        <h3 style="font-size:1.3rem;color:#0A0A0A;letter-spacing:-0.02em;margin-bottom:0.75rem;line-height:1.2;">What got recovered, and why, in a dashboard your board understands.</h3>
3055        <p style="font-size:0.95rem;color:#525252;line-height:1.7;margin-bottom:1.5rem;">The <strong style="color:#0A0A0A;">Executive Dashboard</strong> tracks recovered revenue by policy area. The <strong style="color:#0A0A0A;">Reasoning Ledger</strong> reconstructs any decision in seconds, policy citation attached.</p>
3056        <ul style="list-style:none;padding:0;margin:0;font-size:0.9rem;color:#0A0A0A;line-height:1.9;">
3057          <li style="padding:2px 0 2px 22px;position:relative;"><span style="position:absolute;left:0;color:#3BAA96;font-weight:700;">·</span>Revenue recovered, tracked weekly</li>
3058          <li style="padding:2px 0 2px 22px;position:relative;"><span style="position:absolute;left:0;color:#3BAA96;font-weight:700;">·</span>Audit readiness without a fire drill</li>
3059          <li style="padding:2px 0 2px 22px;position:relative;"><span style="position:absolute;left:0;color:#3BAA96;font-weight:700;">·</span>Policy gap reports for every quarter</li>
3060        </ul>
3061      </div>
3062
3063    </div>
3064  </div>
3065</section>
3066
3067<style>
3068  @media (max-width: 900px) {
3069    .nv-icp-grid { grid-template-columns: 1fr !important; }
3070  }
3071</style>
3072
3073
3074<!-- ═══════════════════════════════════════════════════════
3075     THE TEARDOWN — newsletter home base (rendered by teardown.js)
3076════════════════════════════════════════════════════════ -->
3077<div id="teardown-slot"></div>
3078
3079<!-- ═══════════════════════════════════════════════════════
3080     DELIVERY ANCHOR — warm-dark rhythm break before pricing
3081════════════════════════════════════════════════════════ -->
3082<section id="delivery-anchor" style="padding:4rem 0;background:#0A0A0A;color:#FAF7EE;">
3083  <div class="max-w-7xl mx-auto px-6 lg:px-8" style="text-align:center;">
3084    <div style="font-family:'Geist Mono',monospace;font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;color:#B89BD4;font-weight:600;margin-bottom:1.25rem;">
3085      ● Delivery
3086    </div>
3087    <h2 style="font-family:'Source Serif 4','Source Serif Pro',Georgia,serif;font-size:clamp(2rem,4.5vw,3.4rem);font-weight:500;line-height:1.1;letter-spacing:-0.025em;color:#FAF7EE;max-width:900px;margin:0 auto 1.25rem;">
3088      48 hours to a report. <span style="color:rgba(250,247,238,0.55);">A week to live governance.</span><br>
3089      <span style="color:#B89BD4;">
308930 days to numbers you can put on a slide.</span>
3090    </h2>
3091    <p style="font-family:'Geist',sans-serif;font-size:1rem;color:rgba(250,247,238,0.7);max-width:620px;margin:0 auto;line-height:1.65;">
3092      Two field engineers embed in your stack. No infrastructure changes. You own the AI when we leave.
3093    </p>
3094  </div>
3095</section>
3096
3097<!-- ═══════════════════════════════════════════════════════
3098     THE $500 OFFER + 3-TIER PATH (Audit → Pilot → Platform)
3099════════════════════════════════════════════════════════ -->
3100<section id="offer" style="padding:5rem 0 4rem;background:#FAFAFA;">
3101  <div style="max-width:1180px;margin:0 auto;padding:0 24px;">
3102
3103    <!-- Offer header -->
3104    <div style="text-align:center;max-width:760px;margin:0 auto 1.75rem;">
3105      <div style="display:inline-block;background:rgba(0,0,0,0.08);color:#0A0A0A;font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:1.25rem;">Pricing</div>
3106      <h2 style="font-size:clamp(2rem,4vw,3rem);color:#1E2A4A;letter-spacing:-0.03em;line-height:1.1;margin-bottom:1rem;">How much revenue is your team actually leaving on the table?</h2>
3107      <p style="font-size:1.05rem;color:#525252;line-height:1.65;margin-bottom:1.5rem;">Send us 1,000 of your recent tickets. In 48 hours we'll give you a specific recoverable-dollar figure, with the policy violations that caused each one. If we don't find at least $25,000 in exposure, you get your money back.</p>
3108      <div style="display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:#fff;border:1px solid rgba(0,0,0,0.2);border-radius:100px;font-size:0.82rem;font-weight:600;color:#0A0A0A;">
3109        <svg width="14" height="14" fill="none" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 2L3 7v5c0 5.25 3.75 10.15 9 11.35C17.25 22.15 21 17.25 21 12V7l-9-5z" stroke="currentColor" stroke-width="1.8"/></svg>
3110        $25K minimum finding. Or your money back.
3111      </div>
3112
3113      <!-- Eligibility criteria (commercial-structure framing) -->
3114      <div style="max-width:680px;margin:1.75rem auto 0;text-align:left;display:flex;flex-direction:column;gap:0.6rem;">
3115        <div style="display:flex;align-items:flex-start;gap:0.7rem;font-family:'Geist',sans-serif;font-size:0.9rem;color:#1A1714;line-height:1.6;">
3116          <span style="color:#604289;font-weight:700;flex-shrink:0;line-height:1.6;">→</span>
3117          <span><strong style="font-weight:600;">Eligible:</strong> any company running AI in customer-facing or back-office decisions. SOC 2 / HIPAA / GDPR coverage on request. NDA before data transfer.</span>
3118        </div>
3119        <div style="display:flex;align-items:flex-start;gap:0.7rem;font-family:'Geist',sans-serif;font-size:0.9rem;color:#1A1714;line-height:1.6;">
3120          <span style="color:#604289;font-weight:700;flex-shrink:0;line-height:1.6;">→</span>
3121          <span><strong style="font-weight:600;">Scoped diagnostic:</strong> fixed fee, outcome-bound. We surface the recoverable dollar figure or refund the fee.</span>
3122        </div>
3123      </div>
3124    </div>
3125
3126    <!-- What lands in 48 hours (deliverable enumeration) -->
3127    <div style="max-width:840px;margin:0 auto 2.5rem;background:#fff;border:1px solid #E5DFD0;border-radius:14px;padding:1.5rem 1.75rem;">
3128      <div style="display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:0.66rem;font-weight:700;color:#604289;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:1.25rem;">
3129        <span style="width:5px;height:5px;border-radius:50%;background:#604289;display:inline-block;"></span>What lands in 48 hours
3130      </div>
3131      <div style="display:grid;grid-template-columns:auto 1fr;gap:1rem 1.25rem;align-items:start;">
3132        <div style="font-family:'Geist Mono',monospace;font-size:0.82rem;font-weight:700;color:#604289;padding-top:2px;">01</div>
3133        <div>
3134          <div style="font-family:'Geist',sans-serif;font-size:0.94rem;font-weight:600;color:#0A0A0A;margin-bottom:3px;">Per-decision dollar exposure</div>
3135          <div style="font-family:'Geist',sans-serif;font-size:0.86rem;color:#525252;line-height:1.55;">Every off-policy decision in the 1,000-ticket sample, dollar-quantified.</div>
3136        </div>
3137        <div style="font-family:'Geist Mono',monospace;font-size:0.82rem;font-weight:700;color:#604289;padding-top:2px;">02</div>
3138        <div>
3139          <div style="font-family:'Geist',sans-serif;font-size:0.94rem;font-weight:600;color:#0A0A0A;margin-bottom:3px;">Policy violation citations</div>
3140          <div style="font-family:'Geist',sans-serif;font-size:0.86rem;color:#525252;line-height:1.55;">Exact policy section and rule violated, per decision.</div>
3141        </div>
3142        <div style="font-family:'Geist Mono',monospace;font-size:0.82rem;font-weight:700;color:#604289;padding-top:2px;">03</div>
3143        <div>
3144          <div style="font-family:'Geist',sans-serif;font-size:0.94rem;font-weight:600;color:#0A0A0A;margin-bottom:3px;">Recoverable-amount summary</div>
3145          <div style="font-family:'Geist',sans-serif;font-size:0.86rem;color:#525252;line-height:1.55;">Quarterly exposure with recovery path per category.</div>
3146        </div>
3147      </div>
3148    </div>
3149
3150    <!-- Three-tier cards: Audit → Pilot → Platform -->
3151    <div class="nv-tiers" style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:3rem;">
3152
3153      <!-- Audit tier -->
3154      <div style="background:#fff;border:2px solid #0A0A0A;border-radius:16px;padding:2rem 1.75rem;position:relative;box-shadow:0 12px 36px rgba(0,0,0,0.12);">
3155        <div style="position:absolute;top:-12px;left:1.75rem;background:#0A0A0A;color:#fff;font-size:0.68rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;padding:4px 12px;border-radius:100px;">Start here</div>
3156        <div style="font-family:'Geist Mono',monospace;font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#604289;margin-bottom:0.5rem;margin-top:0.5rem;">Diagnose</div>
3157        <div style="font-size:0.9rem;color:#525252;font-weight:500;margin-bottom:0.35rem;"><span style="font-family:'Source Serif 4','Source Serif Pro',Georgia,serif;font-size:2.2rem;font-weight:500;color:#0A0A0A;letter-spacing:-0.02em;line-height:1;">$500</span> &nbsp;flat fee</div>
3158        <p style="font-size:0.9rem;color:#525252;line-height:1.6;margin-bottom:1.25rem;">1,000 decisions analyzed against your policies. Revenue Recovery Report in 48 hours. <strong style="font-weight:600;color:#0A0A0A;">Productized scope. Try the engagement before you commit.</strong></p>
3159        <ul style="list-style:none;padding:0;margin:0 0 1.5rem;font-size:0.88rem;color:#0A0A0A;line-height:1.8;">
3160          <li style="padding:4px 0 4px 22px;position:relative;"><span style="position:absolute;
3160left:0;color:#3BAA96;font-weight:700;">✓</span>1,000 decisions analyzed</li>
3161          <li style="padding:4px 0 4px 22px;position:relative;"><span style="position:absolute;left:0;color:#3BAA96;font-weight:700;">✓</span>48-hour turnaround</li>
3162          <li style="padding:4px 0 4px 22px;position:relative;"><span style="position:absolute;left:0;color:#3BAA96;font-weight:700;">✓</span>Money-back guarantee</li>
3163          <li style="padding:4px 0 4px 22px;position:relative;"><span style="position:absolute;left:0;color:#3BAA96;font-weight:700;">✓</span>No integration. Just a CSV.</li>
3164        </ul>
3165        <a href="/exposure-calculator" style="display:block;text-align:center;padding:12px;background:#0A0A0A;color:#fff;border-radius:100px;font-size:0.88rem;font-weight:700;text-decoration:none;">Start your $500 audit</a>
3166      </div>
3167
3168      <!-- Pilot tier -->
3169      <div style="background:#fff;border:1px solid #E5E5E5;border-radius:16px;padding:2rem 1.75rem;position:relative;">
3170        <div style="font-family:'Geist Mono',monospace;font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#604289;margin-bottom:0.5rem;margin-top:0.5rem;">Build</div>
3171        <div style="font-size:0.9rem;color:#525252;font-weight:500;margin-bottom:0.35rem;"><span style="font-family:'Source Serif 4','Source Serif Pro',Georgia,serif;font-size:2.2rem;font-weight:500;color:#0A0A0A;letter-spacing:-0.02em;line-height:1;">$10K–$20K</span> &nbsp;/ month engagement</div>
3172        <p style="font-size:0.9rem;color:#525252;line-height:1.6;margin-bottom:1.25rem;">Two field engineers embed for one policy area. We build that part of your operation around your actual policies; you run it. 30 days to live.</p>
3173        <ul style="list-style:none;padding:0;margin:0 0 1.5rem;font-size:0.88rem;color:#0A0A0A;line-height:1.8;">
3174          <li style="padding:4px 0 4px 22px;position:relative;"><span style="position:absolute;left:0;color:#3BAA96;font-weight:700;">✓</span>Two FDEs embedded for one policy area</li>
3175          <li style="padding:4px 0 4px 22px;position:relative;"><span style="position:absolute;left:0;color:#3BAA96;font-weight:700;">✓</span>Reasoning Ledger on every decision</li>
3176          <li style="padding:4px 0 4px 22px;position:relative;"><span style="position:absolute;left:0;color:#3BAA96;font-weight:700;">✓</span>Weekly exposure-reduction report</li>
3177          <li style="padding:4px 0 4px 22px;position:relative;"><span style="position:absolute;left:0;color:#3BAA96;font-weight:700;">✓</span>Operator Console for your team</li>
3178        </ul>
3179        <a href="https://calendly.com/navedas-ai/navedas-platform-demo" target="_blank" rel="noopener" style="display:block;text-align:center;padding:12px;background:#fff;color:#0A0A0A;border:1.5px solid #0A0A0A;border-radius:100px;font-size:0.88rem;font-weight:700;text-decoration:none;">Start the engagement</a>
3180      </div>
3181
3182      <!-- Platform tier -->
3183      <div style="background:#fff;border:1px solid #E5E5E5;border-radius:16px;padding:2rem 1.75rem;position:relative;">
3184        <div style="font-family:'Geist Mono',monospace;font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#604289;margin-bottom:0.5rem;margin-top:0.5rem;">Operate</div>
3185        <div style="font-size:0.9rem;color:#525252;font-weight:500;margin-bottom:0.35rem;"><span style="font-family:'Source Serif 4','Source Serif Pro',Georgia,serif;font-size:2.2rem;font-weight:500;color:#0A0A0A;letter-spacing:-0.02em;line-height:1;">$80K–$250K</span> &nbsp;/ year engagement</div>
3186        <p style="font-size:0.9rem;color:#525252;line-height:1.6;margin-bottom:1.25rem;">Engineers stay embedded for ongoing tune and incident response. Every policy area governed. You own the platform.</p>
3187        <ul style="list-style:none;padding:0;margin:0 0 1.5rem;font-size:0.88rem;color:#0A0A0A;line-height:1.8;">
3188          <li style="padding:4px 0 4px 22px;position:relative;"><span style="position:absolute;left:0;color:#3BAA96;font-weight:700;">✓</span>FDEs embedded continuously</li>
3189          <li style="padding:4px 0 4px 22px;position:relative;"><span style="position:absolute;
3189left:0;color:#3BAA96;font-weight:700;">✓</span>Every policy area governed</li>
3190          <li style="padding:4px 0 4px 22px;position:relative;"><span style="position:absolute;left:0;color:#3BAA96;font-weight:700;">✓</span>Context Graph + Reasoning Ledger at scale</li>
3191          <li style="padding:4px 0 4px 22px;position:relative;"><span style="position:absolute;left:0;color:#3BAA96;font-weight:700;">✓</span>Executive Dashboard + Operator Console</li>
3192          <li style="padding:4px 0 4px 22px;position:relative;"><span style="position:absolute;left:0;color:#3BAA96;font-weight:700;">✓</span>Enterprise SSO, SLAs</li>
3193        </ul>
3194        <a href="https://calendly.com/navedas-ai/navedas-executive-briefing" target="_blank" rel="noopener" style="display:block;text-align:center;padding:12px;background:#fff;color:#0A0A0A;border:1.5px solid #0A0A0A;border-radius:100px;font-size:0.88rem;font-weight:700;text-decoration:none;">Talk to the inventors</a>
3195      </div>
3196
3197    </div>
3198
3199    <!-- Helpdesk-layer competitive framing -->
3200    <div style="max-width:680px;margin:0 auto;text-align:center;padding-top:1rem;border-top:1px solid rgba(0,0,0,0.1);">
3201      <p style="font-size:0.92rem;color:#525252;line-height:1.7;margin:1.5rem 0 0;">
3202        <strong style="color:#0A0A0A;">We're not a helpdesk replacement.</strong> Navedas runs on top of what you already use (Zendesk, Gladly, Salesforce, or your own stack) and enforces policy on every decision those systems touch.
3203      </p>
3204    </div>
3205
3206  </div>
3207</section>
3208
3209<style>
3210  @media (max-width: 900px) {
3211    .nv-tiers { grid-template-columns: 1fr !important; }
3212  }
3213</style>
3214
3215<!-- ═══════════════════════════════════════════════════════
3216     ENDNOTES (H9: audit-report convention)
3217════════════════════════════════════════════════════════ -->
3218<section id="endnotes" style="padding:3.5rem 0 2.5rem;background:#FCFAF4;border-top:1px solid #E5DFD0;">
3219  <div class="max-w-7xl mx-auto px-6 lg:px-8">
3220    <div style="max-width:880px;margin:0 auto;">
3221
3222      <!-- Attribution block (audit-report convention) -->
3223      <div style="display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding-bottom:1.5rem;border-bottom:1px solid #E5DFD0;margin-bottom:1.5rem;">
3224        <div>
3225          <div style="font-family:'Geist Mono',monospace;font-size:0.6rem;font-weight:600;color:#7A7268;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:0.4rem;">Prepared by</div>
3226          <div style="font-family:'Source Serif 4','Source Serif Pro',Georgia,serif;font-size:0.94rem;font-weight:500;color:#1A1714;letter-spacing:-0.01em;">Navedas Intelligence · Engineering team</div>
3227        </div>
3228        <div>
3229          <div style="font-family:'Geist Mono',monospace;font-size:0.6rem;font-weight:600;color:#7A7268;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:0.4rem;">Reviewed by</div>
3230          <div style="font-family:'Source Serif 4','Source Serif Pro',Georgia,serif;font-size:0.94rem;font-weight:500;color:#1A1714;letter-spacing:-0.01em;">Founding inventors · Q2 2026</div>
3231        </div>
3232      </div>
3233
3234      <!-- Endnotes -->
3235      <div style="font-family:'Geist Mono',monospace;font-size:0.6rem;font-weight:600;color:#7A7268;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:0.85rem;">Endnotes</div>
3236      <ol style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0.5rem;font-family:'Geist',sans-serif;font-size:0.82rem;color:#4D453A;line-height:1.55;">
3237        <li style="display:grid;grid-template-columns:24px 1fr;gap:0.5rem;">
3238          <span style="font-family:'Geist Mono',monospace;font-size:0.7rem;color:#604289;font-weight:600;">[1]</span>
3239          <span>Recovery figures drawn from live engagements across CX and back-office operations. Per-engagement variance: ticket volume, policy complexity, and operational maturity.</span>
3240        </li>
3241        <li style="display:grid;grid-template-columns:24px 1fr;gap:0.5rem;">
3242          <span style="font-family:'Geist Mono',monospace;font-size:0.7rem;color:#604289;font-weight:600;">[2]</span>
3243          <span>CSAT.AI: in production since Q1 2021 with the founding customer cohort. Decision Gate engine load-bearing for refund, discount, escalation, and resolution workflows.</span>
3244        </li>
3245        <li style="display:grid;grid-template-columns:24px 1fr;gap:0.5rem;">
3246          <span style="font-family:'Geist Mono',monospace;font-size:0.7rem;color:#604289;font-weight:600;">[3]</span>
3247          <span>US Patent 11,748,414 granted 2023, active until 2042. Covers the citation-bound decision architecture described on this page.</span>
3248        </li>
3249        <li style="display:grid;grid-template-columns:24px 1fr;gap:0.5rem;">
3250          <span style="font-family:'Geist Mono',monospace;font-size:0.7rem;color:#604289;font-weight:600;">[4]</span>
3251          <span>$25K minimum finding methodology: 1,000 decisions analyzed against client policy graph in 48 hours. Audit refunded if recoverable exposure falls below threshold. Money-back guarantee bound at audit signoff.</span>
3252        </li>
3253        <li style="display:grid;grid-template-columns:24px 1fr;gap:0.5rem;">
3254          <span style="font-family:'Geist Mono',monospace;font-size:0.7rem;color:#604289;font-weight:600;">[5]</span>
3255          <span>Recovery Report shown above is a composite. Line items anonymized from four engagements. Format and structure represent the actual artifact delivered at Diagnose stage.</span>
3256        </li>
3257      </ol>
3258
3259      <!-- Document footer -->
3260      <div style="margin-top:2rem;padding-top:1.25rem;border-top:1px solid #E5DFD0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:0.5rem;font-family:'Geist Mono',monospace;font-size:0.58rem;font-weight:500;color:#7A7268;letter-spacing:0.1em;text-transform:uppercase;">
3261        <span>Document NV-2026-002 · Revision A · Q2 2026</span>
3262        <span>Five exhibits · Five endnotes · One engagement</span>
3263      </div>
3264
3265    </div>
3266  </div>
3267</section>
3268
3269<!-- ═══════════════════════════════════════════════════════
3270     FOOTER
3271════════════════════════════════════════════════════════ -->
3272
3273
3274
3275
3276<div id="nv-footer-root"></div>
3277<script src="/public/teardown.js" defer></script>
vendor: 1 bytes, line 3277
3277
3278<script src="/public/footer.js" defer></script>
3278
3279
3280<style>
3281  @media (max-width: 768px) {
3282    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; }
3283    .footer-grid > div:first-child { grid-column: 1 / -1; }
3284    .step-connector { display: none !important; }
3285    .kpi-row { grid-template-columns: 1fr 1fr !important; gap: 1.5rem 0 !important; }
3286    .kpi-row .kpi-cell:nth-child(2) { border-right: 0 !important; }
3287    .kpi-row .kpi-cell:nth-child(1),
3288    .kpi-row .kpi-cell:nth-child(2) { border-bottom: 1px solid #E5DFD0; padding-bottom: 1.25rem; }
3289    .kpi-row .kpi-cell:nth-child(3),
3290    .kpi-row .kpi-cell:nth-child(4) { padding-top: 1.25rem; }
3291  }
3292
3293  @media (max-width: 768px) {
3294    /* Reduce all section vertical padding */
3295    section[style*="padding:7rem"] { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
3296    section[style*="padding:6rem"] { padding-top: 3rem !important; padding-bottom: 3rem !important; }
3297
3298    /* Collapse all 2-col grids */
3299    [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
3300    [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
3301
3302    /* Hero heading font size */
3303    #hero h1 { font-size: clamp(2rem, 8vw, 3rem) !important; }
3304
3305    /* Footer single column on very small screens */
3306    .footer-grid { grid-template-columns: 1fr !important; }
3307
3308    /* Trust bar in footer — stack vertically */
3309    footer [style*="display:flex"][style*="justify-content:center"] { flex-direction: column !important; align-items: center !important; gap: 0.75rem !important; }
3310    footer [style*="width:1px;height:20px"] { display: none !important; }
3311
3312    /* Prevent any fixed-width overflow */
3313    [style*="min-width:"] { min-width: 0 !important; }
3314    /* Dashboard grid — hide on mobile, too wide */
3315    .dashboard-grid { display: none !important; }
3316    #dashboard { padding: 3rem 1.25rem !important; }
3317    /* Metrics grid force 1 col */
3318    .metrics-grid { grid-template-columns: 1fr 1fr !important; }
3319    .metrics-grid .card { min-width:0 !important; }
3320    .metrics-grid [style*="white-space:nowrap"] { white-space:normal !important; font-size:clamp(1.2rem,5vw,2rem) !important; }
3321  }
3322</style>
3323
3324<style>
3325/* ── DESIGN PERSONALITY — anti-template layer ── */
3326
3327/* Button personality: primary gets strong glow, secondary stays quiet */
3328.btn-demo {
3329  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
3330  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
3331}
3332.btn-demo:hover {
3333  transform: translateY(-2px) scale(1.04) !important;
3334  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
3335}
3336.btn-secondary:hover {
3337  transform: translateY(-1px) !important;
3338  box-shadow: none !important;
3339}
3340
3341/* Card variation by section — no uniform hover */
3342/* Problem cards: lift + shadow */
3343#problem .card:hover {
3344  transform: translateY(-6px);
3345  box-shadow: 0 20px 48px rgba(0,0,0,0.12) !important;
3346  transition: all 0.25s cubic-bezier(0.22,1,0.36,1);
3347}
3348/* Solution cards: border glow */
3349#where-it-works .solution-block:hover {
3350  box-shadow: 0 0 0 2px #0A0A0A, 0 12px 32px rgba(0,0,0,0.15) !important;
3351  transform: none !important;
3352}
3353/* Platform cards: scale only, no shadow */
3354#solution .card:hover {
3355  transform: scale(1.025) !important;
3356  box-shadow: none !important;
3357}
3358/* Pillar cards: glow bottom border only */
3359#pillars .card {
3360  border-bottom: 2px solid transparent;
3361  transition: border-color 0.2s, transform 0.2s;
3362}
3363#pillars .card:hover {
3364  border-bottom-color: #3BAA96 !important;
3365  transform: translateY(-3px) !important;
3366  box-shadow: 0 8px 24px rgba(59,170,150,0.1) !important;
3367}
3368
3369/* Spacing micro-variation — break perfect rhythm */
3370#problem  { padding: 5.5rem 0 !important; }
3371#solution { padding: 6.5rem 0 !important; }
3372#promise  { padding: 6rem 0 !important; }
3373#pillars  { padding: 7.5rem 0 !important; }
3374#how      { padding: 6rem 0 !important; }
3375#metrics  { padding: 7rem 0 5rem !important; }
3376
3377/* Shadow micro-imperfection */
3378#problem .card  { box-shadow: 0 2px 12px rgba(0,0,0,0.06); border-radius: 14px; }
3379#solution .card { box-shadow: 0 4px 18px rgba(0,0,0,0.08); border-radius: 16px; }
3380#pillars .card  { box-shadow: 0 1px 8px rgba(0,0,0,0.05);  border-radius: 18px; }
3381
3382/* Typography: slight letter-spacing variation on section tags */
3383#problem  .solution-pill { letter-spacing: 0.12em; }
3384#solution .solution-pill { letter-spacing: 0.08em; }
3385#how      .solution-pill { letter-spacing: 0.1em;  }
3386#metrics  .solution-pill { letter-spacing: 0.14em; }
3387
3388/* FAQ hover accordion */
3389#faq .faq-item.open .faq-a { max-height: 200px !important; }
3390#faq .faq-item.open .faq-q { color: #0A0A0A; }
3391#faq .faq-item.open .faq-q svg { transform: rotate(180deg); }
3392#faq .faq-item.open { border-color: #525252 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; background: #FDFBFF !important; }
3393
3394/* How It Works: static nodes (no hover animation — intentional contrast) */
3395.hiw-card { pointer-events: none; }
3396.hiw-card.open { pointer-events: auto; }
3397#faq .faq-item { pointer-events: auto !important; }
3398
3399/* Metric cards: uniform glow */
3400#metrics .stagger-child:hover { box-shadow: 0 0 32px rgba(0,0,0,0.22) !important; }
3401#metrics .stagger-child { transition: box-shadow 0.3s ease, transform 0.3s ease; cursor: default; }
3402#metrics .stagger-child:hover { transform: translateY(-4px); }
3403
3404/* Nav link hover: varied — active gets underline, rest get color only */
3405.nav-link { position: relative; }
3406.nav-link::after {
3407  content: '';
3408  position: absolute;
3409  bottom: -2px; left: 0; right: 0;
3410  height: 1.5px;
3411  background: #0A0A0A;
3412  transform: scaleX(0);
3413  transition: transform 0.2s ease;
3414  transform-origin: left;
3415}
3416.nav-link:hover::after { transform: scaleX(1); }
3417</style>
3418
3419<!-- ═══════════════════════════════════════════════════════
3420     SCRIPTS
3421════════════════════════════════════════════════════════ -->
3422<script>
3423  // ── (navbar/toggleMenu/nav-dropdown scripts removed — handled by public/nav.js) ──
3424
3425  // ── Hero entrance animations ──
3426  window.addEventListener('load', () => {
3427    // Staggered entrance for hero elements
3428    const elements = [
3429      { el: document.getElementById('hero-badge'), delay: 0.1 },
3430      { el: document.getElementById('hero-h1'), delay: 0.25 },
3431      { el: document.getElementById('hero-sub'), delay: 0.4 },
3432      { el: document.getElementById('hero-ctas'), delay: 0.55 },
3433      { el: document.getElementById('hero-proof'), delay: 0.7 },
3434    ];
3435
3436    elements.forEach(({ el, delay }) => {
3437      if (!el) return;
3438      el.style.opacity = '0';
3439      el.style.transform = 'translateY(28px)';
3440      setTimeout(() => {
3441        el.style.transition = 'opacity 0.7s ease, transform 0.7s ease';
3442        el.style.opacity = '1';
3443        el.style.transform = 'translateY(0)';
3444      }, delay * 1000);
3445    });
3446  });
3447
3448  // ── Intersection observer for scroll reveals ──
3449  const observer = new IntersectionObserver((entries) => {
3450    entries.forEach(e => {
3451      if (e.isIntersecting) e.target.classList.add('visible');
3452    });
3453  }, { threshold: 0.08 });
3454  document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
3455  // Safety net: force all visible after 2.5s in case observer doesn't fire
3456  setTimeout(() => { document.querySelectorAll('.fade-up').forEach(el => el.classList.add('visible')); }, 2500);
3457
3458  // ── KPI counter animation ──
3459  const kpiNums = document.querySelectorAll('.kpi-num');
3460  const kpiObserver = new IntersectionObserver((entries) => {
3461    entries.forEach(e => {
3462      if (!e.isIntersecting || e.target.dataset.done) return;
3463      e.target.dataset.done = '1';
3464      const target = parseInt(e.target.dataset.target, 10);
3465      const suffix = e.target.dataset.suffix || '';
3466      const dur = 1200;
3467      const start = performance.now();
3468      const tick = (now) => {
3469        const t = Math.min((now - start) / dur, 1);
3470        const eased = 1 - Math.pow(1 - t, 3);
3471        e.target.textContent = Math.round(target * eased) + (t === 1 ? suffix : '');
3472        if (t < 1) requestAnimationFrame(tick);
3473      };
3474      requestAnimationFrame(tick);
3475    });
3476  }, { threshold: 0.4 });
3477  kpiNums.forEach(el => kpiObserver.observe(el));
3478</script>
3478
3479
3480<!-- ═══ PREMIUM UPGRADE SCRIPT ═══ -->
3481<script>
3482(function(){
3483  /* 1 — Stagger children inside .stagger-parent */
3484  var staggerObs = new IntersectionObserver(function(entries){
3485    entries.forEach(function(e){
3486      if(!e.isIntersecting) return;
3487      var kids = e.target.querySelectorAll('.stagger-child');
3488      kids.forEach(function(k,i){
3489        setTimeout(function(){ k.classList.add('sv'); }, i * 120);
3490      });
3491      staggerObs.unobserve(e.target);
3492    });
3493  },{threshold:0.15});
3494  document.querySelectorAll('.stagger-parent').forEach(function(el){ staggerObs.observe(el); });
3495  // Safety net: force stagger children visible after 2.5s
3496  setTimeout(function(){ document.querySelectorAll('.stagger-child').forEach(function(el){ el.classList.add('sv'); }); }, 2500);
3497
3498  /* 2 — SVG ring animations */
3499  var ringObs = new IntersectionObserver(function(entries){
3500    entries.forEach(function(e){
3501      if(!e.isIntersecting) return;
3502      e.target.querySelectorAll('.ring-fill').forEach(function(circle){
3503        var pct = parseFloat(circle.dataset.pct||0);
3504        var r   = parseFloat(circle.getAttribute('r')||36);
3505        var circ = 2*Math.PI*r;
3506        circle.style.strokeDasharray  = circ;
3507        circle.style.strokeDashoffset = circ;
3508        setTimeout(function(){
3509          circle.style.strokeDashoffset = circ*(1-pct/100);
3510        },100);
3511      });
3512      ringObs.unobserve(e.target);
3513    });
3514  },{threshold:0.3});
3515  document.querySelectorAll('.ring-svg').forEach(function(el){ ringObs.observe(el); });
3516
3517  /* 3 — Duplicate marquee rows for seamless loop */
3518  document.querySelectorAll('.marquee-inner').forEach(function(row){
3519    var original = row.innerHTML;
3520    row.innerHTML = original + original;
3521  });
3522})();
3523</script>
3523
3524
3525<script>
3526(function(){
3527  function animateCount(el) {
3528    if (el.dataset.animated) return;
3529    el.dataset.animated = '1';
3530    var target = parseFloat(el.dataset.count);
3531    var suffix = el.dataset.suffix || '';
3532    var prefix = el.dataset.prefix || '';
3533    var isFloat = target % 1 !== 0;
3534    var useComma = el.dataset.comma === 'true';
3535    if (target === 0) { el.textContent = prefix + '0' + suffix; return; }
3536    var dur = 1600, step = 16, start = 0;
3537    var t = setInterval(function() {
3538      start += target / (dur / step);
3539      if (start >= target) { start = target; clearInterval(t); }
3540      var val = isFloat ? start.toFixed(1) : Math.floor(start);
3541      if (useComma) val = parseInt(val).toLocaleString();
3542      el.textContent = prefix + val + suffix;
3543    }, step);
3544  }
3545  window.addEventListener('load', function() {
3546    var all = document.querySelectorAll('.count-up[data-count], .metric-num[data-count]');
3547    var io = new IntersectionObserver(function(entries) {
3548      entries.forEach(function(e) { if (e.isIntersecting) animateCount(e.target); });
3549    }, { threshold: 0.1, rootMargin: '0px 0px -20px 0px' });
3550    all.forEach(function(el) {
3551      var r = el.getBoundingClientRect();
3552      if (r.top < window.innerHeight && r.bottom > 0) {
3553        setTimeout(function(){ animateCount(el); }, 400);
3554      } else {
3555        io.observe(el);
3556      }
3557    });
3558  });
3559})();
3560</script>
3560
3561
3562<style>
3563/* ── GOVERNANCE PIPELINE ANIMATIONS ── */
3564@keyframes gpIconPulse {
3565  0%,100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
3566  50%      { box-shadow: 0 0 0 5px rgba(0,0,0,0.1); }
3567}
3568.gp-step { transition: transform 0.25s ease, background 0.25s ease; border-radius: 10px; padding: 4px 6px; margin: 0 -6px; }
3569.gp-step:hover { transform: translateX(7px); background: rgba(0,0,0,0.04); }
3570.gp-step .gp-icon { transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.4s ease; border-radius: 10px; }
3571.gp-step.gp-revealed .gp-icon { transform: scale(1); animation: gpIconPulse 2.8s ease-in-out 0.6s infinite; }
3572.gp-step { opacity: 0; transform: translateY(20px); }
3573.gp-step.gp-revealed { opacity: 1; transform: translateY(0); transition: opacity 0.55s ease, transform 0.55s ease; }
3574.gp-step:hover { transform: translateX(7px) !important; }
3575</style>
3576
3577<script>
3578(function(){
3579  var steps = document.querySelectorAll('#gp-steps .gp-step');
3580  var lines = document.querySelectorAll('#gp-steps .gp-line');
3581  var fired = false;
3582  if (!steps.length) return;
3583
3584  // Tag icons
3585  steps.forEach(function(s){ var ic = s.querySelector('div > div'); if(ic) ic.classList.add('gp-icon'); });
3586
3587  function runGP() {
3588    if (fired) return; fired = true;
3589    steps.forEach(function(s, i) {
3590      setTimeout(function() {
3591        s.classList.add('gp-revealed');
3592        if (lines[i]) setTimeout(function(){ lines[i].style.transform = 'scaleY(1)'; }, 200);
3593      }, 200 + i * 200);
3594    });
3595  }
3596  new IntersectionObserver(function(entries){
3597    if (entries[0].isIntersecting) runGP();
3598  }, { threshold: 0.2 }).observe(document.getElementById('gp-steps'));
3599})();
3600
3601  // FAQ hover accordion
3602  document.querySelectorAll('#faq .faq-item').forEach(item=>{
3603    const ans = item.querySelector('.faq-a');
3604    ans.style.display = 'none';
3605    item.addEventListener('mouseenter',()=>{
3606      document.querySelectorAll('#faq .faq-item').forEach(i=>{
3607        i.classList.remove('open');
3608        i.querySelector('.faq-a').style.display='none';
3609      });
3610      item.classList.add('open');
3611      ans.style.display='block';
3612    });
3613    item.addEventListener('mouseleave',()=>{
3614      item.classList.remove('open');
3615      ans.style.display='none';
3616    });
3617  });
3618
3619</script>
3619
3620
3621
3622<!-- FOOTER CTA — ABOVE COPYRIGHT -->
3623<section style="background:#0A0A0A;padding:2.5rem 3rem 2.5rem;">
3624  <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;">
3625    <p style="font-size:1.05rem;font-weight:500;color:rgba(255,255,255,0.8);margin:0;">How can we help? <a href="/contact" style="color:#B89BD4;text-decoration:underline;text-decoration-color:rgba(184,155,212,0.45);text-underline-offset:4px;font-weight:600;">Contact us.</a></p>
3626    <p style="font-family:'Geist Mono',monospace;font-size:0.72rem;color:rgba(255,255,255,0.3);margin:0;letter-spacing:0.04em;">© 2026 Navedas Intelligence, Inc.</p>
3627  </div>
3628</section>
3629
3630<script>
3631document.querySelectorAll('*').forEach(el=>{
3632  if(el.offsetWidth>document.documentElement.offsetWidth){
3633    el.style.maxWidth='100%';
3634    el.style.overflowX='hidden';
3635  }
3636});
3637</script>
vendor: 1 bytes, line 3637
3637
3638<script src="/public/analytics.js" defer></script>
3638
3639
3640<!-- STICKY MOBILE CTA — visible on mobile after hero scrolls out of view -->
3641<style>
3642  #sticky-mobile-cta {
3643    display: none;
3644    position: fixed;
3645    bottom: 0; left: 0; right: 0;
3646    z-index: 999;
3647    background: #0A0A0A;
3648    border-top: 1px solid rgba(255,255,255,0.1);
3649    padding: 12px 20px 16px;
3650    transform: translateY(100%);
3651    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
3652  }
3653  #sticky-mobile-cta.visible { transform: translateY(0); }
3654  @media (max-width: 768px) { #sticky-mobile-cta { display: block; } }
3655  #sticky-mobile-cta a {
3656    display: block;
3657    text-align: center;
3658    background: #FFFFFF;
3659    color: #0A0A0A;
3660    font-family: 'Geist', -apple-system, sans-serif;
3661    font-size: 0.92rem;
3662    font-weight: 600;
3663    padding: 13px 20px;
3664    border-radius: 8px;
3665    text-decoration: none;
3666    letter-spacing: -0.01em;
3667  }
3668  #sticky-mobile-cta .sticky-sub {
3669    text-align: center;
3670    font-family: 'Geist Mono', monospace;
3671    font-size: 0.65rem;
3672    color: rgba(255,255,255,0.4);
3673    letter-spacing: 0.06em;
3674    margin-top: 6px;
3675  }
3676</style>
3677<div id="sticky-mobile-cta" role="complementary" aria-label="Primary call to action">
3678  <a href="/exposure-calculator">Run a Margin Leakage Audit</a>
3679  <p class="sticky-sub">Starts at $500 · 48-hour turnaround</p>
3680</div>
3681<script>
3682(function() {
3683  var hero = document.getElementById('hero');
3684  var cta  = document.getElementById('sticky-mobile-cta');
3685  if (!hero || !cta) return;
3686  var io = new IntersectionObserver(function(entries) {
3687    cta.classList.toggle('visible', !entries[0].isIntersecting);
3688  }, { threshold: 0 });
3689  io.observe(hero);
3690})();
3691</script>
3691
3692</body>
3693</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.