HoloNETSite/index.html at main · NextGenSoftwareUK/HoloNETSite · GitHub

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
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>HoloNET — The World's First .NET &amp; Unity Client for Holochain</title>
<meta name="description" content="HoloNET is the world's first .NET &amp; Unity client for Holochain. Connect any .NET application, Unity or Unreal game to the Holochain P2P network — Client, ORM, Manager, HDK and HyperNET.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
<style>
:root{
  --bg-deep:#030714;--bg-card:rgba(10,18,50,.75);--bg-card2:rgba(8,14,38,.9);
  --cyan:#3b82f6;--violet:#8b5cf6;--gold:#f0a500;
  --heading:#e8f4ff;--heading-sub:#a8c8f0;
  --text:#d0e4ff;--text-dim:#6a80a8;
  --border:rgba(59,130,246,.12);--border-v:rgba(139,92,246,.2);
  --glow:rgba(59,130,246,.15);--glow-v:rgba(139,92,246,.15);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg-deep);color:var(--text);font-family:'Rajdhani',sans-serif;overflow-x:hidden;min-height:100vh}
canvas#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
.scanlines{position:fixed;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px)}

/* ── NAV ── */
.nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:24px;padding:0 40px;height:64px;background:rgba(3,7,20,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:'Orbitron',sans-serif;font-size:15px;font-weight:700;letter-spacing:.12em;color:var(--cyan)}
.nav-links{display:flex;gap:28px;margin-left:auto}
.nav-links a{font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.12em;color:#a8bfd8;text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--cyan)}
.nav-cta{font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.1em;color:var(--cyan);border:1px solid rgba(59,130,246,.3);border-radius:999px;padding:8px 18px;text-decoration:none;transition:background .2s,border-color .2s;white-space:nowrap}
.nav-cta:hover{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.55)}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;margin-left:auto}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--cyan);border-radius:2px}
@media(max-width:800px){.nav{padding:0 20px}.nav-links{display:none}.nav-hamburger{display:flex}}

/* ── SECTIONS ── */
.section{position:relative;z-index:2;padding:90px 40px;max-width:1180px;margin:0 auto}
.section-kicker{font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.25em;color:var(--cyan);margin-bottom:14px;text-align:center}
.section-kicker.violet{color:var(--violet)}
.section-title{font-family:'Orbitron',sans-serif;font-size:clamp(22px,3.5vw,38px);font-weight:900;letter-spacing:.06em;color:var(--heading);text-align:center;margin-bottom:14px}
.section-line{display:block;width:60px;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);margin:0 auto 24px}
.section-line.violet{background:linear-gradient(90deg,transparent,var(--violet),transparent)}
.section-sub{font-size:16px;color:#a8bfd8;text-align:center;max-width:700px;margin:0 auto 50px;line-height:1.75}

/* ── HERO ── */
.hero{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px 40px 80px}
.hero-kicker{font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.28em;color:var(--cyan);margin-bottom:20px;opacity:.85}
.hero-logo{margin-bottom:28px}
.hero-title{font-family:'Orbitron',sans-serif;font-size:clamp(24px,4.5vw,52px);font-weight:900;letter-spacing:.05em;color:var(--heading);line-height:1.15;max-width:900px;animation:fadeUp .8s ease both}
.hero-title span{color:var(--cyan);text-shadow:0 0 30px rgba(59,130,246,.4)}
.hero-sub{font-size:clamp(15px,2vw,19px);color:#a8bfd8;max-width:700px;line-height:1.75;margin:22px auto 36px;animation:fadeUp .8s .15s ease both}
.hero-badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:36px;animation:fadeUp .8s .25s ease both}
.hero-badge{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.15em;color:var(--cyan);background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.2);border-radius:999px;padding:7px 16px}
.hero-badge.violet{color:var(--violet);background:rgba(139,92,246,.06);border-color:rgba(139,92,246,.25)}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;animation:fadeUp .8s .35s ease both}
.btn-primary{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;color:#000;background:var(--cyan);border:none;border-radius:10px;padding:14px 30px;text-decoration:none;transition:filter .2s,transform .2s;display:inline-block}
.btn-primary:hover{filter:brightness(1.15);transform:translateY(-2px)}
.btn-secondary{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--cyan);background:transparent;border:2px solid rgba(59,130,246,.4);border-radius:10px;padding:13px 28px;text-decoration:none;transition:background .2s,border-color .2s,transform .2s;display:inline-block}
.btn-secondary:hover{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.7);transform:translateY(-2px)}
.btn-violet{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--violet);background:transparent;border:2px solid rgba(139,92,246,.4);border-radius:10px;padding:13px 28px;text-decoration:none;transition:background .2s,border-color .2s,transform .2s;display:inline-block}
.btn-violet:hover{background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.7);transform:translateY(-2px)}

/* ── PACKAGE CARDS ── */
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;max-width:1100px;margin:0 auto;width:100%}
.pkg-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:28px 26px;display:flex;flex-direction:column;gap:12px;transition:transform .3s,border-color .3s,box-shadow .3s}
.pkg-card:hover{transform:translateY(-5px);border-color:rgba(59,130,246,.3);box-shadow:0 16px 50px rgba(59,130,246,.08)}
.pkg-card.violet{border-color:var(--border-v)}
.pkg-card.violet:hover{border-color:rgba(139,92,246,.4);box-shadow:0 16px 50px var(--glow-v)}
.pkg-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.pkg-kicker{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--cyan)}
.pkg-kicker.violet{color:var(--violet)}
.pkg-title{font-family:'Orbitron',sans-serif;font-size:15px;font-weight:700;letter-spacing:.07em;color:var(--heading)}
.pkg-desc{font-size:16px;color:#a8bfd8;line-height:1.65;flex:1}
.pkg-link{font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.1em;color:var(--cyan);text-decoration:none;border:1px solid rgba(59,130,246,.22);border-radius:999px;padding:8px 16px;text-align:center;transition:background .2s,border-color .2s;align-self:flex-start}
.pkg-link:hover{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.5)}
.pkg-link.violet{color:var(--violet);border-color:rgba(139,92,246,.3)}
.pkg-link.violet:hover{background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.55)}

/* ── FEATURE CARDS ── */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;max-width:1100px;margin:0 auto}
.feat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:24px 22px;transition:border-color .3s,transform .3s}
.feat-card:hover{border-color:rgba(59,130,246,.28);transform:translateY(-3px)}
.feat-icon{font-size:26px;margin-bottom:12px}
.feat-kicker{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.18em;color:var(--cyan);margin-bottom:8px}
.feat-title{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--heading);margin-bottom:10px}
.feat-desc{font-size:15px;color:#a8bfd8;line-height:1.6}

/* ── CODE BLOCK ── */
.code-wrap{background:rgba(5,10,28,.9);border:1px solid rgba(59,130,246,.15);border-radius:14px;overflow:hidden;max-width:800px;margin:0 auto}
.code-header{display:flex;align-items:center;gap:8px;padding:12px 20px;background:rgba(59,130,246,.04);border-bottom:1px solid rgba(59,130,246,.1)}
.code-dot{width:10px;height:10px;border-radius:50%}
.code-lang{font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.15em;color:#a8bfd8;margin-left:auto}
pre{padding:24px 28px;overflow-x:auto;font-family:'Share Tech Mono',monospace;font-size:13px;line-height:1.75;color:#c8e0ff}
.kw{color:#7dd3fc}.cm{color:#4a6070;font-style:italic}.st{color:#86efac}.cn{color:#a78bfa}.fn{color:#60a5fa}

/* ── INFOGRAPHIC ── */
.infographic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1000px;margin:0 auto}
.infographic-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:zoom-in;transition:transform .3s,border-color .3s,box-shadow .3s;position:relative}
.infographic-card:hover{transform:translateY(-4px);border-color:rgba(59,130,246,.35);box-shadow:0 12px 40px rgba(59,130,246,.12)}
.infographic-card img{width:100%;height:260px;object-fit:cover;object-position:top;display:block}
.infographic-card--hero{grid-column:1/-1}
.infographic-card--hero img{height:auto;object-fit:contain}
.infographic-label{padding:14px 16px;border-top:1px solid rgba(59,130,246,.08)}
.infographic-tag{display:block;font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--cyan);margin-bottom:4px}
.infographic-title{display:block;font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:.06em;color:var(--heading-sub);line-height:1.4}
#lightbox.open{display:flex!important;animation:fadeIn .2s ease}

/* ── NUGET TABLE ── */
.nuget-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:1100px;margin:0 auto}
.nuget-item{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:16px 18px;display:flex;align-items:center;gap:14px;transition:border-color .3s}
.nuget-item:hover{border-color:rgba(59,130,246,.28)}
.nuget-item-name{font-family:'Share Tech Mono',monospace;font-size:12px;color:var(--text);flex:1;min-width:0;line-height:1.4;word-break:break-all;overflow-wrap:break-word}
.nuget-item-name span{display:block;font-size:10px;color:#a8bfd8;margin-top:3px}
.nuget-item a{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--cyan);text-decoration:none;white-space:nowrap;border:1px solid rgba(59,130,246,.2);border-radius:999px;padding:5px 12px;transition:background .2s}
.nuget-item a:hover{background:rgba(59,130,246,.08)}

