Hugging Face's logo

Spaces:
FINAL-Bench
/
security-scan
Running

App Files Community
SeaWolf-AI commited on
Commit
79ffb1a
·
verified ·
1 Parent(s): 97d8f15

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +202 -239
index.html CHANGED
@@ -6,38 +6,48 @@
6
  <title>StealthMark — Content Protection Platform</title>
7
  <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.min.css" rel="stylesheet">
8
  <style>
9
- :root{--mint:#7fffdb;--purple:#c084fc;--red:#ff6b6b;--orange:#ffaa66;--yellow:#ffe066;--blue:#60a5fa;--pink:#f472b6;--bg:#0a0e1a;--card:#111827;--card2:#1a1f35;--border:#1e293b}
10
- *{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:#e2e8f0;font-family:'Pretendard',-apple-system,sans-serif;line-height:1.5;overflow-x:hidden}
11
- ::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#334155;border-radius:3px}
 
 
12
  @keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
13
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
14
- @keyframes pulse{0%,100%{box-shadow:0 0 15px rgba(127,255,219,.2)}50%{box-shadow:0 0 35px rgba(127,255,219,.3)}}
15
  @keyframes sweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
16
  @keyframes barFill{from{width:0}}
17
  @keyframes blipPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.8);opacity:.3}}
18
- @keyframes breathe{0%,100%{opacity:.6}50%{opacity:1}}
19
  .fi{animation:fadeIn .6s ease both}.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}.d4{animation-delay:.4s}
20
- nav{position:sticky;top:0;z-index:100;background:rgba(10,14,26,.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
 
21
  .ni{max-width:1200px;margin:0 auto;display:flex;align-items:center;height:56px;padding:0 24px}
22
  .logo{display:flex;align-items:center;gap:10px;margin-right:40px}
23
  .li{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--mint),var(--purple));display:flex;align-items:center;justify-content:center;font-size:14px}
