Hugging Face's logo

Spaces:
prthm11
/
Agentic_AI_Seminar
Running

App Files Community
prthm11 commited on
Commit
620a894
·
verified ·
1 Parent(s): efa426e

Upload 3 files

Browse files
Files changed (3) hide show
  1. index.html +681 -18
  2. main.js +99 -0
  3. style.css +361 -17
index.html CHANGED
@@ -1,19 +1,682 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Agentic AI in Data Catalog System</title>
7
+ <!-- Lucide Icons -->
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <!-- Mermaid.js -->
10
+ <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
11
+ <script>
12
+ mermaid.initialize({
13
+ startOnLoad: true,
14
+ theme: 'dark',
15
+ securityLevel: 'loose',
16
+ flowchart: {
17
+ useMaxWidth: true,
18
+ htmlLabels: true,
19
+ curve: 'basis'
20
+ },
21
+ themeVariables: {
22
+ primaryColor: '#06b6d4',
23
+ primaryTextColor: '#fff',
24
+ primaryBorderColor: '#06b6d4',
25
+ lineColor: '#d946ef',
26
+ secondaryColor: '#1e293b',
27
+ tertiaryColor: '#0f172a'
28
+ }
29
+ });
30
+ </script>
31
+ <link rel="stylesheet" href="style.css">
32
+ </head>
33
+ <body>
34
+ <div class="presentation-container">
35
+ <!-- Background Decor -->
36
+ <div class="bg-blobs">
37
+ <div class="blob blob-1"></div>
38
+ <div class="blob blob-2"></div>
39
+ </div>
40
+
41
+ <!-- Progress Bar -->
42
+ <div class="progress-bar">
43
+ <div class="progress-fill" id="progressFill"></div>
44
+ </div>
45
+
46
+ <!-- Slide Counter -->
47
+ <div class="slide-counter" id="slideCounter">
48
+ 01 / 19
49
+ </div>
50
+
51
+ <!-- Navigation -->
52
+ <div class="nav-controls">
53
+ <button class="nav-btn" id="prevBtn" aria-label="Previous">
54
+ <i data-lucide="chevron-left"></i>
55
+ </button>
56
+ <button class="nav-btn" id="nextBtn" aria-label="Next">
57
+ <i data-lucide="chevron-right"></i>
58
+ </button>
59
+ </div>
60
+
61
+ <div class="slides-wrapper" id="slidesWrapper">
62
+
63
+ <!-- SLIDE 1: Title -->
64
+ <section class="slide active" data-slide="1">
65
+ <div class="slide-content">
66
+ <div class="badge"><i data-lucide="sparkles"></i> The Next Evolution</div>
67
+ <!-- <h1 class="gradient-text">DataNexus:<br>Agentic AI Assistant</h1> -->
68
+ <h1 class="gradient-text">Agentic AI <br> in Data Catalog System</h1>
69
+ <p class="subtitle">Revolutionizing Data Discovery, Lineage, and Governance through intelligent agent orchestration.</p>
70
+ </div>
71
+ </section>
72
+
73
+ <!-- SLIDE 2: Overview -->
74
+ <section class="slide" data-slide="2">
75
+ <div class="slide-content">
76
+ <h2 class="gradient-text">Data Catalog Platform</h2>
77
+ <p class="subtitle">Unified intelligence for industrial data management.</p>
78
+ <div class="grid-cards stagger-in">
79
+ <div class="feature-card">
80
+ <div class="icon-box"><i data-lucide="search"></i></div>
81
+ <h3>Discovery</h3>
82
+ <p>Global asset searching across multi-cloud environments.</p>
83
+ </div>
84
+ <div class="feature-card">
85
+ <div class="icon-box"><i data-lucide="git-branch"></i></div>
86
+ <h3>Lineage</h3>
87
+ <p>Deep-hop dependency tracking and impact analysis.</p>
88
+ </div>
89
+ <div class="feature-card">
90
+ <div class="icon-box"><i data-lucide="activity"></i></div>
91
+ <h3>Health</h3>
92
+ <p>Real-time data quality scores and freshness alerts.</p>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </section>
97
+
98
+ <!-- SLIDE 3: AI Features -->
99
+ <section class="slide" data-slide="3">
100
+ <div class="slide-content">
101
+ <h2 class="gradient-text">Introducing AI Features</h2>
102
+ <p class="subtitle">A comprehensive toolkit for autonomous data intelligence.</p>
103
+ <div class="grid-cards stagger-in" style="grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem;">
104
+ <div class="feature-card" style="padding: 1rem;">
105
+ <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="users"></i></div>
106
+ <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Multi-Agent System</h3>
107
+ <p style="font-size: 0.8rem;">Coordinated specialist network.</p>
108
+ </div>
109
+ <div class="feature-card" style="padding: 1rem;">
110
+ <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="brain"></i></div>
111
+ <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Smart Query Understanding</h3>
112
+ <p style="font-size: 0.8rem;">Deep intent & semantic parsing.</p>
113
+ </div>
114
+ <div class="feature-card" style="padding: 1rem;">
115
+ <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="help-circle"></i></div>
116
+ <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Clarification Handling</h3>
117
+ <p style="font-size: 0.8rem;">Resolving ambiguity via dialogue.</p>
118
+ </div>
119
+ <div class="feature-card" style="padding: 1rem;">
120
+ <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="repeat"></i></div>
121
+ <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Multi-Step Reasoning</h3>
122
+ <p style="font-size: 0.8rem;">Autonomous ReAct Loop.</p>
123
+ </div>
124
+ <div class="feature-card" style="padding: 1rem;">
125
+ <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="layers"></i></div>
126
+ <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Parallel Agent Execution</h3>
127
+ <p style="font-size: 0.8rem;">Multithreaded task fulfillment.</p>
128
+ </div>
129
+ <div class="feature-card" style="padding: 1rem;">
130
+ <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="history"></i></div>
131
+ <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Memory & Context</h3>
132
+ <p style="font-size: 0.8rem;">Long-term conversation history.</p>
133
+ </div>
134
+ <div class="feature-card" style="padding: 1rem;">
135
+ <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="briefcase"></i></div>
136
+ <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Workspace Awareness</h3>
137
+ <p style="font-size: 0.8rem;">Deep metadata & schema insight.</p>
138
+ </div>
139
+ <div class="feature-card" style="padding: 1rem;">
140
+ <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="filter"></i></div>
141
+ <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Hybrid Search</h3>
142
+ <p style="font-size: 0.8rem;">Vector + Semantic + Structured.</p>
143
+ </div>
144
+ <div class="feature-card" style="padding: 1rem;">
145
+ <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="target"></i></div>
146
+ <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Decision Making</h3>
147
+ <p style="font-size: 0.8rem;">Autonomous path selection.</p>
148
+ </div>
149
+ <div class="feature-card" style="padding: 1rem;">
150
+ <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="gantt-chart"></i></div>
151
+ <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Task Decomposition</h3>
152
+ <p style="font-size: 0.8rem;">Breaking down complex goals.</p>
153
+ </div>
154
+ <div class="feature-card" style="padding: 1rem;">
155
+ <div class="icon-box" style="width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem;"><i data-lucide="coins"></i></div>
156
+ <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Token Tracking</h3>
157
+ <p style="font-size: 0.8rem;">Transparent usage monitoring.</p>
158
+ </div>
159
+ <div class="feature-card" style="padding: 1rem; border-color: var(--secondary-glow);">
160
+ <div class="badge" style="margin-bottom: 0.5rem; font-size: 0.5rem;">Future Scope</div>
161
+ <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Write / Action Capability</h3>
162
+ <p style="font-size: 0.8rem;">Direct metadata modifications.</p>
163
+ </div>
164
+ <div class="feature-card" style="padding: 1rem; border-color: var(--secondary-glow);">
165
+ <div class="badge" style="margin-bottom: 0.5rem; font-size: 0.5rem;">Future Scope</div>
166
+ <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Permission Control</h3>
167
+ <p style="font-size: 0.8rem;">Role-based governance.</p>
168
+ </div>
169
+ <div class="feature-card" style="padding: 1rem; border-color: var(--secondary-glow);">
170
+ <div class="badge" style="margin-bottom: 0.5rem; font-size: 0.5rem;">Future Scope</div>
171
+ <h3 style="font-size: 1rem; margin-bottom: 0.25rem;">Confirmation Flow</h3>
172
+ <p style="font-size: 0.8rem;">Human-in-the-loop validation.</p>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </section>
177
+
178
+ <!-- SLIDE 4: What is Agentic AI? -->
179
+ <section class="slide" data-slide="4">
180
+ <div class="slide-content">
181
+ <h2 class="gradient-text">What is Agentic AI?</h2>
182
+ <p class="subtitle">The shift from "Static Retrieval" to "Dynamic Reasoning".</p>
183
+ <div class="grid-cards stagger-in">
184
+ <div class="feature-card">
185
+ <div class="icon-box"><i data-lucide="brain-cog"></i></div>
186
+ <h3>Cognitive Agency</h3>
187
+ <p>An AI that can "think" through a problem, decide which tools to use, and verify results.</p>
188
+ </div>
189
+ <div class="feature-card">
190
+ <div class="icon-box"><i data-lucide="git-merge"></i></div>
191
+ <h3>The Basic Flow</h3>
192
+ <p>1. <strong>Plan:</strong> Decompose Query<br>2. <strong>Act:</strong> Use Expert Tools<br>3. <strong>Refine:</strong> Self-Correct</p>
193
+ </div>
194
+ <div class="feature-card">
195
+ <div class="icon-box"><i data-lucide="workflow"></i></div>
196
+ <h3>Stateful Logic</h3>
197
+ <p>Maintains memory throughout the loop to ensure no detail is missed during discovery.</p>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </section>
202
+
203
+ <!-- SLIDE 5: Why Agentic AI? -->
204
+ <section class="slide" data-slide="5">
205
+ <div class="slide-content">
206
+ <h2 class="gradient-text">Why Agentic AI?</h2>
207
+ <p class="subtitle">Moving beyond traditional RAG limitations.</p>
208
+ <div class="grid-cards stagger-in">
209
+ <div class="feature-card">
210
+ <div class="icon-box"><i data-lucide="brain-circuit"></i></div>
211
+ <h3>Multi-step Reasoning</h3>
212
+ <p>Decomposes "impossible" questions into logical steps.</p>
213
+ </div>
214
+ <div class="feature-card">
215
+ <div class="icon-box"><i data-lucide="help-circle"></i></div>
216
+ <h3>Human Clarification</h3>
217
+ <p>Asks for missing details instead of hallucinating.</p>
218
+ </div>
219
+ <div class="feature-card">
220
+ <div class="icon-box"><i data-lucide="shield-check"></i></div>
221
+ <h3>Verification</h3>
222
+ <p>Agents cross-check results before returning to user.</p>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </section>
227
+
228
+ <!-- SLIDE 6: Old Approach Architecture -->
229
+ <section class="slide" data-slide="6">
230
+ <div class="slide-content">
231
+ <div class="badge">Architecture: Legacy</div>
232
+ <h2 class="gradient-text">The Old RAG Pipeline</h2>
233
+ <p class="subtitle">A linear, one-shot retrieval flow.</p>
234
+ <div class="feature-card" style="margin-top: 2rem; background: rgba(0,0,0,0.3); overflow: auto; max-height: 60vh;">
235
+ <pre class="mermaid">
236
+ flowchart TD
237
+ A([User Query]) --> B[rag_query]
238
+ B --> C{Workspace loaded?}
239
+ C -->|No| D[_load_from_disk]
240
+ C -->|Yes| E[Load DOC_STORE]
241
+ D --> E
242
+ E --> F[Retrieve sections]
243
+ F --> G[Vector Search - FAISS]
244
+ G --> H[Rerank - Cross Encoder]
245
+ H --> I{Query Type}
246
+ I -->|Structured| J[Generate Mongo Query]
247
+ I -->|JSON logic| K[Generate Python Code]
248
+ I -->|Lineage| L[Fetch Lineage]
249
+ I -->|Direct text| M[Context Answer]
250
+ J --> N[Execute Mongo Query]
251
+ K --> O[Execute Python Safely]
252
+ L --> P[Lineage Results]
253
+ N --> Q[Results]
254
+ O --> Q
255
+ P --> Q
256
+ M --> Q
257
+ Q --> R[LLM Synthesis]
258
+ R --> S[Return JSON Response]
259
+
260
+ subgraph STORAGE
261
+ T[DOC_STORE]
262
+ U[FAISS Index]
263
+ V[Mongo Collection]
264
+ W[Metadata]
265
+ end
266
+ E --> T
267
+ T --> U
268
+ T --> V
269
+ T --> W
270
+
271
+ subgraph INITIALIZATION
272
+ X[rag_initialize]
273
+ X --> Y[Load Embedding Model]
274
+ X --> Z[Load Reranker]
275
+ X --> AA[Auto Load Vector DBs]
276
+ end
277
+ </pre>
278
+ </div>
279
+ </div>
280
+ </section>
281
+
282
+ <!-- SLIDE 7: Old Approach Flow -->
283
+ <section class="slide" data-slide="7">
284
+ <div class="slide-content">
285
+ <h2 class="gradient-text">The Linear Flow</h2>
286
+ <div class="grid-cards stagger-in">
287
+ <div class="feature-card">
288
+ <h3>1. Retrieve</h3>
289
+ <p>Vector search finds chunks in workspace JSON.</p>
290
+ </div>
291
+ <div class="feature-card">
292
+ <h3>2. Rerank</h3>
293
+ <p>Cross-encoder filters for high similarity.</p>
294
+ </div>
295
+ <div class="feature-card">
296
+ <h3>3. Classify</h3>
297
+ <p>Hardcoded routing to Mongo or Python paths.</p>
298
+ </div>
299
+ <div class="feature-card">
300
+ <h3>4. Synthesize</h3>
301
+ <p>LLM summarizes the final context once.</p>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </section>
306
+
307
+ <!-- SLIDE 8: Limitations -->
308
+ <section class="slide" data-slide="8">
309
+ <div class="slide-content">
310
+ <h2 class="gradient-text">Legacy Bottlenecks</h2>
311
+ <div class="grid-cards stagger-in">
312
+ <div class="feature-card" style="border-top: 4px solid var(--secondary);">
313
+ <div class="icon-box" style="color: var(--secondary);"><i data-lucide="alert-triangle"></i></div>
314
+ <h3>Zero Recovery</h3>
315
+ <p>If retrieval fails at step 1, the whole answer fails.</p>
316
+ </div>
317
+ <div class="feature-card" style="border-top: 4px solid var(--secondary);">
318
+ <div class="icon-box" style="color: var(--secondary);"><i data-lucide="eye-off"></i></div>
319
+ <h3>Context Blindness</h3>
320
+ <p>Cannot handle complex dependencies across sections.</p>
321
+ </div>
322
+ <div class="feature-card" style="border-top: 4px solid var(--secondary);">
323
+ <div class="icon-box" style="color: var(--secondary);"><i data-lucide="user-x"></i></div>
324
+ <h3>Passive</h3>
325
+ <p>Guesses intent rather than clarifying with the user.</p>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </section>
330
+
331
+ <!-- SLIDE 9: Agentic AI Architecture -->
332
+ <section class="slide" data-slide="9">
333
+ <div class="slide-content">
334
+ <div class="badge">Architecture: Modern</div>
335
+ <h2 class="gradient-text">The Agentic Graph</h2>
336
+ <p class="subtitle">Dynamic, stateful, and autonomous execution.</p>
337
+ <div class="feature-card" style="margin-top: 2rem; background: rgba(0,0,0,0.3); overflow: auto; max-height: 60vh;">
338
+ <pre class="mermaid">
339
+ flowchart TD
340
+ A([User Query]) --> RL{Rate limit?}
341
+ RL --> |no| B[OrchestratorAgent]
342
+ B --> C[Classify Intent]
343
+ C --> CG{Ambiguity?}
344
+ CG --> |yes| CA[ClarificationAgent]
345
+ CA --> UR([User replies])
346
+ UR --> B
347
+ CG --> |no| D{read or write?}
348
+ D --> |read| ST{Parallel Dispatch}
349
+ D --> |write| AUTH{Auth Check}
350
+ AUTH --> |yes| W4[ActionAgent]
351
+ ST --> READ_AGENTS
352
+ subgraph READ_AGENTS[Specialist Agents]
353
+ Q[QueryAgent]
354
+ AN[AnalyticsAgent]
355
+ LN[LineageAgent]
356
+ HN[HealthAgent]
357
+ end
358
+ READ_AGENTS --> REACT[ReAct Loop]
359
+ REACT --> S[Orchestrator Merge]
360
+ S --> S1[LLM Synthesis]
361
+ S1 --> OUT([Final JSON])
362
+ </pre>
363
+ </div>
364
+ </div>
365
+ </section>
366
+
367
+ <!-- SLIDE 10: Agents in System -->
368
+ <section class="slide" data-slide="10">
369
+ <div class="slide-content">
370
+ <h2 class="gradient-text">Agent Ecosystem</h2>
371
+ <div class="grid-cards stagger-in">
372
+ <div class="feature-card">
373
+ <div class="icon-box"><i data-lucide="cpu"></i></div>
374
+ <h3>Orchestrator</h3>
375
+ <p>The routing brain.</p>
376
+ </div>
377
+ <div class="feature-card">
378
+ <div class="icon-box"><i data-lucide="helping-hand"></i></div>
379
+ <h3>Clarification</h3>
380
+ <p>The gap-filler.</p>
381
+ </div>
382
+ <div class="feature-card">
383
+ <div class="icon-box"><i data-lucide="shield"></i></div>
384
+ <h3>Specialists</h3>
385
+ <p>The domain experts.</p>
386
+ </div>
387
+ <div class="feature-card">
388
+ <div class="icon-box"><i data-lucide="zap"></i></div>
389
+ <h3>Action</h3>
390
+ <p>The active executor.</p>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </section>
395
+
396
+ <!-- SLIDE 11: Orchestrator Agent -->
397
+ <section class="slide" data-slide="11">
398
+ <div class="slide-content">
399
+ <h2 class="gradient-text">The Orchestrator</h2>
400
+ <div class="grid-cards stagger-in">
401
+ <div class="feature-card">
402
+ <h3>Context Injection</h3>
403
+ <p>Enriches query with history and database metadata.</p>
404
+ </div>
405
+ <div class="feature-card">
406
+ <h3>Intent Routing</h3>
407
+ <p>Classifies if the task is Read, Write, or Ambiguous.</p>
408
+ </div>
409
+ <div class="feature-card">
410
+ <h3>Task Splitting</h3>
411
+ <p>Parallelizes work across multi-threading specialists.</p>
412
+ </div>
413
+ </div>
414
+ </div>
415
+ </section>
416
+
417
+ <!-- SLIDE 12: Clarification Agent -->
418
+ <section class="slide" data-slide="12">
419
+ <div class="slide-content">
420
+ <h2 class="gradient-text">The Clarification Agent</h2>
421
+ <p class="subtitle">Guaranteed 100% precision through dialogue.</p>
422
+ <div class="feature-card" style="border-left: 6px solid var(--accent); background: rgba(245, 158, 11, 0.05);">
423
+ <div class="grid-cards" style="margin-top:0;">
424
+ <div>
425
+ <h3>Ambiguity Scoring</h3>
426
+ <p>If confidence < 0.5, it halts execution.</p>
427
+ </div>
428
+ <div>
429
+ <h3>User Engagement</h3>
430
+ <p>Asks for specific time-ranges, asset names, or columns.</p>
431
+ </div>
432
+ </div>
433
+ <div class="query-example" style="border-left-color: var(--accent);">
434
+ <span class="query-label">Dialogue Preview</span>
435
+ <strong>User:</strong> "Find the Sales table."<br>
436
+ <strong>Agent:</strong> "I found 3 tables related to 'Sales' which are named as 'marketing', 'sales_category1', 'sales_category2'. Which one should I analyze?"
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </section>
441
+
442
+ <!-- SLIDE 13: Specialists -->
443
+ <section class="slide" data-slide="13">
444
+ <div class="slide-content">
445
+ <h2 class="gradient-text">Specialist Agents</h2>
446
+ <div class="grid-cards stagger-in">
447
+ <div class="feature-card">
448
+ <div class="icon-box"><i data-lucide="database"></i></div>
449
+ <h3>Query SME</h3>
450
+ <p>Factual lookup & Mongo query generation.</p>
451
+ <div class="query-example">
452
+ <span class="query-label">Example Query</span>
453
+ "List all columns in 'Users' with PII tags."
454
+ </div>
455
+ </div>
456
+ <div class="feature-card">
457
+ <div class="icon-box"><i data-lucide="bar-chart-2"></i></div>
458
+ <h3>Analytics SME</h3>
459
+ <p>Complex aggregations & success rate math.</p>
460
+ <div class="query-example">
461
+ <span class="query-label">Example Query</span>
462
+ "How many jobs failed in 'ETL_Main' today?"
463
+ </div>
464
+ </div>
465
+ <div class="feature-card">
466
+ <div class="icon-box"><i data-lucide="network"></i></div>
467
+ <h3>Lineage SME</h3>
468
+ <p>Traverses upstream/downstream flows.</p>
469
+ <div class="query-example">
470
+ <span class="query-label">Example Query</span>
471
+ "Show downstream reports for 'Order_Header'."
472
+ </div>
473
+ </div>
474
+ <div class="feature-card">
475
+ <div class="icon-box"><i data-lucide="heart-pulse"></i></div>
476
+ <h3>Health SME</h3>
477
+ <p>Calculates freshness & quality scores.</p>
478
+ <div class="query-example">
479
+ <span class="query-label">Example Query</span>
480
+ "Is the 'Inventory' AWS Bucket stale?"
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ </section>
486
+
487
+ <!-- SLIDE 14: Action Agent -->
488
+ <section class="slide" data-slide="14">
489
+ <div class="slide-content">
490
+ <h2 class="gradient-text">The Action Agent</h2>
491
+ <div class="badge" style="color: var(--secondary); border-color: var(--secondary);">Dev-Stage: In Progress</div>
492
+ <div class="grid-cards stagger-in">
493
+ <div class="feature-card">
494
+ <h3>Active Modification</h3>
495
+ <p>Updating descriptions and tags via AI.</p>
496
+ </div>
497
+ <div class="feature-card">
498
+ <h3>Security First</h3>
499
+ <p>Permission checks and Human-in-the-Loop confirms.</p>
500
+ </div>
501
+ <div class="feature-card">
502
+ <h3>Audit Log</h3>
503
+ <p>Who, What, When tracking for all write actions.</p>
504
+ </div>
505
+ </div>
506
+ <div class="query-example" style="border-left-color: var(--secondary); margin-top: 2rem;">
507
+ <span class="query-label">Action Request</span>
508
+ <strong>User:</strong> "Set the owner of 'Payment_Gateway' to 'DevOps-Team'."<br>
509
+ <strong>System:</strong> "Permission verified. Requesting human confirmation..."
510
+ </div>
511
+ </div>
512
+ </section>
513
+
514
+ <!-- SLIDE 15: ReAct Loop -->
515
+ <section class="slide" data-slide="15">
516
+ <div class="slide-content">
517
+ <h2 class="gradient-text">The ReAct Tool Loop</h2>
518
+ <p class="subtitle">The agents' inner monologue.</p>
519
+ <div class="feature-card">
520
+ <div class="grid-cards" style="margin-top:0; text-align: center;">
521
+ <div>
522
+ <div class="icon-box" style="margin: 0 auto 1rem;"><i data-lucide="info"></i></div>
523
+ <h3>Reason</h3>
524
+ </div>
525
+ <div>
526
+ <div class="icon-box" style="margin: 0 auto 1rem;"><i data-lucide="hammer"></i></div>
527
+ <h3>Act</h3>
528
+ </div>
529
+ <div>
530
+ <div class="icon-box" style="margin: 0 auto 1rem;"><i data-lucide="scan-face"></i></div>
531
+ <h3>Observe</h3>
532
+ </div>
533
+ </div>
534
+ <p style="margin-top: 2rem; text-align: center; color: var(--text-muted);">Iterates up to 5 times to refine and verify facts.</p>
535
+ </div>
536
+ </div>
537
+ </section>
538
+
539
+ <!-- SLIDE 16: Comparison -->
540
+ <section class="slide" data-slide="16">
541
+ <div class="slide-content">
542
+ <h2 class="gradient-text">Comparison: Old vs New</h2>
543
+ <div class="comparison-container">
544
+ <table class="comparison-table">
545
+ <thead>
546
+ <tr>
547
+ <th>Feature</th>
548
+ <th>Old RAG</th>
549
+ <th>Agentic Assistant</th>
550
+ </tr>
551
+ </thead>
552
+ <tbody>
553
+ <tr>
554
+ <td>Logic Pattern</td>
555
+ <td>Static / Linear</td>
556
+ <td>Dynamic / Graph-based</td>
557
+ </tr>
558
+ <tr>
559
+ <td>Multiple Tasks</td>
560
+ <td>Fail / Sequential</td>
561
+ <td>Parallel Specialist Dispatch</td>
562
+ </tr>
563
+ <tr>
564
+ <td>Gap Resolution</td>
565
+ <td>Hallucinates</td>
566
+ <td>Clarification Agent Enquiry</td>
567
+ </tr>
568
+ <tr>
569
+ <td>Consistency</td>
570
+ <td>Hit-or-Miss</td>
571
+ <td>High (via ReAct verification)</td>
572
+ </tr>
573
+ </tbody>
574
+ </table>
575
+ </div>
576
+ </div>
577
+ </section>
578
+
579
+ <!-- SLIDE 17: Query Performance Comparison -->
580
+ <section class="slide" data-slide="17">
581
+ <div class="slide-content">
582
+ <h2 class="gradient-text">Performance: Query Benchmarks</h2>
583
+ <p class="subtitle">Direct comparison across different query complexities.</p>
584
+ <div class="comparison-container">
585
+ <table class="comparison-table">
586
+ <thead>
587
+ <tr>
588
+ <th>Query Type</th>
589
+ <th>Old RAG Approach</th>
590
+ <th>Agentic AI Approach</th>
591
+ </tr>
592
+ </thead>
593
+ <tbody>
594
+ <tr>
595
+ <td><strong>Basic Discovery</strong><br><small>"Find sales table"</small></td>
596
+ <td><span style="color: var(--danger);">✘</span> Often Guesses Wrong</td>
597
+ <td><span style="color: var(--success);">✔</span> Precise (via Clarification)</td>
598
+ </tr>
599
+ <tr>
600
+ <td><strong>Multi-step Logic</strong><br><small>"Find 'Users' in Prod vs Dev"</small></td>
601
+ <td><span style="color: var(--danger);">✘</span> Context Overflow</td>
602
+ <td><span style="color: var(--success);">✔</span> Parallel SME Dispatch</td>
603
+ </tr>
604
+ <tr>
605
+ <td><strong>Data Analytics</strong><br><small>"Success rate of Job X?"</small></td>
606
+ <td><span style="color: var(--danger);">✘</span> Information Unavailable</td>
607
+ <td><span style="color: var(--success);">✔</span> Real-time Calculation</td>
608
+ </tr>
609
+ <tr>
610
+ <td><strong>Impact Analysis</strong><br><small>"Downstream of Column Y"</small></td>
611
+ <td><span style="color: var(--danger);">✘</span> 50% Failure Rate</td>
612
+ <td><span style="color: var(--success);">✔</span> Deep-hop Lineage Trace</td>
613
+ </tr>
614
+ </tbody>
615
+ </table>
616
+ </div>
617
+ </div>
618
+ </section>
619
+
620
+ <!-- SLIDE 18: Why Agentic > Simple Chat -->
621
+ <section class="slide" data-slide="18">
622
+ <div class="slide-content">
623
+ <h2 class="gradient-text">Agentic Choice: Beyond the ChatBot</h2>
624
+ <p class="subtitle">Why industrial data catalogs need "Agency," not just conversation.</p>
625
+ <div class="grid-cards stagger-in" style="grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));">
626
+ <div class="feature-card">
627
+ <div class="icon-box"><i data-lucide="brain-circuit"></i></div>
628
+ <h3>From Answering to Solving</h3>
629
+ <p>A standard chatbot only predicts text. Our Agentic AI **decomposes complex goals** into logical steps to solve multi-hop data problems autonomously.</p>
630
+ </div>
631
+ <div class="feature-card">
632
+ <div class="icon-box"><i data-lucide="wrench"></i></div>
633
+ <h3>Active Tool Integration</h3>
634
+ <p>Instead of hallucinating facts, agents actively **execute specialized tools** (SQL, Python, Mongo) to fetch real-time, verified metadata.</p>
635
+ </div>
636
+ <div class="feature-card">
637
+ <div class="icon-box"><i data-lucide="users-2"></i></div>
638
+ <h3>Specialized Expert Swarms</h3>
639
+ <p>A simple bot is a generalist. We use **SME Agents** (Lineage, Analytics, Health) that act as individual domain experts for 100% technical accuracy.</p>
640
+ </div>
641
+ <div class="feature-card">
642
+ <div class="icon-box"><i data-lucide="navigation"></i></div>
643
+ <h3>Autonomous Path Selection</h3>
644
+ <p>Chatbots hit a dead-end if a query is ambiguous. Our system **self-corrects and pivots** to find alternative discovery paths or asks the user for missing info.</p>
645
+ </div>
646
+ <div class="feature-card">
647
+ <div class="icon-box"><i data-lucide="shield-check"></i></div>
648
+ <h3>Self-Verifying Logic</h3>
649
+ <p>The **ReAct Loop** forces the AI to check its own work. If the observation doesn't match the plan, the agent refuses to guess and restarts the logic trail.</p>
650
+ </div>
651
+ <div class="feature-card">
652
+ <div class="icon-box"><i data-lucide="git-pull-request"></i></div>
653
+ <h3>Enterprise Context Awareness</h3>
654
+ <p>Seamlessly integrates with **Workspace Metadata** and RBAC, ensuring that AI responses are contextually grounded in your specific industrial environment.</p>
655
+ </div>
656
+ </div>
657
+ </div>
658
+ </section>
659
+
660
+ <!-- SLIDE 19: Closing -->
661
+ <section class="slide" data-slide="19">
662
+ <div class="slide-content">
663
+ <h1 class="gradient-text">The Future is Agentic.</h1>
664
+ <!-- <p class="subtitle">Beyond Conversation. Toward Autonomous Data Intelligence.</p> -->
665
+ <!-- <div class="badge" style="margin-top: 3rem;"><i data-lucide="mail"></i> Contact: Team DataNexus AI</div> -->
666
+ </div>
667
+ </section>
668
+
669
+ </div>
670
+
671
+ <div class="keyboard-hints">
672
+ <span>← → to navigate | SPACE to jump</span>
673
+ </div>
674
+ </div>
675
+
676
+ <!-- Lucide Init -->
677
+ <script>
678
+ lucide.createIcons();
679
+ </script>
680
+ <script src="main.js"></script>
681
+ </body>
682
  </html>