/* ── WAYS GRID ── */
.ways-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1000px;margin:0 auto}
.way-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:28px 24px;text-align:center}
.way-num{font-family:'Orbitron',sans-serif;font-size:42px;font-weight:900;color:var(--cyan);opacity:.25;line-height:1;margin-bottom:12px}
.way-title{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--heading);margin-bottom:10px}
.way-desc{font-size:16px;color:#a8bfd8;line-height:1.65}

/* ── HYPERNET BAND ── */
.hypernet-band{background:linear-gradient(135deg,rgba(139,92,246,.07) 0%,rgba(59,130,246,.04) 100%);border:1px solid rgba(139,92,246,.2);border-radius:20px;padding:56px 48px;max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hypernet-kicker{font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.22em;color:var(--violet);margin-bottom:14px}
.hypernet-title{font-family:'Orbitron',sans-serif;font-size:clamp(20px,3vw,32px);font-weight:900;letter-spacing:.05em;color:var(--heading);line-height:1.2;margin-bottom:16px}
.hypernet-title span{color:var(--violet)}
.hypernet-body{font-size:15px;color:#a8bfd8;line-height:1.75;margin-bottom:24px}
.hypernet-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.hypernet-stat{background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.18);border-radius:10px;padding:16px}
.hypernet-stat-num{font-family:'Orbitron',sans-serif;font-size:22px;font-weight:900;color:var(--violet);line-height:1}
.hypernet-stat-label{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.15em;color:#a8bfd8;margin-top:6px}

/* ── OASIS BAND ── */
.oasis-band{background:linear-gradient(135deg,rgba(59,130,246,.04),rgba(8,14,38,.9));border:1px solid var(--border);border-radius:20px;padding:48px;max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.oasis-body{font-size:15px;color:#a8bfd8;line-height:1.8;margin-bottom:20px}
.oasis-pill-row{display:flex;flex-wrap:wrap;gap:8px}
.oasis-pill{font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.07em;color:var(--text);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:5px 12px;background:rgba(255,255,255,.03)}

/* ── DOC LINKS ── */
.doc-links{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:32px auto 0}
.doc-link{font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.12em;color:var(--cyan);text-decoration:none;border:1px solid rgba(59,130,246,.2);border-radius:999px;padding:9px 18px;transition:background .2s,border-color .2s}
.doc-link:hover{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.45)}

/* ── FOOTER ── */
.footer{position:relative;z-index:2;padding:60px 40px 40px;border-top:1px solid rgba(255,255,255,.06);max-width:1180px;margin:0 auto}
.footer-brand{font-family:'Orbitron',sans-serif;font-size:22px;font-weight:900;letter-spacing:.12em;color:var(--cyan);margin-bottom:8px}
.footer-tagline{font-size:16px;color:#a8bfd8;margin-bottom:140px;max-width:none}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-bottom:40px}
.footer-col-title{font-family:'Orbitron',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.15em;color:var(--cyan);margin-bottom:14px}
.footer-col ul{list-style:none;display:grid;gap:9px}
footer ul li a{color:#a8bfd8;text-decoration:none;transition:filter .3s ease,color .3s ease}
footer ul li a:hover{color:var(--cyan);filter:drop-shadow(0 0 8px rgba(59,130,246,1)) drop-shadow(0 0 20px rgba(59,130,246,.8)) drop-shadow(0 0 40px rgba(59,130,246,.4))}
.footer a:hover{color:var(--cyan);filter:drop-shadow(0 0 8px rgba(59,130,246,1)) drop-shadow(0 0 20px rgba(59,130,246,.8)) drop-shadow(0 0 40px rgba(59,130,246,.4))}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:28px;border-top:1px solid rgba(255,255,255,.05);font-size:15px;color:#a8bfd8}
.footer-socials{display:flex;gap:14px}
.footer-social{font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.1em;color:#a8bfd8;text-decoration:none;transition:color .2s}
.footer-social:hover{color:var(--cyan)}
@media(max-width:900px){.hypernet-band{grid-template-columns:1fr}.oasis-band{grid-template-columns:1fr}.ways-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.hero{padding:80px 20px 60px}.section{padding:60px 40px}.hypernet-band{padding:32px 24px}.oasis-band{padding:28px 24px}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:16px;text-align:center}}

/* ── HERO ANIMATED BACKGROUND ── */
.hero-bg{order:10;display:block;width:100%;max-width:700px;margin-top:40px;pointer-events:none;opacity:.75}
.hero-logo{animation:floaty 7s ease-in-out infinite}

/* ── ARCHITECTURE DIAGRAM ── */
.arch-wrap{background:var(--bg-card);border:1px solid var(--border-v);border-radius:16px;padding:28px;max-width:1000px;margin:0 auto;overflow-x:auto;box-shadow:0 16px 50px rgba(59,130,246,.06)}
.arch-eq{display:flex;align-items:center;justify-content:center;gap:14px;margin:26px auto 0;flex-wrap:wrap;max-width:1000px}
.arch-eq-pill{font-family:'Orbitron',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.08em;padding:8px 15px;border-radius:6px}
.arch-eq-pill.cyan{background:rgba(59,130,246,.1);color:var(--cyan);border:1px solid rgba(59,130,246,.32)}
.arch-eq-pill.violet{background:rgba(139,92,246,.12);color:var(--violet);border:1px solid rgba(139,92,246,.35)}
.arch-eq-op{font-family:'Orbitron',sans-serif;font-size:16px;color:#a8bfd8;font-weight:700}
.arch-eq-result{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:900;color:var(--cyan);letter-spacing:.14em;text-shadow:0 0 12px rgba(59,130,246,.5)}

/* ── ANIMATIONS ── */
footer{--text-dim:#a8bfd8}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}
a:hover{filter:drop-shadow(0 0 8px rgba(59,130,246,1)) drop-shadow(0 0 20px rgba(59,130,246,.8)) drop-shadow(0 0 40px rgba(59,130,246,.4))}
.foot-bottom{max-width:1100px;margin:0 auto;border-top:1px solid rgba(255,255,255,.05);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.foot-bottom p{color:#a8bfd8;font-size:.82rem}
.foot-bottom a{color:#a8bfd8;text-decoration:none}.foot-bottom a:hover{color:var(--cyan);filter:drop-shadow(0 0 8px rgba(59,130,246,1)) drop-shadow(0 0 20px rgba(59,130,246,.8)) drop-shadow(0 0 40px rgba(59,130,246,.4))}
@media(max-width:720px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}.foot-bottom{justify-content:center;text-align:center}}
@media(max-width:500px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.foot-bottom{font-size:.78rem;line-height:1.5}}
</style>
</head>
<body>
<canvas id="stars"></canvas>
<div class="scanlines"></div>

<!-- ── NAV ── -->
<nav class="nav">
  <a href="#" class="nav-brand">
    <svg width="22" height="22" viewBox="0 0 54 54" fill="none">
      <polygon points="42.6,18 27,9 11.4,18 11.4,36 27,45 42.6,36" stroke="#3b82f6" stroke-width="1.4" fill="none"/>
      <circle cx="27" cy="27" r="3" fill="#3b82f6"/>
    </svg>
    HOLONET
  </a>
  <div class="nav-links">
    <a href="#packages">PACKAGES</a>
    <a href="#features">FEATURES</a>
    <a href="#quickstart">QUICK START</a>
    <a href="#oasis">OASIS</a>
    <a href="#downloads">DOWNLOADS</a>
    <a href="https://oasisomniverse.one" target="_blank" rel="noopener">ECOSYSTEM</a>
  </div>
  <a href="https://github.com/holochain-open-dev/holochain-client-csharp" target="_blank" rel="noopener" class="nav-cta">GITHUB →</a>
  <div class="nav-hamburger" onclick="this.nextElementSibling&&(this.nextElementSibling.style.display='flex')">
    <span></span><span></span><span></span>
  </div>
</nav>

<!-- ── HERO ── -->
<section class="hero">
  <svg class="hero-bg" viewBox="0 0 900 900" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <defs>
      <radialGradient id="hb-glow" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stop-color="#3b82f6" stop-opacity=".12"/>
        <stop offset="100%" stop-color="#030714" stop-opacity="0"/>
      </radialGradient>
      <filter id="hb-soft"><feGaussianBlur stdDeviation="2.4" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
      <!-- agent node (Holochain peer) -->
      <g id="agent">
        <polygon points="0,-15 13,-7.5 13,7.5 0,15 -13,7.5 -13,-7.5" fill="rgba(59,130,246,.08)" stroke="#3b82f6" stroke-width="1.2"/>
        <circle cx="0" cy="0" r="3.2" fill="#3b82f6"/>
      </g>
      <g id="agentv">
        <polygon points="0,-15 13,-7.5 13,7.5 0,15 -13,7.5 -13,-7.5" fill="rgba(139,92,246,.1)" stroke="#8b5cf6" stroke-width="1.2"/>
        <circle cx="0" cy="0" r="3.2" fill="#8b5cf6"/>
      </g>
    </defs>

    <circle cx="450" cy="450" r="430" fill="url(#hb-glow)"/>
    <!-- DHT peers + fully-connected web + routing packets are generated by JS -->
    <g id="dht-net"></g>
  </svg>
  <!-- <div class="hero-kicker">HOLONET · v3.0.5 · PART OF THE OASIS OMNIVERSE</div> -->
  <div class="hero-logo">
    <svg width="110" height="110" viewBox="0 0 110 110" fill="none" xmlns="http://www.w3.org/2000/svg" style="filter:drop-shadow(0 0 18px rgba(59,130,246,.4))">
      <polygon points="86,36 55,18 24,36 24,72 55,90 86,72" stroke="#3b82f6" stroke-width="1.5" fill="none" opacity="0.9" style="animation:spin 40s linear infinite;transform-origin:55px 55px"/>
      <polygon points="75,42 55,31 35,42 35,65 55,76 75,65" stroke="#3b82f6" stroke-width="0.8" fill="none" opacity="0.45"/>
      <polygon points="67,47 55,40 43,47 43,61 55,68 67,61" stroke="#8b5cf6" stroke-width="0.7" fill="none" opacity="0.5"/>
      <line x1="55" y1="55" x2="86" y2="36" stroke="#3b82f6" stroke-width="0.5" opacity="0.25"/>
      <line x1="55" y1="55" x2="55" y2="18" stroke="#3b82f6" stroke-width="0.5" opacity="0.25"/>
      <line x1="55" y1="55" x2="24" y2="36" stroke="#3b82f6" stroke-width="0.5" opacity="0.25"/>
      <line x1="55" y1="55" x2="24" y2="72" stroke="#3b82f6" stroke-width="0.5" opacity="0.25"/>
      <line x1="55" y1="55" x2="55" y2="90" stroke="#3b82f6" stroke-width="0.5" opacity="0.25"/>
      <line x1="55" y1="55" x2="86" y2="72" stroke="#3b82f6" stroke-width="0.5" opacity="0.25"/>
      <circle cx="55" cy="55" r="5" fill="#3b82f6" style="animation:pulse 2.5s ease-in-out infinite"/>
      <circle cx="86" cy="36" r="2.5" fill="#3b82f6" opacity="0.7"/>
      <circle cx="55" cy="18" r="2.5" fill="#3b82f6" opacity="0.7"/>
      <circle cx="24" cy="36" r="2.5" fill="#3b82f6" opacity="0.7"/>
      <circle cx="24" cy="72" r="2.5" fill="#3b82f6" opacity="0.7"/>
      <circle cx="55" cy="90" r="2.5" fill="#3b82f6" opacity="0.7"/>
      <circle cx="86" cy="72" r="2.5" fill="#3b82f6" opacity="0.7"/>
      <circle cx="55" cy="55" r="22" stroke="#8b5cf6" stroke-width="0.5" fill="none" opacity="0.2" stroke-dasharray="4 6"/>
    </svg>
  </div>
  <h1 class="hero-title">THE WORLD'S FIRST <span>.NET &amp; UNITY</span> CLIENT FOR HOLOCHAIN</h1>
  <p class="hero-sub">Connect any .NET application, Unity or Unreal game to the Holochain peer-to-peer network. Full Client, ORM, Manager, HDK and HyperNET — the complete development toolkit for building decentralised hApps in C#.</p>
  <div class="hero-badges">
    <div class="hero-badge">.NET 8.0</div>
    <div class="hero-badge">UNITY &amp; UNREAL</div>
    <div class="hero-badge">OPEN SOURCE</div>
    <div class="hero-badge violet">HOLOCHAIN-NATIVE</div>
    <div class="hero-badge violet">OASIS ECOSYSTEM</div>
  </div>
  <div class="hero-actions">
    <a href="https://github.com/holochain-open-dev/holochain-client-csharp" target="_blank" rel="noopener" class="btn-primary">VIEW ON GITHUB →</a>
    <a href="https://github.com/holochain-open-dev/holochain-client-csharp/releases/download/v3.0.5/HoloNET.Manager.v3.1.0.msi" class="btn-secondary" target="_blank" rel="noopener">DOWNLOAD MANAGER</a>
    <a href="https://www.nuget.org/profiles/dellams" target="_blank" rel="noopener" class="btn-violet">NUGET PACKAGES</a>
  </div>
</section>

<!-- ── PACKAGES ── -->
<section class="section" id="packages">
  <div class="section-kicker">THE HOLONET FAMILY</div>
  <h2 class="section-title">A COMPLETE .NET HOLOCHAIN TOOLKIT</h2>
  <span class="section-line"></span>
  <p class="section-sub">From lightweight connector to full development kit — HoloNET has grown into a suite of packages covering every stage of hApp development.</p>
  <div class="pkg-grid">

    <div class="pkg-card reveal">
      <div class="pkg-icon">
        <svg width="36" height="36" viewBox="0 0 54 54" fill="none">
          <polygon points="42.6,18 27,9 11.4,18 11.4,36 27,45 42.6,36" stroke="#3b82f6" stroke-width="1.3" fill="none"/>
          <circle cx="27" cy="27" r="3" fill="#3b82f6"/>
        </svg>
      </div>
      <div class="pkg-kicker">CORE · CLIENT</div>
      <div class="pkg-title">HoloNET Client</div>
      <div class="pkg-desc">The core C# WebSocket connector for the Holochain Conductor. Two editions — standalone (lightweight) and embedded (bundles hc.exe &amp; holochain.exe). Async/event hybrid model, full zome call support, signal handling and automatic data mapping.</div>
      <a href="https://www.nuget.org/packages/NextGenSoftware.Holochain.HoloNET.Client" target="_blank" rel="noopener" class="pkg-link">NUGET →</a>
    </div>

    <div class="pkg-card reveal">
      <div class="pkg-icon">
        <svg width="36" height="36" viewBox="0 0 54 54" fill="none">
          <rect x="10" y="14" width="34" height="26" rx="4" stroke="#3b82f6" stroke-width="1.2" fill="none"/>
          <line x1="10" y1="22" x2="44" y2="22" stroke="#3b82f6" stroke-width="0.7" opacity="0.4"/>
          <line x1="10" y1="30" x2="44" y2="30" stroke="#3b82f6" stroke-width="0.7" opacity="0.4"/>
          <circle cx="18" cy="18" r="2" fill="#3b82f6" opacity="0.6"/>
          <circle cx="27" cy="18" r="2" fill="#3b82f6" opacity="0.6"/>
        </svg>
      </div>
      <div class="pkg-kicker">DATA · ORM</div>
      <div class="pkg-title">HoloNET ORM</div>
      <div class="pkg-desc">Object Relational Mapping for Holochain. Extend <code style="font-size:16px;color:var(--cyan)">HoloNETEntryBaseClass</code> to get Load, Save and Delete mapped directly onto your Rust zome structs. Change tracking, version control and full rollback — with zero boilerplate.</div>
      <a href="https://www.nuget.org/packages/NextGenSoftware.Holochain.HoloNET.ORM" target="_blank" rel="noopener" class="pkg-link">NUGET →</a>
    </div>

    <div class="pkg-card reveal">
      <div class="pkg-icon">
        <svg width="36" height="36" viewBox="0 0 54 54" fill="none">
          <rect x="8" y="10" width="38" height="28" rx="4" stroke="#3b82f6" stroke-width="1.2" fill="none"/>
          <rect x="14" y="16" width="10" height="8" rx="2" stroke="#3b82f6" stroke-width="0.8" fill="none" opacity="0.5"/>
          <rect x="30" y="16" width="10" height="8" rx="2" stroke="#3b82f6" stroke-width="0.8" fill="none" opacity="0.5"/>
          <line x1="14" y1="30" x2="40" y2="30" stroke="#3b82f6" stroke-width="0.7" opacity="0.4"/>
          <line x1="22" y1="38" x2="32" y2="38" stroke="#3b82f6" stroke-width="1.2"/>
          <line x1="27" y1="38" x2="27" y2="44" stroke="#3b82f6" stroke-width="1.2"/>
        </svg>
      </div>
      <div class="pkg-kicker">UI · MANAGER</div>
      <div class="pkg-title">HoloNET Manager</div>
      <div class="pkg-desc">The official desktop UI for HoloNET — a feature-complete WPF application showcasing every Client and ORM capability. Generic backend and UI components for rapid hApp construction. Porting to MAUI, Uno &amp; OpenSilver for cross-platform native deployment.</div>
      <a href="https://www.nuget.org/packages/NextGenSoftware.Holochain.HoloNET.Manager" target="_blank" rel="noopener" class="pkg-link">NUGET →</a>
    </div>

    <div class="pkg-card reveal">
      <div class="pkg-icon">
        <svg width="36" height="36" viewBox="0 0 54 54" fill="none">
          <polygon points="27,6 46,17 46,37 27,48 8,37 8,17" stroke="#3b82f6" stroke-width="1.2" fill="none"/>
          <polygon points="27,15 38,21 38,33 27,39 16,33 16,21" stroke="#3b82f6" stroke-width="0.7" fill="none" opacity="0.4"/>
          <circle cx="27" cy="27" r="4" fill="none" stroke="#3b82f6" stroke-width="1"/>
          <circle cx="27" cy="27" r="1.5" fill="#3b82f6"/>
        </svg>
      </div>
      <div class="pkg-kicker">FULL KIT · HDK</div>
      <div class="pkg-title">HoloNET HDK</div>
      <div class="pkg-desc">The complete Holochain Development Kit: Client + ORM + Manager + WEB5 STAR ODK + HyperNET in one package. Includes the No/Low Code Generator — build hApps from simple metadata. STAR generates Rust and C# code targeting HoloNET automatically.</div>
      <a href="https://www.nuget.org/packages/NextGenSoftware.Holochain.HoloNET.HDK" target="_blank" rel="noopener" class="pkg-link">NUGET →</a>
    </div>

    <div class="pkg-card violet reveal">
      <div class="pkg-icon">
        <svg width="36" height="36" viewBox="0 0 54 54" fill="none">
          <circle cx="27" cy="27" r="20" stroke="#8b5cf6" stroke-width="1.2" fill="none" opacity="0.5"/>
          <polygon points="27,12 35,22 27,18 19,22" fill="#8b5cf6" opacity="0.7"/>
          <polygon points="27,42 35,32 27,36 19,32" fill="#8b5cf6" opacity="0.7"/>
          <polygon points="12,27 22,19 18,27 22,35" fill="#8b5cf6" opacity="0.7"/>
          <polygon points="42,27 32,19 36,27 32,35" fill="#8b5cf6" opacity="0.7"/>
          <circle cx="27" cy="27" r="3.5" fill="#8b5cf6"/>
        </svg>
      </div>
      <div class="pkg-kicker violet">P2P · GAMING</div>
      <div class="pkg-title">HoloNET HyperNET</div>
      <div class="pkg-desc">Lag-free peer-to-peer networking for Unity and Unreal games — built on HoloNET Client and ORM. Near-unlimited concurrent players with no cloud server required. Smashes the scaling limits of traditional server-based multiplayer entirely.</div>
      <a href="https://www.nuget.org/packages/NextGenSoftware.Holochain.HoloNET.HyperNET" target="_blank" rel="noopener" class="pkg-link violet">NUGET →</a>
    </div>

    <div class="pkg-card reveal">
      <div class="pkg-icon">
        <svg width="36" height="36" viewBox="0 0 54 54" fill="none">
          <rect x="8" y="8" width="16" height="16" rx="3" stroke="#3b82f6" stroke-width="1.1" fill="none" opacity="0.7"/>
          <rect x="30" y="8" width="16" height="16" rx="3" stroke="#3b82f6" stroke-width="1.1" fill="none" opacity="0.7"/>
          <rect x="8" y="30" width="16" height="16" rx="3" stroke="#3b82f6" stroke-width="1.1" fill="none" opacity="0.7"/>
          <rect x="30" y="30" width="16" height="16" rx="3" stroke="#3b82f6" stroke-width="1.1" fill="none" opacity="0.4"/>
          <text x="11" y="20" font-family="monospace" font-size="8" fill="#3b82f6" opacity="0.8">B</text>
          <text x="33" y="20" font-family="monospace" font-size="8" fill="#3b82f6" opacity="0.8">M</text>
          <text x="11" y="42" font-family="monospace" font-size="8" fill="#3b82f6" opacity="0.8">W</text>
          <text x="33" y="42" font-family="monospace" font-size="6" fill="#3b82f6" opacity="0.6">UNO</text>
        </svg>
      </div>
      <div class="pkg-kicker">TEMPLATES</div>
      <div class="pkg-title">Project Templates</div>
      <div class="pkg-desc">Ready-to-run project templates for every major .NET UI platform: Blazor, BlazorStandalone, MAUI, MAUIBlazor, OpenSilver, WinForms and Uno. Get a working Holochain-connected app running in minutes without boilerplate setup.</div>
      <a href="https://github.com/holochain-open-dev/holochain-client-csharp" target="_blank" rel="noopener" class="pkg-link">VIEW REPO →</a>
    </div>

  </div>
</section>

<!-- ── FEATURES ── -->
<section class="section" id="features" style="background:rgba(255,255,255,.005)">
  <div class="section-kicker">CAPABILITIES</div>
  <h2 class="section-title">WHAT HOLONET GIVES YOU</h2>
  <span class="section-line"></span>
  <div class="feat-grid">
    <div class="feat-card reveal">
      <div class="feat-icon">⚡</div>
      <div class="feat-kicker">ASYNC / EVENT</div>
      <div class="feat-title">Hybrid Async/Event Model</div>
      <div class="feat-desc">Use async/await or subscribe to events — HoloNET supports both patterns so you write the code you prefer. The new hybrid model gives you the best of both worlds.</div>
    </div>
    <div class="feat-card reveal">
      <div class="feat-icon">🔷</div>
      <div class="feat-kicker">PLATFORMS</div>
      <div class="feat-title">.NET 8.0 &amp; Unity/Unreal</div>
      <div class="feat-desc">Targets every modern platform — PC, Mac, Linux, iOS, Android, Xbox, PS4, Wii, VR/AR/XR, MagicLeap, SmartTV and web via Blazor. One client, everywhere .NET runs.</div>
    </div>
    <div class="feat-card reveal">
      <div class="feat-icon">🎛️</div>
      <div class="feat-kicker">CONDUCTOR API</div>
      <div class="feat-title">Full Admin API Coverage</div>
      <div class="feat-desc">Complete implementation of the Holochain Conductor Admin API — fully on par with the official JavaScript and Rust clients.</div>
    </div>
    <div class="feat-card reveal">
      <div class="feat-icon">💾</div>
      <div class="feat-kicker">ORM · CRUD</div>
      <div class="feat-title">Zero-Boilerplate CRUD</div>
      <div class="feat-desc">Extend <code style="color:var(--cyan);font-size:16px">HoloNETEntryBaseClass</code> and get Load, Save and Delete mapped directly onto your Rust zome structs — no manual Conductor wrangling.</div>
    </div>
    <div class="feat-card reveal">
      <div class="feat-icon">🕒</div>
      <div class="feat-kicker">AUDIT · HISTORY</div>
      <div class="feat-title">Change Tracking &amp; Versioning</div>
      <div class="feat-desc">HoloNETAuditEntryBaseClass adds a full audit trail — created/modified/deleted timestamps and agents, version history and one-call rollback to any previous state.</div>
    </div>
    <div class="feat-card reveal">
      <div class="feat-icon">🌐</div>
      <div class="feat-kicker">P2P · NETWORKING</div>
      <div class="feat-title">HyperNET Game Networking</div>
      <div class="feat-desc">Lag-free P2P multiplayer for Unity and Unreal — near-unlimited concurrent players with no cloud server required. Eliminates the scaling wall of traditional server hosting.</div>
    </div>
    <div class="feat-card reveal">
      <div class="feat-icon">🔗</div>
      <div class="feat-kicker">OASIS · BRIDGE</div>
      <div class="feat-title">HoloOASIS Integration</div>
      <div class="feat-desc">The HoloOASIS provider connects HoloNET to the OASIS HyperDrive layer — bridging Holochain to every Web2 database, Web3 chain and IPFS provider through a single API.</div>
    </div>
    <div class="feat-card reveal">
      <div class="feat-icon">🏗️</div>
      <div class="feat-kicker">CODEGEN · HDK</div>
      <div class="feat-title">No/Low Code Generation</div>
      <div class="feat-desc">WEB5 STAR ODK dynamically generates Rust and C# code targeting HoloNET Client and ORM from simple metadata — convert any existing .NET app to a Holochain hApp with minimal rewrites.</div>
    </div>
  </div>
</section>

<!-- ── 3 WAYS ── -->
<section class="section" id="approaches">
  <div class="section-kicker">USAGE PATTERNS</div>
  <h2 class="section-title">3 WAYS TO USE HOLONET</h2>
  <span class="section-line"></span>
  <p class="section-sub">Pick the level of abstraction that suits your project — from raw conductor calls to fully managed CRUD objects.</p>
  <div class="ways-grid">
    <div class="way-card reveal">
      <div class="way-num">01</div>
      <div class="way-title">DIRECT CONDUCTOR CALLS</div>
      <div class="way-desc">Use <code style="color:var(--cyan);font-size:16px">HoloNETClient</code> directly to make zome calls, receive signals and manage the Holochain Conductor lifecycle at full control with async/event patterns.</div>
    </div>
    <div class="way-card reveal">
      <div class="way-num">02</div>
      <div class="way-title">ENTRY BASE CLASS</div>
      <div class="way-desc">Extend <code style="color:var(--cyan);font-size:16px">HoloNETEntryBaseClass</code> — your class becomes a Holochain entry. Load, Save and Delete map automatically onto your Rust zome structs with zero boilerplate.</div>
    </div>
    <div class="way-card reveal">
      <div class="way-num">03</div>
      <div class="way-title">AUDIT ENTRY BASE CLASS</div>
      <div class="way-desc">Extend <code style="color:var(--cyan);font-size:16px">HoloNETAuditEntryBaseClass</code> for everything in option 2 plus full audit trail — who created, modified and deleted each entry, when, and full version rollback.</div>
    </div>
  </div>
</section>

<!-- ── STACK DIAGRAM ── -->
<section class="section" id="stack" style="background:rgba(255,255,255,.005);padding-top:0">
  <div class="section-kicker">ARCHITECTURE</div>
  <h2 class="section-title">THE HOLONET STACK</h2>
  <span class="section-line"></span>
  <p class="section-sub">Each approach adds an abstraction layer on top of the last. Choose the level that suits your project.</p>

  <style>
    .hn-diag-wrap{font-family:'Titillium Web',sans-serif;max-width:860px;margin:0 auto}
    .hn-diag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}
    .hn-diag-col{display:flex;flex-direction:column;gap:0;padding:0 10px}
    .hn-diag-col:not(:last-child){border-right:1px solid rgba(255,255,255,.05)}
    .hn-dcol-tag{font-size:9px;font-weight:700;letter-spacing:.2em;text-align:center;color:rgba(59,130,246,.5);text-transform:uppercase;padding:0 0 6px}
    .hn-dcol-head{font-size:10px;font-weight:700;letter-spacing:.14em;text-align:center;color:var(--cyan);text-transform:uppercase;padding:0 0 10px}
    .hn-dlayer{border-radius:6px;padding:9px 12px;text-align:center}
    .hn-dlayer-name{font-size:11.5px;font-weight:600;letter-spacing:.03em;line-height:1.3}
    .hn-dlayer-sub{font-size:9.5px;color:rgba(255,255,255,.45);margin-top:2px;line-height:1.3}
    .hn-dconn{display:flex;flex-direction:column;align-items:center;gap:0;padding:2px 0}
    .hn-dconn-line{width:1px;height:12px;background:rgba(255,255,255,.15)}
    .hn-dconn-arrow{font-size:9px;color:rgba(255,255,255,.25);line-height:1}
    .hn-dconn-lbl{font-family:'Share Tech Mono',monospace;font-size:8px;color:rgba(255,255,255,.28);letter-spacing:.07em;text-align:center;padding:0 4px}
    .hn-dlayer.l-app{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.28);color:#86efac}
    .hn-dlayer.l-user{background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.18);color:#86efac}
    .hn-dlayer.l-hn-hi{background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.38);color:#67e8f9}
    .hn-dlayer.l-hn{background:rgba(59,130,246,.07);border:1px solid rgba(59,130,246,.24);color:#67e8f9}
    .hn-dlayer.l-hc{background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.28);color:#c4b5fd}
    .hn-dlayer.l-hclo{background:rgba(139,92,246,.06);border:1px solid rgba(139,92,246,.18);color:#c4b5fd}
    .hn-dcol-note{margin-top:12px;padding:8px 10px;background:rgba(255,255,255,.03);border-radius:6px;font-size:9.5px;color:#a8bfd8;line-height:1.5;text-align:center;border:1px solid rgba(255,255,255,.06)}
    .hn-diag-key{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-bottom:24px;padding:12px 20px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:10px}
    .hn-dk-item{display:flex;align-items:center;gap:7px;font-size:11px;color:#a8bfd8}
    .hn-dk-dot{width:11px;height:11px;border-radius:3px;flex-shrink:0}
    .hn-dk-dot.dg{background:rgba(34,197,94,.2);border:1px solid rgba(34,197,94,.45)}
    .hn-dk-dot.dc{background:rgba(59,130,246,.18);border:1px solid rgba(59,130,246,.45)}
    .hn-dk-dot.dv{background:rgba(139,92,246,.2);border:1px solid rgba(139,92,246,.45)}
    .hn-diag-note{background:rgba(59,130,246,.04);border:1px solid rgba(59,130,246,.12);border-radius:8px;padding:11px 16px;font-size:11px;color:#a8bfd8;text-align:center;line-height:1.6}
    .hn-diag-note strong{color:#3b82f6}
  </style>

  <div class="hn-diag-wrap reveal">
    <div class="hn-diag-grid">

      <!-- Option 1: Direct -->
      <div class="hn-diag-col">
        <div class="hn-dcol-tag">Option 1</div>
        <div class="hn-dcol-head">Direct Client</div>
        <div class="hn-dlayer l-app"><div class="hn-dlayer-name">Your .NET / Unity App</div><div class="hn-dlayer-sub">Game · Website · Service</div></div>
        <div class="hn-dconn"><div class="hn-dconn-line"></div><div class="hn-dconn-arrow">↕</div><div class="hn-dconn-line"></div></div>
        <div class="hn-dlayer l-hn"><div class="hn-dlayer-name">HoloNETClient</div><div class="hn-dlayer-sub">WebSocket · MessagePack</div></div>
        <div class="hn-dconn"><div class="hn-dconn-line"></div><div class="hn-dconn-arrow">↕</div><div class="hn-dconn-line"></div></div>
        <div class="hn-dlayer l-hc"><div class="hn-dlayer-name">Holochain Conductor</div></div>
        <div class="hn-dconn"><div class="hn-dconn-line"></div><div class="hn-dconn-arrow">↓</div><div class="hn-dconn-line"></div></div>
        <div class="hn-dlayer l-hclo"><div class="hn-dlayer-name">Rust hApp</div></div>
        <div class="hn-dcol-note">Full control. Direct zome calls and signal handling.</div>
      </div>

      <!-- Option 2: Entry Base Class -->
      <div class="hn-diag-col">
        <div class="hn-dcol-tag">Option 2</div>
        <div class="hn-dcol-head">Entry Base Class</div>
        <div class="hn-dlayer l-app"><div class="hn-dlayer-name">Your .NET / Unity App</div><div class="hn-dlayer-sub">Game · Website · Service</div></div>
        <div class="hn-dconn"><div class="hn-dconn-line"></div><div class="hn-dconn-arrow">↕</div><div class="hn-dconn-line"></div></div>
        <div class="hn-dlayer l-user"><div class="hn-dlayer-name">Your HoloNET Entry Class</div><div class="hn-dlayer-sub">Extend &amp; customise</div></div>
        <div class="hn-dconn"><div class="hn-dconn-line"></div><div class="hn-dconn-arrow">↕</div><div class="hn-dconn-line"></div></div>
        <div class="hn-dlayer l-hn-hi"><div class="hn-dlayer-name">HoloNETEntryBaseClass</div><div class="hn-dlayer-sub">Load · Save · Delete</div></div>
        <div class="hn-dconn"><div class="hn-dconn-line"></div><div class="hn-dconn-arrow">↕</div><div class="hn-dconn-line"></div></div>
        <div class="hn-dlayer l-hn"><div class="hn-dlayer-name">HoloNETClient</div><div class="hn-dlayer-sub">WebSocket · MessagePack</div></div>
        <div class="hn-dconn"><div class="hn-dconn-line"></div><div class="hn-dconn-arrow">↕</div><div class="hn-dconn-line"></div></div>
        <div class="hn-dlayer l-hc"><div class="hn-dlayer-name">Holochain Conductor</div></div>
        <div class="hn-dconn"><div class="hn-dconn-line"></div><div class="hn-dconn-arrow">↓</div><div class="hn-dconn-line"></div></div>
        <div class="hn-dlayer l-hclo"><div class="hn-dlayer-name">Rust hApp</div></div>
        <div class="hn-dcol-note">Auto-maps Conductor data onto your class properties.</div>
      </div>

      <!-- Option 3: Audit -->
      <div class="hn-diag-col">
        <div class="hn-dcol-tag">Option 3</div>
        <div class="hn-dcol-head">Audit + Version Control</div>
        <div class="hn-dlayer l-app"><div class="hn-dlayer-name">Your .NET / Unity App</div><div class="hn-dlayer-sub">Game · Website · Service</div></div>
        <div class="hn-dconn"><div class="hn-dconn-line"></div><div class="hn-dconn-arrow">↕</div><div class="hn-dconn-line"></div></div>
        <div class="hn-dlayer l-user"><div class="hn-dlayer-name">Your HoloNET Entry Class</div><div class="hn-dlayer-sub">Extend &amp; customise</div></div>
        <div class="hn-dconn"><div class="hn-dconn-line"></div><div class="hn-dconn-arrow">↕</div><div class="hn-dconn-line"></div></div>
        <div class="hn-dlayer l-hn-hi" style="background:rgba(59,130,246,.16);border-color:rgba(59,130,246,.45)"><div class="hn-dlayer-name">HoloNETAuditEntryBaseClass</div><div class="hn-dlayer-sub">Audit · History · Versions</div></div>
        <div class="hn-dconn"><div class="hn-dconn-line"></div><div class="hn-dconn-arrow">↕</div><div class="hn-dconn-line"></div></div>
        <div class="hn-dlayer l-hn-hi"><div class="hn-dlayer-name">HoloNETEntryBaseClass</div><div class="hn-dlayer-sub">Load · Save · Delete</div></div>
        <div class="hn-dconn"><div class="hn-dconn-line"></div><div class="hn-dconn-arrow">↕</div><div class="hn-dconn-line"></div></div>
        <div class="hn-dlayer l-hn"><div class="hn-dlayer-name">HoloNETClient</div><div class="hn-dlayer-sub">WebSocket · MessagePack</div></div>
        <div class="hn-dconn"><div class="hn-dconn-line"></div><div class="hn-dconn-arrow">↕</div><div class="hn-dconn-line"></div></div>
        <div class="hn-dlayer l-hc"><div class="hn-dlayer-name">Holochain Conductor</div></div>
        <div class="hn-dconn"><div class="hn-dconn-line"></div><div class="hn-dconn-arrow">↓</div><div class="hn-dconn-line"></div></div>
        <div class="hn-dlayer l-hclo"><div class="hn-dlayer-name">Rust hApp</div></div>
        <div class="hn-dcol-note">Full audit trail and version history on every entry.</div>
      </div>

    </div>

    <div class="hn-diag-key">
      <div class="hn-dk-item"><div class="hn-dk-dot dg"></div>Your App / User-Defined Classes</div>
      <div class="hn-dk-item"><div class="hn-dk-dot dc"></div>HoloNET Layer</div>
      <div class="hn-dk-item"><div class="hn-dk-dot dv"></div>Holochain Layer</div>
    </div>
    <div class="hn-diag-note">All communication between HoloNETClient and the Holochain Conductor travels over <strong>WebSocket</strong>, encoded with <strong>MessagePack</strong>.</div>
  </div>
</section>

<!-- ── QUICK START ── -->
<section class="section" id="quickstart" style="background:rgba(255,255,255,.005)">
  <div class="section-kicker">GET STARTED</div>
  <h2 class="section-title">QUICK START</h2>
  <span class="section-line"></span>
  <p class="section-sub">Install via NuGet and connect to Holochain in three lines of C#.</p>
  <div class="code-wrap reveal">
    <div class="code-header">
      <div class="code-dot" style="background:#ff5f57"></div>
      <div class="code-dot" style="background:#febc2e"></div>
      <div class="code-dot" style="background:#28c840"></div>
      <span class="code-lang">C#</span>
    </div>
    <pre><span class="cm">// 1. Install: dotnet add package NextGenSoftware.Holochain.HoloNET.Client</span>

<span class="cm">// 2. Instantiate and subscribe to events</span>
<span class="cn">HoloNETClient</span> holoNETClient = <span class="kw">new</span> <span class="cn">HoloNETClient</span>(<span class="st">"ws://localhost:8888"</span>);

holoNETClient.<span class="fn">OnConnected</span>         += HoloNETClient_OnConnected;
holoNETClient.<span class="fn">OnReadyForZomeCalls</span>  += HoloNETClient_OnReadyForZomeCalls;
holoNETClient.<span class="fn">OnZomeFunctionCallBack</span> += HoloNETClient_OnZomeFunctionCallBack;
holoNETClient.<span class="fn">OnError</span>              += HoloNETClient_OnError;

<span class="cm">// 3. Connect and call a zome function</span>
<span class="kw">await</span> holoNETClient.<span class="fn">Connect</span>();
<span class="kw">await</span> holoNETClient.<span class="fn">CallZomeFunction</span>(<span class="st">"my_zome"</span>, <span class="st">"get_entry"</span>, <span class="kw">new</span> { id = entryHash });

<span class="cm">// Or use the ORM — extend HoloNETEntryBaseClass:</span>
<span class="kw">public class</span> <span class="cn">MyEntry</span> : <span class="cn">HoloNETEntryBaseClass</span> { <span class="kw">public string</span> Name { <span class="kw">get</span>; <span class="kw">set</span>; } }

<span class="cn">MyEntry</span> entry = <span class="kw">new</span> <span class="cn">MyEntry</span>() { Name = <span class="st">"Hello Holochain"</span> };
<span class="kw">await</span> entry.<span class="fn">Save</span>();   <span class="cm">// Mapped directly to your rust zome Create function</span>
<span class="kw">await</span> entry.<span class="fn">Load</span>();   <span class="cm">// Loads from Holochain and maps back to properties</span>
<span class="kw">await</span> entry.<span class="fn">Delete</span>(); <span class="cm">// Soft-delete with audit trail</span></pre>
  </div>
  <div class="doc-links" style="margin-top:36px">
    <a class="doc-link" href="https://github.com/holochain-open-dev/holochain-client-csharp" target="_blank">FULL DOCS ON GITHUB</a>
    <a class="doc-link" href="https://github.com/holochain-open-dev/holochain-client-csharp/releases/tag/v3.0.5" target="_blank">RELEASE NOTES v3.0.5</a>
    <a class="doc-link" href="https://github.com/holochain-open-dev/holochain-client-csharp/tree/main/NextGenSoftware.Holochain.HoloNET.Client.TestHarness" target="_blank">TEST HARNESS</a>
  </div>
</section>

<!-- ── HYPERNET ── -->
<section class="section" id="hypernet">
  <div class="section-kicker violet">HYPERNET</div>
  <h2 class="section-title">P2P GAMING — REIMAGINED</h2>
  <span class="section-line violet"></span>
  <div class="hypernet-band reveal">
    <div>
      <div class="hypernet-kicker">HOLONET HYPERNET</div>
      <div class="hypernet-title">LAG-FREE P2P NETWORKING FOR <span>UNITY &amp; UNREAL</span></div>
      <div class="hypernet-body">Built on top of HoloNET Client and ORM, HyperNET brings true peer-to-peer game networking to Unity and Unreal games — no cloud server, no scaling wall, no single point of failure. Players connect directly through the Holochain DHT network, meaning the more players join, the more resilient and performant the network becomes.</div>
      <a href="https://www.nuget.org/packages/NextGenSoftware.Holochain.HoloNET.HyperNET" target="_blank" rel="noopener" class="btn-violet">VIEW ON NUGET →</a>
    </div>
    <div class="hypernet-stats">
      <div class="hypernet-stat">
        <div class="hypernet-stat-num">∞</div>
        <div class="hypernet-stat-label">CONCURRENT PLAYERS</div>
      </div>
      <div class="hypernet-stat">
        <div class="hypernet-stat-num">0ms</div>
        <div class="hypernet-stat-label">SERVER LATENCY</div>
      </div>
      <div class="hypernet-stat">
        <div class="hypernet-stat-num">P2P</div>
        <div class="hypernet-stat-label">NO CLOUD REQUIRED</div>
      </div>
      <div class="hypernet-stat">
        <div class="hypernet-stat-num">DHT</div>
        <div class="hypernet-stat-label">HOLOCHAIN NETWORK</div>
      </div>
    </div>
  </div>
</section>

<!-- ── INFOGRAPHICS ── -->
<section class="section" style="background:rgba(255,255,255,.005)">
  <div class="section-kicker">FULL ARCHITECTURE</div>
  <h2 class="section-title">PACKAGE LAYER MAP</h2>
  <span class="section-line"></span>
  <p class="section-sub">How the full HoloNET package suite stacks — from your .NET, Unity or Unreal app, down through the Client, ORM, Manager, HDK and HyperNET, into the Holochain Conductor &amp; DHT, and out to the wider OASIS Omniverse via the HoloOASIS bridge.</p>
  <div class="arch-wrap reveal">
    <svg viewBox="0 0 900 470" xmlns="http://www.w3.org/2000/svg" style="width:100%;min-width:580px;display:block">
      <defs>
        <filter id="hs-glow" x="-5%" y="-10%" width="110%" height="120%">
          <feGaussianBlur stdDeviation="3" result="b"/>
          <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
        </filter>
      </defs>

      <!-- ═══ APP TIER ═══ -->
      <rect x="15" y="15" width="870" height="64" rx="6" fill="rgba(59,130,246,.06)" stroke="rgba(59,130,246,.3)" stroke-width="1"/>
      <text x="30" y="35" font-family="Share Tech Mono,monospace" font-size="8" fill="rgba(59,130,246,.6)" letter-spacing="1.5">YOUR APP</text>
      <text x="450" y="42" text-anchor="middle" font-family="Orbitron,sans-serif" font-size="14" fill="#3b82f6" font-weight="700">YOUR .NET · UNITY · UNREAL · BLAZOR APP</text>
      <text x="450" y="64" text-anchor="middle" font-family="Share Tech Mono,monospace" font-size="9.5" fill="#a8bfd8">C# — PC · Mac · Linux · iOS · Android · Console · VR / AR / XR · Web</text>

      <!-- connector -->
      <line x1="450" y1="79" x2="450" y2="120" stroke="rgba(59,130,246,.45)" stroke-width="1.2" stroke-dasharray="3,2"/>
      <polygon points="446,118 450,126 454,118" fill="rgba(59,130,246,.6)"/>
      <text x="468" y="103" font-family="Share Tech Mono,monospace" font-size="10" fill="rgba(59,130,246,.7)">C# API calls ▾</text>
      <circle r="3" fill="#3b82f6" opacity=".85"><animateMotion dur="1.6s" repeatCount="indefinite" path="M450,79 L450,118"/></circle>

      <!-- ═══ HOLONET TOOLKIT ═══ -->
      <rect x="15" y="128" width="870" height="110" rx="7" fill="rgba(59,130,246,.12)" stroke="#3b82f6" stroke-width="1.5" filter="url(#hs-glow)"/>
      <text x="30" y="146" font-family="Share Tech Mono,monospace" font-size="8" fill="rgba(59,130,246,.55)" letter-spacing="1.5">.NET HOLOCHAIN DEVELOPMENT TOOLKIT</text>
      <text x="450" y="166" text-anchor="middle" font-family="Orbitron,sans-serif" font-size="17" fill="#3b82f6" font-weight="700" letter-spacing="2">HOLONET</text>
      <text x="450" y="186" text-anchor="middle" font-family="Share Tech Mono,monospace" font-size="9.5" fill="#a8bfd8">The complete .NET &amp; Unity client + dev kit for Holochain — async/event, zero-boilerplate CRUD</text>
      <!-- 5 chips -->
      <g font-family="Share Tech Mono,monospace" font-size="10" text-anchor="middle">
        <rect x="43" y="202" width="150" height="24" rx="5" fill="rgba(59,130,246,.1)" stroke="rgba(59,130,246,.3)"/><text x="118" y="218" fill="#3b82f6">CLIENT</text>
        <rect x="209" y="202" width="150" height="24" rx="5" fill="rgba(59,130,246,.1)" stroke="rgba(59,130,246,.3)"/><text x="284" y="218" fill="#3b82f6">ORM</text>
        <rect x="375" y="202" width="150" height="24" rx="5" fill="rgba(59,130,246,.1)" stroke="rgba(59,130,246,.3)"/><text x="450" y="218" fill="#3b82f6">MANAGER</text>
        <rect x="541" y="202" width="150" height="24" rx="5" fill="rgba(59,130,246,.1)" stroke="rgba(59,130,246,.3)"/><text x="616" y="218" fill="#3b82f6">HDK</text>
        <rect x="707" y="202" width="150" height="24" rx="5" fill="rgba(139,92,246,.14)" stroke="rgba(139,92,246,.4)"/><text x="782" y="218" fill="#a78bfa">HYPERNET</text>
      </g>

      <!-- connectors to bottom -->
      <line x1="225" y1="238" x2="225" y2="278" stroke="rgba(59,130,246,.4)" stroke-width="1" stroke-dasharray="3,2"/>
      <line x1="675" y1="238" x2="675" y2="278" stroke="rgba(139,92,246,.4)" stroke-width="1" stroke-dasharray="3,2"/>
      <polygon points="221,275 225,283 229,275" fill="rgba(59,130,246,.5)"/>
      <polygon points="671,275 675,283 679,275" fill="rgba(139,92,246,.5)"/>
      <text x="450" y="262" text-anchor="middle" font-family="Share Tech Mono,monospace" font-size="10" fill="rgba(168,191,216,.7)">WebSocket · zome calls · provider bridge</text>
      <circle r="3" fill="#3b82f6" opacity=".85"><animateMotion dur="1.5s" repeatCount="indefinite" path="M225,238 L225,275"/></circle>
      <circle r="3" fill="#8b5cf6" opacity=".85"><animateMotion dur="1.5s" begin="0.7s" repeatCount="indefinite" path="M675,238 L675,275"/></circle>

      <!-- ═══ HOLOCHAIN ═══ -->
      <rect x="15" y="285" width="430" height="170" rx="7" fill="rgba(59,130,246,.06)" stroke="rgba(59,130,246,.4)" stroke-width="1.5"/>
      <text x="30" y="303" font-family="Share Tech Mono,monospace" font-size="8" fill="rgba(59,130,246,.5)" letter-spacing="1.5">P2P NETWORK</text>
      <text x="230" y="320" text-anchor="middle" font-family="Orbitron,sans-serif" font-size="13" fill="#3b82f6" font-weight="700">HOLOCHAIN CONDUCTOR</text>
      <text x="230" y="337" text-anchor="middle" font-family="Share Tech Mono,monospace" font-size="9" fill="rgba(59,130,246,.5)">hc.exe · holochain.exe · DHT</text>
      <text x="35" y="361" font-family="Rajdhani,sans-serif" font-size="12" fill="#a8bfd8">→  Agent-centric distributed hash table</text>
      <text x="35" y="381" font-family="Rajdhani,sans-serif" font-size="12" fill="#a8bfd8">→  P2P gossip, signals &amp; validation</text>
      <text x="35" y="401" font-family="Rajdhani,sans-serif" font-size="12" fill="#a8bfd8">→  Source-chain data integrity</text>
      <text x="35" y="421" font-family="Rajdhani,sans-serif" font-size="12" fill="#a8bfd8">→  No blockchain · no mining · no gas</text>
      <text x="35" y="441" font-family="Rajdhani,sans-serif" font-size="12" fill="#a8bfd8">→  More resilient as peers join</text>

      <!-- ═══ HOLOOASIS ═══ -->
      <rect x="455" y="285" width="430" height="170" rx="7" fill="rgba(139,92,246,.07)" stroke="rgba(139,92,246,.4)" stroke-width="1.5"/>
      <text x="470" y="303" font-family="Share Tech Mono,monospace" font-size="8" fill="rgba(167,139,250,.5)" letter-spacing="1.5">OASIS BRIDGE</text>
      <text x="670" y="320" text-anchor="middle" font-family="Orbitron,sans-serif" font-size="13" fill="#a78bfa" font-weight="700">HOLOOASIS PROVIDER</text>
      <text x="670" y="337" text-anchor="middle" font-family="Share Tech Mono,monospace" font-size="9" fill="rgba(167,139,250,.55)">OASIS HyperDrive · COSMIC ORM</text>
      <text x="475" y="361" font-family="Rajdhani,sans-serif" font-size="12" fill="#a8bfd8">→  Bridges Holochain to the WEB4 OASIS API</text>
      <text x="475" y="381" font-family="Rajdhani,sans-serif" font-size="12" fill="#a8bfd8">→  Ethereum · Solana · IPFS</text>
      <text x="475" y="401" font-family="Rajdhani,sans-serif" font-size="12" fill="#a8bfd8">→  MongoDB · Neo4j · 50+ providers</text>
      <text x="475" y="421" font-family="Rajdhani,sans-serif" font-size="12" fill="#a8bfd8">→  Auto-replication &amp; auto-failover</text>
      <text x="475" y="441" font-family="Rajdhani,sans-serif" font-size="12" fill="#a8bfd8">→  One unified COSMIC ORM API</text>
    </svg>
  </div>
  <!-- Equation band -->
  <div class="arch-eq reveal">
    <span class="arch-eq-pill cyan">CLIENT</span>
    <span class="arch-eq-op">+</span>
    <span class="arch-eq-pill cyan">ORM</span>
    <span class="arch-eq-op">+</span>
    <span class="arch-eq-pill cyan">MANAGER</span>
    <span class="arch-eq-op">+</span>
    <span class="arch-eq-pill cyan">HDK</span>
    <span class="arch-eq-op">+</span>
    <span class="arch-eq-pill violet">HYPERNET</span>
    <span class="arch-eq-op">=</span>
    <span class="arch-eq-result">HOLONET</span>
  </div>
</section>

<!-- ── OASIS INTEGRATION ── -->
<section class="section" id="oasis">
  <div class="section-kicker">OASIS ECOSYSTEM</div>
  <h2 class="section-title">HOLOOASIS — THE BRIDGE</h2>
  <span class="section-line"></span>
  <div class="oasis-band reveal">
    <div>
      <div style="font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.2em;color:var(--cyan);margin-bottom:12px">HOLOOASIS PROVIDER</div>
      <h3 style="font-family:'Orbitron',sans-serif;font-size:20px;font-weight:700;color:var(--heading);margin-bottom:16px;letter-spacing:.05em">HOLOCHAIN MEETS WEB4</h3>
      <p class="oasis-body">HoloNET is the official Holochain provider for the OASIS ecosystem. The HoloOASIS provider uses HoloNETClient to implement both Storage and Network providers for the OASIS platform — connecting Holochain to every Web2 database, Web3 blockchain, IPFS node and cloud service through the OASIS HyperDrive layer.</p>
      <p class="oasis-body">This means any data stored in a HoloNET hApp can be bridged, replicated or aggregated across Ethereum, Solana, EOS, MongoDB, SQLite, Neo4j, ThreeFold, IPFS and more — all through a single unified OASIS COSMIC ORM interface.</p>
      <div class="oasis-pill-row">
        <span class="oasis-pill">ETHEREUM</span>
        <span class="oasis-pill">SOLANA</span>
        <span class="oasis-pill">IPFS</span>
        <span class="oasis-pill">MONGODB</span>
        <span class="oasis-pill">NEO4J</span>
        <span class="oasis-pill">THREEFOLD</span>
        <span class="oasis-pill">50+ MORE</span>
      </div>
    </div>
    <div style="text-align:center">
      <div style="font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.2em;color:#a8bfd8;margin-bottom:20px">PART OF THE OMNIVERSE</div>
      <svg width="120" height="120" viewBox="0 0 120 120" fill="none" style="margin-bottom:24px">
        <polygon points="95,40 60,20 25,40 25,80 60,100 95,80" stroke="#3b82f6" stroke-width="1.2" fill="none" opacity="0.6"/>
        <polygon points="80,48 60,37 40,48 40,72 60,83 80,72" stroke="#8b5cf6" stroke-width="0.8" fill="none" opacity="0.5"/>
        <circle cx="60" cy="60" r="8" stroke="#3b82f6" stroke-width="1" fill="none"/>
        <circle cx="60" cy="60" r="3" fill="#3b82f6"/>
        <line x1="60" y1="52" x2="60" y2="20" stroke="#3b82f6" stroke-width="0.5" opacity="0.3"/>
        <line x1="60" y1="68" x2="60" y2="100" stroke="#3b82f6" stroke-width="0.5" opacity="0.3"/>
        <line x1="52" y1="56" x2="25" y2="40" stroke="#3b82f6" stroke-width="0.5" opacity="0.3"/>
        <line x1="68" y1="56" x2="95" y2="40" stroke="#3b82f6" stroke-width="0.5" opacity="0.3"/>
        <line x1="52" y1="64" x2="25" y2="80" stroke="#3b82f6" stroke-width="0.5" opacity="0.3"/>
        <line x1="68" y1="64" x2="95" y2="80" stroke="#3b82f6" stroke-width="0.5" opacity="0.3"/>
      </svg>
      <div style="font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;color:var(--cyan);letter-spacing:.1em;margin-bottom:8px">OASIS OMNIVERSE</div>
      <div style="font-family:'Share Tech Mono',monospace;font-size:10px;color:#a8bfd8;letter-spacing:.15em;margin-bottom:20px">oasisomniverse.one</div>
      <a href="https://oasisomniverse.one" class="btn-secondary" style="font-size:.72rem;padding:10px 22px" target="_blank" rel="noopener">EXPLORE OASIS →</a>
    </div>
  </div>
</section>

<!-- ── DOWNLOADS ── -->
<section class="section" id="downloads" style="background:rgba(255,255,255,.005)">
  <div class="section-kicker">NUGET &amp; DOWNLOADS</div>
  <h2 class="section-title">GET HOLONET</h2>
  <span class="section-line"></span>
  <p class="section-sub">All packages are available on NuGet — standalone and embedded editions available for Client, ORM, Manager, HDK and HyperNET.</p>
  <div class="nuget-grid">
    <div class="nuget-item reveal">
      <div class="nuget-item-name">NextGenSoftware.Holochain.HoloNET.Client<span>Lightweight connector — no binaries</span></div>
      <a href="https://www.nuget.org/packages/NextGenSoftware.Holochain.HoloNET.Client" target="_blank" rel="noopener">NUGET</a>
    </div>
    <div class="nuget-item reveal">
      <div class="nuget-item-name">NextGenSoftware.Holochain.HoloNET.Client.Embedded<span>Includes hc.exe &amp; holochain.exe</span></div>
      <a href="https://www.nuget.org/packages/NextGenSoftware.Holochain.HoloNET.Client.Embedded" target="_blank" rel="noopener">NUGET</a>
    </div>
    <div class="nuget-item reveal">
      <div class="nuget-item-name">NextGenSoftware.Holochain.HoloNET.ORM<span>CRUD base classes + change tracking</span></div>
      <a href="https://www.nuget.org/packages/NextGenSoftware.Holochain.HoloNET.ORM" target="_blank" rel="noopener">NUGET</a>
    </div>
    <div class="nuget-item reveal">
      <div class="nuget-item-name">NextGenSoftware.Holochain.HoloNET.ORM.Embedded<span>ORM with integrated Conductor binaries</span></div>
      <a href="https://www.nuget.org/packages/NextGenSoftware.Holochain.HoloNET.ORM.Embedded" target="_blank" rel="noopener">NUGET</a>
    </div>
    <div class="nuget-item reveal">
      <div class="nuget-item-name">NextGenSoftware.Holochain.HoloNET.Manager<span>Desktop UI — WPF app</span></div>
      <a href="https://www.nuget.org/packages/NextGenSoftware.Holochain.HoloNET.Manager" target="_blank" rel="noopener">NUGET</a>
    </div>
    <div class="nuget-item reveal">
      <div class="nuget-item-name">NextGenSoftware.Holochain.HoloNET.HDK<span>Full dev kit — all packages combined</span></div>
      <a href="https://www.nuget.org/packages/NextGenSoftware.Holochain.HoloNET.HDK" target="_blank" rel="noopener">NUGET</a>
    </div>
    <div class="nuget-item reveal">
      <div class="nuget-item-name">NextGenSoftware.Holochain.HoloNET.HyperNET<span>P2P game networking for Unity &amp; Unreal</span></div>
      <a href="https://www.nuget.org/packages/NextGenSoftware.Holochain.HoloNET.HyperNET" target="_blank" rel="noopener">NUGET</a>
    </div>
    <div class="nuget-item reveal">
      <div class="nuget-item-name">NextGenSoftware.OASIS.STAR<span>WEB5 No/Low Code Generator for hApps</span></div>
      <a href="https://www.nuget.org/packages/NextGenSoftware.OASIS.STAR" target="_blank" rel="noopener">NUGET</a>
    </div>
  </div>
  <div style="margin-top:40px;text-align:center">
    <p style="font-family:'Share Tech Mono',monospace;font-size:12px;color:#a8bfd8;letter-spacing:.12em;margin-bottom:20px">DOWNLOAD THE HOLONET MANAGER DESKTOP APP</p>
    <a href="https://github.com/holochain-open-dev/holochain-client-csharp/releases/download/v3.0.5/HoloNET.Manager.v3.1.0.msi" class="btn-primary" style="margin-right:14px" target="_blank" rel="noopener">DOWNLOAD MANAGER v3.1.0 (.msi)</a>
    <a href="https://github.com/holochain-open-dev/holochain-client-csharp/releases/tag/v3.0.5" target="_blank" rel="noopener" class="btn-secondary">RELEASE NOTES →</a>
  </div>
</section>

<!-- ── WHY IMPORTANT ── -->
<section class="section">
  <div class="section-kicker">COMMUNITY IMPACT</div>
  <h2 class="section-title">WHY THIS MATTERS</h2>
  <span class="section-line"></span>
  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;max-width:1100px;margin:0 auto">
    <div class="feat-card reveal">
      <div class="feat-icon">🌍</div>
      <div class="feat-title">OPENS HOLOCHAIN TO .NET</div>
      <div class="feat-desc">The .NET ecosystem has millions of developers building websites, apps, games and enterprise services. HoloNET is the gateway bringing them all into the Holochain world.</div>
    </div>
    <div class="feat-card reveal">
      <div class="feat-icon">🎮</div>
      <div class="feat-title">UNITY COMMUNITY</div>
      <div class="feat-desc">Unity is the world's most widely used game engine. HoloNET + HyperNET makes it trivial to build fully decentralised multiplayer games and experiences on Holochain.</div>
    </div>
    <div class="feat-card reveal">
      <div class="feat-icon">🏢</div>
      <div class="feat-title">ENTERPRISE BRIDGE</div>
      <div class="feat-desc">C# and .NET dominate enterprise software. HoloNET makes it possible to migrate existing business applications to Holochain with minimal code changes using the ORM.</div>
    </div>
    <div class="feat-card reveal">
      <div class="feat-icon">🔓</div>
      <div class="feat-title">FULLY OPEN SOURCE</div>
      <div class="feat-desc">HoloNET has been officially donated to the holochain-open-dev community. Free to use, fork and extend — with ongoing support and development from the OASIS team.</div>
    </div>
  </div>
</section>

<!-- ── ROADMAP ── -->
<section class="section" style="background:rgba(255,255,255,.005)">
  <div class="section-kicker">WHAT'S NEXT</div>
  <h2 class="section-title">ROADMAP</h2>
  <span class="section-line"></span>
  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;max-width:1000px;margin:0 auto">
    <div class="feat-card reveal">
      <div class="feat-kicker">IN PROGRESS</div>
      <div class="feat-title">MAUI + UNO + OPENSILVER</div>
      <div class="feat-desc">HoloNET Manager is being ported from WPF to MAUI, Uno and OpenSilver — enabling native cross-platform deployment to Windows, Mac, Linux, iOS, Android and web.</div>
    </div>
    <div class="feat-card reveal">
      <div class="feat-kicker">COMING SOON</div>
      <div class="feat-title">UPGRADE TO .NET 10</div>
      <div class="feat-desc">Migrate the entire HoloNET suite to .NET 10 — bringing AOT compilation, faster startup times, reduced memory footprint and the latest C# language features to every package.</div>
    </div>
    <div class="feat-card reveal">
      <div class="feat-kicker">COMING SOON</div>
      <div class="feat-title">UNITY ASSET STORE</div>
      <div class="feat-desc">A Unity Asset Store package making it even easier for Unity developers to add Holochain to their games without manually managing NuGet packages.</div>
    </div>
    <div class="feat-card reveal">
      <div class="feat-kicker">COMING SOON</div>
      <div class="feat-title">.NET HDK IMPROVEMENTS</div>
      <div class="feat-desc">Continued enhancements to the .NET HDK Low Code Generator — more zome scaffolding options, richer ORM mappings and tighter integration with the HoloNET ORM and Templates packages.</div>
    </div>
    <div class="feat-card reveal">
      <div class="feat-kicker">COMING SOON</div>
      <div class="feat-title">HOLOOASIS IMPROVEMENTS</div>
      <div class="feat-desc">Ongoing improvements to the HoloOASIS Storage and Network providers — deeper coverage of the 50+ OASIS-supported platforms and a smoother bridge between Holochain and the wider Web2/Web3 ecosystem.</div>
    </div>
    <div class="feat-card reveal" style="border-style:dashed;border-color:rgba(139,92,246,.25);background:rgba(139,92,246,.04)">
      <div class="feat-kicker violet">&amp; ALWAYS EVOLVING</div>
      <div class="feat-title" style="color:var(--heading-sub)">MUCH MORE TO COME...</div>
      <div class="feat-desc">New templates, richer tooling, deeper OASIS integration, community-driven features and plenty more surprises on the horizon. Got an idea? <a href="https://github.com/holochain-open-dev/holochain-client-csharp/issues" target="_blank" style="color:var(--violet)">Share it</a> — the best features start with you.</div>
    </div>
  </div>
</section>

<!-- ── COMMUNITY MESSAGE ── -->
<section class="section" id="community" style="background:rgba(139,92,246,.04)">
  <div style="max-width:820px;margin:0 auto;text-align:center">
    <div class="section-kicker violet">FROM THE DEVELOPER</div>
    <h2 class="section-title">A MESSAGE TO THE COMMUNITY</h2>
    <span class="section-line violet"></span>
    <div style="background:rgba(139,92,246,.07);border:1px solid rgba(139,92,246,.2);border-radius:18px;padding:44px 48px;position:relative;overflow:hidden">
      <div style="position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(139,92,246,.12),transparent 70%);pointer-events:none"></div>
      <div style="position:absolute;bottom:-40px;left:-40px;width:160px;height:160px;background:radial-gradient(circle,rgba(59,130,246,.06),transparent 70%);pointer-events:none"></div>
      <p style="font-size:17px;color:#a8bfd8;line-height:1.85;margin-bottom:22px;position:relative">
        You may have noticed there haven't been any new releases for around two years — and I wanted to be open about why.
        During that time I've been heads-down building the broader <strong style="color:var(--heading)">OASIS ecosystem</strong>:
        the <strong style="color:var(--cyan)">STAR CLI / ODK</strong>, the <strong style="color:var(--cyan)">WEB5 STAR API</strong>,
        <strong style="color:var(--cyan)">OGEngine</strong>, <strong style="color:var(--cyan)">ODOOM</strong> and
        <strong style="color:var(--cyan)">OQUAKE</strong> — a lot of foundational architecture that needed to land first.
      </p>
      <p style="font-size:17px;color:#a8bfd8;line-height:1.85;margin-bottom:22px;position:relative">
        Now we're looping back round. HoloNET is being updated to the <strong style="color:var(--heading)">latest version of Holochain</strong>,
        more templates are on the way, and HoloNET Manager is being ported to <strong style="color:var(--violet)">MAUI, Uno and OpenSilver</strong>
        so it runs natively on Windows, Mac, Linux, iOS, Android and the web.
        Expect a lot of activity again soon — new releases, improved documentation, tutorials and much more.
      </p>
      <p style="font-size:17px;color:#a8bfd8;line-height:1.85;margin-bottom:34px;position:relative">
        In the meantime, <strong style="color:var(--heading)">early feedback and feature requests are very warmly welcomed</strong> —
        every issue, idea and comment helps shape what gets built next.
        Thank you to the incredible Holochain community: your support, patience and passion mean everything. <strong style="color:var(--violet)">We love you all! ❤️</strong>
      </p>
      <div style="display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative">
        <a href="https://github.com/holochain-open-dev/holochain-client-csharp/issues" target="_blank" class="btn-violet">SUBMIT FEEDBACK / FEATURE REQUEST</a>
        <a href="https://github.com/holochain-open-dev/holochain-client-csharp/discussions" target="_blank" class="btn-secondary">JOIN THE DISCUSSION</a>
      </div>
    </div>
  </div>
</section>

<!-- ── FOOTER ── -->
<footer style="position:relative;z-index:2;padding:60px 40px 36px;border-top:1px solid rgba(255,255,255,.06)">
  <div style="max-width:1100px;margin:0 auto">
    <div style="margin-bottom:56px;text-align:center">
      <div style="display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px">
        <svg width="20" height="20" viewBox="0 0 54 54" fill="none">
          <polygon points="42.6,18 27,9 11.4,18 11.4,36 27,45 42.6,36" stroke="#3b82f6" stroke-width="1.4" fill="none"/>
          <circle cx="27" cy="27" r="3" fill="#3b82f6"/>
        </svg>
        <span style="font-family:'Orbitron',sans-serif;font-size:16px;font-weight:700;letter-spacing:.12em;color:var(--cyan)">HOLONET</span>
      </div>
      <div style="font-size:16px;color:#a8bfd8;line-height:1.7;margin-bottom:16px;max-width:600px;margin-left:auto;margin-right:auto">The world's first .NET &amp; Unity client for Holochain. Part of the OASIS Omniverse ecosystem.</div>
    </div>
    <div style="display:grid;grid-template-columns:repeat(6,1fr);gap:24px;margin-bottom:36px">
        <div>
          <div style="font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--heading-sub);margin-bottom:12px">ECOSYSTEM</div>
          <ul style="list-style:none;display:grid;gap:8px">
            <li><a href="https://oasisomniverse.one" target="_blank" style="font-size:15px;text-decoration:none">OASIS Omniverse</a></li>
            <li><a href="https://web4.oasisomniverse.one" target="_blank" style="font-size:15px;text-decoration:none">Web4</a></li>
            <li><a href="https://oportal.oasisomniverse.one" target="_blank" style="font-size:15px;text-decoration:none">OPORTAL</a></li>
            <li><a href="https://star.oasisomniverse.one" target="_blank" style="font-size:15px;text-decoration:none">STAR ODK</a></li>
            <li><a href="https://starnet.oasisomniverse.one" target="_blank" style="font-size:15px;text-decoration:none">STARNET</a></li>
            <li><a href="https://ogengine.oasisomniverse.one" target="_blank" style="font-size:15px;text-decoration:none">OGEngine</a></li>
            <li><a href="https://ourworld.oasisomniverse.one" target="_blank" style="font-size:15px;text-decoration:none">Our World</a></li>
            <li><a href="https://odoom.oasisomniverse.one" target="_blank" style="font-size:15px;text-decoration:none">ODOOM</a></li>
            <li><a href="https://oquake.oasisomniverse.one" target="_blank" style="font-size:15px;text-decoration:none">OQuake</a></li>
            <li><a href="https://web6.oasisomniverse.one" target="_blank" style="font-size:15px;text-decoration:none">WEB6</a></li>
            <li><a href="https://web7.oasisomniverse.one" target="_blank" style="font-size:15px;text-decoration:none">WEB7</a></li>
            <li><a href="https://web8.oasisomniverse.one" target="_blank" style="font-size:15px;text-decoration:none">WEB8</a></li>
            <li><a href="https://web9.oasisomniverse.one" target="_blank" style="font-size:15px;text-decoration:none">WEB9</a></li>
            <li><a href="https://web10.oasisomniverse.one" target="_blank" style="font-size:15px;text-decoration:none">WEB10</a></li>
            <li><a href="https://founders.oasisomniverse.one" target="_blank" style="font-size:15px;text-decoration:none">Founders NFT</a></li>
          </ul>
        </div>
        <div>
          <div style="font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--heading-sub);margin-bottom:12px">BUILD</div>
          <ul style="list-style:none;display:grid;gap:8px">
            <li><a href="https://api.web4.oasisomniverse.one/swagger" target="_blank" style="font-size:15px;text-decoration:none">Web4 OASIS API</a></li>
            <li><a href="https://api.starnet.oasisomniverse.one/swagger" target="_blank" style="font-size:15px;text-decoration:none">Web5 STARNET API</a></li>
            <li><a href="https://github.com/holochain-open-dev/holochain-client-csharp" target="_blank" style="font-size:15px;text-decoration:none">HoloNET GitHub</a></li>
            <li><a href="https://github.com/NextGenSoftwareUK/OASIS" target="_blank" style="font-size:15px;text-decoration:none">OASIS GitHub</a></li>
            <li><a href="https://oasis-web4.gitbook.io/oasis-web4-docs/" target="_blank" style="font-size:15px;text-decoration:none">GitBook Docs</a></li>
            <li><a href="https://github.com/NextGenSoftwareUK/OASIS/tree/master/Docs/Devs/API%20Documentation" target="_blank" style="font-size:15px;text-decoration:none">API Reference</a></li>
            <li><a href="https://github.com/NextGenSoftwareUK/OASIS/blob/master/Docs/Devs/DEVELOPER_DOCUMENTATION_INDEX.md" target="_blank" style="font-size:15px;text-decoration:none">Developer Index</a></li>
            <li><a href="https://github.com/NextGenSoftwareUK/OASIS/blob/master/Docs/Devs/OASIS_Quick_Start_Guide.md" target="_blank" style="font-size:15px;text-decoration:none">Quick Start Guide</a></li>
            <li><a href="https://github.com/NextGenSoftwareUK/OASIS/blob/master/Docs/Devs/OASIS_ARCHITECTURE_OVERVIEW.md" target="_blank" style="font-size:15px;text-decoration:none">Architecture Overview</a></li>
            <li><a href="https://github.com/NextGenSoftwareUK/OASIS/blob/master/Docs/Devs/DEVELOPMENT_ENVIRONMENT_SETUP.md" target="_blank" style="font-size:15px;text-decoration:none">Environment Setup</a></li>
            <li><a href="https://github.com/NextGenSoftwareUK/OASIS/blob/master/Docs/Devs/OASIS-BEST-PRACTICES.md" target="_blank" style="font-size:15px;text-decoration:none">Best Practices</a></li>
            <li><a href="https://github.com/NextGenSoftwareUK/OASIS/blob/master/Docs/Devs/DOCKER_DEPLOYMENT_GUIDE.md" target="_blank" style="font-size:15px;text-decoration:none">Docker Deployment Guide</a></li>
            <li><a href="https://github.com/NextGenSoftwareUK/OASIS/releases/tag/OASIS-Runtime-v4.5.1" target="_blank" style="font-size:15px;text-decoration:none">OASIS Runtime v4.5.1</a></li>
          </ul>
        </div>
        <div>
          <div style="font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--heading-sub);margin-bottom:12px">READ</div>
          <ul style="list-style:none;display:grid;gap:8px">
            <li><a href="https://oasisomniverse.one#flightmap" target="_blank" style="font-size:15px;text-decoration:none">Flight Map</a></li>
            <li><a href="https://github.com/NextGenSoftwareUK/OASIS/blob/master/Docs/THE_OASIS_COMPREHENSIVE_WHITEPAPER.md" target="_blank" style="font-size:15px;text-decoration:none">Whitepaper</a></li>
            <li><a href="https://github.com/NextGenSoftwareUK/OASIS/blob/master/Docs/OUR_WORLD_WHITEPAPER.md" target="_blank" style="font-size:15px;text-decoration:none">Our World Whitepaper</a></li>
            <li><a href="https://github.com/NextGenSoftwareUK/OASIS/blob/master/Docs/INVESTOR_EVALUATION_GUIDE.md" target="_blank" style="font-size:15px;text-decoration:none">Investor Guide</a></li>
            <li><a href="https://www.oasisweb4.com/holonic-architecture" target="_blank" style="font-size:15px;text-decoration:none">Holonic Architecture</a></li>
            <li><a href="https://github.com/NextGenSoftwareUK/OASIS/blob/master/Docs/Devs/WIKI_DOCUMENTATION_INDEX.md" target="_blank" style="font-size:15px;text-decoration:none">Wiki</a></li>
            <li><a href="https://www.ourworldthegame.com/blog" target="_blank" style="font-size:15px;text-decoration:none">Blog</a></li>
            <li><a href="https://github.com/NextGenSoftwareUK/OASIS/blob/master/Docs/OASIS_Lite_Paper.md" target="_blank" style="font-size:15px;text-decoration:none">OASIS Lite Paper</a></li>
            <li><a href="https://github.com/NextGenSoftwareUK/OASIS/blob/master/Docs/OASIS_HYPERDRIVE_WHITEPAPER.md" target="_blank" style="font-size:15px;text-decoration:none">HyperDrive Whitepaper</a></li>
            <li><a href="https://github.com/NextGenSoftwareUK/OASIS/blob/master/Docs/OASIS_COSMIC_ORM_WHITEPAPER.md" target="_blank" style="font-size:15px;text-decoration:none">Cosmic ORM Whitepaper</a></li>
            <li><a href="https://github.com/NextGenSoftwareUK/OASIS/blob/master/Docs/OASIS_NFT_SYSTEM_WHITEPAPER.md" target="_blank" style="font-size:15px;text-decoration:none">NFT System Whitepaper</a></li>
            <li><a href="https://github.com/NextGenSoftwareUK/OASIS/blob/master/Docs/OASIS_UNIVERSAL_WALLET_WHITEPAPER.md" target="_blank" style="font-size:15px;text-decoration:none">Universal Wallet Whitepaper</a></li>