24
- .tb{padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-size:13px;font-weight:600;background:transparent;color:#94a3b8;transition:all .2s;font-family:inherit}
25
- .tb:hover{color:#e2e8f0;background:rgba(255,255,255,.04)}.tb.a{background:rgba(127,255,219,.08);color:var(--mint)}
 
26
  main{max-width:1200px;margin:0 auto;padding:0 24px}section{display:none}section.a{display:block}
27
- .cd{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;transition:all .3s}
28
- .mc{width:150px;padding:28px 18px;border-radius:16px;background:linear-gradient(135deg,var(--card),var(--card2));text-align:center;animation:pulse 3s ease infinite}
 
 
29
  .sr{display:flex;align-items:center;gap:8px;margin-bottom:6px}
30
- .sl{color:#94a3b8;font-size:11px;width:80px;text-align:right}.st{flex:1;height:8px;background:#1e293b;border-radius:4px;overflow:hidden}
31
- .sf{height:100%;border-radius:4px;animation:barFill 1.2s cubic-bezier(.4,0,.2,1) both}.sn{font-size:12px;font-weight:700;width:32px;text-align:right}
32
- .lh{display:grid;grid-template-columns:40px 1fr 56px repeat(6,48px) 52px;padding:12px 16px;background:#0f1629;border-bottom:1px solid var(--border);gap:4px}
33
- .lh span{color:#475569;font-size:10px;font-weight:700}
34
- .lr{display:grid;grid-template-columns:40px 1fr 56px repeat(6,48px) 52px;padding:12px 16px;gap:4px;align-items:center;cursor:pointer;border-bottom:1px solid rgba(30,41,59,.3);border-left:3px solid transparent;transition:all .2s}
35
- .lr:hover{background:rgba(255,255,255,.02)}.lr.sel{background:rgba(127,255,219,.04);border-left-color:var(--mint)}
 
 
 
36
  .ag{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
37
- .ac{padding:20px;border-radius:16px;cursor:pointer;transition:all .3s;background:var(--card)}.ac:hover{transform:translateY(-2px)}
38
- .at{padding:2px 8px;border-radius:6px;background:#0f1629;color:#94a3b8;font-size:10px;font-weight:600;display:inline-block;margin:2px}
 
39
  .svr{display:flex;gap:12px;padding-top:10px;border-top:1px solid var(--border)}
40
- .svi{text-align:center;flex:1}.svl{font-size:10px;color:#475569;margin-bottom:2px}.svv{font-size:14px}
41
  .pl{position:absolute;left:24px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--mint),var(--purple),var(--red));border-radius:1px}
42
  .ps{display:flex;gap:20px;margin-bottom:20px;position:relative}
43
  .pn{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;position:relative;z-index:1}
@@ -45,375 +55,328 @@ main{max-width:1200px;margin:0 auto;padding:0 24px}section{display:none}section.
45
  .rr{position:absolute;border-radius:50%;border:1px solid}
46
  .rw{position:absolute;top:0;left:0;width:100%;height:100%;animation:sweep 4s linear infinite}
47
  .ra{position:absolute;top:50%;left:50%;width:50%;height:2px;transform-origin:left center;background:linear-gradient(90deg,var(--mint),transparent)}
48
- .rc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 16px var(--mint)}
49
  .rb{position:absolute;transform:translate(-50%,-50%)}
50
  .rd{width:8px;height:8px;border-radius:50%;animation:blipPulse 2s ease infinite}
51
  .rl{position:absolute;top:14px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9px;font-weight:700}
52
- .story{color:#cbd5e1;font-size:14px;line-height:1.9}.story strong{color:#fff}
53
  @media(max-width:768px){.ag{grid-template-columns:1fr}.lh,.lr{grid-template-columns:32px 1fr 44px repeat(6,36px) 44px;font-size:10px}.mc{width:130px}}
54
- footer{border-top:1px solid var(--border);padding:20px 24px;text-align:center;color:#475569;font-size:11px}
55
  </style>
56
  </head>
57
  <body>
58
  <nav><div class="ni">
59
- <div class="logo"><div class="li">🔒</div><div style="font-weight:800;font-size:16px;letter-spacing:-.5px"><span style="color:var(--mint)">Stealth</span><span style="color:#fff">Mark</span><span style="color:#475569;font-size:11px;margin-left:6px">Platform</span></div></div>
60
  <div id="tabs" style="display:flex;gap:4px">
61
  <button class="tb a" data-t="hero">⚡ Home</button><button class="tb" data-t="lb">🏆 Tech Comparison</button><button class="tb" data-t="atk">🛡️ Threat Response</button><button class="tb" data-t="pipe">📡 Business</button>
62
  </div></div></nav>
63
  <main>
64
 
65
- <!-- ═══════════════ HERO ═══════════════ -->
66
  <section id="hero" class="a">
67
  <div style="padding:80px 0 40px;text-align:center;position:relative">
68
- <div style="position:absolute;top:20px;left:50%;transform:translateX(-50%);width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(127,255,219,.04),rgba(192,132,252,.02) 40%,transparent 70%);pointer-events:none"></div>
69
  <div style="font-size:13px;color:var(--purple);font-weight:700;letter-spacing:3px;margin-bottom:16px">TEXT · IMAGE · VIDEO — FULL SPECTRUM PROTECTION</div>
70
- <h1 style="font-size:clamp(32px,6vw,52px);font-weight:900;line-height:1.15;margin-bottom:20px;letter-spacing:-2px"><span style="color:#fff">Text · Image · Video</span><br><span style="background:linear-gradient(135deg,var(--mint),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent">Complete Content Protection Platform</span></h1>
71
  <p class="story" style="max-width:720px;margin:0 auto 28px;font-size:17px">
72
  Pre-embed <span style="color:var(--orange);font-weight:700">AI Similarity Detection</span> for instant content protection<br>
73
  Post-embed <span style="color:var(--mint);font-weight:700">Multi-layer Watermark + Dual-Axis Verdict</span> for legal evidence<br>
74
  <span style="color:var(--purple);font-weight:700">Text 4-Layer + Image DCT + Video Temporal</span> — World's Only Full Spectrum
75
  </p>
76
  <div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:48px">
77
- <span style="padding:7px 18px;border-radius:20px;background:rgba(127,255,219,.08);border:1px solid rgba(127,255,219,.2);color:var(--mint);font-size:12px;font-weight:700">📝 Text 4-Layer</span>
78
- <span style="padding:7px 18px;border-radius:20px;background:rgba(244,114,182,.08);border:1px solid rgba(244,114,182,.2);color:var(--pink);font-size:12px;font-weight:700">🖼️ Image DCT</span>
79
- <span style="padding:7px 18px;border-radius:20px;background:rgba(96,165,250,.08);border:1px solid rgba(96,165,250,.2);color:var(--blue);font-size:12px;font-weight:700">🎬 Video Temporal</span>
80
- <span style="padding:7px 18px;border-radius:20px;background:rgba(255,170,102,.08);border:1px solid rgba(255,170,102,.2);color:var(--orange);font-size:12px;font-weight:700">🛡️ Day 0 Instant Protection</span>
81
  </div>
82
  <div id="metrics" style="display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:40px"></div>
83
  </div>
84
 
85
- <!-- ★ THREE PILLARS — 3 Pillars ★ -->
86
  <div style="padding:40px 0 50px">
87
  <div style="text-align:center;margin-bottom:12px"><span style="font-size:13px;color:var(--mint);font-weight:700;letter-spacing:3px">THREE PILLARS OF PROTECTION</span></div>
88
- <h2 style="font-size:26px;font-weight:800;text-align:center;margin-bottom:8px;color:#fff">World's Only <span style='color:var(--mint)'>3 Pillars</span> Unified Protection</h2>
89
- <p style="text-align:center;color:#94a3b8;font-size:14px;margin-bottom:36px">Protect all content types in one platform</p>
90
  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:0 auto">
91
 
92
- <!-- Pillar 1: TEXT -->
93
- <div class="cd fi" style="border-color:rgba(127,255,219,.25);background:linear-gradient(160deg,rgba(127,255,219,.05),var(--card) 40%);position:relative;overflow:hidden">
94
- <div style="position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(127,255,219,.06),transparent);pointer-events:none"></div>
95
- <div style="text-align:center;margin-bottom:16px"><div style="font-size:40px;margin-bottom:8px">📝</div><div style="color:var(--mint);font-weight:800;font-size:18px">Text</div><div style="font-size:11px;color:#64748b">TEXT PROTECTION</div></div>
96
- <div style="padding:14px;border-radius:10px;background:rgba(127,255,219,.03);border:1px solid rgba(127,255,219,.1);margin-bottom:14px">
97
  <div class="story" style="font-size:12px;line-height:1.8">
98
  <span style="color:var(--mint)">Pre-embed →</span> Radar™ 7-Mode Plagiarism Check<br>
99
  <span style="color:var(--mint)">Post-embed →</span> 4-Layer Stealth Watermark<br>
100
  <span style="color:var(--mint)">Verify →</span> DualAxis™ Dual-Axis Verdict
101
  </div></div>
102
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
103
- <div style="padding:10px;border-radius:8px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--mint)">4</div><div style="font-size:9px;color:#64748b">Defense Layers</div></div>
104
- <div style="padding:10px;border-radius:8px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--mint)">34</div><div style="font-size:9px;color:#64748b">Attack Response</div></div>
105
  </div>
106
- <div style="margin-top:12px;text-align:center"><span style="padding:4px 12px;border-radius:8px;background:rgba(127,255,219,.06);color:var(--mint);font-size:10px;font-weight:700">✅ Operational</span></div>
107
  </div>
108
 
109
- <!-- Pillar 2: IMAGE -->
110
- <div class="cd fi d1" style="border-color:rgba(244,114,182,.25);background:linear-gradient(160deg,rgba(244,114,182,.05),var(--card) 40%);position:relative;overflow:hidden">
111
- <div style="position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(244,114,182,.06),transparent);pointer-events:none"></div>
112
- <div style="text-align:center;margin-bottom:16px"><div style="font-size:40px;margin-bottom:8px">🖼️</div><div style="color:var(--pink);font-weight:800;font-size:18px">Image</div><div style="font-size:11px;color:#64748b">IMAGE PROTECTION</div></div>
113
- <div style="padding:14px;border-radius:10px;background:rgba(244,114,182,.03);border:1px solid rgba(244,114,182,.1);margin-bottom:14px">
114
  <div class="story" style="font-size:12px;line-height:1.8">
115
  <span style="color:var(--pink)">Pre-embed →</span> pHash+SSIM+Color+Features<br>
116
  <span style="color:var(--pink)">Post-embed →</span> DCT Frequency Domain Watermark<br>
117
  <span style="color:var(--pink)">Verify →</span> Watermark Extraction & Similarity Check
118
  </div></div>
119
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
120
- <div style="padding:10px;border-radius:8px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--pink)">5</div><div style="font-size:9px;color:#64748b">Analysis Modes</div></div>
121
- <div style="padding:10px;border-radius:8px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--pink)">38+</div><div style="font-size:9px;color:#64748b">dB PSNR</div></div>
122
  </div>
123
- <div style="margin-top:12px;text-align:center"><span style="padding:4px 12px;border-radius:8px;background:rgba(244,114,182,.06);color:var(--pink);font-size:10px;font-weight:700">✅ Operational</span></div>
124
  </div>
125
 
126
- <!-- Pillar 3: VIDEO -->
127
- <div class="cd fi d2" style="border-color:rgba(96,165,250,.25);background:linear-gradient(160deg,rgba(96,165,250,.05),var(--card) 40%);position:relative;overflow:hidden">
128
- <div style="position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,.06),transparent);pointer-events:none"></div>
129
- <div style="text-align:center;margin-bottom:16px"><div style="font-size:40px;margin-bottom:8px">🎬</div><div style="color:var(--blue);font-weight:800;font-size:18px">Video</div><div style="font-size:11px;color:#64748b">VIDEO PROTECTION</div></div>
130
- <div style="padding:14px;border-radius:10px;background:rgba(96,165,250,.03);border:1px solid rgba(96,165,250,.1);margin-bottom:14px">
131
  <div class="story" style="font-size:12px;line-height:1.8">
132
  <span style="color:var(--blue)">Pre-embed →</span> Keyframe Fingerprint+DTW<br>
133
  <span style="color:var(--blue)">Post-embed →</span> Temporal Propagation Watermark<br>
134
  <span style="color:var(--blue)">Verify →</span> Codec Robustness + Platform Radar
135
  </div></div>
136
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
137
- <div style="padding:10px;border-radius:8px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--blue)">4</div><div style="font-size:9px;color:#64748b">Analysis Modes</div></div>
138
- <div style="padding:10px;border-radius:8px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--blue)">DTW</div><div style="font-size:9px;color:#64748b">Temporal Matching</div></div>
139
  </div>
140
- <div style="margin-top:12px;text-align:center"><span style="padding:4px 12px;border-radius:8px;background:rgba(96,165,250,.06);color:var(--blue);font-size:10px;font-weight:700">✅ Operational</span></div>
141
  </div>
142
  </div>
143
 
144
- <!-- Image Protection Detail -->
145
  <div style="max-width:960px;margin:36px auto 0">
146
- <div class="cd fi d3" style="border-color:rgba(244,114,182,.15);background:linear-gradient(135deg,rgba(244,114,182,.03),rgba(192,132,252,.02))">
147
- <div style="text-align:center;margin-bottom:20px"><div style="color:var(--pink);font-weight:800;font-size:18px">🖼️ Image Protection — How It Works</div><div style="color:#64748b;font-size:12px;margin-top:4px">AI-regenerated images and edited copies — all caught</div></div>
148
  <div style="display:grid;grid-template-columns:1fr 40px 1fr;gap:16px;align-items:stretch">
149
- <div style="padding:16px;border-radius:12px;background:rgba(255,170,102,.03);border:1px solid rgba(255,170,102,.12)">
150
  <div style="color:var(--orange);font-weight:800;font-size:14px;margin-bottom:10px">📡 Pre-embed Protection</div>
151
- <div class="story" style="font-size:12px;line-height:1.8">
152
- <strong>Perceptual Hash</strong> — Fingerprint robust against crop/compress<br>
153
- <strong>SSIM Structure Analysis</strong> — Luminance/contrast/structure 3-axis comparison<br>
154
- <strong>Color Histogram</strong> — RGB distribution cross-validation<br>
155
- <strong>Feature Matching</strong> — Edge-based similar structure detection<br>
156
- <strong>Comprehensive AI Verdict</strong> — Weighted multi-layer similarity score
157
- </div></div>
158
- <div style="display:flex;align-items:center;justify-content:center"><div style="color:#475569;font-size:18px;animation:breathe 2s ease infinite">＋</div></div>
159
- <div style="padding:16px;border-radius:12px;background:rgba(127,255,219,.03);border:1px solid rgba(127,255,219,.12)">
160
- <div style="color:var(--mint);font-weight:800;font-size:14px;margin-bottom:10px">🔏 Post-embed Protection</div>
161
- <div class="story" style="font-size:12px;line-height:1.8">
162
- <strong>DCT Frequency Embed</strong> — Invisible encoding in mid-band<br>
163
- <strong>PSNR 38+ dB</strong> — Visually indistinguishable quality<br>
164
- <strong>SSIM 99%+</strong> — Identical visual quality to original<br>
165
- <strong>JPEG Robust</strong> — Survives compression & resize<br>
166
- <strong>Evidence Package</strong> — SHA-256 hash + timestamp
167
- </div></div>
168
- </div>
169
  </div>
 
 
 
 
170
  </div>
 
171
  </div>
172
 
173
- <!-- ★ DUAL SHIELD -->
174
  <div style="padding:40px 0 60px">
175
  <div style="text-align:center;margin-bottom:12px"><span style="font-size:13px;color:var(--orange);font-weight:700;letter-spacing:3px">DUAL SHIELD ARCHITECTURE</span></div>
176
- <h2 style="font-size:26px;font-weight:800;text-align:center;margin-bottom:8px;color:#fff">What competitors lack: <span style="color:var(--mint)">Dual Protection</span> System</h2>
177
- <p style="text-align:center;color:#94a3b8;font-size:14px;margin-bottom:36px">AI protects existing content even without watermarks</p>
178
  <div style="display:grid;grid-template-columns:1fr 50px 1fr;gap:16px;max-width:920px;margin:0 auto;align-items:stretch">
179
 
180
- <!-- Shield A -->
181
- <div class="cd fi" style="background:linear-gradient(160deg,rgba(255,170,102,.04),var(--card) 40%);border-color:rgba(255,170,102,.25);position:relative;overflow:hidden">
182
- <div style="position:absolute;top:-20px;right:-20px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,170,102,.06),transparent);pointer-events:none"></div>
183
  <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
184
- <div style="width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,rgba(255,170,102,.15),rgba(255,170,102,.05));display:flex;align-items:center;justify-content:center;font-size:24px;border:1px solid rgba(255,170,102,.2)">📡</div>
185
- <div><div style="color:var(--orange);font-weight:800;font-size:17px">StealthMark <span style="letter-spacing:-.3px">Radar</span>™</div>
186
- <div style="color:#64748b;font-size:11px">Pre-embed Protection — Works instantly without watermarks</div></div>
187
  </div>
188
- <div style="padding:16px;border-radius:12px;background:rgba(255,170,102,.03);border:1px solid rgba(255,170,102,.1);margin-bottom:14px">
189
  <div class="story" style="font-size:13px;line-height:1.9">
190
- What if your article was copied somewhere without permission?<br>
191
  <strong>Radar™</strong> finds it with <span style="color:var(--orange)">Text 7 modes + Image 5 modes</span>.<br><br>
192
  <span style="color:var(--orange)">▸</span> <strong>Text Phrase Fingerprint</strong> — Compares your text's N-grams<br>
193
  <span style="color:var(--orange)">▸</span> <strong>Image Perceptual Hash</strong> — Detects edited copies too<br>
194
- <span style="color:var(--orange)">▸</span> <strong>SSIM Structure Analysis</strong> — Image structural similarity comparison<br>
195
  <span style="color:var(--orange)">▸</span> <strong>AI Rewrite/Regeneration Detection</strong> — Detects what AI modified
196
- </div>
197
- </div>
198
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px">
199
- <div style="padding:12px;border-radius:10px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:24px;font-weight:900;color:var(--orange)">12</div><div style="font-size:10px;color:#94a3b8">Analysis Modes (7+5)</div></div>
200
- <div style="padding:12px;border-radius:10px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:24px;font-weight:900;color:var(--orange)">Day 0</div><div style="font-size:10px;color:#94a3b8">Instant Protection</div></div>
201
  </div>
202
- <div style="padding:12px 14px;border-radius:10px;background:rgba(127,255,219,.04);border:1px solid rgba(127,255,219,.1)">
203
  <div style="color:var(--mint);font-size:12px;font-weight:700;margin-bottom:4px">💡 This is the difference</div>
204
- <div style="color:#cbd5e1;font-size:12px;line-height:1.7">From the moment of contract, <strong style="color:#fff">your entire text and image archive</strong> is protected. Text plagiarism and image theft — no need to wait for watermark embedding.</div>
205
- </div>
206
- </div>
207
 
208
- <!-- Center -->
209
  <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px">
210
- <div style="width:2px;flex:1;background:linear-gradient(180deg,rgba(255,170,102,.3),rgba(127,255,219,.3));border-radius:1px"></div>
211
- <div style="width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,rgba(255,170,102,.15),rgba(127,255,219,.15));display:flex;align-items:center;justify-content:center;font-size:18px;border:2px solid rgba(255,255,255,.1);animation:pulse 3s ease infinite">🤝</div>
212
- <div style="font-size:10px;color:#64748b;font-weight:700;text-align:center;line-height:1.3">Unified<br>Protection</div>
213
- <div style="width:2px;flex:1;background:linear-gradient(180deg,rgba(127,255,219,.3),rgba(192,132,252,.3));border-radius:1px"></div>
214
  </div>
215
 
216
- <!-- Shield B -->
217
- <div class="cd fi d2" style="background:linear-gradient(160deg,rgba(127,255,219,.04),var(--card) 40%);border-color:rgba(127,255,219,.25);position:relative;overflow:hidden">
218
- <div style="position:absolute;top:-20px;right:-20px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(127,255,219,.06),transparent);pointer-events:none"></div>
219
  <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
220
- <div style="width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,rgba(127,255,219,.15),rgba(127,255,219,.05));display:flex;align-items:center;justify-content:center;font-size:24px;border:1px solid rgba(127,255,219,.2)">🔏</div>
221
- <div><div style="color:var(--mint);font-weight:800;font-size:17px">StealthMark <span style="letter-spacing:-.3px">Shield</span>™</div>
222
- <div style="color:#64748b;font-size:11px">Post-embed Protection — 4-Layer Patented Defense</div></div>
223
  </div>
224
- <div style="padding:16px;border-radius:12px;background:rgba(127,255,219,.03);border:1px solid rgba(127,255,219,.1);margin-bottom:14px">
225
  <div class="story" style="font-size:13px;line-height:1.9">
226
  Four invisible layers of protection hide within your text.<br>
227
  If an attacker removes one, <span style="color:var(--mint)">other layers generate evidence</span>.<br><br>
228
  <span style="color:var(--mint)">▸</span> <strong>StealthMark Phantom™</strong> — Mark that hides like a ghost<br>
229
  <span style="color:var(--purple)">▸</span> <strong>StealthMark StyleDNA™</strong> — Writing has DNA too<br>
230
- <span style="color:var(--yellow)">▸</span> <strong>StealthMark Seal™</strong> — Digital seal that holds up in court<br>
231
  <span style="color:var(--blue)">▸</span> <strong>StealthMark MicroGlyph™</strong> — Invisible micro-engraving
232
- </div>
233
- </div>
234
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px">
235
- <div style="padding:12px;border-radius:10px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:24px;font-weight:900;color:var(--mint)">34</div><div style="font-size:10px;color:#94a3b8">Attack Coverage</div></div>
236
- <div style="padding:12px;border-radius:10px;background:var(--card2);text-align:center;border:1px solid var(--border)"><div style="font-size:24px;font-weight:900;color:var(--mint)">0px</div><div style="font-size:10px;color:#94a3b8">Zero Visibility</div></div>
237
  </div>
238
- <div style="padding:12px 14px;border-radius:10px;background:rgba(192,132,252,.04);border:1px solid rgba(192,132,252,.1)">
239
  <div style="color:var(--purple);font-size:12px;font-weight:700;margin-bottom:4px">💡 CrossGuard™ Principle</div>
240
- <div style="color:#cbd5e1;font-size:12px;line-height:1.7">Like a bank vault with dual locks, <strong style="color:#fff">if one shield breaks, the other automatically leaves evidence.</strong> No single attack can disable both simultaneously.</div>
241
- </div>
242
- </div>
243
  </div>
244
 
245
- <!-- Dual Shield Flow -->
246
  <div style="text-align:center;margin-top:28px">
247
- <div style="display:inline-block;padding:18px 36px;border-radius:16px;background:linear-gradient(135deg,rgba(255,170,102,.05),rgba(127,255,219,.05),rgba(192,132,252,.05));border:1px solid rgba(255,255,255,.08)">
248
  <div style="display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap">
249
- <div><span style="color:var(--orange);font-weight:800;font-size:15px">Day 0</span><br><span style="color:#94a3b8;font-size:11px">Text+Image Radar™</span></div>
250
- <span style="color:#334155;font-size:18px">→</span>
251
- <div><span style="color:var(--mint);font-weight:800;font-size:15px">Shield™ Embed</span><br><span style="color:#94a3b8;font-size:11px">4-Layer Protection Active</span></div>
252
- <span style="color:#334155;font-size:18px">→</span>
253
- <div><span style="color:var(--purple);font-weight:800;font-size:15px">DualAxis™ Detection</span><br><span style="color:#94a3b8;font-size:11px">Dual-Axis Cross Verdict</span></div>
254
- <span style="color:#334155;font-size:18px">→</span>
255
- <div><span style="color:var(--red);font-weight:800;font-size:15px">Seal™ Handoff</span><br><span style="color:#94a3b8;font-size:11px">Legal Evidence Package</span></div>
256
- </div></div>
257
- </div>
258
  </div>
259
 
260
- <!-- ★ 4-Layer Protection Storytelling -->
261
  <div style="padding:40px 0 50px">
262
  <h2 style="font-size:24px;font-weight:800;text-align:center;margin-bottom:12px">How does <span style="color:var(--mint)">4-Layer Protection</span> work?</h2>
263
- <p style="text-align:center;color:#94a3b8;font-size:13px;margin-bottom:36px">Easy to understand without technical expertise</p>
264
  <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:900px;margin:0 auto">
265
 
266
- <div class="cd fi" style="border-color:rgba(96,165,250,.2);background:linear-gradient(160deg,rgba(96,165,250,.03),var(--card) 50%)">
267
- <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
268
- <div style="width:44px;height:44px;border-radius:12px;background:rgba(96,165,250,.1);display:flex;align-items:center;justify-content:center;font-size:22px">👻</div>
269
- <div><div style="color:var(--blue);font-weight:800;font-size:15px">StealthMark Phantom™</div><div style="color:#64748b;font-size:10px;letter-spacing:1px">INVISIBLE MARK</div></div>
270
- </div>
271
- <div class="story" style="font-size:13px">types is like signing with <strong>invisible ink</strong>. Invisible to the naked eye, but shows up clearly under special equipment. Even copying or scanning preserves the signature.</div>
272
- </div>
273
 
274
- <div class="cd fi d1" style="border-color:rgba(127,255,219,.2);background:linear-gradient(160deg,rgba(127,255,219,.03),var(--card) 50%)">
275
- <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
276
- <div style="width:44px;height:44px;border-radius:12px;background:rgba(127,255,219,.1);display:flex;align-items:center;justify-content:center;font-size:22px">🧬</div>
277
- <div><div style="color:var(--mint);font-weight:800;font-size:15px">StealthMark StyleDNA™</div><div style="color:#64748b;font-size:10px;letter-spacing:1px">STYLISTIC FINGERPRINT</div></div>
278
- </div>
279
- <div class="story" style="font-size:13px">Just as everyone has a unique <strong>gait</strong>, writing has its own rhythm. StyleDNA™ subtly tunes this rhythm to create a unique fingerprint. No matter how much AI rewrites it, traces of the rhythm remain.</div>
280
- </div>
281
 
282
- <div class="cd fi d2" style="border-color:rgba(255,224,102,.2);background:linear-gradient(160deg,rgba(255,224,102,.03),var(--card) 50%)">
283
- <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
284
- <div style="width:44px;height:44px;border-radius:12px;background:rgba(255,224,102,.1);display:flex;align-items:center;justify-content:center;font-size:22px">📋</div>
285
- <div><div style="color:var(--yellow);font-weight:800;font-size:15px">StealthMark Seal™</div><div style="color:#64748b;font-size:10px;letter-spacing:1px">FORENSIC EVIDENCE</div></div>
286
- </div>
287
- <div class="story" style="font-size:13px">Like a notary's <strong>authentication stamp</strong>. The record that "this text was protected on March 15, 2025 at 14:23" is sealed in a tamper-proof form. Admissible as evidence in court.</div>
288
- </div>
289
 
290
- <div class="cd fi d3" style="border-color:rgba(192,132,252,.2);background:linear-gradient(160deg,rgba(192,132,252,.03),var(--card) 50%)">
291
- <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
292
- <div style="width:44px;height:44px;border-radius:12px;background:rgba(192,132,252,.1);display:flex;align-items:center;justify-content:center;font-size:22px">🔬</div>
293
- <div><div style="color:var(--purple);font-weight:800;font-size:15px">StealthMark MicroGlyph™</div><div style="color:#64748b;font-size:10px;letter-spacing:1px">MICRO ENGRAVING</div></div>
294
- </div>
295
- <div class="story" style="font-size:13px">Like <strong>micro-engraving</strong> on a gemstone. Invisible micro-codes are carved into every punctuation mark. If Phantom™ is attacked, MicroGlyph™ survives — and vice versa.</div>
296
- </div>
297
  </div>
298
 
299
  <div style="max-width:900px;margin:28px auto 0">
300
- <div class="cd" style="text-align:center;border-color:rgba(127,255,219,.15);background:linear-gradient(135deg,rgba(127,255,219,.03),rgba(192,132,252,.03))">
301
  <div style="font-size:20px;margin-bottom:6px">⚖️</div>
302
  <div style="color:var(--mint);font-weight:800;font-size:16px;margin-bottom:10px">StealthMark CrossGuard™</div>
303
- <div class="story" style="font-size:13px;max-width:600px;margin:0 auto"><strong>Dual-lock vault</strong> principle. Phantom™ and MicroGlyph™ exist on different technology layers. If an attacker removes one — <span style="color:var(--red)">the removal trace itself becomes evidence</span>. <span style="color:var(--mint)">Destroying both simultaneously is physically impossible.</span></div>
304
- </div>
305
- </div>
306
  </div>
307
 
308
- <!-- ★ DualAxis -->
309
  <div style="padding:40px 0 50px">
310
  <h2 style="font-size:24px;font-weight:800;text-align:center;margin-bottom:8px">StealthMark <span style="color:var(--mint)">DualAxis</span>™</h2>
311
- <p style="text-align:center;color:#94a3b8;font-size:13px;margin-bottom:32px">Whether the watermark is alive or dead — the verdict remains valid</p>
312
  <div style="display:grid;grid-template-columns:1fr 60px 1fr;gap:16px;max-width:700px;margin:0 auto;align-items:center">
313
- <div class="cd fi" style="text-align:center;background:linear-gradient(135deg,var(--card),rgba(127,255,219,.03));border-color:rgba(127,255,219,.2)"><div style="font-size:36px;margin-bottom:8px">📡</div><div style="color:var(--mint);font-weight:800;font-size:16px;margin-bottom:8px">Signal</div><div class="story" style="font-size:12px">If watermark is alive<br><strong>direct detection</strong> proves ownership</div></div>
314
- <div style="text-align:center;font-size:28px;color:#475569;animation:breathe 2s ease infinite">＋</div>
315
- <div class="cd fi d2" style="text-align:center;background:linear-gradient(135deg,var(--card),rgba(192,132,252,.03));border-color:rgba(192,132,252,.2)"><div style="font-size:36px;margin-bottom:8px">🔍</div><div style="color:var(--purple);font-weight:800;font-size:16px;margin-bottom:8px">Trace</div><div class="story" style="font-size:12px">If watermark was attacked<br><strong>attack trace</strong> is evidence</div></div>
316
  </div>
317
- <div style="text-align:center;margin-top:20px"><div style="display:inline-block;padding:14px 28px;border-radius:12px;background:linear-gradient(135deg,rgba(127,255,219,.06),rgba(192,132,252,.06));border:1px solid rgba(127,255,219,.2)"><span style="color:#fff;font-weight:700;font-size:14px">Alive →</span><span style="color:var(--mint);font-weight:800"> Direct Evidence</span><span style="color:#475569;margin:0 8px">|</span><span style="color:#fff;font-weight:700;font-size:14px">Dead →</span><span style="color:var(--red);font-weight:800"> Killing trace is evidence</span></div></div>
318
  </div>
319
 
320
- <!-- ★ Competitive Edge -->
321
  <div style="padding:30px 0 50px">
322
  <h2 style="font-size:22px;font-weight:800;text-align:center;margin-bottom:28px">Why <span style="color:var(--mint)">StealthMark</span>?</h2>
323
- <div style="max-width:820px;margin:0 auto;border-radius:16px;overflow:hidden;border:1px solid var(--border)">
324
- <table style="width:100%;border-collapse:collapse;font-size:13px">
325
- <thead><tr style="background:#0f1629"><th style="padding:14px 16px;text-align:left;color:#94a3b8;font-weight:700;border-bottom:2px solid var(--border)">Feature</th><th style="padding:14px 16px;text-align:center;border-bottom:2px solid rgba(127,255,219,.3)"><span style="color:var(--mint);font-weight:800">StealthMark</span></th><th style="padding:14px 16px;text-align:center;color:#64748b;font-weight:700;border-bottom:2px solid var(--border)">Competitor A</th><th style="padding:14px 16px;text-align:center;color:#64748b;font-weight:700;border-bottom:2px solid var(--border)">Competitor B</th></tr></thead>
326
  <tbody id="compTb"></tbody>
327
- </table>
328
- </div>
329
- </div>
330
 
331
- <!-- ★ Customer Journey -->
332
  <div style="padding:20px 0 80px">
333
  <h2 style="font-size:22px;font-weight:800;text-align:center;margin-bottom:32px">Customer Journey <span style="color:var(--orange)">Timeline</span></h2>
334
  <div style="max-width:800px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:12px">
335
- <div class="cd fi" style="text-align:center;border-color:rgba(255,170,102,.2);padding:20px 12px"><div style="font-size:28px;margin-bottom:8px">📋</div><div style="color:var(--orange);font-weight:800;font-size:20px;margin-bottom:4px">Day 0</div><div style="color:#fff;font-weight:700;font-size:13px;margin-bottom:6px">Instant Start</div><div style="color:#94a3b8;font-size:11px;line-height:1.6">Radar™ Activate<br>Text+Image Archive<br>Instant Monitoring</div></div>
336
- <div class="cd fi d1" style="text-align:center;border-color:rgba(127,255,219,.2);padding:20px 12px"><div style="font-size:28px;margin-bottom:8px">🔏</div><div style="color:var(--mint);font-weight:800;font-size:20px;margin-bottom:4px">Week 1</div><div style="color:#fff;font-weight:700;font-size:13px;margin-bottom:6px">Shield™ Embedding Complete</div><div style="color:#94a3b8;font-size:11px;line-height:1.6">Text 4-Layer Protection<br>Image DCT Watermark<br>Zero Visibility</div></div>
337
- <div class="cd fi d2" style="text-align:center;border-color:rgba(192,132,252,.2);padding:20px 12px"><div style="font-size:28px;margin-bottom:8px">🎯</div><div style="color:var(--purple);font-weight:800;font-size:20px;margin-bottom:4px">Month 1</div><div style="color:#fff;font-weight:700;font-size:13px;margin-bottom:6px">First Detection Report</div><div style="color:#94a3b8;font-size:11px;line-height:1.6">Unauthorized Use Detection<br>DualAxis™ Analysis<br>Evidence Package Generation</div></div>
338
- <div class="cd fi d3" style="text-align:center;border-color:rgba(255,107,107,.2);padding:20px 12px"><div style="font-size:28px;margin-bottom:8px">⚖️</div><div style="color:var(--red);font-weight:800;font-size:20px;margin-bottom:4px">Month 2+</div><div style="color:#fff;font-weight:700;font-size:13px;margin-bottom:6px">Legal Action</div><div style="color:#94a3b8;font-size:11px;line-height:1.6">Seal™ Evidence<br>Settlement/Litigation<br>ROI Recovery</div></div>
339
  </div>
340
- <div style="text-align:center;margin-top:24px"><div style="display:inline-block;padding:14px 28px;border-radius:14px;background:var(--card);border:1px solid var(--border)"><span style="color:#94a3b8;font-size:13px">/mo Catch just 1 unauthorized use →</span><span style="color:var(--mint);font-weight:800;font-size:15px"> Protect millions in annual content value</span></div></div>
341
  </div>
342
  </section>
343
 
344
- <!-- ═══════════════ LEADERBOARD ═══════════════ -->
345
  <section id="lb">
346
  <div style="padding:40px 0 80px">
347
- <div style="text-align:center;margin-bottom:40px" class="fi"><div style="font-size:13px;color:var(--purple);font-weight:700;letter-spacing:3px;margin-bottom:8px">TECHNOLOGY BENCHMARK</div><h2 style="font-size:32px;font-weight:900;letter-spacing:-1px"><span style="color:#fff">Content Protection </span><span style="color:var(--mint)">Tech Comparison</span></h2><p style="color:#94a3b8;font-size:14px;margin-top:8px">Text watermarking 6-axis quantitative comparison + Image/Video multimodal support</p></div>
348
  <div style="display:grid;grid-template-columns:1fr 280px;gap:24px">
349
- <div class="cd fi" style="padding:0;overflow:hidden"><div class="lh"><span>#</span><span>Tech</span><span>Type</span><span style="text-align:center">🛡️</span><span style="text-align:center">🏗️</span><span style="text-align:center">🇰🇷</span><span style="text-align:center">⚡</span><span style="text-align:center">🔍</span><span style="text-align:center">⚖️</span><span style="text-align:center">typesTotal</span></div><div id="lbb"></div></div>
350
  <div class="cd fi d2" id="lbd" style="text-align:center"></div>
351
  </div>
352
- <div style="display:flex;gap:16px;justify-content:center;margin-top:20px;flex-wrap:wrap"><span style="font-size:11px;color:#64748b">🛡️Threats 🏗️Defense 🇰🇷Korean ⚡Real-time 🔍Trace Detection ⚖️Legal Evidence</span><span style="font-size:11px;color:#334155">|</span><span style="font-size:11px;color:var(--mint)">●80+</span><span style="font-size:11px;color:var(--yellow)">●50+</span><span style="font-size:11px;color:var(--orange)">●25+</span><span style="font-size:11px;color:var(--red)">●0+</span></div>
353
- </div>
354
- </section>
355
 
356
- <!-- ═══════════════ THREATS ═══════════════ -->
357
  <section id="atk">
358
  <div style="padding:40px 0">
359
- <div style="text-align:center;margin-bottom:40px" class="fi"><div style="font-size:13px;color:var(--red);font-weight:700;letter-spacing:3px;margin-bottom:8px">STEALTHMARK THREATMATRIX™</div><h2 style="font-size:32px;font-weight:900;letter-spacing:-1px">34types Threat <span style="color:var(--mint)">Coverage</span></h2><p style="color:#94a3b8;font-size:14px;margin-top:8px">7 threat groups × 34 scenarios — layer survival status</p></div>
360
  <div class="ag" id="agg"></div>
361
  <div class="cd fi" style="margin-top:32px">
362
- <h3 style="font-size:16px;font-weight:800;text-align:center;margin-bottom:20px;color:#fff">StealthMark <span style="color:var(--mint)">CrossGuard™</span> Dual Shield</h3>
363
  <div style="display:grid;grid-template-columns:1fr 60px 1fr;gap:20px;align-items:center;max-width:600px;margin:0 auto">
364
- <div style="text-align:center;padding:16px;border-radius:12px;background:rgba(255,107,107,.06);border:1px solid rgba(255,107,107,.2)"><div style="font-weight:800;color:var(--red);margin-bottom:6px">Phantom™ Attacked</div><div style="font-size:20px;margin-bottom:4px">❌ → ✅</div><div style="font-size:11px;color:#94a3b8">Phantom disabled → MicroGlyph survives</div></div>
365
  <div style="text-align:center;font-size:28px;animation:float 2s ease infinite">⚖️<div style="font-size:10px;color:var(--mint);font-weight:700;margin-top:4px">Seesaw</div></div>
366
- <div style="text-align:center;padding:16px;border-radius:12px;background:rgba(192,132,252,.06);border:1px solid rgba(192,132,252,.2)"><div style="font-weight:800;color:var(--purple);margin-bottom:6px">MicroGlyph™ Attacked</div><div style="font-size:20px;margin-bottom:4px">✅ → ❌</div><div style="font-size:11px;color:#94a3b8">MicroGlyph disabled → Phantom survives</div></div>
367
  </div>
368
- <div style="text-align:center;margin-top:16px;padding:10px 20px;border-radius:10px;background:rgba(127,255,219,.04)"><span style="color:var(--mint);font-weight:800;font-size:13px">No single attack can disable both simultaneously</span> <span style="color:#64748b;font-size:12px">+ StyleDNA™ survives any attack</span></div>
369
- </div>
370
- </div>
371
- </section>
372
 
373
- <!-- ═══════════════ PIPELINE ═══════════════ -->
374
  <section id="pipe">
375
  <div style="padding:40px 0 80px">
376
- <div style="text-align:center;margin-bottom:40px" class="fi"><div style="font-size:13px;color:var(--purple);font-weight:700;letter-spacing:3px;margin-bottom:8px">BUSINESS PIPELINE</div><h2 style="font-size:32px;font-weight:900;letter-spacing:-1px"><span style="color:var(--orange)">Radar™</span> → <span style="color:var(--mint)">Shield™</span> → <span style="color:var(--red)">Seal™</span></h2><p style="color:#94a3b8;font-size:14px;margin-top:8px">Text · Image · Video — Complete Content Protection Lifecycle</p></div>
377
  <div class="rs">
378
- <div class="rr" style="top:35%;left:35%;width:30%;height:30%;border-color:rgba(127,255,219,.12)"></div>
379
- <div class="rr" style="top:22.5%;left:22.5%;width:55%;height:55%;border-color:rgba(127,255,219,.1)"></div>
380
- <div class="rr" style="top:10%;left:10%;width:80%;height:80%;border-color:rgba(127,255,219,.08)"></div>
381
- <div class="rr" style="top:0;left:0;width:100%;height:100%;border-color:rgba(127,255,219,.15)"></div>
382
  <div class="rw"><div class="ra"></div></div><div class="rc"></div>
383
- <div class="rb" style="top:25%;left:30%"><div class="rd" style="background:var(--red);box-shadow:0 0 8px var(--red)"></div><div class="rl" style="color:var(--red)">AI Platforms A</div></div>
384
- <div class="rb" style="top:35%;left:70%"><div class="rd" style="background:var(--orange);box-shadow:0 0 8px var(--orange);animation-delay:.5s"></div><div class="rl" style="color:var(--orange)">Datasets B</div></div>
385
- <div class="rb" style="top:72%;left:55%"><div class="rd" style="background:var(--yellow);box-shadow:0 0 8px var(--yellow);animation-delay:1s"></div><div class="rl" style="color:var(--yellow)">Competitors C</div></div>
386
- <div class="rb" style="top:65%;left:20%"><div class="rd" style="background:var(--red);box-shadow:0 0 8px var(--red);animation-delay:1.5s"></div><div class="rl" style="color:var(--red)">Crawlers D</div></div>
387
  <div style="position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--mint);font-weight:700">📡 StealthMark Radar™</div>
388
  </div>
389
  <div style="position:relative;max-width:700px;margin:0 auto" id="psteps"><div class="pl"></div></div>
390
  <div style="text-align:center;margin-top:48px">
391
- <div class="cd" style="display:inline-block;padding:24px 40px;border-radius:20px;background:linear-gradient(135deg,var(--card),var(--card2));border-color:rgba(127,255,219,.2)">
392
- <div style="font-size:18px;font-weight:800;color:#fff;margin-bottom:8px">Content ID-based <span style="color:var(--mint)">Auto Detection</span> → <span style="color:var(--red)">Legal Team Handoff</span></div>
393
- <div style="color:#94a3b8;font-size:13px;line-height:1.7">Radar™ periodically scans key targets → DualAxis™ cross-verification<br>Seal™ auto-generates Evidence Packages → handed off to legal team</div>
394
  <div style="display:flex;gap:12px;justify-content:center;margin-top:16px">
395
- <span style="padding:6px 14px;border-radius:8px;background:rgba(127,255,219,.08);color:var(--mint);font-size:12px;font-weight:700">Unauthorized Training Detection</span>
396
- <span style="padding:6px 14px;border-radius:8px;background:rgba(192,132,252,.08);color:var(--purple);font-size:12px;font-weight:700">Copyright Infringement Proof</span>
397
- <span style="padding:6px 14px;border-radius:8px;background:rgba(255,107,107,.08);color:var(--red);font-size:12px;font-weight:700">Settlement/Litigation Support</span>
398
  </div></div></div>
399
- </div>
400
- </section>
401
  </main>
402
- <footer>StealthMark — Text · Image · Video Unified Content Protection Platform | Phantom™ · StyleDNA™ · Seal™ · MicroGlyph™ · CrossGuard™ · DualAxis™ · Radar™ | © 2025 Ginigen AI</footer>
403
 
404
  <script>
405
  const D=[
406
  {r:1,b:"🥇",n:"StealthMark",c:"🇰🇷",t:"Commercial",d:"4-Layer Patent Defense + DualAxis™ + Radar™",s:[100,100,100,95,100,95],T:98,cl:"var(--mint)",h:["ThreatMatrix™ 34types Coverage","CrossGuard™ Dual Shield","DualAxis™ Trace Verdict"]},
407
- {r:2,b:"🥈",n:"Embedding-based Academic",c:"🇰🇷",t:"Academic",d:"Semantic vector similarity based",s:[70,50,60,30,40,45],T:49,cl:"#94a3b8",h:["Partial paraphrasing response","Real-time difficult","GPU required"]},
408
- {r:3,b:"🥉",n:"SynthID-Text",c:"🇺🇸",t:"Commercial",d:"Google — LLM only",s:[65,25,10,80,0,30],T:35,cl:"#94a3b8",h:["LLM output only","No Korean support"]},
409
- {r:4,b:"4",n:"Stats-based WM",c:"🇺🇸",t:"Academic",d:"Token probability distribution manipulation",s:[55,25,20,70,0,25],T:33,cl:"#64748b",h:["Weak against paraphrasing","Model access required"]},
410
- {r:5,b:"5",n:"Single Channel WM",c:"🌐",t:"Open Source",d:"Single invisible char only",s:[40,25,50,90,0,15],T:37,cl:"#64748b",h:["Single attack destroys all","No legal evidence"]},
411
- {r:6,b:"6",n:"OpenAI Text WM",c:"🇺🇸",t:"Commercial",d:"Stats-based — Project discontinued",s:[50,25,15,75,10,35],T:35,cl:"#64748b",h:["Weak paraphrasing","Project discontinued"]}
412
  ];
413
  const AX=["Threat","Defense","Korean","Realtime","Trace","Legal"],IC=["🛡️","🏗️","🇰🇷","⚡","🔍","⚖️"];
414
  const AG=[
415
  {i:"🔤",n:"Normalization",c:4,rk:"layers",cl:"var(--blue)",a:["NFC","NFKC","NFD","NFKD"],sv:["✅","⚠️","✅"],d:"Attacks that normalize text to standard form"},
416
- {i:"👻",n:"Invisible Removal",c:5,rk:"High",cl:"var(--red)",a:["Partial Removal","Full Removal","By Category","Combined Removal","Printable Only"],sv:["❌→Trace","✅","✅"],d:"Attacks targeting Phantom™ directly"},
417
  {i:"🎯",n:"Micro Targeting",c:3,rk:"Max",cl:"var(--purple)",a:["Full Removal","Partial A","Partial B"],sv:["✅","✅","❌→Trace"],d:"Attacks targeting MicroGlyph™ directly"},
418
  {i:"✏️",n:"Edit Cleanup",c:5,rk:"Low~High",cl:"var(--yellow)",a:["Whitespace","Newlines","Punct Unify","Punct Remove","Cleanup"],sv:["✅","✅","✅"],d:"Standard text editing/cleanup"},
419
  {i:"🧩",n:"Extreme Purification",c:5,rk:"Max",cl:"var(--orange)",a:["Basic Chars","Alphanumeric","Lowercase","Homoglyph","Emoji Remove"],sv:["⚠️","✅","⚠️"],d:"Attacks that extremely purify text"},
@@ -425,42 +388,42 @@ const PS=[
425
  {i:"📡",t:"Content Distribution",d:"Watermark is fully invisible — normal distribution",dt:"Zero impact on readers and users",cl:"var(--blue)"},
426
  {i:"🔍",t:"DualAxis™ Detection",d:"Signal + Trace dual-axis cross verdict",dt:"Attack profiling via multi-pipeline",cl:"var(--purple)"},
427
  {i:"📋",t:"Seal™ Evidence",d:"Auto-generate legal evidence report",dt:"Digital seal + timestamp + analysis log",cl:"var(--yellow)"},
428
- {i:"⚖️",t:"Legal Handoff",d:"Deliver evidence package to legal team",dt:"Copyright infringement lawsuit, settlement & correction",cl:"var(--red)"}
429
  ];
430
  const COMP=[
431
  {f:"Pre-embed Text Protection",sm:"✅ Radar™ 7 modes",a:"❌",b:"❌",h:true},
432
  {f:"Text Watermark",sm:"✅ 4-Layer Patent Tech",a:"⚠️ Single channel",b:"⚠️ Statistics-based"},
433
- {f:"🖼️ Image Similarity Detection",sm:"✅ 5-Mode AI Analysis",a:"❌",b:"❌",h:true},
434
- {f:"🖼️ Image Watermark",sm:"✅ DCT Frequency Domain",a:"❌",b:"⚠️ Pixel only"},
435
- {f:"🎬 Video Protection",sm:"✅ DTW + DCT Propagation",a:"❌",b:"❌"},
436
  {f:"Korean Optimization",sm:"✅ Morpheme-based",a:"❌",b:"❌"},
437
  {f:"Threat Coverage",sm:"✅ 34types 100%",a:"⚠️ 5-10 types",b:"⚠️ Weak"},
438
  {f:"Dual-Axis Verdict",sm:"✅ DualAxis™",a:"❌",b:"❌"},
439
- {f:"Legal Evidence Package",sm:"✅ Seal™ Auto",a:"❌",b:"⚠️ Manual"},
440
- {f:"Multimodal Integration",sm:"✅ Text+Image+Video",a:"❌ Text only",b:"❌ Image only",h:true}
441
  ];
442
  const ctb=document.getElementById('compTb');
443
- if(ctb)ctb.innerHTML=COMP.map(c=>{const hl=c.h?'background:rgba(255,170,102,.03);':'';const fc=c.h?'color:var(--orange);font-weight:700':'color:#cbd5e1';return `<tr style="${hl}border-bottom:1px solid var(--border)"><td style="padding:10px 16px;${fc};font-size:13px">${c.f}</td><td style="padding:10px 16px;text-align:center;font-size:12px;font-weight:600;color:${c.sm.startsWith('✅')?'var(--mint)':'#94a3b8'}">${c.sm}</td><td style="padding:10px 16px;text-align:center;font-size:12px;color:#64748b">${c.a}</td><td style="padding:10px 16px;text-align:center;font-size:12px;color:#64748b">${c.b}</td></tr>`}).join('');
444
 
445
  document.querySelectorAll('.tb').forEach(b=>{b.onclick=()=>{document.querySelectorAll('.tb').forEach(x=>x.classList.remove('a'));b.classList.add('a');document.querySelectorAll('section').forEach(s=>s.classList.remove('a'));document.getElementById(b.dataset.t).classList.add('a')}});
446
 
447
- const MET=[{v:34,s:"types",l:"Text Threats",u:"ThreatMatrix™ 100%",cl:"var(--mint)"},{v:4,s:"layers",l:"Text Layers",u:"CrossGuard™ Dual Shield",cl:"var(--purple)"},{v:5,s:"modes",l:"Image Analysis",u:"Hash+SSIM+Color+Feature",cl:"var(--pink)"},{v:7,s:"modes",l:"Radar™",u:"Instant pre-embed protection",cl:"var(--orange)"},{v:3,s:"axes",l:"Multimodal",u:"Text+Image+Video",cl:"var(--blue)"},{v:0,s:"px",l:"Visibility",u:"Fully Transparent",cl:"var(--red)",fix:"0"}];
448
- document.getElementById('metrics').innerHTML=MET.map((m,i)=>`<div class="mc fi d${i+1}" style="border:1px solid color-mix(in srgb,${m.cl} 15%,transparent)"><div style="font-size:36px;font-weight:900;color:${m.cl}">${m.fix||'<span class="ctr" data-e="'+m.v+'">0</span>'}${m.s}</div><div style="font-size:13px;font-weight:700;color:#fff;margin-bottom:2px">${m.l}</div><div style="font-size:10px;color:#64748b">${m.u}</div></div>`).join('');
449
  const obs=new IntersectionObserver(es=>{es.forEach(e=>{if(e.isIntersecting)e.target.querySelectorAll('.ctr').forEach(el=>{if(el.dataset.done)return;el.dataset.done='1';const end=+el.dataset.e,st=performance.now();(function f(n){const p=Math.min((n-st)/1500,1);el.textContent=Math.round((1-Math.pow(1-p,3))*end);if(p<1)requestAnimationFrame(f)})(st)})})},{threshold:.3});
450
  document.querySelectorAll('.mc').forEach(e=>obs.observe(e));
451
 
452
  let sel=0;
453
  function sc(v){return v>=80?'var(--mint)':v>=50?'var(--yellow)':v>=25?'var(--orange)':'var(--red)'}
454
- function tc(t){return t==='Commercial'?'var(--mint)':t==='Academic'?'var(--purple)':'#94a3b8'}
455
- function tbc(t){return t==='Commercial'?'rgba(127,255,219,.08)':t==='Academic'?'rgba(192,132,252,.08)':'#1e293b'}
456
- function bLB(){document.getElementById('lbb').innerHTML=D.map((c,i)=>`<div class="lr${i===sel?' sel':''}" onclick="sel=${i};bLB();bDt()"><span style="font-size:${c.r<=3?18:13}px;font-weight:800;${c.r>3?'color:#64748b':''}">${c.b}</span><div><div style="font-weight:700;font-size:13px;color:${c.r===1?'var(--mint)':'#e2e8f0'}">${c.c} ${c.n}</div><div style="font-size:10px;color:#64748b;margin-top:1px">${c.d}</div></div><span style="font-size:10px;padding:2px 6px;border-radius:4px;background:${tbc(c.t)};color:${tc(c.t)};font-weight:600;text-align:center">${c.t}</span>${c.s.map(s=>`<span style="text-align:center;font-size:12px;font-weight:700;color:${sc(s)}">${s}</span>`).join('')}<span style="text-align:center;font-size:16px;font-weight:900;color:${c.r===1?'var(--mint)':c.cl}">${c.T}</span></div>`).join('')}
457
- function bDt(){const c=D[sel],m=c.r===1,bc=m?'var(--mint)':'#94a3b8';const sz=200,cx=100,cy=100,r=76,st=Math.PI/3;const pt=(v,i)=>({x:cx+(r*v/100)*Math.cos(st*i*2-Math.PI/2),y:cy+(r*v/100)*Math.sin(st*i*2-Math.PI/2)});let svg='';[25,50,75,100].forEach(lv=>{const ps=Array.from({length:6},(_,i)=>pt(lv,i));svg+=`<polygon points="${ps.map(p=>p.x+','+p.y).join(' ')}" fill="none" stroke="#334155" stroke-width="${lv===100?1.5:.5}" ${lv<100?'stroke-dasharray="2,3"':''}/>`;});Array.from({length:6},(_,i)=>{const p=pt(100,i);svg+=`<line x1="${cx}" y1="${cy}" x2="${p.x}" y2="${p.y}" stroke="#334155" stroke-width=".5"/>`;});const dp=c.s.map((s,i)=>pt(s,i));svg+=`<polygon points="${dp.map(p=>p.x+','+p.y).join(' ')}" fill="${m?'rgba(127,255,219,.12)':'rgba(148,163,184,.12)'}" stroke="${bc}" stroke-width="2"/>`;dp.forEach(p=>{svg+=`<circle cx="${p.x}" cy="${p.y}" r="3.5" fill="${bc}" stroke="var(--bg)" stroke-width="1.5"/>`;});IC.forEach((ic,i)=>{const p=pt(120,i);svg+=`<text x="${p.x}" y="${p.y}" text-anchor="middle" dominant-baseline="middle" fill="#94a3b8" font-size="10">${ic}</text>`;});document.getElementById('lbd').innerHTML=`<div style="font-size:28px;margin-bottom:4px">${c.b}</div><div style="font-weight:800;font-size:16px;color:${m?'var(--mint)':'#fff'}">${c.n}</div><div style="font-size:11px;color:#64748b;margin:4px 0 12px">${c.d}</div><div style="display:flex;justify-content:center;margin-bottom:12px"><svg width="${sz}" height="${sz}" viewBox="0 0 ${sz} ${sz}">${svg}</svg></div>${AX.map((a,i)=>`<div class="sr"><span class="sl">${IC[i]} ${a}</span><div class="st"><div class="sf" style="width:${c.s[i]}%;background:linear-gradient(90deg,${bc}88,${bc});animation-delay:${i*80}ms"></div></div><span class="sn" style="color:${bc}">${c.s[i]}</span></div>`).join('')}<div style="margin-top:16px;text-align:left">${c.h.map(h=>`<div style="padding:3px 0;font-size:11px;color:#94a3b8"><span style="color:${m?'var(--mint)':'#64748b'};margin-right:6px">→</span>${h}</div>`).join('')}</div>`}
458
  bLB();bDt();
459
 
460
  const SL=["Phantom™","StyleDNA™","MicroGlyph™"];
461
- document.getElementById('agg').innerHTML=AG.map((g,i)=>`<div class="ac fi" style="animation-delay:${i*.08}s;border:1px solid color-mix(in srgb,${g.cl} 20%,transparent)"><div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px"><div><span style="font-size:24px;margin-right:8px">${g.i}</span><span style="font-weight:800;font-size:15px;color:#fff">${g.n}</span></div><span style="padding:3px 10px;border-radius:8px;background:color-mix(in srgb,${g.cl} 12%,transparent);color:${g.cl};font-size:11px;font-weight:700">${g.rk}</span></div><div style="font-size:12px;color:#cbd5e1;margin-bottom:12px;line-height:1.5">${g.d}</div><div style="margin-bottom:12px;display:flex;flex-wrap:wrap;gap:4px">${g.a.map(a=>`<span class="at">${a}</span>`).join('')}</div><div class="svr">${SL.map((l,j)=>`<div class="svi"><div class="svl">${l}</div><div class="svv">${g.sv[j]}</div></div>`).join('')}</div><div style="text-align:center;margin-top:8px"><span style="font-size:22px;font-weight:900;color:${g.cl}">${g.c}</span><span style="font-size:11px;color:#64748b;margin-left:4px">types</span></div></div>`).join('');
462
 
463
- document.getElementById('psteps').innerHTML='<div class="pl"></div>'+PS.map((s,i)=>`<div class="ps fi" style="animation-delay:${i*.1}s"><div class="pn" style="background:color-mix(in srgb,${s.cl} 8%,transparent);border:2px solid color-mix(in srgb,${s.cl} 30%,transparent)">${s.i}</div><div class="cd" style="flex:1;padding:14px 20px;border-color:color-mix(in srgb,${s.cl} 15%,transparent)"><div style="display:flex;align-items:center;gap:8px;margin-bottom:6px"><span style="color:${s.cl};font-weight:800;font-size:14px">${s.t}</span><span style="font-size:10px;padding:2px 8px;border-radius:6px;background:color-mix(in srgb,${s.cl} 8%,transparent);color:${s.cl};font-weight:700">Step ${i+1}</span></div><div style="color:#e2e8f0;font-size:13px;margin-bottom:4px">${s.d}</div><div style="color:#64748b;font-size:11px">${s.dt}</div></div></div>`).join('');
464
  </script>
465
  </body>
466
  </html>
 
6
  <title>StealthMark — Content Protection Platform</title>
7
  <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.min.css" rel="stylesheet">
8
  <style>
9
+ :root{--mint:#0d9488;--mint-bg:rgba(13,148,136,.06);--mint-border:rgba(13,148,136,.15);--purple:#7c3aed;--purple-bg:rgba(124,58,237,.06);--purple-border:rgba(124,58,237,.15);--red:#dc2626;--red-bg:rgba(220,38,38,.06);--red-border:rgba(220,38,38,.15);--orange:#d97706;--orange-bg:rgba(217,119,6,.06);--orange-border:rgba(217,119,6,.15);--yellow:#ca8a04;--yellow-bg:rgba(202,138,4,.06);--blue:#2563eb;--blue-bg:rgba(37,99,235,.06);--blue-border:rgba(37,99,235,.15);--pink:#db2777;--pink-bg:rgba(219,39,119,.06);--pink-border:rgba(219,39,119,.15);--bg:#f8f9fc;--bg-deep:#f0f2f8;--surface:#ffffff;--surface-alt:#f5f6fa;--card:#ffffff;--card2:#f8f9fc;--border:#e2e5f0;--border-hover:#c7cce0;--text:#0f172a;--text-sec:#475569;--text-muted:#94a3b8;--shadow-sm:0 1px 3px rgba(15,23,42,.04),0 1px 2px rgba(15,23,42,.06);--shadow:0 4px 16px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.08);--shadow-lg:0 12px 40px rgba(15,23,42,.08)}
10
+ *{box-sizing:border-box;margin:0;padding:0}
11
+ body{background:var(--bg);color:var(--text);font-family:'Pretendard',-apple-system,sans-serif;line-height:1.5;overflow-x:hidden}
12
+ ::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(99,102,241,.2);border-radius:3px}
13
+ ::selection{background:rgba(13,148,136,.12)}
14
  @keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
15
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
16
+ @keyframes pulse{0%,100%{box-shadow:var(--shadow-sm)}50%{box-shadow:var(--shadow)}}
17
  @keyframes sweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
18
  @keyframes barFill{from{width:0}}
19
  @keyframes blipPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.8);opacity:.3}}
20
+ @keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}}
21
  .fi{animation:fadeIn .6s ease both}.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}.d4{animation-delay:.4s}
22
+
23
+ nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm)}
24
  .ni{max-width:1200px;margin:0 auto;display:flex;align-items:center;height:56px;padding:0 24px}