main.js ADDED
@@ -0,0 +1,99 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', () => {
2
+ const slides = document.querySelectorAll('.slide');
3
+ const totalSlides = slides.length;
4
+ let currentSlideIndex = 0;
5
+
6
+ const progressFill = document.getElementById('progressFill');
7
+ const slideCounter = document.getElementById('slideCounter');
8
+ const nextBtn = document.getElementById('nextBtn');
9
+ const prevBtn = document.getElementById('prevBtn');
10
+ const blobs = document.querySelectorAll('.blob');
11
+
12
+ function updateSlide() {
13
+ slides.forEach((slide, index) => {
14
+ slide.classList.remove('active');
15
+ if (index === currentSlideIndex) {
16
+ slide.classList.add('active');
17
+ }
18
+ });
19
+
20
+ // Update progress bar
21
+ const progress = ((currentSlideIndex + 1) / totalSlides) * 100;
22
+ progressFill.style.width = `${progress}%`;
23
+
24
+ // Update slide counter text
25
+ const currentCount = (currentSlideIndex + 1).toString().padStart(2, '0');
26
+ const totalCount = totalSlides.toString().padStart(2, '0');
27
+ slideCounter.textContent = `${currentCount} / ${totalCount}`;
28
+
29
+ // Update button states
30
+ prevBtn.disabled = currentSlideIndex === 0;
31
+ nextBtn.disabled = currentSlideIndex === totalSlides - 1;
32
+
33
+ prevBtn.style.opacity = prevBtn.disabled ? '0.2' : '1';
34
+ nextBtn.style.opacity = nextBtn.disabled ? '0.2' : '1';
35
+
36
+ // Background parallax effect
37
+ blobs.forEach((blob, i) => {
38
+ const shiftX = (currentSlideIndex / totalSlides) * 100 * (i === 0 ? 1 : -1);
39
+ const shiftY = (currentSlideIndex / totalSlides) * 50 * (i === 0 ? -1 : 1);
40
+ blob.style.transform = `translate(${shiftX}px, ${shiftY}px)`;
41
+ });
42
+ }
43
+
44
+ function nextSlide() {
45
+ if (currentSlideIndex < totalSlides - 1) {
46
+ currentSlideIndex++;
47
+ updateSlide();
48
+ } else {
49
+ // Flash effect for end of presentation
50
+ document.body.style.backgroundColor = 'rgba(6, 182, 212, 0.1)';
51
+ setTimeout(() => {
52
+ document.body.style.backgroundColor = '#020617';
53
+ }, 200);
54
+ }
55
+ }
56
+
57
+ function prevSlide() {
58
+ if (currentSlideIndex > 0) {
59
+ currentSlideIndex--;
60
+ updateSlide();
61
+ }
62
+ }
63
+
64
+ // Click handlers
65
+ nextBtn.addEventListener('click', nextSlide);
66
+ prevBtn.addEventListener('click', prevSlide);
67
+
68
+ // Keyboard handlers
69
+ document.addEventListener('keydown', (e) => {
70
+ if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'ArrowDown') {
71
+ e.preventDefault();
72
+ nextSlide();
73
+ } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
74
+ e.preventDefault();
75
+ prevSlide();
76
+ }
77
+ });
78
+
79
+ // Touch support (simple swipe)
80
+ let touchstartX = 0;
81
+ let touchendX = 0;
82
+
83
+ document.addEventListener('touchstart', (e) => {
84
+ touchstartX = e.changedTouches[0].screenX;
85
+ });
86
+
87
+ document.addEventListener('touchend', (e) => {
88
+ touchendX = e.changedTouches[0].screenX;
89
+ handleSwipe();
90
+ });
91
+
92
+ function handleSwipe() {
93
+ if (touchendX < touchstartX - 50) nextSlide();
94
+ if (touchendX > touchstartX + 50) prevSlide();
95
+ }
96
+
97
+ // Init
98
+ updateSlide();
99
+ });
style.css CHANGED
@@ -1,28 +1,372 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
28
  }
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');
2
+
3
+ :root {
4
+ --bg-dark: #020617;
5
+ --bg-card: rgba(15, 23, 42, 0.4);
6
+ --primary: #06b6d4;
7
+ --primary-glow: rgba(6, 182, 212, 0.4);
8
+ --secondary: #d946ef;
9
+ --secondary-glow: rgba(217, 70, 239, 0.4);
10
+ --accent: #f59e0b;
11
+ --text-main: #f8fafc;
12
+ --text-muted: #94a3b8;
13
+ --glass-border: rgba(255, 255, 255, 0.1);
14
+ --transition-slow: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
15
+ --transition-fast: all 0.3s ease;
16
+ }
17
+
18
+ * {
19
+ margin: 0;
20
+ padding: 0;
21
+ box-sizing: border-box;
22
+ -webkit-font-smoothing: antialiased;
23
+ }
24
+
25
  body {
26
+ font-family: 'Inter', sans-serif;
27
+ background-color: var(--bg-dark);
28
+ color: var(--text-main);
29
+ overflow: hidden;
30
+ height: 100vh;
31
+ width: 100vw;
32
+ }
33
+
34
+ /* Cinematic Background */
35
+ .presentation-container {
36
+ position: relative;
37
+ height: 100vh;
38
+ width: 100vw;
39
+ display: flex;
40
+ flex-direction: column;
41
+ background: var(--bg-dark);
42
+ overflow: hidden;
43
+ }
44
+
45
+ .bg-blobs {
46
+ position: absolute;
47
+ top: 0;
48
+ left: 0;
49
+ width: 100%;
50
+ height: 100%;
51
+ z-index: 0;
52
+ filter: blur(80px);
53
+ opacity: 0.4;
54
+ }
55
+
56
+ .blob {
57
+ position: absolute;
58
+ width: 50vw;
59
+ height: 50vw;
60
+ border-radius: 50%;
61
+ animation: blobFloat 20s infinite alternate;
62
+ }
63
+
64
+ .blob-1 { background: var(--primary-glow); top: -10%; left: -10%; }
65
+ .blob-2 { background: var(--secondary-glow); bottom: -10%; right: -10%; animation-delay: -5s; }
66
+
67
+ @keyframes blobFloat {
68
+ 0% { transform: translate(0, 0) scale(1); }
69
+ 100% { transform: translate(10%, 10%) scale(1.2); }
70
+ }
71
+
72
+ /* Progress Bar */
73
+ .progress-bar {
74
+ position: fixed;
75
+ top: 0;
76
+ left: 0;
77
+ width: 100%;
78
+ height: 3px;
79
+ background: rgba(255, 255, 255, 0.05);
80
+ z-index: 1000;
81
+ }
82
+
83
+ .progress-fill {
84
+ height: 100%;
85
+ width: 0%;
86
+ background: linear-gradient(to right, var(--primary), var(--secondary));
87
+ box-shadow: 0 0 20px var(--primary);
88
+ transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
89
+ }
90
+
91
+ /* Slide Counter & Navigation */
92
+ .slide-counter {
93
+ position: fixed;
94
+ bottom: 2.5rem;
95
+ left: 2.5rem;
96
+ font-family: 'Space Grotesk', sans-serif;
97
+ font-size: 0.75rem;
98
+ font-weight: 600;
99
+ color: var(--text-muted);
100
+ letter-spacing: 0.2em;
101
+ z-index: 1000;
102
+ }
103
+
104
+ .nav-controls {
105
+ position: fixed;
106
+ bottom: 2.5rem;
107
+ right: 2.5rem;
108
+ display: flex;
109
+ gap: 0.75rem;
110
+ z-index: 1000;
111
+ }
112
+
113
+ .nav-btn {
114
+ background: rgba(255, 255, 255, 0.03);
115
+ border: 1px solid var(--glass-border);
116
+ color: var(--text-main);
117
+ width: 3.5rem;
118
+ height: 3.5rem;
119
+ border-radius: 1rem;
120
+ display: flex;
121
+ align-items: center;
122
+ justify-content: center;
123
+ cursor: pointer;
124
+ transition: var(--transition-fast);
125
+ backdrop-filter: blur(10px);
126
+ }
127
+
128
+ .nav-btn:hover {
129
+ background: rgba(255, 255, 255, 0.08);
130
+ border-color: var(--primary);
131
+ transform: translateY(-2px);
132
+ }
133
+
134
+ /* Slides Wrapper */
135
+ .slides-wrapper {
136
+ flex: 1;
137
+ position: relative;
138
+ z-index: 1;
139
+ }
140
+
141
+ .slide {
142
+ position: absolute;
143
+ top: 0;
144
+ left: 0;
145
+ width: 100%;
146
+ height: 100%;
147
+ display: flex;
148
+ align-items: center;
149
+ justify-content: center;
150
+ opacity: 0;
151
+ pointer-events: none;
152
+ transform: scale(0.95);
153
+ filter: blur(10px);
154
+ transition: var(--transition-slow);
155
+ padding: 2rem 10vw;
156
+ }
157
+
158
+ .slide.active {
159
+ opacity: 1;
160
+ pointer-events: all;
161
+ transform: scale(1);
162
+ filter: blur(0);
163
+ }
164
+
165
+ .slide-content {
166
+ width: 100%;
167
+ max-width: 1400px;
168
+ }
169
+
170
+ /* Typography Overhaul */
171
+ h1, h2, h3 {
172
+ font-family: 'Space Grotesk', sans-serif;
173
+ font-weight: 700;
174
  }
