File size: 56,632 Bytes
926a900
 
 
96d2b70
 
 
 
 
 
 
 
 
e12e4e0
 
 
96d2b70
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e12e4e0
 
 
96d2b70
 
e12e4e0
 
 
 
 
 
 
 
 
 
 
96d2b70
 
 
 
e12e4e0
 
 
 
 
96d2b70
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
926a900
 
96d2b70
 
 
e12e4e0
 
 
96d2b70
 
 
 
 
 
 
 
 
926a900
96d2b70
 
 
926a900
96d2b70
926a900
96d2b70
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
926a900
96d2b70
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
926a900
96d2b70
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
926a900
96d2b70
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
926a900
96d2b70
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
926a900
96d2b70
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
926a900
96d2b70
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
926a900
 
 
 
96d2b70
 
 
 
 
 
 
 
 
 
926a900
96d2b70
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
926a900
96d2b70
 
 
 
 
 
 
 
 
 
 
 
 
 
 
926a900
 
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
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>지니젠AI · GiniGen AI — 한국 AI 전환의 모든 순간</title>
    <meta name="description" content="AX 종합병원 · 인공사회 · 허그와트 바나나. 진단·시뮬레이션·생성의 한국 통합 AI 플랫폼. K-AI 리더보드 2위·5위, NIPA Blackwell 16대.">
    <meta name="keywords" content="지니젠AI, GiniGen, AX 종합병원, 인공사회, NationalOS, 허그와트 바나나, AI 전환, AX, 한국 AI, K-AI 리더보드, Darwin, AETHER">
    <meta property="og:title" content="지니젠AI — 한국 AI 전환의 모든 순간을 한국어로">
    <meta property="og:description" content="진단(AX 종합병원) · 시뮬레이션(인공사회) · 생성(허그와트 바나나)의 3대 통합 플랫폼">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://ginigen.net">
    <meta property="og:image" content="https://huggingface.co/spaces/ginigen/AI/resolve/main/logo-stacked.png">
    <link rel="icon" type="image/png" href="logo-stacked.png">
    <link rel="apple-touch-icon" href="logo-stacked.png">
    <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css" rel="stylesheet">
    <style>
        :root {
            --bg-deep: #0B1437;
            --bg-mid: #14215C;
            --bg-light: #1E3A8A;
            --accent-blue: #3B82F6;
            --accent-cyan: #00D9FF;
            --accent-gold: #F59E0B;
            --text-primary: #F8FAFC;
            --text-secondary: rgba(226, 232, 240, 0.78);
            --text-muted: rgba(226, 232, 240, 0.55);
            --surface: rgba(255, 255, 255, 0.06);
            --surface-hover: rgba(255, 255, 255, 0.10);
            --border: rgba(255, 255, 255, 0.10);
            --border-bright: rgba(0, 217, 255, 0.40);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
            background: var(--bg-deep);
            background-image:
                radial-gradient(ellipse 80% 50% at 20% 0%, rgba(59, 130, 246, 0.18) 0%, transparent 50%),
                radial-gradient(ellipse 70% 60% at 80% 30%, rgba(0, 217, 255, 0.12) 0%, transparent 50%),
                radial-gradient(ellipse 60% 50% at 50% 100%, rgba(30, 58, 138, 0.30) 0%, transparent 60%);
            color: var(--text-primary);
            min-height: 100vh;
            overflow-x: hidden;
            line-height: 1.6;
        }

        /* ============ NAVIGATION ============ */
        .nav-container {
            position: fixed;
            top: 0; left: 0; right: 0;
            background: rgba(11, 20, 55, 0.72);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--border);
            z-index: 1000;
            padding: 16px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .nav-left { display: flex; align-items: center; gap: 36px; }
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            text-decoration: none;
            height: 32px;
        }
        .logo-img {
            height: 26px;
            width: auto;
            display: block;
            filter: drop-shadow(0 0 14px rgba(167, 139, 250, 0.32));
            transition: filter 0.25s ease;
        }
        .logo:hover .logo-img {
            filter: drop-shadow(0 0 18px rgba(167, 139, 250, 0.55));
        }
        .logo-sub {
            font-size: 11px;
            color: var(--text-muted);
            font-weight: 600;
            letter-spacing: 1.2px;
            padding: 3px 7px;
            border: 1px solid var(--border);
            border-radius: 6px;
        }
        .tabs { display: flex; gap: 6px; }
        .tab {
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 14.5px;
            font-weight: 600;
            padding: 8px 16px;
            border-radius: 8px;
            transition: all 0.25s ease;
            cursor: pointer;
            border: none;
            background: transparent;
        }
        .tab:hover { background: var(--surface-hover); color: var(--text-primary); }
        .tab.active {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.20) 0%, rgba(0, 217, 255, 0.15) 100%);
            color: var(--accent-cyan);
            border: 1px solid var(--border-bright);
        }
        .powered-by {
            color: var(--text-muted);
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .powered-by .dot {
            width: 6px; height: 6px; border-radius: 50%;
            background: #10B981;
            box-shadow: 0 0 8px #10B981;
            animation: pulse 2s infinite;
        }
        @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

        /* ============ PARTICLES (Network Nodes) ============ */
        .particles {
            position: fixed;
            inset: 0;
            overflow: hidden;
            z-index: 1;
            pointer-events: none;
        }
        .particle {
            position: absolute;
            width: 3px; height: 3px;
            background: var(--accent-cyan);
            border-radius: 50%;
            box-shadow: 0 0 12px var(--accent-cyan);
            opacity: 0.4;
            animation: drift 25s infinite ease-in-out;
        }
        @keyframes drift {
            0%, 100% { transform: translateY(0) translateX(0); opacity: 0.2; }
            50% { transform: translateY(-60vh) translateX(40px); opacity: 0.6; }
        }

        /* ============ MAIN ============ */
        .container {
            position: relative;
            z-index: 10;
            max-width: 1240px;
            margin: 0 auto;
            padding: 110px 24px 80px;
        }

        .tab-content { display: none; animation: fadeIn 0.5s ease; }
        .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

        /* ============ HERO ============ */
        .hero {
            text-align: center;
            padding: 60px 0 40px;
        }
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: rgba(245, 158, 11, 0.12);
            border: 1px solid rgba(245, 158, 11, 0.35);
            border-radius: 999px;
            font-size: 12.5px;
            font-weight: 600;
            color: var(--accent-gold);
            margin-bottom: 24px;
            letter-spacing: 0.3px;
        }
        .hero h1 {
            font-size: clamp(36px, 6vw, 64px);
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -1.5px;
            margin-bottom: 20px;
        }
        .hero h1 .accent {
            background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 50%, #A78BFA 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .hero p {
            font-size: clamp(15px, 2vw, 19px);
            color: var(--text-secondary);
            max-width: 720px;
            margin: 0 auto 36px;
            line-height: 1.7;
        }
        .hero-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            max-width: 760px;
            margin: 0 auto;
        }
        .hero-stat {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 20px 16px;
            backdrop-filter: blur(8px);
        }
        .hero-stat .num {
            font-size: 28px;
            font-weight: 800;
            color: var(--accent-cyan);
            letter-spacing: -0.5px;
        }
        .hero-stat .label {
            font-size: 13px;
            color: var(--text-secondary);
            margin-top: 4px;
        }

        /* ============ SECTION TITLE ============ */
        .section {
            margin-top: 80px;
        }
        .section-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--accent-cyan);
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 12px;
        }
        .section-heading {
            font-size: clamp(28px, 4vw, 42px);
            font-weight: 800;
            line-height: 1.2;
            letter-spacing: -1px;
            margin-bottom: 16px;
        }
        .section-sub {
            font-size: 16.5px;
            color: var(--text-secondary);
            max-width: 720px;
            margin-bottom: 40px;
        }

        /* ============ 3 PILLARS ============ */
        .pillars {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
        .pillar {
            position: relative;
            background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 32px 26px;
            transition: all 0.3s ease;
            overflow: hidden;
            cursor: pointer;
        }
        .pillar::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: var(--gradient);
            opacity: 0.8;
        }
        .pillar:hover {
            transform: translateY(-6px);
            border-color: var(--border-bright);
            box-shadow: 0 20px 50px rgba(0, 217, 255, 0.15);
        }
        .pillar[data-color="cyan"] { --gradient: linear-gradient(90deg, #00D9FF, #3B82F6); }
        .pillar[data-color="blue"] { --gradient: linear-gradient(90deg, #3B82F6, #A78BFA); }
        .pillar[data-color="gold"] { --gradient: linear-gradient(90deg, #F59E0B, #FBBF24); }

        .pillar-icon {
            width: 52px; height: 52px;
            border-radius: 14px;
            background: var(--gradient);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            margin-bottom: 18px;
            box-shadow: 0 8px 20px rgba(0, 217, 255, 0.18);
        }
        .pillar-tag {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            color: var(--accent-cyan);
            letter-spacing: 1.5px;
            margin-bottom: 8px;
        }
        .pillar h3 {
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 10px;
            letter-spacing: -0.5px;
        }
        .pillar .tagline {
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.65;
            margin-bottom: 18px;
        }
        .pillar ul {
            list-style: none;
            padding: 0;
            border-top: 1px solid var(--border);
            padding-top: 16px;
        }
        .pillar ul li {
            font-size: 13.5px;
            color: var(--text-muted);
            padding: 5px 0;
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }
        .pillar ul li::before {
            content: '◆';
            color: var(--accent-cyan);
            font-size: 8px;
            margin-top: 6px;
            flex-shrink: 0;
        }
        .pillar-cta {
            display: inline-block;
            margin-top: 18px;
            font-size: 13px;
            font-weight: 700;
            color: var(--accent-cyan);
            text-decoration: none;
            transition: gap 0.2s;
        }
        .pillar-cta:hover { gap: 12px; }
        .pillar-cta::after { content: ' →'; }

        /* ============ TRUST BAR ============ */
        .trust-bar {
            margin-top: 70px;
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(0, 217, 255, 0.05) 100%);
            border: 1px solid rgba(245, 158, 11, 0.25);
            border-radius: 20px;
            padding: 32px 28px;
        }
        .trust-bar-head {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 22px;
            flex-wrap: wrap;
        }
        .trust-bar-head .gold-badge {
            background: linear-gradient(135deg, #F59E0B, #FBBF24);
            color: #1F2937;
            font-size: 11px;
            font-weight: 800;
            padding: 5px 12px;
            border-radius: 6px;
            letter-spacing: 1px;
        }
        .trust-bar-head h3 {
            font-size: 20px;
            font-weight: 800;
            letter-spacing: -0.5px;
        }
        .trust-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
        }
        .trust-item {
            text-align: left;
        }
        .trust-item .val {
            font-size: 22px;
            font-weight: 800;
            color: var(--accent-gold);
            letter-spacing: -0.5px;
        }
        .trust-item .lbl {
            font-size: 12.5px;
            color: var(--text-secondary);
            margin-top: 4px;
            line-height: 1.4;
        }

        /* ============ TRENDS ============ */
        .trends-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
        }
        .trend-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 22px 20px;
        }
        .trend-card .yr {
            font-size: 11px;
            font-weight: 700;
            color: var(--accent-cyan);
            letter-spacing: 1px;
            margin-bottom: 8px;
        }
        .trend-card h4 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 8px;
            line-height: 1.3;
        }
        .trend-card p {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.55;
        }
        .trend-card .stat {
            margin-top: 10px;
            font-size: 13px;
            color: var(--accent-gold);
            font-weight: 700;
        }

        /* ============ DETAIL PAGES (AX / Society / Banana) ============ */
        .detail-hero {
            text-align: left;
            padding: 40px 0;
        }
        .detail-hero h2 {
            font-size: clamp(32px, 5vw, 52px);
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -1.2px;
            margin-bottom: 18px;
        }
        .detail-hero .accent { color: var(--accent-cyan); }
        .detail-hero .lead {
            font-size: 18px;
            color: var(--text-secondary);
            max-width: 760px;
            line-height: 1.65;
        }

        .feat-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-top: 30px;
        }
        .feat {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 24px 22px;
            transition: all 0.25s;
        }
        .feat:hover { border-color: var(--border-bright); background: var(--surface-hover); }
        .feat .ico {
            font-size: 24px;
            margin-bottom: 12px;
        }
        .feat h4 {
            font-size: 17px;
            font-weight: 700;
            margin-bottom: 8px;
        }
        .feat p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }

        /* ============ PRICING TABLE ============ */
        .pricing {
            margin-top: 40px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 28px 24px;
        }
        .pricing-row {
            display: grid;
            grid-template-columns: 1.4fr 0.8fr 2fr 1fr;
            gap: 16px;
            padding: 16px 0;
            border-bottom: 1px solid var(--border);
            align-items: center;
        }
        .pricing-row:last-child { border-bottom: none; }
        .pricing-row.head {
            font-size: 11.5px;
            font-weight: 700;
            color: var(--accent-cyan);
            letter-spacing: 1.2px;
            padding-bottom: 12px;
            text-transform: uppercase;
        }
        .pricing-row .tier { font-weight: 700; }
        .pricing-row .price { font-weight: 800; color: var(--accent-gold); font-size: 17px; }
        .pricing-row .desc { font-size: 13.5px; color: var(--text-secondary); }
        .pricing-row .target { font-size: 13px; color: var(--text-muted); }

        /* ============ INFOGRAPHIC for NationalOS ============ */
        .society-graph {
            margin-top: 30px;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.10) 0%, rgba(0, 217, 255, 0.05) 100%);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 36px 28px;
            text-align: center;
        }
        .society-graph .big {
            font-size: clamp(48px, 8vw, 80px);
            font-weight: 900;
            background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -2px;
            line-height: 1;
        }
        .society-graph .big-lbl {
            font-size: 14px;
            color: var(--text-secondary);
            margin-top: 4px;
        }
        .society-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-top: 28px;
        }
        .society-stat {
            background: rgba(255,255,255,0.05);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 18px 12px;
        }
        .society-stat .v { font-size: 22px; font-weight: 800; color: var(--accent-cyan); }
        .society-stat .l { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

        /* ============ IFRAME EMBED ============ */
        .embed-container {
            margin-top: 36px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 16px;
            min-height: 540px;
        }
        .embed-container iframe {
            width: 100%;
            height: 600px;
            border: none;
            border-radius: 12px;
            background: white;
        }
        .embed-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 360px;
            color: var(--text-muted);
            text-align: center;
            padding: 30px;
        }
        .embed-placeholder .pico { font-size: 38px; margin-bottom: 14px; }
        .embed-placeholder h4 { font-size: 18px; color: var(--text-primary); margin-bottom: 8px; }
        .embed-placeholder a {
            display: inline-block;
            margin-top: 18px;
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
            color: white;
            text-decoration: none;
            padding: 12px 24px;
            border-radius: 999px;
            font-weight: 700;
            font-size: 14px;
            transition: transform 0.2s;
        }
        .embed-placeholder a:hover { transform: translateY(-2px); }

        /* ============ CONTACT ============ */
        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 30px;
        }
        .contact-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 28px;
        }
        .contact-card h4 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 12px;
        }
        .contact-card p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.65; }
        .contact-card .ml {
            display: inline-block;
            margin-top: 14px;
            color: var(--accent-cyan);
            text-decoration: none;
            font-weight: 700;
            font-size: 14px;
        }

        /* ============ FOOTER ============ */
        .footer {
            margin-top: 80px;
            padding: 28px 24px;
            border-top: 1px solid var(--border);
            text-align: center;
            color: var(--text-muted);
            font-size: 12.5px;
            line-height: 1.7;
        }
        .footer strong { color: var(--text-secondary); }
        .footer-links { margin-top: 10px; }
        .footer-links a { color: var(--text-muted); text-decoration: none; margin: 0 8px; }
        .footer-links a:hover { color: var(--accent-cyan); }

        /* ============ RESPONSIVE ============ */
        @media (max-width: 900px) {
            .pillars, .trust-grid, .trends-grid, .feat-grid, .society-stats, .contact-grid {
                grid-template-columns: 1fr;
            }
            .hero-stats { grid-template-columns: repeat(3, 1fr); }
            .nav-container { padding: 12px 16px; flex-direction: column; gap: 10px; }
            .nav-left { flex-direction: column; gap: 10px; width: 100%; }
            .tabs { flex-wrap: wrap; justify-content: center; }
            .container { padding-top: 180px; }
            .pricing-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
            .pricing-row.head { display: none; }
            .pricing-row .price { font-size: 20px; }
        }
        @media (max-width: 480px) {
            .hero-stats { grid-template-columns: 1fr; }
            .society-stats { grid-template-columns: repeat(2, 1fr); }
            .tab { font-size: 13px; padding: 6px 10px; }
        }
    </style>