25
  .logo{display:flex;align-items:center;gap:10px;margin-right:40px}
26
  .li{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--mint),var(--purple));display:flex;align-items:center;justify-content:center;font-size:14px}
27
+ .tb{padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-size:13px;font-weight:600;background:transparent;color:var(--text-muted);transition:all .2s;font-family:inherit}
28
+ .tb:hover{color:var(--text-sec);background:var(--surface-alt)}
29
+ .tb.a{background:var(--mint-bg);color:var(--mint);border:1px solid var(--mint-border)}
30
  main{max-width:1200px;margin:0 auto;padding:0 24px}section{display:none}section.a{display:block}
31
+
32
+ .cd{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;transition:all .3s;box-shadow:var(--shadow-sm)}
33
+ .cd:hover{box-shadow:var(--shadow);border-color:var(--border-hover)}
34
+ .mc{width:150px;padding:28px 18px;border-radius:16px;background:var(--surface);border:1.5px solid var(--border);text-align:center;animation:pulse 3s ease infinite;box-shadow:var(--shadow-sm)}
35
  .sr{display:flex;align-items:center;gap:8px;margin-bottom:6px}
36
+ .sl{color:var(--text-muted);font-size:11px;width:80px;text-align:right}
37
+ .st{flex:1;height:8px;background:var(--bg-deep);border-radius:4px;overflow:hidden;border:1px solid var(--border)}
38
+ .sf{height:100%;border-radius:4px;animation:barFill 1.2s cubic-bezier(.4,0,.2,1) both}
39
+ .sn{font-size:12px;font-weight:700;width:32px;text-align:right}
40
+ .lh{display:grid;grid-template-columns:40px 1fr 56px repeat(6,48px) 52px;padding:12px 16px;background:var(--surface-alt);border-bottom:1px solid var(--border);gap:4px}
41
+ .lh span{color:var(--text-muted);font-size:10px;font-weight:700}
42
+ .lr{display:grid;grid-template-columns:40px 1fr 56px repeat(6,48px) 52px;padding:12px 16px;gap:4px;align-items:center;cursor:pointer;border-bottom:1px solid var(--border);border-left:3px solid transparent;transition:all .2s}
43
+ .lr:hover{background:var(--surface-alt)}
44
+ .lr.sel{background:var(--mint-bg);border-left-color:var(--mint)}
45
  .ag{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
46
+ .ac{padding:20px;border-radius:16px;cursor:pointer;transition:all .3s;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
47
+ .ac:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
48
+ .at{padding:2px 8px;border-radius:6px;background:var(--surface-alt);color:var(--text-muted);font-size:10px;font-weight:600;display:inline-block;margin:2px;border:1px solid var(--border)}
49
  .svr{display:flex;gap:12px;padding-top:10px;border-top:1px solid var(--border)}
50
+ .svi{text-align:center;flex:1}.svl{font-size:10px;color:var(--text-muted);margin-bottom:2px}.svv{font-size:14px}
51
  .pl{position:absolute;left:24px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--mint),var(--purple),var(--red));border-radius:1px}
