-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
760 lines (675 loc) Β· 25 KB
/
index.html
File metadata and controls
760 lines (675 loc) Β· 25 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnexWeb β Get Paid to Shop</title>
<style>
/* ββ KnexWeb Glassmorphism Design System ββββββββββββββββ */
:root {
--green: #00ff00;
--green-dim: rgba(0, 255, 0, 0.35);
--green-glow: rgba(0, 255, 0, 0.18);
--green-subtle: rgba(0, 255, 0, 0.08);
--teal: #00d4aa;
--bg: #000000;
--bg-card: rgba(255, 255, 255, 0.03);
--border: rgba(0, 255, 0, 0.08);
--border-bright: rgba(0, 255, 0, 0.15);
--text: #f0f0f0;
--text-dim: rgba(240, 240, 240, 0.55);
--text-muted: rgba(240, 240, 240, 0.30);
--red: #ff3b30;
--radius: 18px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: var(--bg);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* ββ Hero ββββββββββββββββββββββββββββββββββββββββββββββ */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 24px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 50% 50%, rgba(0, 255, 0, 0.04) 0%, transparent 50%);
animation: hero-glow 8s ease-in-out infinite;
}
@keyframes hero-glow {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.1); opacity: 1; }
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
background: var(--green-subtle);
border: 1px solid var(--border-bright);
border-radius: 100px;
font-size: 13px;
font-weight: 600;
color: var(--green);
margin-bottom: 32px;
position: relative;
z-index: 1;
}
.hero h1 {
font-size: clamp(48px, 8vw, 96px);
font-weight: 800;
letter-spacing: -2px;
line-height: 1.05;
margin-bottom: 24px;
position: relative;
z-index: 1;
}
.hero h1 .knex {
color: #ffffff;
}
.hero h1 .web {
color: var(--green);
text-shadow: 0 0 40px var(--green-dim), 0 0 80px rgba(0, 255, 0, 0.1);
}
.hero-sub {
font-size: clamp(18px, 3vw, 28px);
font-weight: 400;
color: var(--text-dim);
max-width: 600px;
margin-bottom: 40px;
position: relative;
z-index: 1;
}
.hero-tagline {
font-size: 20px;
font-weight: 700;
color: var(--teal);
text-shadow: 0 0 20px rgba(0, 212, 170, 0.3);
position: relative;
z-index: 1;
}
/* ββ Sections ββββββββββββββββββββββββββββββββββββββββββ */
section {
max-width: 900px;
margin: 0 auto;
padding: 80px 24px;
}
.section-title {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--green);
margin-bottom: 12px;
}
h2 {
font-size: clamp(28px, 4vw, 44px);
font-weight: 700;
letter-spacing: -1px;
margin-bottom: 24px;
line-height: 1.15;
}
.lead {
font-size: 18px;
color: var(--text-dim);
max-width: 700px;
margin-bottom: 48px;
}
/* ββ Cards βββββββββββββββββββββββββββββββββββββββββββββ */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin-bottom: 48px;
}
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px 24px;
transition: all 0.3s ease;
}
.card:hover {
border-color: var(--border-bright);
box-shadow: 0 0 30px rgba(0, 255, 0, 0.06);
transform: translateY(-2px);
}
.card-emoji {
font-size: 36px;
margin-bottom: 16px;
display: block;
}
.card h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
color: #ffffff;
}
.card p {
font-size: 14px;
color: var(--text-dim);
line-height: 1.55;
}
/* ββ Flow Diagram βββββββββββββββββββββββββββββββββββββ */
.flow {
display: flex;
flex-direction: column;
gap: 0;
margin: 48px 0;
}
.flow-step {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px 0;
position: relative;
}
.flow-step::before {
content: '';
position: absolute;
left: 23px;
top: 56px;
bottom: -4px;
width: 2px;
background: linear-gradient(to bottom, var(--green-dim), transparent);
}
.flow-step:last-child::before {
display: none;
}
.flow-icon {
width: 48px;
height: 48px;
border-radius: 14px;
background: var(--green-subtle);
border: 1px solid var(--border-bright);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
}
.flow-content h4 {
font-size: 16px;
font-weight: 700;
color: #ffffff;
margin-bottom: 4px;
}
.flow-content p {
font-size: 14px;
color: var(--text-dim);
}
/* ββ Comparison Table ββββββββββββββββββββββββββββββββββ */
.compare {
width: 100%;
border-collapse: collapse;
margin: 32px 0;
font-size: 14px;
}
.compare th {
text-align: left;
padding: 14px 16px;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
}
.compare th:first-child {
width: 30%;
}
.compare .col-old {
color: var(--red);
opacity: 0.7;
}
.compare .col-knex {
color: var(--green);
}
.compare td {
padding: 14px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
color: var(--text-dim);
}
.compare .val-bad {
color: rgba(255, 59, 48, 0.8);
}
.compare .val-good {
color: var(--green);
font-weight: 700;
}
/* ββ Stats Row ββββββββββββββββββββββββββββββββββββββββ */
.stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 48px 0;
}
.stat {
text-align: center;
padding: 28px 16px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.stat-value {
font-size: 36px;
font-weight: 800;
color: var(--green);
text-shadow: 0 0 20px var(--green-dim);
line-height: 1;
margin-bottom: 8px;
}
.stat-label {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
}
/* ββ Highlight Box ββββββββββββββββββββββββββββββββββββ */
.highlight {
background: linear-gradient(135deg, rgba(0, 255, 0, 0.04), rgba(0, 212, 170, 0.04));
border: 1px solid var(--border-bright);
border-radius: var(--radius);
padding: 32px;
margin: 48px 0;
text-align: center;
}
.highlight-emoji {
font-size: 48px;
margin-bottom: 16px;
}
.highlight h3 {
font-size: 24px;
font-weight: 700;
margin-bottom: 12px;
}
.highlight p {
font-size: 16px;
color: var(--text-dim);
max-width: 500px;
margin: 0 auto;
}
/* ββ Destruction Section βββββββββββββββββββββββββββββββ */
.destroy-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 32px 0;
}
.destroy-card {
padding: 24px;
border-radius: var(--radius);
text-align: center;
}
.destroy-card.old {
background: rgba(255, 59, 48, 0.04);
border: 1px solid rgba(255, 59, 48, 0.1);
}
.destroy-card.new {
background: rgba(0, 255, 0, 0.04);
border: 1px solid rgba(0, 255, 0, 0.1);
}
.destroy-card .emoji {
font-size: 32px;
margin-bottom: 12px;
}
.destroy-card h4 {
font-size: 15px;
font-weight: 700;
margin-bottom: 8px;
}
.destroy-card.old h4 {
color: rgba(255, 59, 48, 0.8);
}
.destroy-card.new h4 {
color: var(--green);
}
.destroy-card p {
font-size: 13px;
color: var(--text-dim);
}
/* ββ Footer βββββββββββββββββββββββββββββββββββββββββββ */
footer {
text-align: center;
padding: 60px 24px;
border-top: 1px solid var(--border);
}
footer .logo {
font-size: 20px;
font-weight: 800;
letter-spacing: 1px;
margin-bottom: 12px;
}
footer .logo .knex { color: #fff; }
footer .logo .web { color: var(--green); }
footer p {
font-size: 13px;
color: var(--text-muted);
}
/* ββ Divider ββββββββββββββββββββββββββββββββββββββββββ */
.divider {
height: 1px;
background: linear-gradient(to right, transparent, var(--border-bright), transparent);
margin: 0 auto;
max-width: 400px;
}
/* ββ Print Styles βββββββββββββββββββββββββββββββββββββ */
@media print {
body { background: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.hero { min-height: auto; padding: 40px 24px; page-break-after: always; }
section { padding: 40px 24px; }
.card:hover { transform: none; }
@page { size: A4; margin: 0.5in; }
}
@media (max-width: 600px) {
.stats { grid-template-columns: 1fr; }
.destroy-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<!-- ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
HERO
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ -->
<div class="hero">
<div class="hero-badge">β‘ Chrome Extension — Works on Every Website</div>
<h1><span class="knex">KNEX</span><span class="web">WEB</span></h1>
<p class="hero-sub">The AI-powered Chrome extension that pays consumers 100% of ad revenue in KNEX. Zero fees for businesses. The platform takes nothing.</p>
<p class="hero-tagline">π° Get Paid to Shop</p>
</div>
<div class="divider"></div>
<!-- ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
THE PROBLEM
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ -->
<section>
<p class="section-title">π The Problem</p>
<h2>Advertising is Broken.<br>Payment Processing is a Tax.</h2>
<p class="lead">Every year, $600B+ flows through digital advertising and $100B+ is extracted in payment processing fees. Consumers see nothing. KnexWeb changes everything.</p>
<div class="stats">
<div class="stat">
<div class="stat-value">$0</div>
<div class="stat-label">Consumer Earnings<br>from Traditional Ads</div>
</div>
<div class="stat">
<div class="stat-value">2.9%</div>
<div class="stat-label">Visa/MC Fee<br>on Every Transaction</div>
</div>
<div class="stat">
<div class="stat-value">$0</div>
<div class="stat-label">What You Get<br>for Watching Ads</div>
</div>
</div>
<div class="destroy-grid">
<div class="destroy-card old">
<div class="emoji">πΊ</div>
<h4>Traditional Advertising</h4>
<p>You see a banner ad. You close it. Google gets paid. You get nothing. The business loses money on clicks that don't convert.</p>
</div>
<div class="destroy-card new">
<div class="emoji">β‘</div>
<h4>KnexWeb Advertising</h4>
<p>A curious AI friend mentions a better deal. You take it. You pocket 100% of the ad spend in KNEX. The business makes a sale. Everyone wins.</p>
</div>
</div>
</section>
<div class="divider"></div>
<!-- ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
HOW IT WORKS
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ -->
<section>
<p class="section-title">π§ How It Works</p>
<h2>From Browsing to Earning<br>in 6 Steps</h2>
<p class="lead">KnexWeb sits on every website. Its AI notices what you're looking at and naturally mentions better deals β like a friend looking over your shoulder.</p>
<div class="flow">
<div class="flow-step">
<div class="flow-icon">π</div>
<div class="flow-content">
<h4>1. You Browse Normally</h4>
<p>Visit any shopping site β eBay, Walmart, Best Buy. KnexWeb is always there, quietly running.</p>
</div>
</div>
<div class="flow-step">
<div class="flow-icon">π</div>
<div class="flow-content">
<h4>2. Context Detection</h4>
<p>KnexWeb scans the page β product names, prices, reviews, metadata. It knows what you're looking at.</p>
</div>
</div>
<div class="flow-step">
<div class="flow-icon">π―</div>
<div class="flow-content">
<h4>3. Ad Matching</h4>
<p>A competing business (e.g., Amazon) has bought KNEX ad credits. They want to offer you a better deal.</p>
</div>
</div>
<div class="flow-step">
<div class="flow-icon">π€</div>
<div class="flow-content">
<h4>4. AI Delivers It Naturally</h4>
<p>"Those headphones are solid. Amazon has them for $12 less with next-day delivery though." No banners. No popups. Just a friend's suggestion.</p>
</div>
</div>
<div class="flow-step">
<div class="flow-icon">π±</div>
<div class="flow-content">
<h4>5. Scan QR to Sync Wallet</h4>
<p>Open the session drawer, scan the unique QR code with your KNEX Wallet PWA. Your identicon appears. You're connected.</p>
</div>
</div>
<div class="flow-step">
<div class="flow-icon">π</div>
<div class="flow-content">
<h4>6. Earn KNEX or Take the Discount</h4>
<p>If the deal leads to a purchase, you pocket 100% of the KNEX the business spent to reach you. Or take it as an equal discount. Your choice.</p>
</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
FOR CONSUMERS
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ -->
<section>
<p class="section-title">π For Consumers</p>
<h2>You Literally Get Paid<br>to Shop π°</h2>
<p class="lead">Every time an ad leads to a sale, the consumer pockets 100% of the ad revenue. Not the platform. Not a middleman. YOU.</p>
<div class="cards">
<div class="card">
<span class="card-emoji">πΈ</span>
<h3>100% of Ad Revenue</h3>
<p>The platform takes $0. Every KNEX the business spent to advertise to you goes directly into your wallet.</p>
</div>
<div class="card">
<span class="card-emoji">π·οΈ</span>
<h3>Or Take a Discount</h3>
<p>Don't want KNEX? Take the equal discount value applied directly to your purchase. Same savings, different format.</p>
</div>
<div class="card">
<span class="card-emoji">π</span>
<h3>Complete Privacy</h3>
<p>No real names. No tracking. No profiles. You're identified only by a cute animal name like "SilkyPanda." Public room, no DMs.</p>
</div>
<div class="card">
<span class="card-emoji">π</span>
<h3>Universal Access</h3>
<p>Works on any website, any computer. Scan a unique QR code to sync your wallet. End session anytime. Refresh anytime.</p>
</div>
<div class="card">
<span class="card-emoji">π€</span>
<h3>AI That Helps, Not Sells</h3>
<p>Knex AI is curious and conversational. It notices details you might miss β hidden fees, price comparisons, red flags. Never pushy.</p>
</div>
<div class="card">
<span class="card-emoji">π±</span>
<h3>Your Wallet, Your Phone</h3>
<p>Funds go to your KNEX Wallet PWA. Not stored in the browser. Scan QR, see your identicon, and your earnings flow to you.</p>
</div>
</div>
</section>
<div class="divider"></div>
<!-- ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
FOR BUSINESSES
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ -->
<section>
<p class="section-title">π’ For Businesses</p>
<h2>Zero Fees. Willing Buyers.<br>Direct Connection. π</h2>
<p class="lead">Businesses love KnexWeb because there are no payment processing fees accepting USDX and their ad spend goes directly to motivated consumers.</p>
<div class="cards">
<div class="card">
<span class="card-emoji">π³</span>
<h3>$0 Transaction Fees</h3>
<p>Accepting USDX on the KNEX network costs nothing. No interchange fees. No annual fees. No chargeback fees. Zero.</p>
</div>
<div class="card">
<span class="card-emoji">π―</span>
<h3>Direct-to-Consumer</h3>
<p>No Google middleman. No Meta algorithm. Your offer goes directly to consumers who are already shopping for your product.</p>
</div>
<div class="card">
<span class="card-emoji">β
</span>
<h3>Willing Buyers Only</h3>
<p>Consumers are incentivized to listen. They earn KNEX or get a discount. They WANT to engage with your offer.</p>
</div>
<div class="card">
<span class="card-emoji">π</span>
<h3>No Bidding Wars</h3>
<p>Set your KNEX offer. If it's compelling, consumers engage. No auction. No inflated click costs. Simple and transparent.</p>
</div>
</div>
<table class="compare">
<thead>
<tr>
<th></th>
<th class="col-old">π Old System</th>
<th class="col-knex">β‘ KNEX Network</th>
</tr>
</thead>
<tbody>
<tr>
<td>Payment Processing</td>
<td class="val-bad">2.9% + $0.30 per transaction</td>
<td class="val-good">$0</td>
</tr>
<tr>
<td>Annual Card Fees</td>
<td class="val-bad">$95 β $550</td>
<td class="val-good">$0</td>
</tr>
<tr>
<td>Chargeback Fees</td>
<td class="val-bad">$15 β $100 each</td>
<td class="val-good">$0</td>
</tr>
<tr>
<td>Ad Spend Goes To</td>
<td class="val-bad">Google / Meta</td>
<td class="val-good">The Customer π°</td>
</tr>
<tr>
<td>Consumer Incentive</td>
<td class="val-bad">None</td>
<td class="val-good">100% of Ad Revenue</td>
</tr>
<tr>
<td>$1M/year Revenue Fees</td>
<td class="val-bad">~$30,000</td>
<td class="val-good">$0</td>
</tr>
</tbody>
</table>
</section>
<div class="divider"></div>
<!-- ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
CREATIVE DESTRUCTION
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ -->
<section>
<p class="section-title">π₯ Creative Destruction</p>
<h2>Replacing the Gatekeepers</h2>
<p class="lead">KnexWeb doesn't compete with Visa, Google, or Meta. It makes them irrelevant.</p>
<div class="destroy-grid">
<div class="destroy-card old">
<div class="emoji">π³</div>
<h4>Visa / Mastercard / Amex / Discover</h4>
<p>Extract 2-3% on every transaction. $100B+ per year in fees from merchants who have no alternative.</p>
</div>
<div class="destroy-card new">
<div class="emoji">β‘</div>
<h4>KNEX / USDX Network</h4>
<p>$0 processing fees. Instant settlement. No chargebacks. Businesses keep every dollar they earn.</p>
</div>
<div class="destroy-card old">
<div class="emoji">πΊ</div>
<h4>Google Ads / Meta Ads</h4>
<p>Businesses bid against each other. CPC inflation. Ad money goes to platforms. Consumers get nothing.</p>
</div>
<div class="destroy-card new">
<div class="emoji">π€</div>
<h4>KnexWeb AI Delivery</h4>
<p>No bidding. Businesses set offers. AI delivers naturally. 100% of ad revenue goes to the consumer.</p>
</div>
</div>
<div class="highlight">
<div class="highlight-emoji">π¦</div>
<h3>The Middlemen Are Obsolete</h3>
<p>When businesses pay zero fees and consumers earn from every purchase, there's no reason for the old system to exist. This is creative destruction.</p>
</div>
</section>
<div class="divider"></div>
<!-- ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
QR SESSION
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ -->
<section>
<p class="section-title">π± Universal Access</p>
<h2>Scan. Sync. Earn.<br>From Any Computer.</h2>
<p class="lead">KnexWeb is universal. No login. No account. Scan a unique QR code to link your KNEX Wallet and start earning.</p>
<div class="cards">
<div class="card">
<span class="card-emoji">π²</span>
<h3>Every QR Is Unique</h3>
<p>Cryptographically generated. No two QR codes are ever the same. 256-bit random tokens ensure absolute uniqueness.</p>
</div>
<div class="card">
<span class="card-emoji">π¨</span>
<h3>Your Identicon Appears</h3>
<p>After scanning, your unique wallet identicon replaces the K button in the chatbox. Visual proof you're connected.</p>
</div>
<div class="card">
<span class="card-emoji">π</span>
<h3>Session Control</h3>
<p>End session. Expire session. Refresh session. Generate a new QR anytime. You're always in control.</p>
</div>
</div>
</section>
<div class="divider"></div>
<!-- ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
FOOTER
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ -->
<footer>
<div class="logo"><span class="knex">KNEX</span><span class="web">WEB</span></div>
<p>β‘ Get Paid to Shop — The Future of Commerce Has No Middlemen</p>
<p style="margin-top: 8px;">© 2026 Distributed Ledger Technologies (DLT) — Skyknet.com</p>
</footer>
</body>
</html>