</head>
<body>
    <!-- NAVIGATION -->
    <nav class="nav-container">
        <div class="nav-left">
            <a href="#home" class="logo" onclick="switchTab('home'); return false;" aria-label="GiniGen AI 홈">
                <img src="logo.png" alt="GiniGen" class="logo-img">
                <span class="logo-sub">AI</span>
            </a>
            <div class="tabs">
                <button class="tab active" data-tab="home"></button>
                <button class="tab" data-tab="ax">AX 종합병원</button>
                <button class="tab" data-tab="society">인공사회</button>
                <button class="tab" data-tab="banana">허그와트 바나나</button>
                <button class="tab" data-tab="trust">실적·검증</button>
                <button class="tab" data-tab="contact">회사·문의</button>
            </div>
        </div>
        <div class="powered-by">
            <span class="dot"></span>
            K-AI 리더보드 2위 · NIPA Blackwell 16대
        </div>
    </nav>

    <!-- PARTICLES -->
    <div class="particles" id="particles"></div>

    <div class="container">

        <!-- ============ HOME ============ -->
        <div id="home" class="tab-content active">
            <section class="hero">
                <div class="hero-badge">⚡ 2026.04 — 과기정통부·NIA + NIPA 동시 공인</div>
                <h1>AI 전환의 모든 순간을,<br><span class="accent">한국어로.</span></h1>
                <p>
                    진단(<strong>AX 종합병원</strong>) · 시뮬레이션(<strong>인공사회</strong>) · 생성(<strong>허그와트 바나나</strong>).<br>
                    한국 기업·정부·시민의 AI 전환을 떠받치는 세 개의 기둥.
                </p>
                <div class="hero-stats">
                    <div class="hero-stat">
                        <div class="num">2위·5위</div>
                        <div class="label">K-AI 리더보드 동시 점유 (단일사 유일)</div>
                    </div>
                    <div class="hero-stat">
                        <div class="num">16대</div>
                        <div class="label">NIPA NVIDIA Blackwell GPU</div>
                    </div>
                    <div class="hero-stat">
                        <div class="num">100만+</div>
                        <div class="label">HuggingFace 월간 활성 사용자</div>
                    </div>
                </div>
            </section>

            <!-- 3 PILLARS -->
            <section class="section">
                <div class="section-title">3 PILLARS</div>
                <h2 class="section-heading">한 회사, 세 개의 시간축.</h2>
                <p class="section-sub">
                    AI를 도입하기 전(시뮬레이션) · 도입한 후(진단·치료) · 그리고 결과물을 만드는 순간(생성). 지니젠은 그 모든 순간을 한 플랫폼에서 끝냅니다.
                </p>
                <div class="pillars">

                    <div class="pillar" data-color="cyan" onclick="switchTab('ax')">
                        <div class="pillar-icon">🩺</div>
                        <div class="pillar-tag">FOR ENTERPRISE · B2B</div>
                        <h3>AX 종합병원</h3>
                        <div class="tagline">왜 틀리는지, 어떻게 고치는지 — 6개 진료과 통합 진단 SaaS.</div>
                        <ul>
                            <li>모델 X-Ray: Activation Patching · Causal Tracing · Logit Lens</li>
                            <li>외주 5,000만 → AX 100만 (1/50 비용)</li>
                            <li>3개월 → 30분 (1/4,320 시간)</li>
                            <li>미토스 대응 · AI 기본법 자동 인증</li>
                        </ul>
                        <span class="pillar-cta">상세 보기</span>
                    </div>

                    <div class="pillar" data-color="blue" onclick="switchTab('society')">
                        <div class="pillar-icon">🌐</div>
                        <div class="pillar-tag">FOR GOVERNMENT · B2G</div>
                        <h3>인공사회 (NationalOS)</h3>
                        <div class="tagline">576,000명의 디지털 시민이 당신의 정책을 먼저 살아봅니다.</div>
                        <ul>
                            <li>사주 계층화 5,200만 한국 페르소나</li>
                            <li>576K LIVE NPC 실시간 운용 인프라</li>
                            <li>조직 디지털 트윈 + 정책 ROI 사전 검증</li>
                            <li>6개월치 시뮬레이션 → 3시간</li>
                        </ul>
                        <span class="pillar-cta">상세 보기</span>
                    </div>

                    <div class="pillar" data-color="gold" onclick="switchTab('banana')">
                        <div class="pillar-icon">🍌</div>
                        <div class="pillar-tag">FOR CREATORS · B2B+B2C</div>
                        <h3>허그와트 바나나</h3>
                        <div class="tagline">한국어가 깨지지 않는 단 하나의 AI 콘텐츠 플랫폼.</div>
                        <ul>
                            <li>영상 · 이미지 · 카드뉴스 · 웹툰 · 음악 통합</li>
                            <li>한글 100% 보존 텍스트 렌더링</li>
                            <li>기업 홍보 영상부터 1인 크리에이터까지</li>
                            <li>ginigen.ai 운영 · 글로벌 다국어 지원</li>
                        </ul>
                        <span class="pillar-cta">상세 보기</span>
                    </div>

                </div>
            </section>

            <!-- TRUST BAR -->
            <section class="trust-bar">
                <div class="trust-bar-head">
                    <span class="gold-badge">정부 공인</span>
                    <h3>우리가 주장하는 것이 아니라, 정부가 수치로 확인했습니다.</h3>
                </div>
                <div class="trust-grid">
                    <div class="trust-item">
                        <div class="val">0.011</div>
                        <div class="lbl">K-AI 리더보드 1위와의 점수 차 (Rogue-28B-MIX 2위)</div>
                    </div>
                    <div class="trust-item">
                        <div class="val">2개</div>
                        <div class="lbl">정부 기관 동시 검증 (과기정통부·NIA + NIPA / 2026.04)</div>
                    </div>
                    <div class="trust-item">
                        <div class="val">300+</div>
                        <div class="lbl">HuggingFace 운영 모델·스페이스</div>
                    </div>
                    <div class="trust-item">
                        <div class="val">5,000명+</div>
                        <div class="lbl">한국 AI 디스코드 커뮤니티</div>
                    </div>
                </div>
            </section>

            <!-- AI TRENDS -->
            <section class="section">
                <div class="section-title">MARKET CONTEXT · 2026</div>
                <h2 class="section-heading">시장이 가는 방향, 지니젠이 서 있는 자리.</h2>
                <p class="section-sub">
                    Gartner · McKinsey · IDC가 공통으로 가리키는 2026 시그널. 우리가 그 시그널에 정확히 매핑됩니다.
                </p>
                <div class="trends-grid">
                    <div class="trend-card">
                        <div class="yr">AGENTIC AI</div>
                        <h4>Agentic AI 시장 폭발</h4>
                        <p>2025 $7.6B → 2026 $10.8B. 기업앱 40%가 AI 에이전트 탑재 (Gartner).</p>
                        <div class="stat">→ AX 종합병원이 에이전트 사전 검증</div>
                    </div>
                    <div class="trend-card">
                        <div class="yr">VERTICAL LLM</div>
                        <h4>한국어 특화 모델 수요</h4>
                        <p>SLM 시장 CAGR 28.7%. 도메인 특화 + 한국어 정확성이 차별 지점.</p>
                        <div class="stat">→ Rogue·Darwin·AETHER 라인업 보유</div>
                    </div>
                    <div class="trend-card">
                        <div class="yr">GOVERNANCE</div>
                        <h4>거버넌스 · 컴플라이언스</h4>
                        <p>79% 실험 vs 11% 프로덕션 갭. 검증 도구가 baseline 요구사항.</p>
                        <div class="stat">→ 정책의학과 AI 기본법 자동 인증</div>
                    </div>
                    <div class="trend-card">
                        <div class="yr">DIGITAL TWIN</div>
                        <h4>조직·정책 디지털 트윈</h4>
                        <p>맥킨지: 변혁 드라이버로서의 AI. 도입 전 시뮬레이션이 새 카테고리.</p>
                        <div class="stat">→ 인공사회가 한국형 표준</div>
                    </div>
                    <div class="trend-card">
                        <div class="yr">REGULATION</div>
                        <h4>AI 기본법 2026.01.26 시행</h4>
                        <p>고영향 AI 영향평가·워터마크·위험등급 의무. 자동 대응 도구 수요 폭증.</p>
                        <div class="stat">→ 정책의학과 자동 부합</div>
                    </div>
                    <div class="trend-card">
                        <div class="yr">SECURITY</div>
                        <h4>미토스 충격 (2026.04)</h4>
                        <p>오픈BSD 27년 결함이 수시간에 발견. 한국 99% 온프레미스 LLM 무방비.</p>
                        <div class="stat">→ AX 응급실 24h 대응</div>
                    </div>
                </div>
            </section>
        </div>

        <!-- ============ AX 종합병원 ============ -->
        <div id="ax" class="tab-content">
            <section class="detail-hero">
                <div class="section-title">FOR ENTERPRISE · B2B</div>
                <h2>한국 최초 AI 모델·서비스<br><span class="accent">종합 진료 플랫폼</span>.</h2>
                <p class="lead">
                    블랙박스였던 LLM 내부를 X-Ray로 투시 진단하고, 자동 처방·치료까지 한 플랫폼에서 완결합니다. 외주 5,000만원 진단을 100만원에, 3개월을 30분에.
                </p>
            </section>

            <section class="section">
                <div class="section-title">6개 진료과</div>
                <h2 class="section-heading">한 병원에서 모든 진단·처방을 받는다.</h2>
                <div class="feat-grid">
                    <div class="feat">
                        <div class="ico">🩻</div>
                        <h4>영상의학과 — 모델 X-Ray</h4>
                        <p>Activation Patching · Causal Tracing · Logit Lens 통합. 30층 LLM 각 layer에서 어느 지점이 환각·오류를 발생시키는지 정확히 식별.</p>
                    </div>
                    <div class="feat">
                        <div class="ico">🫀</div>
                        <h4>내과 — 모델 능력 진단</h4>
                        <p>정확도 · 환각 · 편향을 자동 측정. 한국어 문화·언어 이해(CLIcK 0.791) 포함 종합 검진.</p>
                    </div>
                    <div class="feat">
                        <div class="ico">⚕️</div>
                        <h4>외과 — 자동 처방·치료</h4>
                        <p>Fine-tuning · 증류(Distillation) · 교배(Crossbreeding) 자동 권고. Blackwell GPU 자동 할당·실행.</p>
                    </div>
                    <div class="feat">
                        <div class="ico">🧠</div>
                        <h4>정신의학과 — 안전성</h4>
                        <p>Alignment · Jailbreak · 프롬프트 인젝션 취약점 자동 점검. 미토스 류 보안 위협 사전 차단.</p>
                    </div>
                    <div class="feat">
                        <div class="ico">🚨</div>
                        <h4>응급실 — 24h 대응</h4>
                        <p>모델·서비스·앱 통합 응급 대응. 5분 내 대응, A/B 검증 후 안전 재배포 인증.</p>
                    </div>
                    <div class="feat">
                        <div class="ico">📜</div>
                        <h4>정책의학과 — AI 기본법 부합</h4>
                        <p>고영향 AI 영향평가·워터마크 자동 삽입·위험등급 자동 산출. 2026.01.26 시행 법령 자동 충족.</p>
                    </div>
                </div>
            </section>

            <section class="section">
                <div class="section-title">진료 가격 모델</div>
                <h2 class="section-heading">한국 AX의 의료보험 구조.</h2>
                <p class="section-sub">외래 100만 원부터 정부 라이선스 연 5억 원까지. 누구나 진단을 받을 수 있도록.</p>
                <div class="pricing">
                    <div class="pricing-row head">
                        <div>등급</div><div>가격</div><div>내용</div><div>대상</div>
                    </div>
                    <div class="pricing-row">
                        <div class="tier">외래 (LLM 일반 진단)</div>
                        <div class="price">100만 / 회</div>
                        <div class="desc">Case 1·2 일반 검진 — 모델 능력 + 안전성</div>
                        <div class="target">기업 IT팀, 소규모 LLM 도입처</div>
                    </div>
                    <div class="pricing-row">
                        <div class="tier">정밀 (Layer 분석)</div>
                        <div class="price">500만 / 회</div>
                        <div class="desc">영상의학과 X-Ray 심층 분석 + 인과 추적</div>
                        <div class="target">금융·국방·의료 온프레미스 LLM</div>
                    </div>
                    <div class="pricing-row">
                        <div class="tier">응급실 (24h 콜)</div>
                        <div class="price">500만 / 년</div>
                        <div class="desc">미토스 응급 즉시 대응 + 5분 내 출동</div>
                        <div class="target">서비스 운영 중인 기업·기관</div>
                    </div>
                    <div class="pricing-row">
                        <div class="tier">종합검진 (연 회원)</div>
                        <div class="price">1,000만 / 년</div>
                        <div class="desc">6진료과 전체 진단 + 분기별 정기 검진</div>
                        <div class="target">대기업 R&D, AI 자회사 운영처</div>
                    </div>
                    <div class="pricing-row">
                        <div class="tier">정부 라이선스</div>
                        <div class="price">5억 / 년</div>
                        <div class="desc">부처·지자체 라이선스 + 진단 전문의 양성</div>
                        <div class="target">정부 부처, 광역지자체</div>
                    </div>
                </div>
            </section>

            <section class="section">
                <div class="section-title">데모</div>
                <h2 class="section-heading">실제 작동하는 플랫폼.</h2>
                <div class="embed-container">
                    <div class="embed-placeholder">
                        <div class="pico">🩺</div>
                        <h4>AX 종합병원 데모 곧 공개</h4>
                        <p>Phase 1 PoC (금융 1사 · 공공 1기관 · 의료 1병원 · 제조 대기업 1곳) 진행 중. 정식 데모는 베타 출시와 함께 공개됩니다.</p>
                        <a href="#contact" onclick="switchTab('contact'); return false;">사전 PoC 신청하기</a>
                    </div>
                </div>
            </section>
        </div>

        <!-- ============ 인공사회 ============ -->
        <div id="society" class="tab-content">
            <section class="detail-hero">
                <div class="section-title">FOR GOVERNMENT · B2G</div>
                <h2>한국 사회를<br><span class="accent">디지털로 먼저 살아보다</span>.</h2>
                <p class="lead">
                    NationalOS는 사주(四柱)로 계층화된 5,200만 한국 페르소나 위에 576,000명의 LIVE NPC를 실시간으로 운용합니다. 정책·전환을 적용하면 6개월 후 무엇이 일어나는가 — 실행 전에 확인하세요.
                </p>
            </section>

            <section class="society-graph">
                <div class="big">576,000</div>
                <div class="big-lbl">LIVE NPCs · 지금 이 순간 실시간으로 살아 움직이는 디지털 시민들</div>
                <div class="society-stats">
                    <div class="society-stat">
                        <div class="v">5,200만</div>
                        <div class="l">사주 계층화 한국 페르소나</div>
                    </div>
                    <div class="society-stat">
                        <div class="v">144</div>
                        <div class="l">Blackwell GPU (VIDRAFT 연합)</div>
                    </div>
                    <div class="society-stat">
                        <div class="v">6개월 → 3h</div>
                        <div class="l">시뮬레이션 시간 단축</div>
                    </div>
                    <div class="society-stat">
                        <div class="v">KR→JP→CN→US</div>
                        <div class="l">확장 로드맵</div>
                    </div>
                </div>
            </section>

            <section class="section">
                <div class="section-title">3 USE CASES</div>
                <h2 class="section-heading">정부·기업·금융 — 디지털 트윈으로 검증하기.</h2>
                <div class="feat-grid">
                    <div class="feat">
                        <div class="ico">🏛️</div>
                        <h4>정부 정책 사전 검증</h4>
                        <p>광역지자체·부처 정책을 5,200만 페르소나에 적용. 시민 반응·경제 효과·세대 갈등을 사전 시뮬레이션.</p>
                    </div>
                    <div class="feat">
                        <div class="ico">🏢</div>
                        <h4>기업 조직 디지털 트윈</h4>
                        <p>콜센터 300명 = 300 NPC. AI 전환 시나리오 적용 후 생산성·이직률·고객만족도 변화를 6개월 후까지 미리 본다.</p>
                    </div>
                    <div class="feat">
                        <div class="ico">💼</div>
                        <h4>금융·전자상거래 (Afford-X)</h4>
                        <p>VIDRAFT World Model 기반. 신상품·요금제·캠페인이 시장에서 어떻게 반응할지 디지털 사회에서 먼저 테스트.</p>
                    </div>
                </div>
            </section>

            <section class="section">
                <div class="section-title">PHILOSOPHY</div>
                <h2 class="section-heading">"FFN as Society"</h2>
                <p class="section-sub">
                    AI는 더 이상 도구가 아니라 사회 자체의 모형이 됩니다. 우리는 한국 사회의 다층 구조 — 세대·지역·산업·가치관 — 를 사주 차원의 계층 변수로 인코딩하여, "한국적 의사결정"을 시뮬레이션 가능한 형태로 코드화했습니다.
                </p>
                <div class="feat-grid">
                    <div class="feat">
                        <div class="ico">🔮</div>
                        <h4>사주 계층화</h4>
                        <p>출생일·성별·지역·세대를 차원으로 5,200만 페르소나 분포 재구성.</p>
                    </div>
                    <div class="feat">
                        <div class="ico"></div>
                        <h4>LIVE NPC</h4>
                        <p>576K NPC가 24시간 실시간으로 의사결정·소비·이동. PoC가 아닌 가동 중인 인프라.</p>
                    </div>
                    <div class="feat">
                        <div class="ico">🌏</div>
                        <h4>아시아 확장</h4>
                        <p>한국 검증 후 일본·중국·미국 페르소나로 확장. 글로벌 정책 시뮬레이션 표준화.</p>
                    </div>
                </div>
            </section>
        </div>

        <!-- ============ 허그와트 바나나 ============ -->
        <div id="banana" class="tab-content">
            <section class="detail-hero">
                <div class="section-title">FOR CREATORS · B2B + B2C</div>
                <h2>한국어가 깨지지 않는<br><span class="accent">단 하나의 AI 콘텐츠 플랫폼</span>.</h2>
                <p class="lead">
                    영상 · 이미지 · 카드뉴스 · 웹툰 · 음악. 글로벌 AI 영상 모델이 한국어 텍스트를 망가뜨릴 때, 허그와트 바나나는 100% 보존합니다. 기업 홍보부터 1인 크리에이터까지.
                </p>
            </section>

            <section class="section">
                <div class="section-title">CORE VALUE</div>
                <h2 class="section-heading">왜 허그와트 바나나인가.</h2>
                <div class="feat-grid">
                    <div class="feat">
                        <div class="ico">🇰🇷</div>
                        <h4>한국어 100% 보존</h4>
                        <p>한국어 텍스트 렌더링이 깨지지 않는 유일한 AI 영상·이미지 플랫폼. 글로벌 모델의 한계를 해결.</p>
                    </div>
                    <div class="feat">
                        <div class="ico">🎬</div>
                        <h4>대용량 텍스트 지원</h4>
                        <p>장문 영상 스크립트·웹툰 한 화 분량을 한 번에. 글자 수 제약 없이 콘텐츠 생성.</p>
                    </div>
                    <div class="feat">
                        <div class="ico">⚙️</div>
                        <h4>5종 통합 워크플로우</h4>
                        <p>영상 → 이미지 → 카드뉴스 → 웹툰 → 음악. 한 프로젝트에서 모두 연결.</p>
                    </div>
                </div>
            </section>

            <section class="section">
                <div class="section-title">TWO MARKETS</div>
                <h2 class="section-heading">B2B와 B2C, 양면 전략.</h2>
                <div class="feat-grid" style="grid-template-columns: 1fr 1fr;">
                    <div class="feat">
                        <div class="ico">🏢</div>
                        <h4>B2B — 기업 홍보 영상 자동화</h4>
                        <p>마케팅팀 · 광고대행사 · 미디어 기업 대상. 한국어 광고 영상·기업 IR 영상·소셜 콘텐츠를 시간/10·비용/20으로 단축.</p>
                    </div>
                    <div class="feat">
                        <div class="ico">🎨</div>
                        <h4>B2C — 1인 크리에이터 도구</h4>
                        <p>웹툰 작가 · 카드뉴스 운영자 · 음악 콘텐츠 크리에이터 대상. 카드뉴스부터 웹툰 한 화까지 1인이 끝낸다.</p>
                    </div>
                </div>
            </section>

            <section class="section">
                <div class="section-title">LIVE PLATFORM</div>
                <h2 class="section-heading">지금 바로 사용 가능합니다.</h2>
                <div class="embed-container">
                    <div class="embed-placeholder">
                        <div class="pico">🍌</div>
                        <h4>허그와트 바나나 정식 운영 중</h4>
                        <p>ginigen.ai 도메인에서 정식 서비스 운영 중. Quick Start · Content Studio · Pro Studio · Tools 라인업 제공.</p>
                        <a href="https://www.ginigen.ai" target="_blank">ginigen.ai에서 시작하기</a>
                    </div>
                </div>
            </section>
        </div>

        <!-- ============ TRUST ============ -->
        <div id="trust" class="tab-content">
            <section class="detail-hero">
                <div class="section-title">PROOF · 2026</div>
                <h2>주장이 아닌 <span class="accent">수치</span>.<br>광고가 아닌 <span class="accent">공인</span>.</h2>
                <p class="lead">
                    설립 6개월 만에 두 개 정부 기관이 독립적으로 공인했습니다. 한국 AI 스타트업 중 이례적인 사례입니다.
                </p>
            </section>

            <section class="section">
                <div class="section-title">2026.04 — 두 기관 동시 공인</div>
                <h2 class="section-heading">정부가 직접 검증한 기술 역량.</h2>
                <div class="feat-grid" style="grid-template-columns: 1fr 1fr;">
                    <div class="feat">
                        <div class="ico">🏅</div>
                        <h4>과기정통부 + NIA · K-AI 리더보드</h4>
                        <p><strong>Rogue-28B-MIX 종합 2위 (0.559) · Rogue-28B-KR 5위 (0.530)</strong><br>1위와 점수 차 0.011. 한 회사가 Top 5에 동시 등재된 유일 사례. API 호출 없이 모델 자체 성능 평가.</p>
                    </div>
                    <div class="feat">
                        <div class="ico"></div>
                        <h4>NIPA · 첨단 GPU 지원 사업</h4>
                        <p><strong>NVIDIA Blackwell GPU 16대 확보</strong><br>지니젠AI 단독 16대 + VIDRAFT 연합 128대 = 합계 144대. 2026.04.10부터 가동. 정부 공인 인프라.</p>
                    </div>
                </div>
            </section>

            <section class="section">
                <div class="section-title">GLOBAL PRESENCE</div>
                <h2 class="section-heading">HuggingFace에서 검증된 실사용.</h2>
                <div class="feat-grid">
                    <div class="feat">
                        <div class="ico">🌍</div>
                        <h4>월간 100만+ MAU</h4>
                        <p>HuggingFace 글로벌 사용자가 실제로 매월 100만 명 이상 사용 중. 광고 없는 자생적 트래픽.</p>
                    </div>
                    <div class="feat">
                        <div class="ico">📦</div>
                        <h4>300+ 모델·스페이스</h4>
                        <p>지니젠 및 VIDRAFT 연합 오픈 라인업. 연간 800개 이상 신규 공개 운영.</p>
                    </div>
                    <div class="feat">
                        <div class="ico"></div>
                        <h4>HuggingFace STAR AI Top 12</h4>
                        <p>2024년 글로벌 STAR AI 선정. FINAL Bench는 HF 데이터셋 글로벌 Top 5.</p>
                    </div>
                </div>
            </section>

            <section class="section">
                <div class="section-title">PORTFOLIO MODELS</div>
                <h2 class="section-heading">핵심 모델 자산.</h2>
                <div class="feat-grid">
                    <div class="feat">
                        <div class="ico">🧬</div>
                        <h4>Darwin 시리즈</h4>
                        <p>진화적 모델 머징. CMA-ES 기반 FFN 교배. 9B·27B Opus 라인업, V8 NEG (Native Entropy Gating).</p>
                    </div>
                    <div class="feat">
                        <div class="ico">🛸</div>
                        <h4>AETHER-Pilot-14B</h4>
                        <p>Latin-square Hybrid Attention 자체 설계 아키텍처. 5종 Attention 통합. Proto-AGI 라인.</p>
                    </div>
                    <div class="feat">
                        <div class="ico">🛡️</div>
                        <h4>Rogue 시리즈</h4>
                        <p>K-AI 리더보드 2·5위 동시 점유. 한국어 특화 LLM. CLIcK 0.791 — 한국어 문화·언어 이해 최상위.</p>
                    </div>
                </div>
            </section>
        </div>

        <!-- ============ CONTACT ============ -->
        <div id="contact" class="tab-content">
            <section class="detail-hero">
                <div class="section-title">CONTACT · COMPANY</div>
                <h2>함께 <span class="accent">한국 AI 전환</span><br>다음 장을 씁니다.</h2>
                <p class="lead">
                    B2B PoC · 정부 라이선스 · 파트너십 · 투자 문의는 아래로 연락 주십시오. 24시간 내 응답합니다.
                </p>
            </section>

            <section class="section">
                <div class="section-title">CORPORATE</div>
                <h2 class="section-heading">회사 정보.</h2>
                <div class="contact-grid">
                    <div class="contact-card">
                        <h4>🏢 (주) 지니젠AI · GiniGen AI Inc.</h4>
                        <p>
                            <strong>설립</strong>: 2025년 10월<br>
                            <strong>대표</strong>: 최선영 (CEO)<br>
                            <strong>주소</strong>: 서울 강남구 강남대로 112길 47, 2F 424<br>
                            <strong>사업자번호</strong>: 763-88-03595<br>
                            <strong>통신판매업</strong>: 2025-Seoul Gangnam-06701
                        </p>
                    </div>
                    <div class="contact-card">
                        <h4>🤝 VIDRAFT 교차출자 구조</h4>
                        <p>
                            VIDRAFT(비드래프트)와 자본적 교차출자 관계. Darwin · AETHER · NationalOS 자산을 독점 활용. 144 Blackwell GPU 공동 운용. K-AI 진영의 양 날개.
                        </p>
                        <a class="ml" href="https://huggingface.co/spaces/VIDraft/AI" target="_blank">VIDRAFT 보러가기 →</a>
                    </div>
                    <div class="contact-card">
                        <h4>👥 자문단</h4>
                        <p>
                            <strong>이호준 박사</strong>: Cambridge PhD · 前 JP Morgan · Captivision Nasdaq IPO Lead<br>
                            <strong>정원훈 박사</strong>: TenSpace CEO · 한국AI진흥협회 · 정부지원금 전문</p>
                    </div>
                    <div class="contact-card">
                        <h4>✉️ 문의·파트너십</h4>
                        <p>
                            B2B PoC · 정부 라이선스 · 투자 · 미디어 문의를 환영합니다. 허그와트 바나나 사용 문의는 ginigen.ai 도움말 센터로 부탁드립니다.
                        </p>
                        <a class="ml" href="mailto:contact@ginigen.net">contact@ginigen.net →</a>
                    </div>
                </div>
            </section>
        </div>

    </div>

    <!-- FOOTER -->
    <footer class="footer">
        <strong>(주) 지니젠AI</strong> · 대표 최선영 · 서울 강남구 강남대로 112길 47, 2F 424 · 사업자번호 763-88-03595<br>
        통신판매업 신고 2025-Seoul Gangnam-06701 · © 2026 GiniGen AI Inc. · Powered by VIDRAFT 연합
        <div class="footer-links">
            <a href="https://www.ginigen.ai" target="_blank">허그와트 바나나 (ginigen.ai)</a>·
            <a href="https://huggingface.co/ginigen" target="_blank">HuggingFace</a>·
            <a href="https://huggingface.co/spaces/VIDraft/AI" target="_blank">VIDRAFT 허브</a>·
            <a href="#">개인정보처리방침</a>·
            <a href="#">이용약관</a>
        </div>
    </footer>

    <script>
        // ============ TAB SWITCHING ============
        function switchTab(name) {
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
            const btn = document.querySelector(`.tab[data-tab="${name}"]`);
            const con = document.getElementById(name);
            if (btn) btn.classList.add('active');
            if (con) con.classList.add('active');
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', e => {
                e.preventDefault();
                switchTab(tab.getAttribute('data-tab'));
            });
        });

        // ============ PARTICLES ============
        const pc = document.getElementById('particles');
        for (let i = 0; i < 22; i++) {
            const p = document.createElement('div');
            p.className = 'particle';
            const size = 2 + Math.random() * 4;
            p.style.width = size + 'px';
            p.style.height = size + 'px';
            p.style.left = Math.random() * 100 + '%';
            p.style.bottom = -10 + 'px';
            p.style.animationDelay = (Math.random() * 25) + 's';
            p.style.animationDuration = (18 + Math.random() * 14) + 's';
            pc.appendChild(p);
        }
    </script>
</body>
</html>