52
  .ps{display:flex;gap:20px;margin-bottom:20px;position:relative}
53
  .pn{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;position:relative;z-index:1}
 
55
  .rr{position:absolute;border-radius:50%;border:1px solid}
56
  .rw{position:absolute;top:0;left:0;width:100%;height:100%;animation:sweep 4s linear infinite}
57
  .ra{position:absolute;top:50%;left:50%;width:50%;height:2px;transform-origin:left center;background:linear-gradient(90deg,var(--mint),transparent)}
58
+ .rc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px rgba(13,148,136,.4)}
59
  .rb{position:absolute;transform:translate(-50%,-50%)}
60
  .rd{width:8px;height:8px;border-radius:50%;animation:blipPulse 2s ease infinite}
61
  .rl{position:absolute;top:14px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9px;font-weight:700}
62
+ .story{color:var(--text-sec);font-size:14px;line-height:1.9}.story strong{color:var(--text)}
63
  @media(max-width:768px){.ag{grid-template-columns:1fr}.lh,.lr{grid-template-columns:32px 1fr 44px repeat(6,36px) 44px;font-size:10px}.mc{width:130px}}
64
+ footer{border-top:1px solid var(--border);padding:20px 24px;text-align:center;color:var(--text-muted);font-size:11px;background:var(--surface)}
65
  </style>