175
 
176
  h1 {
177
+ font-size: clamp(3rem, 8vw, 6rem);
178
+ line-height: 0.95;
179
+ margin-bottom: 2rem;
180
+ letter-spacing: -0.03em;
181
+ }
182
+
183
+ h2 {
184
+ font-size: clamp(2rem, 5vw, 3.5rem);
185
+ margin-bottom: 1.5rem;
186
+ letter-spacing: -0.02em;
187
+ }
188
+
189
+ .gradient-text {
190
+ background: linear-gradient(135deg, #fff 30%, var(--primary) 70%, var(--secondary));
191
+ -webkit-background-clip: text;
192
+ -webkit-text-fill-color: transparent;
193
+ }
194
+
195
+ .subtitle {
196
+ font-size: 1.25rem;
197
+ color: var(--text-muted);
198
+ line-height: 1.6;
199
+ max-width: 800px;
200
+ }
201
+
202
+ .badge {
203
+ display: inline-flex;
204
+ align-items: center;
205
+ gap: 0.5rem;
206
+ padding: 0.5rem 1rem;
207
+ background: rgba(255, 255, 255, 0.05);
208
+ border: 1px solid var(--glass-border);
209
+ border-radius: 99px;
210
+ font-size: 0.7rem;
211
+ text-transform: uppercase;
212
+ letter-spacing: 0.1em;
213
+ font-weight: 600;
214
+ color: var(--primary);
215
+ margin-bottom: 2rem;
216
+ }
217
+
218
+ /* Components */
219
+ .grid-cards {
220
+ display: grid;
221
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
222
+ gap: 1.5rem;
223
+ margin-top: 3rem;
224
+ }
225
+
226
+ .feature-card {
227
+ background: var(--bg-card);
228
+ border: 1px solid var(--glass-border);
229
+ padding: 2.5rem;
230
+ border-radius: 2rem;
231
+ transition: var(--transition-fast);
232
+ position: relative;
233
+ overflow: hidden;
234
+ }
235
+
236
+ .feature-card::before {
237
+ content: '';
238
+ position: absolute;
239
+ top: 0;
240
+ left: 0;
241
+ width: 100%;
242
+ height: 100%;
243
+ background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.05));
244
+ opacity: 0;
245
+ transition: var(--transition-fast);
246
+ }
247
+
248
+ .feature-card:hover {
249
+ transform: translateY(-8px);
250
+ border-color: var(--primary);
251
+ background: rgba(15, 23, 42, 0.6);
252
+ }
253
+
254
+ .feature-card:hover::before { opacity: 1; }
255
+
256
+ .icon-box {
257
+ width: 3.5rem;
258
+ height: 3.5rem;
259
+ background: rgba(255, 255, 255, 0.03);
260
+ border-radius: 1rem;
261
+ display: flex;
262
+ align-items: center;
263
+ justify-content: center;
264
+ margin-bottom: 1.5rem;
265
+ color: var(--primary);
266
  }
