Hugging Face's logo

Spaces:
DreamVu
/
SABER
Running

App Files Community
aggarwalrajat commited on
Commit
eb40d36
·
verified ·
1 Parent(s): 991cd17

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1281 -18
index.html CHANGED
@@ -1,19 +1,1282 @@
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>SABER — A Scalable Action-Based Embodied Dataset for Real-World VLA Adaptation | DreamVu</title>
7
+ <meta name="description" content="SABER: 44.8K robot-training samples from 100+ hours of real in-store human activity. Three complementary action supervision streams for domain-specific VLA adaptation.">
8
+ <link rel="icon" type="image/x-icon" href="https://dreamvu.ai/wp-content/themes/DreamVU%20Custom%20theme/assets/images/favicon.ico">
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
10
+ <style>
11
+ /* ═══════════════════════════════════════════
12
+ DreamVu Design System — SABER Page
13
+ ═══════════════════════════════════════════ */
14
+ :root {
15
+ --bg-dark: #0f1419;
16
+ --bg-darker: #0b1729;
17
+ --bg-card: #1c2d44;
18
+ --bg-card-hover: #243550;
19
+ --orange: #f5a623;
20
+ --orange-bright: #ffb84d;
21
+ --blue-accent: #3b82f6;
22
+ --blue-glow: rgba(59, 130, 246, 0.15);
23
+ --cyan: #06b6d4;
24
+ --green: #7BF1A8;
25
+ --text-primary: #f0f2f5;
26
+ --text-secondary: #94a3b8;
27
+ --text-muted: #64748b;
28
+ --gradient-orange: linear-gradient(135deg, #f5a623, #ff6b35);
29
+ --gradient-blue: linear-gradient(135deg, #3b82f6, #06b6d4);
30
+ --border-subtle: rgba(255, 255, 255, 0.06);
31
+ --border-light: rgba(255, 255, 255, 0.1);
32
+ }
33
+
34
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
35
+ html { scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
36
+ body {
37
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
38
+ background: var(--bg-dark);
39
+ color: var(--text-primary);
40
+ line-height: 1.6;
41
+ -webkit-font-smoothing: antialiased;
42
+ overflow-x: hidden;
43
+ }
44
+
45
+ /* ── NAV ── */
46
+ nav {
47
+ position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
48
+ height: 72px; padding: 0 48px;
49
+ display: flex; align-items: center; justify-content: space-between;
50
+ background: rgba(11, 23, 41, 0.85);
51
+ backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
52
+ border-bottom: 1px solid var(--border-subtle);
53
+ }
54
+ .nav-logo img { height: 28px; }
55
+ .nav-links { display: flex; align-items: center; gap: 32px; }
56
+ .nav-links a {
57
+ font-size: 14px; font-weight: 500; color: var(--text-secondary);
58
+ text-decoration: none; transition: color 0.2s;
59
+ }
60
+ .nav-links a:hover { color: var(--orange); }
61
+ .btn-cta {
62
+ display: inline-flex; align-items: center; gap: 8px;
63
+ background: var(--gradient-orange); color: #000;
64
+ padding: 10px 24px; border-radius: 8px;
65
+ font-size: 14px; font-weight: 600; text-decoration: none;
66
+ transition: all 0.2s;
67
+ }
68
+ .btn-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(245, 166, 35, 0.3); }
69
+ .hamburger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 8px; }
70
+ .hamburger span { width: 24px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: all 0.3s; }
71
+ .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
72
+ .hamburger.active span:nth-child(2) { opacity: 0; }
73
+ .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
74
+ .mobile-menu {
75
+ display: none; position: fixed; top: 72px; left: 0; right: 0; bottom: 0;
76
+ background: rgba(15, 20, 25, 0.98); backdrop-filter: blur(20px);
77
+ z-index: 999; padding: 32px 40px; flex-direction: column; gap: 8px;
78
+ overflow-y: auto;
79
+ }
80
+ .mobile-menu.open { display: flex; }
81
+ .mobile-menu a {
82
+ font-size: 16px; font-weight: 500; color: var(--text-secondary);
83
+ text-decoration: none; padding: 16px 0;
84
+ border-bottom: 1px solid var(--border-subtle);
85
+ transition: color 0.2s;
86
+ }
87
+ .mobile-menu a:hover { color: var(--orange); }
88
+
89
+ /* ── SECTIONS ── */
90
+ .section-inner { max-width: 1200px; margin: 0 auto; }
91
+ section { padding: 120px 48px 80px; }
92
+ .section-label {
93
+ font-size: 12px; font-weight: 600; color: var(--orange);
94
+ text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 12px;
95
+ }
96
+ .section-title {
97
+ font-size: 40px; font-weight: 800; letter-spacing: -0.02em;
98
+ line-height: 1.15; margin-bottom: 16px;
99
+ }
100
+ .section-subtitle {
101
+ font-size: 17px; color: var(--text-secondary); max-width: 720px;
102
+ line-height: 1.7; margin-bottom: 48px;
103
+ }
104
+
105
+ /* ── HERO ── */
106
+ .hero {
107
+ min-height: 100vh; padding: 140px 48px 80px;
108
+ display: flex; align-items: center; position: relative; overflow: hidden;
109
+ }
110
+ .hero::before {
111
+ content: ''; position: absolute;
112
+ top: -20%; left: 50%; width: 900px; height: 900px;
113
+ background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 70%);
114
+ transform: translate(-50%, 0);
115
+ animation: orbFloat 10s infinite alternate ease-in-out;
116
+ pointer-events: none;
117
+ }
118
+ .hero::after {
119
+ content: ''; position: absolute;
120
+ bottom: -10%; right: 10%; width: 600px; height: 600px;
121
+ background: radial-gradient(circle, rgba(245,166,35,0.05) 0%, transparent 70%);
122
+ pointer-events: none;
123
+ }
124
+ @keyframes orbFloat {
125
+ 0% { transform: translate(-50%, 0) scale(1); }
126
+ 100% { transform: translate(-45%, -5%) scale(1.1); }
127
+ }
128
+ .hero-content {
129
+ max-width: 1200px; margin: 0 auto; width: 100%;
130
+ display: grid; grid-template-columns: 1fr 380px; gap: 64px;
131
+ align-items: start; position: relative; z-index: 2;
132
+ }
133
+ .hero-badge {
134
+ display: inline-flex; align-items: center; gap: 8px;
135
+ padding: 6px 16px; border-radius: 100px;
136
+ background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3);
137
+ font-size: 12px; font-weight: 600; color: var(--blue-accent);
138
+ margin-bottom: 24px; text-transform: uppercase; letter-spacing: 0.08em;
139
+ }
140
+ .hero-badge .dot {
141
+ width: 8px; height: 8px; border-radius: 50%;
142
+ background: var(--green); animation: pulse 1.5s infinite;
143
+ }
144
+ @keyframes pulse {
145
+ 0% { transform: scale(0.9); opacity: 0.7; }
146
+ 50% { transform: scale(1.2); opacity: 1; }
147
+ 100% { transform: scale(0.9); opacity: 0.7; }
148
+ }
149
+ .hero h1 {
150
+ font-size: 56px; font-weight: 800; line-height: 1.08;
151
+ letter-spacing: -0.03em; margin-bottom: 8px;
152
+ }
153
+ .hero h1 .highlight {
154
+ background: var(--gradient-orange);
155
+ -webkit-background-clip: text; -webkit-text-fill-color: transparent;
156
+ background-clip: text;
157
+ }
158
+ .hero .paper-full-title {
159
+ font-size: 18px; font-weight: 400; color: var(--text-secondary);
160
+ line-height: 1.6; margin-bottom: 24px; max-width: 560px;
161
+ }
162
+ .hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
163
+ .btn-outline {
164
+ display: inline-flex; align-items: center; gap: 8px;
165
+ padding: 10px 24px; border-radius: 8px;
166
+ border: 1px solid rgba(255,255,255,0.15); background: transparent;
167
+ color: var(--text-primary); font-size: 14px; font-weight: 600;
168
+ text-decoration: none; transition: all 0.2s;
169
+ }
170
+ .btn-outline:hover { border-color: var(--orange); color: var(--orange); }
171
+ .hero-stats {
172
+ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
173
+ border: 1px solid var(--border-light); border-radius: 16px; overflow: hidden;
174
+ }
175
+ .hero-stat {
176
+ padding: 20px 24px; text-align: center;
177
+ border-right: 1px solid var(--border-light);
178
+ background: rgba(255,255,255,0.02);
179
+ }
180
+ .hero-stat:last-child { border-right: none; }
181
+ .hero-stat .number {
182
+ font-size: 36px; font-weight: 800;
183
+ background: var(--gradient-orange);
184
+ -webkit-background-clip: text; -webkit-text-fill-color: transparent;
185
+ }
186
+ .hero-stat .label {
187
+ font-size: 12px; color: var(--text-muted);
188
+ text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px;
189
+ }
190
+
191
+ /* Hero Right — Resource Cards */
192
+ .resource-stack { display: flex; flex-direction: column; gap: 12px; }
193
+ .resource-card {
194
+ display: flex; align-items: center; gap: 16px;
195
+ padding: 18px 20px; border-radius: 14px;
196
+ background: var(--bg-card); border: 1px solid var(--border-light);
197
+ text-decoration: none; color: var(--text-primary);
198
+ transition: all 0.3s; cursor: pointer;
199
+ }
200
+ .resource-card:hover { border-color: rgba(245,166,35,0.2); background: var(--bg-card-hover); transform: translateX(4px); }
201
+ .resource-icon {
202
+ width: 42px; height: 42px; border-radius: 10px;
203
+ display: flex; align-items: center; justify-content: center; flex-shrink: 0;
204
+ }
205
+ .icon-orange { background: rgba(245,166,35,0.12); color: var(--orange); }
206
+ .icon-blue { background: rgba(59,130,246,0.12); color: var(--blue-accent); }
207
+ .icon-cyan { background: rgba(6,182,212,0.12); color: var(--cyan); }
208
+ .icon-green { background: rgba(123,241,168,0.12); color: var(--green); }
209
+ .resource-info h4 { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
210
+ .resource-info p { font-size: 13px; color: var(--text-muted); }
211
+ .resource-arrow { color: var(--text-muted); flex-shrink: 0; transition: transform 0.2s; }
212
+ .resource-card:hover .resource-arrow { transform: translateX(4px); color: var(--orange); }
213
+
214
+ /* ── ONE-LINER CARD ── */
215
+ .premium-card {
216
+ background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
217
+ border-radius: 16px; padding: 24px 28px; margin-top: 20px;
218
+ }
219
+ .card-label {
220
+ font-size: 11px; font-weight: 700; color: var(--orange);
221
+ text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 8px;
222
+ }
223
+ .premium-card p { font-size: 15px; color: var(--text-secondary); line-height: 1.7; }
224
+
225
+ /* ── STATS SECTION ── */
226
+ .stats-grid {
227
+ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
228
+ gap: 16px; margin-bottom: 32px;
229
+ }
230
+ .stat-block {
231
+ background: var(--bg-card); border-radius: 16px;
232
+ padding: 28px 24px; position: relative; overflow: hidden;
233
+ border: 1px solid var(--border-light);
234
+ transition: all 0.3s;
235
+ }
236
+ .stat-block:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
237
+ .stat-block::before {
238
+ content: ''; position: absolute; top: 0; left: 0; right: 0;
239
+ height: 3px; border-radius: 3px 3px 0 0;
240
+ }
241
+ .stat-block.orange::before { background: var(--gradient-orange); }
242
+ .stat-block.cyan::before { background: var(--cyan); }
243
+ .stat-block.blue::before { background: var(--blue-accent); }
244
+ .stat-block.green::before { background: var(--green); }
245
+ .stat-value {
246
+ font-size: 44px; font-weight: 900; margin-bottom: 8px;
247
+ }
248
+ .stat-block.orange .stat-value { color: var(--orange); }
249
+ .stat-block.cyan .stat-value { color: var(--cyan); }
250
+ .stat-block.blue .stat-value { color: var(--blue-accent); }
251
+ .stat-block.green .stat-value { color: var(--green); }
252
+ .stat-label { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
253
+
254
+ .metrics-row {
255
+ display: grid; grid-template-columns: repeat(4, 1fr);
256
+ background: rgba(255,255,255,0.02); border: 1px solid var(--border-subtle);
257
+ border-radius: 16px; overflow: hidden;
258
+ }
259
+ .metric-item {
260
+ padding: 20px 24px; text-align: center;
261
+ border-right: 1px solid var(--border-subtle);
262
+ }
263
+ .metric-item:last-child { border-right: none; }
264
+ .metric-val {
265
+ font-size: 28px; font-weight: 800;
266
+ background: var(--gradient-blue);
267
+ -webkit-background-clip: text; -webkit-text-fill-color: transparent;
268
+ }
269
+ .metric-lab { font-size: 12px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
270
+
271
+ /* ── STREAMS SECTION ── */
272
+ .streams-grid {
273
+ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
274
+ }
275
+ .stream-card {
276
+ background: var(--bg-card); border-radius: 16px; padding: 32px;
277
+ border: 1px solid var(--border-light); position: relative;
278
+ transition: all 0.3s; overflow: hidden;
279
+ }
280
+ .stream-card:hover { border-color: rgba(255,255,255,0.18); background: var(--bg-card-hover); transform: translateY(-2px); }
281
+ .stream-num {
282
+ font-size: 11px; font-weight: 700; text-transform: uppercase;
283
+ letter-spacing: 0.12em; margin-bottom: 16px;
284
+ }
285
+ .stream-card:nth-child(1) .stream-num { color: var(--orange); }
286
+ .stream-card:nth-child(2) .stream-num { color: var(--cyan); }
287
+ .stream-card:nth-child(3) .stream-num { color: var(--blue-accent); }
288
+ .stream-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
289
+ .stream-card .stream-count {
290
+ font-size: 32px; font-weight: 800; margin-bottom: 12px;
291
+ }
292
+ .stream-card:nth-child(1) .stream-count { color: var(--orange); }
293
+ .stream-card:nth-child(2) .stream-count { color: var(--cyan); }
294
+ .stream-card:nth-child(3) .stream-count { color: var(--blue-accent); }
295
+ .stream-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
296
+ .stream-source {
297
+ display: inline-flex; align-items: center; gap: 6px;
298
+ font-size: 12px; font-weight: 600; color: var(--text-muted);
299
+ margin-top: 16px; padding: 6px 12px; border-radius: 8px;
300
+ background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle);
301
+ }
302
+
303
+ /* ── PROBLEM / WHY SECTION ── */
304
+ .challenge-grid {
305
+ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
306
+ }
307
+ .challenge-card {
308
+ background: var(--bg-card); border-radius: 16px; padding: 28px;
309
+ border: 1px solid var(--border-light); transition: all 0.3s;
310
+ }
311
+ .challenge-card:hover { background: var(--bg-card-hover); transform: translateY(-2px); }
312
+ .challenge-card h3 { font-size: 17px; font-weight: 700; margin-top: 14px; margin-bottom: 10px; }
313
+ .challenge-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
314
+
315
+ /* ── VIDEO SECTION ── */
316
+ .video-section { background: var(--bg-darker); }
317
+ .video-grid {
318
+ display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
319
+ }
320
+ .video-card {
321
+ border-radius: 16px; overflow: hidden;
322
+ background: var(--bg-card); border: 1px solid var(--border-light);
323
+ transition: all 0.3s;
324
+ }
325
+ .video-card:hover { border-color: rgba(59,130,246,0.3); transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,0.4); }
326
+ .video-card.featured {
327
+ grid-column: 1 / -1;
328
+ }
329
+ .video-wrapper {
330
+ position: relative; width: 100%; aspect-ratio: 16/9;
331
+ background: var(--bg-dark); cursor: pointer; overflow: hidden;
332
+ }
333
+ .video-wrapper video {
334
+ width: 100%; height: 100%; object-fit: contain;
335
+ display: block; background: var(--bg-dark);
336
+ }
337
+ .video-overlay {
338
+ position: absolute; top: 0; left: 0; right: 0; bottom: 0;
339
+ display: flex; align-items: center; justify-content: center;
340
+ background: rgba(0,0,0,0.3);
341
+ transition: all 0.3s;
342
+ opacity: 0; pointer-events: none;
343
+ }
344
+ .video-card:hover .video-overlay { background: rgba(0,0,0,0.15); }
345
+ .play-btn {
346
+ width: 64px; height: 64px; border-radius: 50%;
347
+ background: rgba(255,255,255,0.15); backdrop-filter: blur(12px);
348
+ display: flex; align-items: center; justify-content: center;
349
+ transition: all 0.3s; border: 1px solid rgba(255,255,255,0.2);
350
+ }
351
+ .video-card:hover .play-btn { background: var(--orange); border-color: var(--orange); transform: scale(1.1); }
352
+ .play-btn svg { width: 24px; height: 24px; fill: white; margin-left: 3px; }
353
+ .video-info { padding: 20px 24px; }
354
+ .video-info h4 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
355
+ .video-info p { font-size: 13px; color: var(--text-muted); }
356
+ .video-tag {
357
+ display: inline-block; font-size: 11px; font-weight: 600;
358
+ padding: 3px 10px; border-radius: 100px; margin-bottom: 8px;
359
+ text-transform: uppercase; letter-spacing: 0.06em;
360
+ }
361
+ .video-tag.egocentric { background: rgba(245,166,35,0.12); color: var(--orange); }
362
+ .video-tag.exocentric { background: rgba(6,182,212,0.12); color: var(--cyan); }
363
+ .video-tag.combined { background: rgba(59,130,246,0.12); color: var(--blue-accent); }
364
+
365
+ /* ── RESULTS TABLE ── */
366
+ .results-section { background: var(--bg-dark); }
367
+ .results-table-wrap {
368
+ background: var(--bg-card); border-radius: 16px;
369
+ border: 1px solid var(--border-light); overflow: hidden;
370
+ }
371
+ .results-table {
372
+ width: 100%; border-collapse: collapse;
373
+ }
374
+ .results-table thead { background: rgba(59,130,246,0.08); }
375
+ .results-table th {
376
+ padding: 16px 20px; text-align: left;
377
+ font-size: 12px; font-weight: 700; color: var(--text-secondary);
378
+ text-transform: uppercase; letter-spacing: 0.08em;
379
+ border-bottom: 1px solid var(--border-light);
380
+ }
381
+ .results-table td {
382
+ padding: 14px 20px; font-size: 14px;
383
+ border-bottom: 1px solid var(--border-subtle);
384
+ color: var(--text-secondary);
385
+ }
386
+ .results-table tr:last-child td { border-bottom: none; }
387
+ .results-table tr:hover td { background: rgba(255,255,255,0.02); }
388
+ .results-table .task-name { color: var(--text-primary); font-weight: 500; }
389
+ .results-table .highlight-val { color: var(--green); font-weight: 700; }
390
+ .results-table .baseline-val { color: var(--text-muted); }
391
+ .results-table .mean-row td {
392
+ font-weight: 700; color: var(--text-primary);
393
+ border-top: 2px solid var(--border-light);
394
+ background: rgba(245,166,35,0.04);
395
+ }
396
+ .results-table .mean-row .highlight-val { color: var(--orange); font-size: 16px; }
397
+
398
+ /* ── PIPELINE ── */
399
+ .pipeline-steps {
400
+ display: grid; grid-template-columns: repeat(4, 1fr);
401
+ gap: 0; position: relative; margin-top: 48px;
402
+ }
403
+ .pipeline-step {
404
+ text-align: center; padding: 32px 20px; position: relative;
405
+ }
406
+ .pipeline-step:not(:last-child)::after {
407
+ content: '→'; position: absolute; right: -8px; top: 50%;
408
+ transform: translateY(-50%); color: var(--orange); font-size: 20px;
409
+ font-weight: 700; z-index: 2;
410
+ }
411
+ .step-num {
412
+ width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 16px;
413
+ display: flex; align-items: center; justify-content: center;
414
+ background: var(--gradient-blue); color: white;
415
+ font-size: 20px; font-weight: 700;
416
+ box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
417
+ }
418
+ .pipeline-step h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
419
+ .pipeline-step p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
420
+
421
+ /* ── FINDINGS ── */
422
+ .findings-grid {
423
+ display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
424
+ }
425
+ .finding-card {
426
+ background: var(--bg-card); border: 1px solid var(--border-light);
427
+ border-radius: 14px; padding: 24px 28px;
428
+ transition: all 0.3s;
429
+ }
430
+ .finding-card:hover { border-color: rgba(245,166,35,0.2); background: var(--bg-card-hover); }
431
+ .finding-num {
432
+ font-size: 11px; font-weight: 700; color: var(--orange);
433
+ text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px;
434
+ }
435
+ .finding-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
436
+ .finding-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
437
+
438
+ /* ── COMPARISON BARS ── */
439
+ .comparison-visual {
440
+ display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
441
+ margin-top: 48px; align-items: center;
442
+ }
443
+ .bar-chart { display: flex; flex-direction: column; gap: 20px; }
444
+ .bar-group label {
445
+ font-size: 13px; font-weight: 600; color: var(--text-secondary);
446
+ margin-bottom: 6px; display: block;
447
+ }
448
+ .bar-track {
449
+ width: 100%; height: 40px; background: rgba(255,255,255,0.04);
450
+ border-radius: 8px; position: relative; overflow: hidden;
451
+ }
452
+ .bar-fill {
453
+ height: 100%; border-radius: 8px;
454
+ display: flex; align-items: center; padding-left: 14px;
455
+ font-size: 14px; font-weight: 700; color: #000;
456
+ transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
457
+ }
458
+ .bar-fill.saber { background: var(--gradient-orange); }
459
+ .bar-fill.baseline { background: rgba(148,163,184,0.3); color: var(--text-secondary); }
460
+ .improvement-callout {
461
+ background: linear-gradient(145deg, #1c2d44, #1a2a40);
462
+ border: 1px solid rgba(245,166,35,0.25); border-radius: 20px;
463
+ padding: 40px; text-align: center;
464
+ }
465
+ .improvement-number {
466
+ font-size: 72px; font-weight: 900;
467
+ background: var(--gradient-orange);
468
+ -webkit-background-clip: text; -webkit-text-fill-color: transparent;
469
+ }
470
+ .improvement-label { font-size: 16px; color: var(--text-secondary); margin-top: 8px; }
471
+
472
+ /* ── DATA MIX VIZ ── */
473
+ .data-mix {
474
+ display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
475
+ align-items: center; margin-top: 48px;
476
+ }
477
+ .donut-container { position: relative; width: 280px; height: 280px; margin: 0 auto; }
478
+ .donut-center {
479
+ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
480
+ text-align: center;
481
+ }
482
+ .donut-center .total { font-size: 32px; font-weight: 800; color: var(--text-primary); }
483
+ .donut-center .total-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
484
+ .mix-legend { display: flex; flex-direction: column; gap: 14px; }
485
+ .legend-item {
486
+ display: flex; align-items: center; gap: 12px;
487
+ padding: 12px 16px; border-radius: 10px;
488
+ background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle);
489
+ }
490
+ .legend-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
491
+ .legend-info { flex: 1; }
492
+ .legend-info .name { font-size: 14px; font-weight: 600; }
493
+ .legend-info .detail { font-size: 12px; color: var(--text-muted); }
494
+ .legend-pct { font-size: 16px; font-weight: 800; }
495
+
496
+ /* ── CITATION ── */
497
+ .citation-block {
498
+ background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle);
499
+ border-radius: 12px; padding: 24px; margin-top: 48px;
500
+ position: relative;
501
+ }
502
+ .citation-block pre {
503
+ font-family: 'SF Mono', 'Fira Code', monospace;
504
+ font-size: 13px; color: var(--text-secondary);
505
+ white-space: pre-wrap; line-height: 1.7;
506
+ }
507
+ .copy-btn {
508
+ position: absolute; top: 12px; right: 12px;
509
+ background: rgba(255,255,255,0.08); border: 1px solid var(--border-subtle);
510
+ border-radius: 8px; padding: 8px 14px;
511
+ font-size: 12px; font-weight: 600; color: var(--text-secondary);
512
+ cursor: pointer; transition: all 0.2s;
513
+ }
514
+ .copy-btn:hover { background: var(--orange); color: #000; border-color: var(--orange); }
515
+
516
+ /* ── FOOTER ── */
517
+ footer {
518
+ background: var(--bg-darker); padding: 60px 48px 32px;
519
+ border-top: 1px solid var(--border-subtle);
520
+ }
521
+ .footer-inner {
522
+ max-width: 1200px; margin: 0 auto;
523
+ display: flex; justify-content: space-between;
524
+ }
525
+ .footer-brand p { font-size: 13px; color: var(--text-muted); max-width: 320px; margin-top: 12px; line-height: 1.6; }
526
+ .footer-links { display: flex; gap: 64px; }
527
+ .footer-col h4 {
528
+ font-size: 13px; font-weight: 600; text-transform: uppercase;
529
+ letter-spacing: 0.08em; margin-bottom: 16px; color: var(--text-primary);
530
+ }
531
+ .footer-col a {
532
+ display: block; font-size: 14px; color: var(--text-muted);
533
+ text-decoration: none; margin-bottom: 10px; transition: color 0.2s;
534
+ }
535
+ .footer-col a:hover { color: var(--orange); }
536
+ .footer-bottom {
537
+ max-width: 1200px; margin: 32px auto 0;
538
+ padding-top: 24px; border-top: 1px solid var(--border-subtle);
539
+ display: flex; justify-content: space-between;
540
+ font-size: 13px; color: var(--text-muted);
541
+ }
542
+ .footer-bottom a { color: var(--text-muted); text-decoration: none; }
543
+ .footer-bottom a:hover { color: var(--orange); }
544
+
545
+ /* ── CTA BANNER ── */
546
+ .cta-banner {
547
+ background: linear-gradient(135deg, #1a2a4a, #0f1f3a);
548
+ padding: 80px 48px; text-align: center;
549
+ position: relative; overflow: hidden;
550
+ }
551
+ .cta-banner::before {
552
+ content: ''; position: absolute; top: -50%; left: -10%; width: 400px; height: 400px;
553
+ background: radial-gradient(circle, rgba(245,166,35,0.06) 0%, transparent 70%);
554
+ pointer-events: none;
555
+ }
556
+ .cta-banner::after {
557
+ content: ''; position: absolute; bottom: -30%; right: -5%; width: 500px; height: 500px;
558
+ background: radial-gradient(circle, rgba(59,130,246,0.06) 0%, transparent 70%);
559
+ pointer-events: none;
560
+ }
561
+ .cta-banner h2 {
562
+ font-size: 40px; font-weight: 800; margin-bottom: 16px;
563
+ position: relative; z-index: 2;
564
+ }
565
+ .cta-banner p {
566
+ font-size: 17px; color: var(--text-secondary); margin-bottom: 32px;
567
+ position: relative; z-index: 2;
568
+ }
569
+ .cta-buttons {
570
+ display: flex; gap: 16px; justify-content: center;
571
+ position: relative; z-index: 2; flex-wrap: wrap;
572
+ }
573
+
574
+ /* ── SCROLL ANIMATIONS ── */
575
+ .fade-up {
576
+ opacity: 0; transform: translateY(30px);
577
+ transition: opacity 0.7s ease, transform 0.7s ease;
578
+ }
579
+ .fade-up.visible { opacity: 1; transform: translateY(0); }
580
+
581
+ /* ── RESPONSIVE ── */
582
+ @media (max-width: 1024px) {
583
+ .hero-content { grid-template-columns: 1fr; gap: 48px; }
584
+ .hero h1 { font-size: 44px; }
585
+ .streams-grid, .challenge-grid { grid-template-columns: 1fr 1fr; }
586
+ .pipeline-steps { grid-template-columns: 1fr 1fr; gap: 20px; }
587
+ .pipeline-step:not(:last-child)::after { display: none; }
588
+ .comparison-visual, .data-mix { grid-template-columns: 1fr; }
589
+ .video-grid { grid-template-columns: 1fr; }
590
+ .findings-grid { grid-template-columns: 1fr; }
591
+ nav { padding: 0 24px; }
592
+ section { padding: 80px 24px 60px; }
593
+ }
594
+ @media (max-width: 768px) {
595
+ .nav-links, .nav-buttons-desktop { display: none; }
596
+ .hamburger { display: flex; }
597
+ .hero { padding: 100px 20px 60px; min-height: auto; }
598
+ .hero h1 { font-size: 36px; }
599
+ .section-title { font-size: 28px; }
600
+ .streams-grid, .challenge-grid { grid-template-columns: 1fr; }
601
+ .pipeline-steps { grid-template-columns: 1fr; }
602
+ .hero-stats { grid-template-columns: 1fr; }
603
+ .hero-stat { border-right: none; border-bottom: 1px solid var(--border-light); }
604
+ .hero-stat:last-child { border-bottom: none; }
605
+ .metrics-row { grid-template-columns: 1fr 1fr; }
606
+ .metric-item:nth-child(2) { border-right: none; }
607
+ .metric-item:nth-child(1), .metric-item:nth-child(2) { border-bottom: 1px solid var(--border-subtle); }
608
+ .footer-inner { flex-direction: column; gap: 40px; }
609
+ .footer-links { flex-direction: column; gap: 32px; }
610
+ .results-table-wrap { overflow-x: auto; }
611
+ .cta-banner h2 { font-size: 28px; }
612
+ .cta-buttons { flex-direction: column; align-items: center; }
613
+ section { padding: 60px 16px 48px; }
614
+ }
615
+ @media (max-width: 480px) {
616
+ .hero h1 { font-size: 28px; }
617
+ .stat-value { font-size: 32px; }
618
+ .improvement-number { font-size: 48px; }
619
+ nav { height: 64px; }
620
+ .mobile-menu { top: 64px; }
621
+ }
622
+ </style>
623
+ </head>
624
+ <body>
625
+
626
+
627
+ <!-- ═══════════ HERO ═══════════ -->
628
+ <section class="hero" id="home">
629
+ <div class="hero-content">
630
+ <div>
631
+ <div class="hero-badge"><span class="dot"></span> May 2026</div>
632
+ <h1>SABER<span class="highlight">.</span></h1>
633
+ <p class="paper-full-title">A Scalable Action-Based Embodied Dataset for Real-World VLA Adaptation — the first high-fidelity retail robotics action dataset built from natural human behavior, not teleoperation.</p>
634
+
635
+ <div class="premium-card" style="margin-top: 20px; margin-bottom: 28px;">
636
+ <div class="card-label">The Core Claim</div>
637
+ <p style="font-size: 16px; font-weight: 500; line-height: 1.6; color: var(--text-primary);">
638
+ Domain-specific robot deployment is fundamentally a <strong>data problem</strong>. High-fidelity naturalistic human behavior — systematically captured and retargeted — is a scalable foundation for robot adaptation. <span style="color: var(--orange);">No robot in the loop required.</span>
639
+ </p>
640
+ </div>
641
+
642
+
643
+ <div class="hero-stats">
644
+ <div class="hero-stat">
645
+ <div class="number">44.8K</div>
646
+ <div class="label">Training Samples</div>
647
+ </div>
648
+ <div class="hero-stat">
649
+ <div class="number">100+</div>
650
+ <div class="label">Hours Captured</div>
651
+ </div>
652
+ <div class="hero-stat">
653
+ <div class="number">2.19×</div>
654
+ <div class="label">Improvement</div>
655
+ </div>
656
+ </div>
657
+ </div>
658
+
659
+ <!-- Right: Resources (matching PRISM page layout) -->
660
+ <div style="padding-top: 8px;">
661
+ <div style="font-size: 11px; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px;">Resources</div>
662
+ <div style="display: flex; flex-direction: column; gap: 10px;">
663
+ <a href="#videos" class="resource-card" onclick="event.preventDefault();document.getElementById('videos').scrollIntoView({behavior:'smooth'});">
664
+ <div class="resource-icon icon-blue">
665
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
666
+ </div>
667
+ <div class="resource-info">
668
+ <h4>Watch Videos</h4>
669
+ <p>In-store capture demos</p>
670
+ </div>
671
+ <svg class="resource-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
672
+ </a>
673
+
674
+ <a href="https://dreamvu.ai/saber" target="_blank" class="resource-card">
675
+ <div class="resource-icon icon-orange">
676
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
677
+ </div>
678
+ <div class="resource-info">
679
+ <h4>arXiv</h4>
680
+ <p>Research Paper</p>
681
+ </div>
682
+ <svg class="resource-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
683
+ </a>
684
+
685
+ <a href="https://huggingface.co/datasets/DreamVu/SABER-assets/resolve/main/DreamVu_SABER.pdf" target="_blank" class="resource-card">
686
+ <div class="resource-icon icon-orange">
687
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
688
+ </div>
689
+ <div class="resource-info">
690
+ <h4>Download PDF</h4>
691
+ <p>Paper (local copy)</p>
692
+ </div>
693
+ <svg class="resource-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
694
+ </a>
695
+
696
+ <a href="https://huggingface.co/datasets/DreamVu/SABER-10K" target="_blank" class="resource-card">
697
+ <div class="resource-icon icon-cyan">
698
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
699
+ </div>
700
+ <div class="resource-info">
701
+ <h4>Dataset</h4>
702
+ <p>SABER-10K on Hugging Face</p>
703
+ </div>
704
+ <svg class="resource-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
705
+ </a>
706
+
707
+ <a href="#results" class="resource-card" onclick="event.preventDefault();document.getElementById('results').scrollIntoView({behavior:'smooth'});">
708
+ <div class="resource-icon icon-green">
709
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
710
+ </div>
711
+ <div class="resource-info">
712
+ <h4>Benchmark Results</h4>
713
+ <p>RoboBenchMart evaluation</p>
714
+ </div>
715
+ <svg class="resource-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
716
+ </a>
717
+ </div>
718
+
719
+ <div style="margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.06);">
720
+ <p style="color: var(--text-muted); font-size: 13px; margin-bottom: 12px;">Need the full 44.8K corpus or custom capture?</p>
721
+ <a href="mailto:sales@dreamvu.ai" class="btn-cta" style="font-size: 13px; padding: 8px 18px;">Contact Sales</a>
722
+ </div>
723
+ </div>
724
+ </div>
725
+ </section>
726
+
727
+ <!-- ═══════════ HERO VIDEO ═══════════ -->
728
+ <section style="background: var(--bg-dark); padding-top: 0; padding-bottom: 80px;">
729
+ <div class="section-inner">
730
+ <div class="video-card featured" style="border-radius: 20px; overflow: hidden; box-shadow: none; border: none; background: var(--bg-dark);">
731
+ <div class="video-wrapper" onclick="toggleVideo(this)">
732
+ <video preload="metadata" playsinline autoplay muted loop>
733
+ <source src="https://huggingface.co/datasets/DreamVu/SABER-assets/resolve/main/final_stitched.mp4" type="video/mp4">
734
+ </video>
735
+ <div class="video-overlay">
736
+ <div class="play-btn">
737
+ <svg viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg>
738
+ </div>
739
+ </div>
740
+ </div>
741
+ <div class="video-info">
742
+ <span class="video-tag combined">Full Pipeline</span>
743
+ <h4>Complete SABER Capture Pipeline</h4>
744
+ <p>The complete SABER pipeline from synchronized dual-stream videos: egocentric video, 360° exocentric view, hand landmarks, body skeleton, and SMPL mesh — derived simultaneously from real in-store human actions.</p>
745
+ </div>
746
+ </div>
747
+ </div>
748
+ </section>
749
+
750
+ <!-- ═══════════ PROBLEM ═══════════ -->
751
+ <section style="background: var(--bg-darker);">
752
+ <div class="section-inner fade-up">
753
+ <div class="section-label">The Challenge</div>
754
+ <div class="section-title">Why Retail Demands Its Own Data</div>
755
+ <div class="section-subtitle">Modern VLAs like GR00T N1.6 achieve near-zero success on retail tasks out of the box — not because the model is weak, but because the retail domain is entirely absent from training data.</div>
756
+
757
+ <div class="challenge-grid">
758
+ <div class="challenge-card">
759
+ <div class="resource-icon icon-orange">
760
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
761
+ </div>
762
+ <h3>Distinct Skill Distribution</h3>
763
+ <p>Articulated object interaction, multi-height shelf reaching, basket loading, floor retrieval, and context-dependent placement — all repeated across hundreds of SKUs in layouts no lab can replicate.</p>
764
+ </div>
765
+ <div class="challenge-card">
766
+ <div class="resource-icon icon-cyan">
767
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
768
+ </div>
769
+ <h3>Long-Tail Scene Variation</h3>
770
+ <p>Dense shelves, active restocking, occlusions, varied lighting, reflective packaging, and product deformability create real-world complexity that generic datasets cannot approximate.</p>
771
+ </div>
772
+ <div class="challenge-card">
773
+ <div class="resource-icon icon-blue">
774
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
775
+ </div>
776
+ <h3>Repetition Matters</h3>
777
+ <p>A model must see skill families repeatedly across contexts — grasping bottles from different shelf heights, opening fridges from varied approach angles — to achieve reliable deployment.</p>
778
+ </div>
779
+ </div>
780
+ </div>
781
+ </section>
782
+
783
+ <!-- ═══════════ KEY STATS ═══════════ -->
784
+ <section id="stats">
785
+ <div class="section-inner fade-up">
786
+ <div class="section-label">Performance</div>
787
+ <div class="section-title">Key Results at a Glance</div>
788
+
789
+ <div class="stats-grid">
790
+ <div class="stat-block orange">
791
+ <div class="stat-value">2.19×</div>
792
+ <div class="stat-label">Improvement over fine-tuning baselines on RoboBenchMart</div>
793
+ </div>
794
+ <div class="stat-block green">
795
+ <div class="stat-value">29.3%</div>
796
+ <div class="stat-label">Mean success rate across all 10 retail manipulation tasks</div>
797
+ </div>
798
+ <div class="stat-block cyan">
799
+ <div class="stat-value">91%</div>
800
+ <div class="stat-label">Average fridge task success — up from 43% baseline</div>
801
+ </div>
802
+ <div class="stat-block blue">
803
+ <div class="stat-value">100%</div>
804
+ <div class="stat-label">Non-robot data — entire dataset captured from human video alone</div>
805
+ </div>
806
+ </div>
807
+
808
+ <div class="metrics-row">
809
+ <div class="metric-item">
810
+ <div class="metric-val">44.8K</div>
811
+ <div class="metric-lab">Total Samples</div>
812
+ </div>
813
+ <div class="metric-item">
814
+ <div class="metric-val">100+</div>
815
+ <div class="metric-lab">Capture Hours</div>
816
+ </div>
817
+ <div class="metric-item">
818
+ <div class="metric-val">3</div>
819
+ <div class="metric-lab">Action Streams</div>
820
+ </div>
821
+ <div class="metric-item">
822
+ <div class="metric-val">10</div>
823
+ <div class="metric-lab">Eval Tasks</div>
824
+ </div>
825
+ </div>
826
+ </div>
827
+ </section>
828
+
829
+ <!-- ═══════════ THREE STREAMS ═══════════ -->
830
+ <section id="streams" style="background: var(--bg-darker);">
831
+ <div class="section-inner fade-up">
832
+ <div class="section-label">Dataset Architecture</div>
833
+ <div class="section-title">Three Complementary Action Streams</div>
834
+ <div class="section-subtitle">From the same dual-camera in-store captures, three distinct supervision signals are derived — each encoding a different level of kinematic abstraction.</div>
835
+
836
+ <div class="streams-grid">
837
+ <div class="stream-card">
838
+ <div class="stream-num">Stream 1</div>
839
+ <h3>LAPA Latent Actions</h3>
840
+ <div class="stream-count">25K</div>
841
+ <p>Embodiment-agnostic motion tokens derived via inverse-dynamics encoding from egocentric video. Captures whole-arm motion, reach trajectories, and grasping dynamics without robot joint labels.</p>
842
+ <div class="stream-source">
843
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
844
+ Egocentric GoPro
845
+ </div>
846
+ </div>
847
+ <div class="stream-card">
848
+ <div class="stream-num">Stream 2</div>
849
+ <h3>Dexterous Hand Retargets</h3>
850
+ <div class="stream-count">18.6K</div>
851
+ <p>21-point hand landmarks estimated, human-corrected frame-by-frame, then retargeted to robot joint space via Dex-Retargeting. Provides explicit finger-level precision supervision.</p>
852
+ <div class="stream-source">
853
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
854
+ Egocentric GoPro
855
+ </div>
856
+ </div>
857
+ <div class="stream-card">
858
+ <div class="stream-num">Stream 3</div>
859
+ <h3>Whole-Body Retargets</h3>
860
+ <div class="stream-count">1.2K</div>
861
+ <p>SMPL body parameters estimated from the 360° ALIA view, human-corrected, and retargeted to the Unitree G1 humanoid. Provides torso-arm-leg coordination for floor retrieval and extended reach.</p>
862
+ <div class="stream-source">
863
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
864
+ Exocentric ALIA 360°
865
+ </div>
866
+ </div>
867
+ </div>
868
+ </div>
869
+ </section>
870
+
871
+ <!-- ═══════════ PIPELINE ═══════════ -->
872
+ <section>
873
+ <div class="section-inner fade-up">
874
+ <div class="section-label">Methodology</div>
875
+ <div class="section-title">From Store Footage to Robot Training</div>
876
+ <div class="section-subtitle">SABER is constructed from a dual-stream capture architecture — egocentric GoPro + exocentric ALIA 360° — across multiple real grocery stores.</div>
877
+
878
+ <div class="pipeline-steps">
879
+ <div class="pipeline-step">
880
+ <div class="step-num">1</div>
881
+ <h4>In-Store Capture</h4>
882
+ <p>100+ hours across multiple real grocery stores with head-mounted GoPro + DreamVu ALIA 360°</p>
883
+ </div>
884
+ <div class="pipeline-step">
885
+ <div class="step-num">2</div>
886
+ <h4>Action Extraction</h4>
887
+ <p>LAPA encoding, hand pose estimation, and SMPL body estimation with human QC annotation</p>
888
+ </div>
889
+ <div class="pipeline-step">
890
+ <div class="step-num">3</div>
891
+ <h4>Robot Retargeting</h4>
892
+ <p>Dex-Retargeting to robot hand joint space + SMPL-to-Unitree G1 whole-body retargeting</p>
893
+ </div>
894
+ <div class="pipeline-step">
895
+ <div class="step-num">4</div>
896
+ <h4>VLA Post-Training</h4>
897
+ <p>Shared-backbone multi-task training on GR00T N1.6 with flow-matching objective</p>
898
+ </div>
899
+ </div>
900
+ </div>
901
+ </section>
902
+
903
+ <!-- ═══════════ VIDEOS ═══════════ -->
904
+ <section class="video-section" id="videos">
905
+ <div class="section-inner fade-up">
906
+ <div class="section-label">Demo Videos</div>
907
+ <div class="section-title">Capture Sessions & Task Annotations</div>
908
+ <div class="section-subtitle">Annotated in-store capture footage from the SABER dataset — showing retail manipulation tasks with action labels and multi-scene diversity.</div>
909
+
910
+ <div style="display: flex; flex-direction: column; gap: 32px;">
911
+ <!-- Set 2 first -->
912
+ <div class="video-card featured" style="background: var(--bg-darker);">
913
+ <div class="video-wrapper" style="background: var(--bg-darker);" onclick="toggleVideo(this)">
914
+ <video preload="metadata" playsinline autoplay muted loop style="background: var(--bg-darker);">
915
+ <source src="https://huggingface.co/datasets/DreamVu/SABER-assets/resolve/main/6_cycle_2.mp4" type="video/mp4">
916
+ </video>
917
+ <div class="video-overlay">
918
+ <div class="play-btn">
919
+ <svg viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg>
920
+ </div>
921
+ </div>
922
+ </div>
923
+ <div class="video-info">
924
+ <span class="video-tag egocentric">Annotated</span>
925
+ <h4>Retail Task Cycles</h4>
926
+ <p>Pushing trolleys, packing goods, arranging goods, opening doors, inspecting labels, and handling baskets.</p>
927
+ </div>
928
+ </div>
929
+
930
+ <!-- Set 1 second -->
931
+ <div class="video-card featured" style="background: var(--bg-darker);">
932
+ <div class="video-wrapper" style="background: var(--bg-darker);" onclick="toggleVideo(this)">
933
+ <video preload="metadata" playsinline autoplay muted loop style="background: var(--bg-darker);">
934
+ <source src="https://huggingface.co/datasets/DreamVu/SABER-assets/resolve/main/6_cycle_1.mp4" type="video/mp4">
935
+ </video>
936
+ <div class="video-overlay">
937
+ <div class="play-btn">
938
+ <svg viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg>
939
+ </div>
940
+ </div>
941
+ </div>
942
+ <div class="video-info">
943
+ <span class="video-tag egocentric">Annotated</span>
944
+ <h4>Retail Task Cycles</h4>
945
+ <p>Placing and moving foods, scooping loose goods, inspecting deformable packets, carrying multiple goods, inspecting fruits, closing doors, and placing goods.</p>
946
+ </div>
947
+ </div>
948
+ </div>
949
+ </div>
950
+ </section>
951
+
952
+ <!-- ═══════════ RESULTS ═══════════ -->
953
+ <section class="results-section" id="results">
954
+ <div class="section-inner fade-up">
955
+ <div class="section-label">Evaluation</div>
956
+ <div class="section-title">RoboBenchMart Results</div>
957
+ <div class="section-subtitle">SABER-MM post-training on GR00T N1.6 evaluated across 10 retail manipulation tasks spanning fridge, board-to-board, floor pick, and basket pick categories.</div>
958
+
959
+ <div class="comparison-visual">
960
+ <div class="bar-chart">
961
+ <div class="bar-group">
962
+ <label>Mean Success — All Tasks</label>
963
+ <div class="bar-track"><div class="bar-fill saber" style="width: 0%;" data-width="29.3%">29.3%</div></div>
964
+ <div class="bar-track" style="margin-top: 6px;"><div class="bar-fill baseline" style="width: 0%;" data-width="13.4%">13.4%</div></div>
965
+ </div>
966
+ <div class="bar-group">
967
+ <label>Fridge Tasks (avg open + close)</label>
968
+ <div class="bar-track"><div class="bar-fill saber" style="width: 0%;" data-width="91%">91%</div></div>
969
+ <div class="bar-track" style="margin-top: 6px;"><div class="bar-fill baseline" style="width: 0%;" data-width="43%">43%</div></div>
970
+ </div>
971
+ <div class="bar-group">
972
+ <label>Floor Pick Tasks (avg)</label>
973
+ <div class="bar-track"><div class="bar-fill saber" style="width: 0%;" data-width="17%">17%</div></div>
974
+ <div class="bar-track" style="margin-top: 6px;"><div class="bar-fill baseline" style="width: 0%;" data-width="3%">3%</div></div>
975
+ </div>
976
+ </div>
977
+ <div class="improvement-callout">
978
+ <div class="improvement-number">2.19×</div>
979
+ <div class="improvement-label">Mean improvement over baseline<br><span style="font-size: 13px; color: var(--text-muted);">SABER-MM vs. RoboBenchMart fine-tuning only</span></div>
980
+ <div style="display: flex; gap: 20px; justify-content: center; margin-top: 24px;">
981
+ <div style="display: flex; align-items: center; gap: 8px;">
982
+ <div style="width: 12px; height: 12px; border-radius: 3px; background: var(--gradient-orange);"></div>
983
+ <span style="font-size: 13px; color: var(--text-secondary);">SABER-MM</span>
984
+ </div>
985
+ <div style="display: flex; align-items: center; gap: 8px;">
986
+ <div style="width: 12px; height: 12px; border-radius: 3px; background: rgba(148,163,184,0.3);"></div>
987
+ <span style="font-size: 13px; color: var(--text-secondary);">Baseline</span>
988
+ </div>
989
+ </div>
990
+ </div>
991
+ </div>
992
+
993
+ <!-- Full results table -->
994
+ <div class="results-table-wrap" style="margin-top: 48px;">
995
+ <table class="results-table">
996
+ <thead>
997
+ <tr>
998
+ <th>Task</th>
999
+ <th>Category</th>
1000
+ <th>Baseline (RBM FT)</th>
1001
+ <th>SABER-MM</th>
1002
+ <th>Change</th>
1003
+ </tr>
1004
+ </thead>
1005
+ <tbody>
1006
+ <tr>
1007
+ <td class="task-name">fridge (avg open + close)</td>
1008
+ <td>Fridge</td>
1009
+ <td class="baseline-val">0.43</td>
1010
+ <td class="highlight-val">0.91</td>
1011
+ <td style="color: var(--green);">+112%</td>
1012
+ </tr>
1013
+ <tr>
1014
+ <td class="task-name">board_to_board_duff</td>
1015
+ <td>Board</td>
1016
+ <td class="baseline-val">0.10</td>
1017
+ <td class="highlight-val">0.10</td>
1018
+ <td style="color: var(--text-muted);">—</td>
1019
+ </tr>
1020
+ <tr>
1021
+ <td class="task-name">board_to_board_nestle</td>
1022
+ <td>Board</td>
1023
+ <td class="baseline-val">0.02</td>
1024
+ <td class="highlight-val">0.02</td>
1025
+ <td style="color: var(--text-muted);">—</td>
1026
+ </tr>
1027
+ <tr>
1028
+ <td class="task-name">board_to_board_vanish</td>
1029
+ <td>Board</td>
1030
+ <td class="baseline-val">0.02</td>
1031
+ <td class="highlight-val">0.11</td>
1032
+ <td style="color: var(--green);">+450%</td>
1033
+ </tr>
1034
+ <tr>
1035
+ <td class="task-name">pick_from_floor_beans</td>
1036
+ <td>Floor</td>
1037
+ <td class="baseline-val">0.04</td>
1038
+ <td class="highlight-val">0.17</td>
1039
+ <td style="color: var(--green);">+325%</td>
1040
+ </tr>
1041
+ <tr>
1042
+ <td class="task-name">pick_from_floor_slam</td>
1043
+ <td>Floor</td>
1044
+ <td class="baseline-val">0.02</td>
1045
+ <td class="highlight-val">0.17</td>
1046
+ <td style="color: var(--green);">+750%</td>
1047
+ </tr>
1048
+ <tr>
1049
+ <td class="task-name">pick_to_basket_fanta</td>
1050
+ <td>Basket</td>
1051
+ <td class="baseline-val">0.08</td>
1052
+ <td class="highlight-val">0.19</td>
1053
+ <td style="color: var(--green);">+138%</td>
1054
+ </tr>
1055
+ <tr>
1056
+ <td class="task-name">pick_to_basket_nivea</td>
1057
+ <td>Basket</td>
1058
+ <td class="baseline-val">0.08</td>
1059
+ <td class="highlight-val">0.21</td>
1060
+ <td style="color: var(--green);">+163%</td>
1061
+ </tr>
1062
+ <tr>
1063
+ <td class="task-name">pick_to_basket_stars</td>
1064
+ <td>Basket</td>
1065
+ <td class="baseline-val">0.12</td>
1066
+ <td class="highlight-val">0.14</td>
1067
+ <td style="color: var(--green);">+17%</td>
1068
+ </tr>
1069
+ <tr class="mean-row">
1070
+ <td class="task-name">Mean (all tasks)</td>
1071
+ <td></td>
1072
+ <td class="baseline-val">0.134</td>
1073
+ <td class="highlight-val">0.293</td>
1074
+ <td style="color: var(--orange); font-weight: 800;">+119%</td>
1075
+ </tr>
1076
+ </tbody>
1077
+ </table>
1078
+ </div>
1079
+ </div>
1080
+ </section>
1081
+
1082
+ <!-- ═══════════ DATA MIX ═══════════ -->
1083
+ <section style="background: var(--bg-darker);">
1084
+ <div class="section-inner fade-up">
1085
+ <div class="section-label">Training Corpus</div>
1086
+ <div class="section-title">SABER-MM Data Composition</div>
1087
+ <div class="section-subtitle">The post-training corpus combines SABER's three streams with robot-native anchor data and task-aligned demonstrations — totaling ~52.1K samples.</div>
1088
+
1089
+ <div class="data-mix">
1090
+ <div class="donut-container">
1091
+ <svg viewBox="0 0 200 200" width="280" height="280">
1092
+ <!-- SABER LAPA 48% -->
1093
+ <circle cx="100" cy="100" r="80" fill="none" stroke="#f5a623" stroke-width="24"
1094
+ stroke-dasharray="241 261" stroke-dashoffset="0" transform="rotate(-90 100 100)" opacity="0.9"/>
1095
+ <!-- SABER Hand 35.7% -->
1096
+ <circle cx="100" cy="100" r="80" fill="none" stroke="#06b6d4" stroke-width="24"
1097
+ stroke-dasharray="179 323" stroke-dashoffset="-241" transform="rotate(-90 100 100)" opacity="0.9"/>
1098
+ <!-- NVIDIA 9.2% -->
1099
+ <circle cx="100" cy="100" r="80" fill="none" stroke="#3b82f6" stroke-width="24"
1100
+ stroke-dasharray="46 456" stroke-dashoffset="-420" transform="rotate(-90 100 100)" opacity="0.9"/>
1101
+ <!-- RBM 4.8% -->
1102
+ <circle cx="100" cy="100" r="80" fill="none" stroke="#a855f7" stroke-width="24"
1103
+ stroke-dasharray="24 478" stroke-dashoffset="-466" transform="rotate(-90 100 100)" opacity="0.9"/>
1104
+ <!-- SABER Body 2.3% -->
1105
+ <circle cx="100" cy="100" r="80" fill="none" stroke="#7BF1A8" stroke-width="24"
1106
+ stroke-dasharray="12 490" stroke-dashoffset="-490" transform="rotate(-90 100 100)" opacity="0.9"/>
1107
+ </svg>
1108
+ <div class="donut-center">
1109
+ <div class="total">52.1K</div>
1110
+ <div class="total-label">Total Samples</div>
1111
+ </div>
1112
+ </div>
1113
+ <div class="mix-legend">
1114
+ <div class="legend-item">
1115
+ <div class="legend-dot" style="background: var(--orange);"></div>
1116
+ <div class="legend-info">
1117
+ <div class="name">SABER — LAPA Latent Actions</div>
1118
+ <div class="detail">25K samples · Egocentric video</div>
1119
+ </div>
1120
+ <div class="legend-pct" style="color: var(--orange);">48.0%</div>
1121
+ </div>
1122
+ <div class="legend-item">
1123
+ <div class="legend-dot" style="background: var(--cyan);"></div>
1124
+ <div class="legend-info">
1125
+ <div class="name">SABER — Hand Retargets</div>
1126
+ <div class="detail">18.6K samples · Dex-Retargeting</div>
1127
+ </div>
1128
+ <div class="legend-pct" style="color: var(--cyan);">35.7%</div>
1129
+ </div>
1130
+ <div class="legend-item">
1131
+ <div class="legend-dot" style="background: var(--green);"></div>
1132
+ <div class="legend-info">
1133
+ <div class="name">SABER — Body Retargets</div>
1134
+ <div class="detail">1.2K samples · Unitree G1</div>
1135
+ </div>
1136
+ <div class="legend-pct" style="color: var(--green);">2.3%</div>
1137
+ </div>
1138
+ <div class="legend-item">
1139
+ <div class="legend-dot" style="background: var(--blue-accent);"></div>
1140
+ <div class="legend-info">
1141
+ <div class="name">NVIDIA Robot Data</div>
1142
+ <div class="detail">4.8K samples · Anchor signal</div>
1143
+ </div>
1144
+ <div class="legend-pct" style="color: var(--blue-accent);">9.2%</div>
1145
+ </div>
1146
+ <div class="legend-item">
1147
+ <div class="legend-dot" style="background: #a855f7;"></div>
1148
+ <div class="legend-info">
1149
+ <div class="name">RoboBenchMart</div>
1150
+ <div class="detail">2.5K samples · Task-aligned</div>
1151
+ </div>
1152
+ <div class="legend-pct" style="color: #a855f7;">4.8%</div>
1153
+ </div>
1154
+ </div>
1155
+ </div>
1156
+ </div>
1157
+ </section>
1158
+
1159
+ <!-- ═══════════ FINDINGS ═══════════ -->
1160
+ <section id="findings">
1161
+ <div class="section-inner fade-up">
1162
+ <div class="section-label">Key Insights</div>
1163
+ <div class="section-title">What SABER Demonstrates</div>
1164
+
1165
+ <div class="findings-grid">
1166
+ <div class="finding-card">
1167
+ <div class="finding-num">Finding 01</div>
1168
+ <h4>Human Video Scales Where Teleoperation Can't</h4>
1169
+ <p>SABER demonstrates that high-fidelity naturalistic human behavior, systematically captured and retargeted, is a viable and scalable foundation for domain-specific robot adaptation — without a robot in the loop.</p>
1170
+ </div>
1171
+ <div class="finding-card">
1172
+ <div class="finding-num">Finding 02</div>
1173
+ <h4>Three Streams Are Complementary</h4>
1174
+ <p>LAPA tokens capture whole-arm trajectory, Dex-Retargeting provides finger-level precision, and body retargets supply torso-arm-leg coordination. Together they provide non-overlapping kinematic information.</p>
1175
+ </div>
1176
+ <div class="finding-card">
1177
+ <div class="finding-num">Finding 03</div>
1178
+ <h4>Robot-Native Anchor Stabilizes Training</h4>
1179
+ <p>The 4,800-sample robot-native anchor data proved necessary to stabilize early training even at SABER's scale, suggesting general manipulation signal matters for robust convergence.</p>
1180
+ </div>
1181
+ <div class="finding-card">
1182
+ <div class="finding-num">Finding 04</div>
1183
+ <h4>Task Progress Beyond Binary Success</h4>
1184
+ <p>SABER-MM teaches models to progress further through each task sequence — mean P≥2/3 of 0.445 vs 0.278 baseline — indicating reaching and grasping are well-learned while placement remains the frontier.</p>
1185
+ </div>
1186
+ </div>
1187
+ </div>
1188
+ </section>
1189
+
1190
+ <!-- ═══════════ CITATION ═══════════ -->
1191
+ <section style="background: var(--bg-darker);">
1192
+ <div class="section-inner fade-up">
1193
+ <div class="section-label">Citation</div>
1194
+ <div class="section-title">Cite This Work</div>
1195
+
1196
+ <div class="citation-block">
1197
+ <button class="copy-btn" onclick="copyCitation()">Copy BibTeX</button>
1198
+ <pre>@article{dreamvu2026saber,
1199
+ title = {SABER: A Scalable Action-Based Embodied Dataset
1200
+ for Real-World VLA Adaptation},
1201
+ author = {Menga, Narsimha and Sakurikar, Parikshit and Rouhi, Amirreza
1202
+ and Reddy, Satya Sai and Govil, Anirudh and Chittajallu, Sri Harsha
1203
+ and Aggarwal, Rajat and Namboodiri, Anoop and Reddi, Sashi},
1204
+ year = {2026},
1205
+ month = {May},
1206
+ note = {DreamVu Inc.},
1207
+ url = {https://dreamvu.ai/saber}
1208
+ }</pre>
1209
+ </div>
1210
+ </div>
1211
+ </section>
1212
+
1213
+ <!-- ═══════════ CTA ═══════════ -->
1214
+ <section class="cta-banner">
1215
+ <h2>Ready to Build the <span style="background: var(--gradient-orange); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Data Layer</span> for Retail Robots?</h2>
1216
+ <p>The SABER-10K subset is available now. Full dataset and code at dreamvu.ai/saber.</p>
1217
+ <div class="cta-buttons">
1218
+ <a href="https://huggingface.co/datasets/DreamVu/SABER-10K" target="_blank" class="btn-cta" style="font-size: 16px; padding: 14px 32px;">Download SABER-10K on HuggingFace</a>
1219
+ <a href="https://dreamvu.ai/saber" target="_blank" class="btn-outline" style="font-size: 16px; padding: 14px 32px;">Full Paper & Dataset →</a>
1220
+ <a href="mailto:sales@dreamvu.ai" class="btn-outline" style="font-size: 16px; padding: 14px 32px;">Contact Sales</a>
1221
+ </div>
1222
+ </section>
1223
+
1224
+
1225
+ <script>
1226
+ // ── Mobile menu ──
1227
+ function toggleMenu() {
1228
+ document.getElementById('mobileMenu').classList.toggle('open');
1229
+ document.querySelector('.hamburger').classList.toggle('active');
1230
+ }
1231
+ function closeMenu() {
1232
+ document.getElementById('mobileMenu').classList.remove('open');
1233
+ document.querySelector('.hamburger').classList.remove('active');
1234
+ }
1235
+
1236
+ // ── Video play/pause ──
1237
+ function toggleVideo(wrapper) {
1238
+ const video = wrapper.querySelector('video');
1239
+ const overlay = wrapper.querySelector('.video-overlay');
1240
+ if (video.paused) {
1241
+ // Pause all other videos first
1242
+ document.querySelectorAll('.video-wrapper video').forEach(v => {
1243
+ if (v !== video) { v.pause(); v.closest('.video-wrapper').querySelector('.video-overlay').style.opacity = '1'; }
1244
+ });
1245
+ video.play();
1246
+ overlay.style.opacity = '0';
1247
+ } else {
1248
+ video.pause();
1249
+ overlay.style.opacity = '1';
1250
+ }
1251
+ }
1252
+
1253
+ // ── Copy citation ──
1254
+ function copyCitation() {
1255
+ const text = document.querySelector('.citation-block pre').textContent;
1256
+ navigator.clipboard.writeText(text).then(() => {
1257
+ const btn = document.querySelector('.copy-btn');
1258
+ btn.textContent = 'Copied!';
1259
+ setTimeout(() => btn.textContent = 'Copy BibTeX', 2000);
1260
+ });
1261
+ }
1262
+
1263
+ // ── Scroll animations ──
1264
+ const observer = new IntersectionObserver((entries) => {
1265
+ entries.forEach(entry => {
1266
+ if (entry.isIntersecting) {
1267
+ entry.target.classList.add('visible');
1268
+ // Animate bars if in results section
1269
+ entry.target.querySelectorAll('.bar-fill').forEach(bar => {
1270
+ setTimeout(() => { bar.style.width = bar.dataset.width; }, 300);
1271
+ });
1272
+ }
1273
+ });
1274
+ }, { threshold: 0.15 });
1275
+
1276
+ document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
1277
+
1278
+ </script>
1279
+
1280
+ </body>
1281
  </html>
1282
+