66
  </head>
67
  <body>
68
  <nav><div class="ni">
69
+ <div class="logo"><div class="li">🔒</div><div style="font-weight:800;font-size:16px;letter-spacing:-.5px"><span style="color:var(--mint)">Stealth</span><span style="color:var(--text)">Mark</span><span style="color:var(--text-muted);font-size:11px;margin-left:6px">Platform</span></div></div>
70
  <div id="tabs" style="display:flex;gap:4px">
71
  <button class="tb a" data-t="hero">⚡ Home</button><button class="tb" data-t="lb">🏆 Tech Comparison</button><button class="tb" data-t="atk">🛡️ Threat Response</button><button class="tb" data-t="pipe">📡 Business</button>
72
  </div></div></nav>
73
  <main>
74
 
75
+ <!-- ═══ HERO ═══ -->
76
  <section id="hero" class="a">
77
  <div style="padding:80px 0 40px;text-align:center;position:relative">
78
+ <div style="position:absolute;top:20px;left:50%;transform:translateX(-50%);width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(13,148,136,.04),rgba(124,58,237,.02) 40%,transparent 70%);pointer-events:none"></div>
79
  <div style="font-size:13px;color:var(--purple);font-weight:700;letter-spacing:3px;margin-bottom:16px">TEXT · IMAGE · VIDEO — FULL SPECTRUM PROTECTION</div>
80
+ <h1 style="font-size:clamp(32px,6vw,52px);font-weight:900;line-height:1.15;margin-bottom:20px;letter-spacing:-2px"><span style="color:var(--text)">Text · Image · Video</span><br><span style="background:linear-gradient(135deg,var(--mint),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent">Complete Content Protection Platform</span></h1>
81
  <p class="story" style="max-width:720px;margin:0 auto 28px;font-size:17px">
82
  Pre-embed <span style="color:var(--orange);font-weight:700">AI Similarity Detection</span> for instant content protection<br>
83
  Post-embed <span style="color:var(--mint);font-weight:700">Multi-layer Watermark + Dual-Axis Verdict</span> for legal evidence<br>
84
  <span style="color:var(--purple);font-weight:700">Text 4-Layer + Image DCT + Video Temporal</span> — World's Only Full Spectrum
85
  </p>
86
  <div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:48px">
87
+ <span style="padding:7px 18px;border-radius:20px;background:var(--mint-bg);border:1px solid var(--mint-border);color:var(--mint);font-size:12px;font-weight:700;box-shadow:var(--shadow-sm)">📝 Text 4-Layer</span>
88
+ <span style="padding:7px 18px;border-radius:20px;background:var(--pink-bg);border:1px solid var(--pink-border);color:var(--pink);font-size:12px;font-weight:700;box-shadow:var(--shadow-sm)">🖼️ Image DCT</span>
89
+ <span style="padding:7px 18px;border-radius:20px;background:var(--blue-bg);border:1px solid var(--blue-border);color:var(--blue);font-size:12px;font-weight:700;box-shadow:var(--shadow-sm)">🎬 Video Temporal</span>
90
+ <span style="padding:7px 18px;border-radius:20px;background:var(--orange-bg);border:1px solid var(--orange-border);color:var(--orange);font-size:12px;font-weight:700;box-shadow:var(--shadow-sm)">🛡️ Day 0 Instant Protection</span>
91
  </div>
92
  <div id="metrics" style="display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:40px"></div>
93
  </div>
94
 
95
+ <!-- THREE PILLARS -->
96
  <div style="padding:40px 0 50px">
97
  <div style="text-align:center;margin-bottom:12px"><span style="font-size:13px;color:var(--mint);font-weight:700;letter-spacing:3px">THREE PILLARS OF PROTECTION</span></div>
98
+ <h2 style="font-size:26px;font-weight:800;text-align:center;margin-bottom:8px">World's Only <span style="color:var(--mint)">3 Pillars</span> Unified Protection</h2>
99
+ <p style="text-align:center;color:var(--text-muted);font-size:14px;margin-bottom:36px">Protect all content types in one platform</p>
100
  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:0 auto">
101
 
102
+ <div class="cd fi" style="border-color:var(--mint-border);position:relative;overflow:hidden">
103
+ <div style="position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--mint),#06b6d4)"></div>
104
+ <div style="text-align:center;margin-bottom:16px"><div style="font-size:40px;margin-bottom:8px">📝</div><div style="color:var(--mint);font-weight:800;font-size:18px">Text</div><div style="font-size:11px;color:var(--text-muted)">TEXT PROTECTION</div></div>
105
+ <div style="padding:14px;border-radius:10px;background:var(--mint-bg);border:1px solid var(--mint-border);margin-bottom:14px">
 
106
  <div class="story" style="font-size:12px;line-height:1.8">
107
  <span style="color:var(--mint)">Pre-embed →</span> Radar™ 7-Mode Plagiarism Check<br>
108
  <span style="color:var(--mint)">Post-embed →</span> 4-Layer Stealth Watermark<br>
109
  <span style="color:var(--mint)">Verify →</span> DualAxis™ Dual-Axis Verdict
110
  </div></div>
111
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
112
+ <div style="padding:10px;border-radius:8px;background:var(--surface-alt);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--mint)">4</div><div style="font-size:9px;color:var(--text-muted)">Defense Layers</div></div>
113
+ <div style="padding:10px;border-radius:8px;background:var(--surface-alt);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--mint)">34</div><div style="font-size:9px;color:var(--text-muted)">Attack Response</div></div>
114
  </div>
115
+ <div style="margin-top:12px;text-align:center"><span style="padding:4px 12px;border-radius:8px;background:var(--mint-bg);color:var(--mint);font-size:10px;font-weight:700;border:1px solid var(--mint-border)">✅ Operational</span></div>
116
  </div>
117
 
118
+ <div class="cd fi d1" style="border-color:var(--pink-border);position:relative;overflow:hidden">
119
+ <div style="position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--pink),#f472b6)"></div>
120
+ <div style="text-align:center;margin-bottom:16px"><div style="font-size:40px;margin-bottom:8px">🖼️</div><div style="color:var(--pink);font-weight:800;font-size:18px">Image</div><div style="font-size:11px;color:var(--text-muted)">IMAGE PROTECTION</div></div>
121
+ <div style="padding:14px;border-radius:10px;background:var(--pink-bg);border:1px solid var(--pink-border);margin-bottom:14px">
 
122
  <div class="story" style="font-size:12px;line-height:1.8">
123
  <span style="color:var(--pink)">Pre-embed →</span> pHash+SSIM+Color+Features<br>
124
  <span style="color:var(--pink)">Post-embed →</span> DCT Frequency Domain Watermark<br>
125
  <span style="color:var(--pink)">Verify →</span> Watermark Extraction & Similarity Check
126
  </div></div>
127
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
128
+ <div style="padding:10px;border-radius:8px;background:var(--surface-alt);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--pink)">5</div><div style="font-size:9px;color:var(--text-muted)">Analysis Modes</div></div>
129
+ <div style="padding:10px;border-radius:8px;background:var(--surface-alt);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--pink)">38+</div><div style="font-size:9px;color:var(--text-muted)">dB PSNR</div></div>
130
  </div>
131
+ <div style="margin-top:12px;text-align:center"><span style="padding:4px 12px;border-radius:8px;background:var(--pink-bg);color:var(--pink);font-size:10px;font-weight:700;border:1px solid var(--pink-border)">✅ Operational</span></div>
132
  </div>
133
 
134
+ <div class="cd fi d2" style="border-color:var(--blue-border);position:relative;overflow:hidden">
135
+ <div style="position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),#60a5fa)"></div>
136
+ <div style="text-align:center;margin-bottom:16px"><div style="font-size:40px;margin-bottom:8px">🎬</div><div style="color:var(--blue);font-weight:800;font-size:18px">Video</div><div style="font-size:11px;color:var(--text-muted)">VIDEO PROTECTION</div></div>
137
+ <div style="padding:14px;border-radius:10px;background:var(--blue-bg);border:1px solid var(--blue-border);margin-bottom:14px">
 
138
  <div class="story" style="font-size:12px;line-height:1.8">
139
  <span style="color:var(--blue)">Pre-embed →</span> Keyframe Fingerprint+DTW<br>
140
  <span style="color:var(--blue)">Post-embed →</span> Temporal Propagation Watermark<br>
141
  <span style="color:var(--blue)">Verify →</span> Codec Robustness + Platform Radar
142
  </div></div>
143
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
144
+ <div style="padding:10px;border-radius:8px;background:var(--surface-alt);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--blue)">4</div><div style="font-size:9px;color:var(--text-muted)">Analysis Modes</div></div>
145
+ <div style="padding:10px;border-radius:8px;background:var(--surface-alt);text-align:center;border:1px solid var(--border)"><div style="font-size:20px;font-weight:900;color:var(--blue)">DTW</div><div style="font-size:9px;color:var(--text-muted)">Temporal Matching</div></div>
146
  </div>