267
 
268
+ .icon-box i { width: 1.5rem; height: 1.5rem; }
269
+
270
+ h3 {
271
+ font-size: 1.5rem;
272
+ margin-bottom: 0.75rem;
273
+ color: #fff;
274
  }
275
 
276
+ .feature-card p {
277
+ color: var(--text-muted);
278
+ line-height: 1.6;
279
+ font-size: 0.95rem;
280
+ }
281
+
282
+ /* Comparison Table */
283
+ .comparison-container {
284
+ background: var(--bg-card);
285
+ border: 1px solid var(--glass-border);
286
+ border-radius: 2rem;
287
+ overflow: hidden;
288
+ margin-top: 2rem;
289
+ }
290
+
291
+ .comparison-table {
292
+ width: 100%;
293
+ border-collapse: collapse;
294
+ }
295
+
296
+ .comparison-table th {
297
+ padding: 1.5rem 2rem;
298
+ text-align: left;
299
+ font-family: 'Space Grotesk', sans-serif;
300
+ color: var(--primary);
301
+ font-size: 1.1rem;
302
+ background: rgba(255, 255, 255, 0.02);
303
+ }
304
+
305
+ .comparison-table td {
306
+ padding: 1.25rem 2rem;
307
+ border-top: 1px solid var(--glass-border);
308
+ color: var(--text-muted);
309
+ }
310
+
311
+ .comparison-table tr:hover td {
312
+ background: rgba(255, 255, 255, 0.02);
313
+ color: #fff;
314
+ }
315
+
316
+ /* Animations */
317
+ .stagger-in > * {
318
+ opacity: 0;
319
+ transform: translateY(20px);
320
+ }
321
+
322
+ .active .stagger-in > * {
323
+ animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
324
+ }
325
+
326
+ .active .stagger-in > *:nth-child(1) { animation-delay: 0.1s; }
327
+ .active .stagger-in > *:nth-child(2) { animation-delay: 0.2s; }
328
+ .active .stagger-in > *:nth-child(3) { animation-delay: 0.3s; }
329
+ .active .stagger-in > *:nth-child(4) { animation-delay: 0.4s; }
330
+
331
+ @keyframes fadeInUp {
332
+ from { opacity: 0; transform: translateY(20px); }
333
+ to { opacity: 1; transform: translateY(0); }
334
+ }
335
+
336
+ /* Keyboard Hints */
337
+ .keyboard-hints {
338
+ position: fixed;
339
+ bottom: 2.75rem;
340
+ left: 50%;
341
+ transform: translateX(-50%);
342
+ font-size: 0.65rem;
343
+ color: var(--text-muted);
344
+ text-transform: uppercase;
345
+ letter-spacing: 0.2em;
346
+ opacity: 0.4;
347
+ transition: opacity 0.3s;
348
+ }
349
+
350
+ .keyboard-hints:hover { opacity: 1; }
351
+
352
+ /* Query Examples */
353
+ .query-example {
354
+ margin-top: 1rem;
355
+ padding: 0.75rem 1rem;
356
+ background: rgba(255, 255, 255, 0.05);
357
+ border-radius: 0.75rem;
358
+ border-left: 3px solid var(--primary);
359
+ font-family: 'Space Grotesk', sans-serif;
360
+ font-size: 0.8rem;
361
+ color: var(--text-main);
362
  }
363
 
364
+ .query-label {
365
+ display: block;
366
+ font-size: 0.65rem;
367
+ text-transform: uppercase;
368
+ letter-spacing: 0.1em;
369
+ color: var(--primary);
370
+ margin-bottom: 0.25rem;
371
+ font-weight: 700;
372
  }