Update index.html

index.html

@@ -161,7 +161,6 @@
         }
 
         .container {
-            max-width: 1200px;
             margin: 0 auto;
             padding: 40px;
             position: relative;
@@ -170,8 +169,8 @@
 
         .hero {
             text-align: center;
-            padding: 100px 0;
-            margin-bottom: 80px;
+            padding: 20px 0;
+            margin-bottom: 10px;
         }
 
         .hero h1 {
@@ -663,14 +662,53 @@
             </div>
         </div>
 
+        <div class="section">
+            <div class="section-header">
+                <h2 class="section-title">What Makes Image Poison Shield Different</h2>
+            </div>
+            <div class="section-content">
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 20px 0;">
+                    <div style="background: rgba(44, 140, 132, 0.1); padding: 20px; border-radius: 8px; border-left: 3px solid var(--accent-color);">
+                        <h4>🎯 Frequency-Domain Targeting</h4>
+                        <p>Protection embedded in the mathematical structure of images, targeting the mid-band frequencies that ML models rely on for training.</p>
+                    </div>
+                    
+                    <div style="background: rgba(44, 140, 132, 0.1); padding: 20px; border-radius: 8px; border-left: 3px solid var(--accent-color);">
+                        <h4>🔐 Cryptographic Provenance</h4>
+                        <p>Every protected image receives a comprehensive metadata stamp containing creator identity, SHA-256 hashes of original and protected versions, timestamps, AI training prohibition notices, and protection performance metrics. This creates an immutable record for legal verification and tamper detection.</p>
+                    </div>
+                    
+                    <div style="background: rgba(44, 140, 132, 0.1); padding: 20px; border-radius: 8px; border-left: 3px solid var(--accent-color);">
+                        <h4>🛡️ Removal-Resistant</h4>
+                        <p>Not a surface watermark—protection is woven into the image structure. Survives JPEG compression, resizing, and format conversion.</p>
+                    </div>
+                    
+                    <div style="background: rgba(44, 140, 132, 0.1); padding: 20px; border-radius: 8px; border-left: 3px solid var(--accent-color);">
+                        <h4>👁️ Minimal Visual Impact</h4>
+                        <p>At optimal settings (strength 3.0), visual quality remains excellent (SSIM 0.85+) while ML disruption stays effective (20-48%).</p>
+                    </div>
+                    
+                    <div style="background: rgba(44, 140, 132, 0.1); padding: 20px; border-radius: 8px; border-left: 3px solid var(--accent-color);">
+                        <h4>🤖 ML Training Poisoning</h4>
+                        <p>Disrupts neural network training itself—not just feature extraction. Achieves 48% training degradation, among the highest for low-distortion attacks.</p>
+                    </div>
+                    
+                    <div style="background: rgba(44, 140, 132, 0.1); padding: 20px; border-radius: 8px; border-left: 3px solid var(--accent-color);">
+                        <h4>⚙️ Adjustable Protection</h4>
+                        <p>Fine-tune the strength-quality trade-off based on your needs: subtle for sharing, aggressive for legal protection.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div class="section">
             <div class="section-header">
                 <h2 class="section-title">The Problem</h2>
             </div>
             <div class="section-content">
-                <p>Your creative work is being scraped and used to train AI models without your consent. Traditional watermarks are easily removed (70-95% success rate). Metadata is stripped in seconds. Legal protection is unenforceable at scale.</p>
+                <p>Creative work is being scraped and used to train AI models without your consent. Traditional watermarks are easily removed (70-95% success rate). Metadata is stripped in seconds. Legal protection is unenforceable at scale.</p>
                 
-                <p><strong>Image Poison Shield is different:</strong> Mathematical protection embedded in the frequency-domain structure of your images—subtle to humans, toxic to AI models.</p>
+                <p><strong>Image Poison Shield is different:</strong> Mathematical protection embedded in the frequency-domain structure of images—subtle to humans, toxic to AI models.</p>
                 
                 <div class="info-box" style="margin-top: 20px;">
                     <h4>🧪 Live Demonstration: Test It Yourself</h4>
@@ -893,45 +931,6 @@
             </div>
         </div>
 
-        <div class="section">
-            <div class="section-header">
-                <h2 class="section-title">What Makes Image Poison Shield Different</h2>
-            </div>
-            <div class="section-content">
-                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 20px 0;">
-                    <div style="background: rgba(44, 140, 132, 0.1); padding: 20px; border-radius: 8px; border-left: 3px solid var(--accent-color);">
-                        <h4>🎯 Frequency-Domain Targeting</h4>
-                        <p>Protection embedded in the mathematical structure of images, targeting the mid-band frequencies that ML models rely on for training.</p>
-                    </div>
-                    
-                    <div style="background: rgba(44, 140, 132, 0.1); padding: 20px; border-radius: 8px; border-left: 3px solid var(--accent-color);">
-                        <h4>🔐 Cryptographic Provenance</h4>
-                        <p>Every protected image receives a comprehensive metadata stamp containing creator identity, SHA-256 hashes of original and protected versions, timestamps, AI training prohibition notices, and protection performance metrics. This creates an immutable record for legal verification and tamper detection.</p>
-                    </div>
-                    
-                    <div style="background: rgba(44, 140, 132, 0.1); padding: 20px; border-radius: 8px; border-left: 3px solid var(--accent-color);">
-                        <h4>🛡️ Removal-Resistant</h4>
-                        <p>Not a surface watermark—protection is woven into the image structure. Survives JPEG compression, resizing, and format conversion.</p>
-                    </div>
-                    
-                    <div style="background: rgba(44, 140, 132, 0.1); padding: 20px; border-radius: 8px; border-left: 3px solid var(--accent-color);">
-                        <h4>👁️ Minimal Visual Impact</h4>
-                        <p>At optimal settings (strength 3.0), visual quality remains excellent (SSIM 0.85+) while ML disruption stays effective (30-35%).</p>
-                    </div>
-                    
-                    <div style="background: rgba(44, 140, 132, 0.1); padding: 20px; border-radius: 8px; border-left: 3px solid var(--accent-color);">
-                        <h4>🤖 ML Training Poisoning</h4>
-                        <p>Disrupts neural network training itself—not just feature extraction. Achieves 48% training degradation, among the highest for low-distortion attacks.</p>
-                    </div>
-                    
-                    <div style="background: rgba(44, 140, 132, 0.1); padding: 20px; border-radius: 8px; border-left: 3px solid var(--accent-color);">
-                        <h4>⚙️ Adjustable Protection</h4>
-                        <p>Fine-tune the strength-quality trade-off based on your needs: subtle for sharing, aggressive for legal protection.</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-        
         <div class="section">
             <div class="section-header">
                 <h2 class="section-title">Get Involved</h2>