147
+ <div style="margin-top:12px;text-align:center"><span style="padding:4px 12px;border-radius:8px;background:var(--blue-bg);color:var(--blue);font-size:10px;font-weight:700;border:1px solid var(--blue-border)">✅ Operational</span></div>
148
  </div>
149
  </div>
150
 
151
+ <!-- Image Detail -->
152
  <div style="max-width:960px;margin:36px auto 0">
153
+ <div class="cd fi d3" style="border-color:var(--pink-border)">
154
+ <div style="text-align:center;margin-bottom:20px"><div style="color:var(--pink);font-weight:800;font-size:18px">🖼️ Image Protection — How It Works</div><div style="color:var(--text-muted);font-size:12px;margin-top:4px">AI-regenerated images and edited copies — all caught</div></div>
155
  <div style="display:grid;grid-template-columns:1fr 40px 1fr;gap:16px;align-items:stretch">
156
+ <div style="padding:16px;border-radius:12px;background:var(--orange-bg);border:1px solid var(--orange-border)">
157
  <div style="color:var(--orange);font-weight:800;font-size:14px;margin-bottom:10px">📡 Pre-embed Protection</div>
158
+ <div class="story" style="font-size:12px;line-height:1.8"><strong>Perceptual Hash</strong> — Fingerprint robust against crop/compress<br><strong>SSIM Structure Analysis</strong> — Luminance/contrast/structure 3-axis<br><strong>Color Histogram</strong> — RGB distribution cross-validation<br><strong>Feature Matching</strong> — Edge-based similar structure detection<br><strong>Comprehensive AI Verdict</strong> — Weighted multi-layer similarity</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
159
  </div>
160
+ <div style="display:flex;align-items:center;justify-content:center"><div style="color:var(--text-muted);font-size:18px;animation:breathe 2s ease infinite">＋</div></div>
161
+ <div style="padding:16px;border-radius:12px;background:var(--mint-bg);border:1px solid var(--mint-border)">
162
+ <div style="color:var(--mint);font-weight:800;font-size:14px;margin-bottom:10px">🔏 Post-embed Protection</div>
163
+ <div class="story" style="font-size:12px;line-height:1.8"><strong>DCT Frequency Embed</strong> — Invisible encoding in mid-band<br><strong>PSNR 38+ dB</strong> — Visually indistinguishable quality<br><strong>SSIM 99%+</strong> — Identical visual quality to original<br><strong>JPEG Robust</strong> — Survives compression & resize<br><strong>Evidence Package</strong> — SHA-256 hash + timestamp</div>
164
  </div>
165
+ </div></div></div>
166
  </div>
167
 
168
+ <!-- DUAL SHIELD -->
169
  <div style="padding:40px 0 60px">
170
  <div style="text-align:center;margin-bottom:12px"><span style="font-size:13px;color:var(--orange);font-weight:700;letter-spacing:3px">DUAL SHIELD ARCHITECTURE</span></div>
171
+ <h2 style="font-size:26px;font-weight:800;text-align:center;margin-bottom:8px">What competitors lack: <span style="color:var(--mint)">Dual Protection</span> System</h2>
172
+ <p style="text-align:center;color:var(--text-muted);font-size:14px;margin-bottom:36px">AI protects existing content even without watermarks</p>
173
  <div style="display:grid;grid-template-columns:1fr 50px 1fr;gap:16px;max-width:920px;margin:0 auto;align-items:stretch">
174
 
175
+ <div class="cd fi" style="border-color:var(--orange-border);position:relative;overflow:hidden">
176
+ <div style="position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--orange),#f59e0b)"></div>
 
177
  <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
178
+ <div style="width:48px;height:48px;border-radius:14px;background:var(--orange-bg);display:flex;align-items:center;justify-content:center;font-size:24px;border:1px solid var(--orange-border)">📡</div>
179
+ <div><div style="color:var(--orange);font-weight:800;font-size:17px">StealthMark Radar™</div>
180
+ <div style="color:var(--text-muted);font-size:11px">Pre-embed — Works instantly without watermarks</div></div>
181
  </div>
182
+ <div style="padding:16px;border-radius:12px;background:var(--orange-bg);border:1px solid var(--orange-border);margin-bottom:14px">
183
  <div class="story" style="font-size:13px;line-height:1.9">
184
+ What if your article was copied without permission?<br>
185
  <strong>Radar™</strong> finds it with <span style="color:var(--orange)">Text 7 modes + Image 5 modes</span>.<br><br>
186
  <span style="color:var(--orange)">▸</span> <strong>Text Phrase Fingerprint</strong> — Compares your text's N-grams<br>
187
  <span style="color:var(--orange)">▸</span> <strong>Image Perceptual Hash</strong> — Detects edited copies too<br>
188
+ <span style="color:var(--orange)">▸</span> <strong>SSIM Structure Analysis</strong> — Image structural similarity<br>
189
  <span style="color:var(--orange)">▸</span> <strong>AI Rewrite/Regeneration Detection</strong> — Detects what AI modified
190
+ </div></div>
 
191
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px">
192
+ <div style="padding:12px;border-radius:10px;background:var(--surface-alt);text-align:center;border:1px solid var(--border)"><div style="font-size:24px;font-weight:900;color:var(--orange)">12</div><div style="font-size:10px;color:var(--text-muted)">Analysis Modes (7+5)</div></div>
193
+ <div style="padding:12px;border-radius:10px;background:var(--surface-alt);text-align:center;border:1px solid var(--border)"><div style="font-size:24px;font-weight:900;color:var(--orange)">Day 0</div><div style="font-size:10px;color:var(--text-muted)">Instant Protection</div></div>
194
  </div>
195
+ <div style="padding:12px 14px;border-radius:10px;background:var(--mint-bg);border:1px solid var(--mint-border)">
196
  <div style="color:var(--mint);font-size:12px;font-weight:700;margin-bottom:4px">💡 This is the difference</div>
197
+ <div style="color:var(--text-sec);font-size:12px;line-height:1.7">From the moment of contract, <strong>your entire text and image archive</strong> is protected. No need to wait for watermark embedding.</div>
198
+ </div></div>
 
199
 
 
200
  <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px">
201
+ <div style="width:2px;flex:1;background:linear-gradient(180deg,var(--orange-border),var(--mint-border));border-radius:1px"></div>
202
+ <div style="width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--orange-bg),var(--mint-bg));display:flex;align-items:center;justify-content:center;font-size:18px;border:2px solid var(--border);box-shadow:var(--shadow)">🤝</div>
203
+ <div style="font-size:10px;color:var(--text-muted);font-weight:700;text-align:center;line-height:1.3">Unified<br>Protection</div>
204
+ <div style="width:2px;flex:1;background:linear-gradient(180deg,var(--mint-border),var(--purple-border));border-radius:1px"></div>
205
  </div>
206
 
207
+ <div class="cd fi d2" style="border-color:var(--mint-border);position:relative;overflow:hidden">
208
+ <div style="position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--mint),#06b6d4)"></div>
 
209
  <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
210
+ <div style="width:48px;height:48px;border-radius:14px;background:var(--mint-bg);display:flex;align-items:center;justify-content:center;font-size:24px;border:1px solid var(--mint-border)">🔏</div>
211
+ <div><div style="color:var(--mint);font-weight:800;font-size:17px">StealthMark Shield™</div>
212
+ <div style="color:var(--text-muted);font-size:11px">Post-embed — 4-Layer Patented Defense</div></div>
213
  </div>
214
+ <div style="padding:16px;border-radius:12px;background:var(--mint-bg);border:1px solid var(--mint-border);margin-bottom:14px">
215
  <div class="story" style="font-size:13px;line-height:1.9">
216
  Four invisible layers of protection hide within your text.<br>
217
  If an attacker removes one, <span style="color:var(--mint)">other layers generate evidence</span>.<br><br>
218
  <span style="color:var(--mint)">▸</span> <strong>StealthMark Phantom™</strong> — Mark that hides like a ghost<br>
219
  <span style="color:var(--purple)">▸</span> <strong>StealthMark StyleDNA™</strong> — Writing has DNA too<br>
220
+ <span style="color:var(--yellow)">▸</span> <strong>StealthMark Seal™</strong> — Digital seal for court<br>
221
  <span style="color:var(--blue)">▸</span> <strong>StealthMark MicroGlyph™</strong> — Invisible micro-engraving
222
+ </div></div>
 
223
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px">
224
+ <div style="padding:12px;border-radius:10px;background:var(--surface-alt);text-align:center;border:1px solid var(--border)"><div style="font-size:24px;font-weight:900;color:var(--mint)">34</div><div style="font-size:10px;color:var(--text-muted)">Attack Coverage</div></div>
225
+ <div style="padding:12px;border-radius:10px;background:var(--surface-alt);text-align:center;border:1px solid var(--border)"><div style="font-size:24px;font-weight:900;color:var(--mint)">0px</div><div style="font-size:10px;color:var(--text-muted)">Zero Visibility</div></div>
226
  </div>
227
+ <div style="padding:12px 14px;border-radius:10px;background:var(--purple-bg);border:1px solid var(--purple-border)">
228
  <div style="color:var(--purple);font-size:12px;font-weight:700;margin-bottom:4px">💡 CrossGuard™ Principle</div>
229
+ <div style="color:var(--text-sec);font-size:12px;line-height:1.7">Like a bank vault with dual locks, <strong>if one shield breaks, the other automatically leaves evidence.</strong></div>
230
+ </div></div>
 
231
  </div>
232
 
 
233
  <div style="text-align:center;margin-top:28px">
234
+ <div style="display:inline-block;padding:18px 36px;border-radius:16px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)">
235
  <div style="display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap">
236
+ <div><span style="color:var(--orange);font-weight:800;font-size:15px">Day 0</span><br><span style="color:var(--text-muted);font-size:11px">Text+Image Radar™</span></div>
237
+ <span style="color:var(--border-hover);font-size:18px">→</span>
238
+ <div><span style="color:var(--mint);font-weight:800;font-size:15px">Shield™ Embed</span><br><span style="color:var(--text-muted);font-size:11px">4-Layer Protection</span></div>
239
+ <span style="color:var(--border-hover);font-size:18px">→</span>
240
+ <div><span style="color:var(--purple);font-weight:800;font-size:15px">DualAxis™</span><br><span style="color:var(--text-muted);font-size:11px">Dual-Axis Verdict</span></div>
241
+ <span style="color:var(--border-hover);font-size:18px">→</span>
242
+ <div><span style="color:var(--red);font-weight:800;font-size:15px">Seal™ Handoff</span><br><span style="color:var(--text-muted);font-size:11px">Legal Evidence</span></div>
243
+ </div></div></div>
 
244
  </div>
245
 
246
+ <!-- 4-LAYER -->
247
  <div style="padding:40px 0 50px">
248
  <h2 style="font-size:24px;font-weight:800;text-align:center;margin-bottom:12px">How does <span style="color:var(--mint)">4-Layer Protection</span> work?</h2>
249
+ <p style="text-align:center;color:var(--text-muted);font-size:13px;margin-bottom:36px">Easy to understand without technical expertise</p>
250
  <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:900px;margin:0 auto">
251
 
252
+ <div class="cd fi" style="border-color:var(--blue-border);overflow:hidden;position:relative"><div style="position:absolute;top:0;left:0;right:0;height:3px;background:var(--blue)"></div>
253
+ <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px"><div style="width:44px;height:44px;border-radius:12px;background:var(--blue-bg);display:flex;align-items:center;justify-content:center;font-size:22px;border:1px solid var(--blue-border)">👻</div><div><div style="color:var(--blue);font-weight:800;font-size:15px">StealthMark Phantom™</div><div style="color:var(--text-muted);font-size:10px;letter-spacing:1px">INVISIBLE MARK</div></div></div>
254
+ <div class="story" style="font-size:13px">Like signing with <strong>invisible ink</strong>. Invisible to the naked eye, but shows up clearly under special equipment.</div></div>
 
 
 
 
255
 
256
+ <div class="cd fi d1" style="border-color:var(--mint-border);overflow:hidden;position:relative"><div style="position:absolute;top:0;left:0;right:0;height:3px;background:var(--mint)"></div>
257
+ <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px"><div style="width:44px;height:44px;border-radius:12px;background:var(--mint-bg);display:flex;align-items:center;justify-content:center;font-size:22px;border:1px solid var(--mint-border)">🧬</div><div><div style="color:var(--mint);font-weight:800;font-size:15px">StealthMark StyleDNA™</div><div style="color:var(--text-muted);font-size:10px;letter-spacing:1px">STYLISTIC FINGERPRINT</div></div></div>
258
+ <div class="story" style="font-size:13px">Like a unique <strong>gait</strong>. StyleDNA™ subtly tunes writing rhythm to create a unique fingerprint. AI rewriting still leaves traces.</div></div>
 
 
 
 
259
 
260
+ <div class="cd fi d2" style="border-color:rgba(202,138,4,.15);overflow:hidden;position:relative"><div style="position:absolute;top:0;left:0;right:0;height:3px;background:var(--yellow)"></div>
261
+ <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px"><div style="width:44px;height:44px;border-radius:12px;background:var(--yellow-bg);display:flex;align-items:center;justify-content:center;font-size:22px;border:1px solid rgba(202,138,4,.15)">📋</div><div><div style="color:var(--yellow);font-weight:800;font-size:15px">StealthMark Seal™</div><div style="color:var(--text-muted);font-size:10px;letter-spacing:1px">FORENSIC EVIDENCE</div></div></div>
262
+ <div class="story" style="font-size:13px">Like a notary's <strong>authentication stamp</strong>. Time-stamped record sealed in tamper-proof form. Admissible as court evidence.</div></div>
 
 
 
 
263
 
264
+ <div class="cd fi d3" style="border-color:var(--purple-border);overflow:hidden;position:relative"><div style="position:absolute;top:0;left:0;right:0;height:3px;background:var(--purple)"></div>
265
+ <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px"><div style="width:44px;height:44px;border-radius:12px;background:var(--purple-bg);display:flex;align-items:center;justify-content:center;font-size:22px;border:1px solid var(--purple-border)">🔬</div><div><div style="color:var(--purple);font-weight:800;font-size:15px">StealthMark MicroGlyph™</div><div style="color:var(--text-muted);font-size:10px;letter-spacing:1px">MICRO ENGRAVING</div></div></div>
266
+ <div class="story" style="font-size:13px">Like <strong>micro-engraving</strong> on a gemstone. Invisible micro-codes carved into punctuation. If Phantom™ is attacked, MicroGlyph™ survives.</div></div>
 
 
 
 
267
  </div>
268
 
269
  <div style="max-width:900px;margin:28px auto 0">
270
+ <div class="cd" style="text-align:center;border-color:var(--mint-border);background:linear-gradient(135deg,var(--mint-bg),var(--purple-bg))">
271
  <div style="font-size:20px;margin-bottom:6px">⚖️</div>
272
  <div style="color:var(--mint);font-weight:800;font-size:16px;margin-bottom:10px">StealthMark CrossGuard™</div>
273
+ <div class="story" style="font-size:13px;max-width:600px;margin:0 auto"><strong>Dual-lock vault</strong> principle. If an attacker removes one — <span style="color:var(--red)">the removal trace itself becomes evidence</span>. <span style="color:var(--mint)">Destroying both simultaneously is physically impossible.</span></div>
274
+ </div></div>
 
275
  </div>
276
 
277
+ <!-- DualAxis -->
278
  <div style="padding:40px 0 50px">
279
  <h2 style="font-size:24px;font-weight:800;text-align:center;margin-bottom:8px">StealthMark <span style="color:var(--mint)">DualAxis</span>™</h2>
280
+ <p style="text-align:center;color:var(--text-muted);font-size:13px;margin-bottom:32px">Whether the watermark is alive or dead — the verdict remains valid</p>
281
  <div style="display:grid;grid-template-columns:1fr 60px 1fr;gap:16px;max-width:700px;margin:0 auto;align-items:center">
282
+ <div class="cd fi" style="text-align:center;border-color:var(--mint-border)"><div style="font-size:36px;margin-bottom:8px">📡</div><div style="color:var(--mint);font-weight:800;font-size:16px;margin-bottom:8px">Signal</div><div class="story" style="font-size:12px">If watermark is alive<br><strong>direct detection</strong> proves ownership</div></div>
283
+ <div style="text-align:center;font-size:28px;color:var(--text-muted);animation:breathe 2s ease infinite">＋</div>
284
+ <div class="cd fi d2" style="text-align:center;border-color:var(--purple-border)"><div style="font-size:36px;margin-bottom:8px">🔍</div><div style="color:var(--purple);font-weight:800;font-size:16px;margin-bottom:8px">Trace</div><div class="story" style="font-size:12px">If watermark was attacked<br><strong>attack trace</strong> is evidence</div></div>
285
  </div>
286
+ <div style="text-align:center;margin-top:20px"><div style="display:inline-block;padding:14px 28px;border-radius:12px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)"><span style="font-weight:700;font-size:14px">Alive →</span><span style="color:var(--mint);font-weight:800"> Direct Evidence</span><span style="color:var(--text-muted);margin:0 8px">|</span><span style="font-weight:700;font-size:14px">Dead →</span><span style="color:var(--red);font-weight:800"> Killing trace is evidence</span></div></div>
287
  </div>
288
 
289
+ <!-- Competitive Edge -->
290
  <div style="padding:30px 0 50px">
291
  <h2 style="font-size:22px;font-weight:800;text-align:center;margin-bottom:28px">Why <span style="color:var(--mint)">StealthMark</span>?</h2>
292
+ <div style="max-width:820px;margin:0 auto;border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)">
293
+ <table style="width:100%;border-collapse:collapse;font-size:13px;background:var(--surface)">
294
+ <thead><tr style="background:var(--surface-alt)"><th style="padding:14px 16px;text-align:left;color:var(--text-muted);font-weight:700;border-bottom:2px solid var(--border)">Feature</th><th style="padding:14px 16px;text-align:center;border-bottom:2px solid var(--mint-border)"><span style="color:var(--mint);font-weight:800">StealthMark</span></th><th style="padding:14px 16px;text-align:center;color:var(--text-muted);font-weight:700;border-bottom:2px solid var(--border)">Competitor A</th><th style="padding:14px 16px;text-align:center;color:var(--text-muted);font-weight:700;border-bottom:2px solid var(--border)">Competitor B</th></tr></thead>
295
  <tbody id="compTb"></tbody>
296
+ </table></div></div>
 
 
297
 
298
+ <!-- Customer Journey -->
299
  <div style="padding:20px 0 80px">
300
  <h2 style="font-size:22px;font-weight:800;text-align:center;margin-bottom:32px">Customer Journey <span style="color:var(--orange)">Timeline</span></h2>
301
  <div style="max-width:800px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:12px">
302
+ <div class="cd fi" style="text-align:center;border-color:var(--orange-border);padding:20px 12px;position:relative;overflow:hidden"><div style="position:absolute;top:0;left:0;right:0;height:3px;background:var(--orange)"></div><div style="font-size:28px;margin-bottom:8px">📋</div><div style="color:var(--orange);font-weight:800;font-size:20px;margin-bottom:4px">Day 0</div><div style="font-weight:700;font-size:13px;margin-bottom:6px">Instant Start</div><div style="color:var(--text-muted);font-size:11px;line-height:1.6">Radar™ Activate<br>Text+Image Archive<br>Instant Monitoring</div></div>
303
+ <div class="cd fi d1" style="text-align:center;border-color:var(--mint-border);padding:20px 12px;position:relative;overflow:hidden"><div style="position:absolute;top:0;left:0;right:0;height:3px;background:var(--mint)"></div><div style="font-size:28px;margin-bottom:8px">🔏</div><div style="color:var(--mint);font-weight:800;font-size:20px;margin-bottom:4px">Week 1</div><div style="font-weight:700;font-size:13px;margin-bottom:6px">Shield™ Complete</div><div style="color:var(--text-muted);font-size:11px;line-height:1.6">Text 4-Layer<br>Image DCT Watermark<br>Zero Visibility</div></div>
304
+ <div class="cd fi d2" style="text-align:center;border-color:var(--purple-border);padding:20px 12px;position:relative;overflow:hidden"><div style="position:absolute;top:0;left:0;right:0;height:3px;background:var(--purple)"></div><div style="font-size:28px;margin-bottom:8px">🎯</div><div style="color:var(--purple);font-weight:800;font-size:20px;margin-bottom:4px">Month 1</div><div style="font-weight:700;font-size:13px;margin-bottom:6px">First Detection</div><div style="color:var(--text-muted);font-size:11px;line-height:1.6">Unauthorized Use<br>DualAxis™ Analysis<br>Evidence Package</div></div>
305
+ <div class="cd fi d3" style="text-align:center;border-color:var(--red-border);padding:20px 12px;position:relative;overflow:hidden"><div style="position:absolute;top:0;left:0;right:0;height:3px;background:var(--red)"></div><div style="font-size:28px;margin-bottom:8px">⚖️</div><div style="color:var(--red);font-weight:800;font-size:20px;margin-bottom:4px">Month 2+</div><div style="font-weight:700;font-size:13px;margin-bottom:6px">Legal Action</div><div style="color:var(--text-muted);font-size:11px;line-height:1.6">Seal™ Evidence<br>Settlement/Litigation<br>ROI Recovery</div></div>
306
  </div>
307
+ <div style="text-align:center;margin-top:24px"><div style="display:inline-block;padding:14px 28px;border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)"><span style="color:var(--text-muted);font-size:13px">/mo Catch just 1 unauthorized use →</span><span style="color:var(--mint);font-weight:800;font-size:15px"> Protect millions in annual content value</span></div></div>
308
  </div>
309
  </section>
310
 
311
+ <!-- ═══ LEADERBOARD ═══ -->
312
  <section id="lb">
313
  <div style="padding:40px 0 80px">
314
+ <div style="text-align:center;margin-bottom:40px" class="fi"><div style="font-size:13px;color:var(--purple);font-weight:700;letter-spacing:3px;margin-bottom:8px">TECHNOLOGY BENCHMARK</div><h2 style="font-size:32px;font-weight:900;letter-spacing:-1px">Content Protection <span style="color:var(--mint)">Tech Comparison</span></h2><p style="color:var(--text-muted);font-size:14px;margin-top:8px">Text watermarking 6-axis quantitative comparison</p></div>
315
  <div style="display:grid;grid-template-columns:1fr 280px;gap:24px">
316
+ <div class="cd fi" style="padding:0;overflow:hidden"><div class="lh"><span>#</span><span>Tech</span><span>Type</span><span style="text-align:center">🛡️</span><span style="text-align:center">🏗️</span><span style="text-align:center">🇰🇷</span><span style="text-align:center">⚡</span><span style="text-align:center">🔍</span><span style="text-align:center">⚖️</span><span style="text-align:center">Total</span></div><div id="lbb"></div></div>
317
  <div class="cd fi d2" id="lbd" style="text-align:center"></div>
318
  </div>
319
+ <div style="display:flex;gap:16px;justify-content:center;margin-top:20px;flex-wrap:wrap"><span style="font-size:11px;color:var(--text-muted)">🛡️Threats 🏗️Defense 🇰🇷Korean ⚡Real-time 🔍Trace ⚖️Legal</span><span style="font-size:11px;color:var(--border)">|</span><span style="font-size:11px;color:var(--mint)">●80+</span><span style="font-size:11px;color:var(--yellow)">●50+</span><span style="font-size:11px;color:var(--orange)">●25+</span><span style="font-size:11px;color:var(--red)">●0+</span></div>
320
+ </div></section>
 
321
 
322
+ <!-- ═══ THREATS ═══ -->
323
  <section id="atk">
324
  <div style="padding:40px 0">
325
+ <div style="text-align:center;margin-bottom:40px" class="fi"><div style="font-size:13px;color:var(--red);font-weight:700;letter-spacing:3px;margin-bottom:8px">STEALTHMARK THREATMATRIX™</div><h2 style="font-size:32px;font-weight:900;letter-spacing:-1px">34 Threat <span style="color:var(--mint)">Coverage</span></h2><p style="color:var(--text-muted);font-size:14px;margin-top:8px">7 threat groups × 34 scenarios — layer survival status</p></div>
326
  <div class="ag" id="agg"></div>
327
  <div class="cd fi" style="margin-top:32px">
328
+ <h3 style="font-size:16px;font-weight:800;text-align:center;margin-bottom:20px">StealthMark <span style="color:var(--mint)">CrossGuard™</span> Dual Shield</h3>
329
  <div style="display:grid;grid-template-columns:1fr 60px 1fr;gap:20px;align-items:center;max-width:600px;margin:0 auto">
330
+ <div style="text-align:center;padding:16px;border-radius:12px;background:var(--red-bg);border:1px solid var(--red-border)"><div style="font-weight:800;color:var(--red);margin-bottom:6px">Phantom™ Attacked</div><div style="font-size:20px;margin-bottom:4px">❌ → ✅</div><div style="font-size:11px;color:var(--text-muted)">Phantom disabled → MicroGlyph survives</div></div>
331
  <div style="text-align:center;font-size:28px;animation:float 2s ease infinite">⚖️<div style="font-size:10px;color:var(--mint);font-weight:700;margin-top:4px">Seesaw</div></div>
332
+ <div style="text-align:center;padding:16px;border-radius:12px;background:var(--purple-bg);border:1px solid var(--purple-border)"><div style="font-weight:800;color:var(--purple);margin-bottom:6px">MicroGlyph™ Attacked</div><div style="font-size:20px;margin-bottom:4px">✅ → ❌</div><div style="font-size:11px;color:var(--text-muted)">MicroGlyph disabled → Phantom survives</div></div>
333
  </div>
334
+ <div style="text-align:center;margin-top:16px;padding:10px 20px;border-radius:10px;background:var(--mint-bg);border:1px solid var(--mint-border)"><span style="color:var(--mint);font-weight:800;font-size:13px">No single attack can disable both simultaneously</span> <span style="color:var(--text-muted);font-size:12px">+ StyleDNA™ survives any attack</span></div>
335
+ </div></div></section>
 
 
336
 
337
+ <!-- ═══ PIPELINE ═══ -->
338
  <section id="pipe">
339
  <div style="padding:40px 0 80px">
340
+ <div style="text-align:center;margin-bottom:40px" class="fi"><div style="font-size:13px;color:var(--purple);font-weight:700;letter-spacing:3px;margin-bottom:8px">BUSINESS PIPELINE</div><h2 style="font-size:32px;font-weight:900;letter-spacing:-1px"><span style="color:var(--orange)">Radar™</span> → <span style="color:var(--mint)">Shield™</span> → <span style="color:var(--red)">Seal™</span></h2><p style="color:var(--text-muted);font-size:14px;margin-top:8px">Text · Image · Video — Complete Content Protection Lifecycle</p></div>
341
  <div class="rs">
342
+ <div class="rr" style="top:35%;left:35%;width:30%;height:30%;border-color:var(--mint-border)"></div>
343
+ <div class="rr" style="top:22.5%;left:22.5%;width:55%;height:55%;border-color:rgba(13,148,136,.08)"></div>
344
+ <div class="rr" style="top:10%;left:10%;width:80%;height:80%;border-color:rgba(13,148,136,.06)"></div>
345
+ <div class="rr" style="top:0;left:0;width:100%;height:100%;border-color:var(--mint-border)"></div>
346
  <div class="rw"><div class="ra"></div></div><div class="rc"></div>
347
+ <div class="rb" style="top:25%;left:30%"><div class="rd" style="background:var(--red);box-shadow:0 0 6px rgba(220,38,38,.4)"></div><div class="rl" style="color:var(--red)">AI Platforms A</div></div>
348
+ <div class="rb" style="top:35%;left:70%"><div class="rd" style="background:var(--orange);box-shadow:0 0 6px rgba(217,119,6,.4);animation-delay:.5s"></div><div class="rl" style="color:var(--orange)">Datasets B</div></div>
349
+ <div class="rb" style="top:72%;left:55%"><div class="rd" style="background:var(--yellow);box-shadow:0 0 6px rgba(202,138,4,.4);animation-delay:1s"></div><div class="rl" style="color:var(--yellow)">Competitors C</div></div>
350
+ <div class="rb" style="top:65%;left:20%"><div class="rd" style="background:var(--red);box-shadow:0 0 6px rgba(220,38,38,.4);animation-delay:1.5s"></div><div class="rl" style="color:var(--red)">Crawlers D</div></div>
351
  <div style="position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--mint);font-weight:700">📡 StealthMark Radar™</div>
352
  </div>
353
  <div style="position:relative;max-width:700px;margin:0 auto" id="psteps"><div class="pl"></div></div>
354
  <div style="text-align:center;margin-top:48px">
355
+ <div class="cd" style="display:inline-block;padding:24px 40px;border-radius:20px;border-color:var(--mint-border)">
356
+ <div style="font-size:18px;font-weight:800;margin-bottom:8px">Content ID-based <span style="color:var(--mint)">Auto Detection</span> → <span style="color:var(--red)">Legal Team Handoff</span></div>
357
+ <div style="color:var(--text-muted);font-size:13px;line-height:1.7">Radar™ periodically scans key targets → DualAxis™ cross-verification<br>Seal™ auto-generates Evidence Packages → handed off to legal team</div>
358
  <div style="display:flex;gap:12px;justify-content:center;margin-top:16px">
359
+ <span style="padding:6px 14px;border-radius:8px;background:var(--mint-bg);color:var(--mint);font-size:12px;font-weight:700;border:1px solid var(--mint-border)">Unauthorized Training Detection</span>
360
+ <span style="padding:6px 14px;border-radius:8px;background:var(--purple-bg);color:var(--purple);font-size:12px;font-weight:700;border:1px solid var(--purple-border)">Copyright Infringement Proof</span>
361
+ <span style="padding:6px 14px;border-radius:8px;background:var(--red-bg);color:var(--red);font-size:12px;font-weight:700;border:1px solid var(--red-border)">Settlement/Litigation Support</span>
362
  </div></div></div>
363
+ </div></section>
 
364
  </main>
365
+ <footer>StealthMark — Text · Image · Video Unified Content Protection Platform | © 2025 <a href="https://vidraft.net" target="_blank" style="color:var(--mint);text-decoration:none;font-weight:700">Ginigen AI</a></footer>
366
 
367
  <script>
368
  const D=[
369
  {r:1,b:"🥇",n:"StealthMark",c:"🇰🇷",t:"Commercial",d:"4-Layer Patent Defense + DualAxis™ + Radar™",s:[100,100,100,95,100,95],T:98,cl:"var(--mint)",h:["ThreatMatrix™ 34types Coverage","CrossGuard™ Dual Shield","DualAxis™ Trace Verdict"]},
370
+ {r:2,b:"🥈",n:"Embedding-based Academic",c:"🇰🇷",t:"Academic",d:"Semantic vector similarity based",s:[70,50,60,30,40,45],T:49,cl:"var(--text-muted)",h:["Partial paraphrasing response","Real-time difficult","GPU required"]},
371
+ {r:3,b:"🥉",n:"SynthID-Text",c:"🇺🇸",t:"Commercial",d:"Google — LLM only",s:[65,25,10,80,0,30],T:35,cl:"var(--text-muted)",h:["LLM output only","No Korean support"]},
372
+ {r:4,b:"4",n:"Stats-based WM",c:"🇺🇸",t:"Academic",d:"Token probability distribution",s:[55,25,20,70,0,25],T:33,cl:"var(--text-muted)",h:["Weak against paraphrasing","Model access required"]},
373
+ {r:5,b:"5",n:"Single Channel WM",c:"🌐",t:"Open Source",d:"Single invisible char only",s:[40,25,50,90,0,15],T:37,cl:"var(--text-muted)",h:["Single attack destroys all","No legal evidence"]},
374
+ {r:6,b:"6",n:"OpenAI Text WM",c:"🇺🇸",t:"Commercial",d:"Stats-based — Discontinued",s:[50,25,15,75,10,35],T:35,cl:"var(--text-muted)",h:["Weak paraphrasing","Discontinued"]}
375
  ];
376
  const AX=["Threat","Defense","Korean","Realtime","Trace","Legal"],IC=["🛡️","🏗️","🇰🇷","⚡","🔍","⚖️"];
377
  const AG=[
378
  {i:"🔤",n:"Normalization",c:4,rk:"layers",cl:"var(--blue)",a:["NFC","NFKC","NFD","NFKD"],sv:["✅","⚠️","✅"],d:"Attacks that normalize text to standard form"},
379
+ {i:"👻",n:"Invisible Removal",c:5,rk:"High",cl:"var(--red)",a:["Partial","Full","By Category","Combined","Printable Only"],sv:["❌→Trace","✅","✅"],d:"Attacks targeting Phantom™ directly"},
380
  {i:"🎯",n:"Micro Targeting",c:3,rk:"Max",cl:"var(--purple)",a:["Full Removal","Partial A","Partial B"],sv:["✅","✅","❌→Trace"],d:"Attacks targeting MicroGlyph™ directly"},
381
  {i:"✏️",n:"Edit Cleanup",c:5,rk:"Low~High",cl:"var(--yellow)",a:["Whitespace","Newlines","Punct Unify","Punct Remove","Cleanup"],sv:["✅","✅","✅"],d:"Standard text editing/cleanup"},
382
  {i:"🧩",n:"Extreme Purification",c:5,rk:"Max",cl:"var(--orange)",a:["Basic Chars","Alphanumeric","Lowercase","Homoglyph","Emoji Remove"],sv:["⚠️","✅","⚠️"],d:"Attacks that extremely purify text"},
 
388
  {i:"📡",t:"Content Distribution",d:"Watermark is fully invisible — normal distribution",dt:"Zero impact on readers and users",cl:"var(--blue)"},
389
  {i:"🔍",t:"DualAxis™ Detection",d:"Signal + Trace dual-axis cross verdict",dt:"Attack profiling via multi-pipeline",cl:"var(--purple)"},
390
  {i:"📋",t:"Seal™ Evidence",d:"Auto-generate legal evidence report",dt:"Digital seal + timestamp + analysis log",cl:"var(--yellow)"},
391
+ {i:"⚖️",t:"Legal Handoff",d:"Deliver evidence package to legal team",dt:"Copyright lawsuit, settlement & correction",cl:"var(--red)"}
392
  ];
393
  const COMP=[
394
  {f:"Pre-embed Text Protection",sm:"✅ Radar™ 7 modes",a:"❌",b:"❌",h:true},
395
  {f:"Text Watermark",sm:"✅ 4-Layer Patent Tech",a:"⚠️ Single channel",b:"⚠️ Statistics-based"},
396
+ {f:"🖼️ Image Similarity",sm:"✅ 5-Mode AI Analysis",a:"❌",b:"❌",h:true},
397
+ {f:"🖼️ Image Watermark",sm:"✅ DCT Frequency",a:"❌",b:"⚠️ Pixel only"},
398
+ {f:"🎬 Video Protection",sm:"✅ DTW + DCT",a:"❌",b:"❌"},
399
  {f:"Korean Optimization",sm:"✅ Morpheme-based",a:"❌",b:"❌"},
400
  {f:"Threat Coverage",sm:"✅ 34types 100%",a:"⚠️ 5-10 types",b:"⚠️ Weak"},
401
  {f:"Dual-Axis Verdict",sm:"✅ DualAxis™",a:"❌",b:"❌"},
402
+ {f:"Legal Evidence",sm:"✅ Seal™ Auto",a:"❌",b:"⚠️ Manual"},
403
+ {f:"Multimodal",sm:"✅ Text+Image+Video",a:"❌ Text only",b:"❌ Image only",h:true}
404
  ];
405
  const ctb=document.getElementById('compTb');
406
+ if(ctb)ctb.innerHTML=COMP.map(c=>{const hl=c.h?'background:var(--orange-bg);':'';const fc=c.h?'color:var(--orange);font-weight:700':'color:var(--text-sec)';return`<tr style="${hl}border-bottom:1px solid var(--border)"><td style="padding:10px 16px;${fc};font-size:13px">${c.f}</td><td style="padding:10px 16px;text-align:center;font-size:12px;font-weight:600;color:${c.sm.startsWith('✅')?'var(--mint)':'var(--text-muted)'}">${c.sm}</td><td style="padding:10px 16px;text-align:center;font-size:12px;color:var(--text-muted)">${c.a}</td><td style="padding:10px 16px;text-align:center;font-size:12px;color:var(--text-muted)">${c.b}</td></tr>`}).join('');
407
 
408
  document.querySelectorAll('.tb').forEach(b=>{b.onclick=()=>{document.querySelectorAll('.tb').forEach(x=>x.classList.remove('a'));b.classList.add('a');document.querySelectorAll('section').forEach(s=>s.classList.remove('a'));document.getElementById(b.dataset.t).classList.add('a')}});
409
 
410
+ const MET=[{v:34,s:"types",l:"Text Threats",u:"ThreatMatrix™ 100%",cl:"var(--mint)"},{v:4,s:"layers",l:"Text Layers",u:"CrossGuard™ Dual Shield",cl:"var(--purple)"},{v:5,s:"modes",l:"Image Analysis",u:"Hash+SSIM+Color+Feature",cl:"var(--pink)"},{v:7,s:"modes",l:"Radar™",u:"Instant pre-embed",cl:"var(--orange)"},{v:3,s:"axes",l:"Multimodal",u:"Text+Image+Video",cl:"var(--blue)"},{v:0,s:"px",l:"Visibility",u:"Fully Transparent",cl:"var(--red)",fix:"0"}];
411
+ document.getElementById('metrics').innerHTML=MET.map((m,i)=>`<div class="mc fi d${i+1}" style="border-color:color-mix(in srgb,${m.cl} 15%,var(--border))"><div style="font-size:36px;font-weight:900;color:${m.cl}">${m.fix||'<span class="ctr" data-e="'+m.v+'">0</span>'}${m.s}</div><div style="font-size:13px;font-weight:700;margin-bottom:2px">${m.l}</div><div style="font-size:10px;color:var(--text-muted)">${m.u}</div></div>`).join('');
412
  const obs=new IntersectionObserver(es=>{es.forEach(e=>{if(e.isIntersecting)e.target.querySelectorAll('.ctr').forEach(el=>{if(el.dataset.done)return;el.dataset.done='1';const end=+el.dataset.e,st=performance.now();(function f(n){const p=Math.min((n-st)/1500,1);el.textContent=Math.round((1-Math.pow(1-p,3))*end);if(p<1)requestAnimationFrame(f)})(st)})})},{threshold:.3});
413
  document.querySelectorAll('.mc').forEach(e=>obs.observe(e));
414
 
415
  let sel=0;
416
  function sc(v){return v>=80?'var(--mint)':v>=50?'var(--yellow)':v>=25?'var(--orange)':'var(--red)'}
417
+ function tc(t){return t==='Commercial'?'var(--mint)':t==='Academic'?'var(--purple)':'var(--text-muted)'}
418
+ function tbc(t){return t==='Commercial'?'var(--mint-bg)':t==='Academic'?'var(--purple-bg)':'var(--surface-alt)'}
419
+ function bLB(){document.getElementById('lbb').innerHTML=D.map((c,i)=>`<div class="lr${i===sel?' sel':''}" onclick="sel=${i};bLB();bDt()"><span style="font-size:${c.r<=3?18:13}px;font-weight:800;${c.r>3?'color:var(--text-muted)':''}">${c.b}</span><div><div style="font-weight:700;font-size:13px;color:${c.r===1?'var(--mint)':'var(--text)'}">${c.c} ${c.n}</div><div style="font-size:10px;color:var(--text-muted);margin-top:1px">${c.d}</div></div><span style="font-size:10px;padding:2px 6px;border-radius:4px;background:${tbc(c.t)};color:${tc(c.t)};font-weight:600;text-align:center;border:1px solid var(--border)">${c.t}</span>${c.s.map(s=>`<span style="text-align:center;font-size:12px;font-weight:700;color:${sc(s)}">${s}</span>`).join('')}<span style="text-align:center;font-size:16px;font-weight:900;color:${c.r===1?'var(--mint)':c.cl}">${c.T}</span></div>`).join('')}
420
+ function bDt(){const c=D[sel],m=c.r===1,bc=m?'var(--mint)':'var(--text-muted)';const sz=200,cx=100,cy=100,r=76,st=Math.PI/3;const pt=(v,i)=>({x:cx+(r*v/100)*Math.cos(st*i*2-Math.PI/2),y:cy+(r*v/100)*Math.sin(st*i*2-Math.PI/2)});let svg='';[25,50,75,100].forEach(lv=>{const ps=Array.from({length:6},(_,i)=>pt(lv,i));svg+=`<polygon points="${ps.map(p=>p.x+','+p.y).join(' ')}" fill="none" stroke="#e2e5f0" stroke-width="${lv===100?1.5:.5}" ${lv<100?'stroke-dasharray="2,3"':''}/>`});Array.from({length:6},(_,i)=>{const p=pt(100,i);svg+=`<line x1="${cx}" y1="${cy}" x2="${p.x}" y2="${p.y}" stroke="#e2e5f0" stroke-width=".5"/>`});const dp=c.s.map((s,i)=>pt(s,i));svg+=`<polygon points="${dp.map(p=>p.x+','+p.y).join(' ')}" fill="${m?'rgba(13,148,136,.1)':'rgba(148,163,184,.08)'}" stroke="${bc}" stroke-width="2"/>`;dp.forEach(p=>{svg+=`<circle cx="${p.x}" cy="${p.y}" r="3.5" fill="${bc}" stroke="white" stroke-width="1.5"/>`});IC.forEach((ic,i)=>{const p=pt(120,i);svg+=`<text x="${p.x}" y="${p.y}" text-anchor="middle" dominant-baseline="middle" fill="#94a3b8" font-size="10">${ic}</text>`});document.getElementById('lbd').innerHTML=`<div style="font-size:28px;margin-bottom:4px">${c.b}</div><div style="font-weight:800;font-size:16px;color:${m?'var(--mint)':'var(--text)'}">${c.n}</div><div style="font-size:11px;color:var(--text-muted);margin:4px 0 12px">${c.d}</div><div style="display:flex;justify-content:center;margin-bottom:12px"><svg width="${sz}" height="${sz}" viewBox="0 0 ${sz} ${sz}">${svg}</svg></div>${AX.map((a,i)=>`<div class="sr"><span class="sl">${IC[i]} ${a}</span><div class="st"><div class="sf" style="width:${c.s[i]}%;background:linear-gradient(90deg,${bc}88,${bc});animation-delay:${i*80}ms"></div></div><span class="sn" style="color:${bc}">${c.s[i]}</span></div>`).join('')}<div style="margin-top:16px;text-align:left">${c.h.map(h=>`<div style="padding:3px 0;font-size:11px;color:var(--text-muted)"><span style="color:${m?'var(--mint)':'var(--text-muted)'};margin-right:6px">→</span>${h}</div>`).join('')}</div>`}
421
  bLB();bDt();
422
 
423
  const SL=["Phantom™","StyleDNA™","MicroGlyph™"];
424
+ document.getElementById('agg').innerHTML=AG.map((g,i)=>`<div class="ac fi" style="animation-delay:${i*.08}s;border-color:color-mix(in srgb,${g.cl} 20%,var(--border))"><div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px"><div><span style="font-size:24px;margin-right:8px">${g.i}</span><span style="font-weight:800;font-size:15px">${g.n}</span></div><span style="padding:3px 10px;border-radius:8px;background:color-mix(in srgb,${g.cl} 8%,var(--surface));color:${g.cl};font-size:11px;font-weight:700;border:1px solid color-mix(in srgb,${g.cl} 15%,var(--border))">${g.rk}</span></div><div style="font-size:12px;color:var(--text-sec);margin-bottom:12px;line-height:1.5">${g.d}</div><div style="margin-bottom:12px;display:flex;flex-wrap:wrap;gap:4px">${g.a.map(a=>`<span class="at">${a}</span>`).join('')}</div><div class="svr">${SL.map((l,j)=>`<div class="svi"><div class="svl">${l}</div><div class="svv">${g.sv[j]}</div></div>`).join('')}</div><div style="text-align:center;margin-top:8px"><span style="font-size:22px;font-weight:900;color:${g.cl}">${g.c}</span><span style="font-size:11px;color:var(--text-muted);margin-left:4px">types</span></div></div>`).join('');
425
 
426
+ document.getElementById('psteps').innerHTML='<div class="pl"></div>'+PS.map((s,i)=>`<div class="ps fi" style="animation-delay:${i*.1}s"><div class="pn" style="background:color-mix(in srgb,${s.cl} 6%,var(--surface));border:2px solid color-mix(in srgb,${s.cl} 20%,var(--border))">${s.i}</div><div class="cd" style="flex:1;padding:14px 20px;border-color:color-mix(in srgb,${s.cl} 15%,var(--border))"><div style="display:flex;align-items:center;gap:8px;margin-bottom:6px"><span style="color:${s.cl};font-weight:800;font-size:14px">${s.t}</span><span style="font-size:10px;padding:2px 8px;border-radius:6px;background:color-mix(in srgb,${s.cl} 6%,var(--surface));color:${s.cl};font-weight:700;border:1px solid color-mix(in srgb,${s.cl} 15%,var(--border))">Step ${i+1}</span></div><div style="font-size:13px;margin-bottom:4px">${s.d}</div><div style="color:var(--text-muted);font-size:11px">${s.dt}</div></div></div>`).join('');
427
  </script>
428
  </body>
429
  </html>