Add ownership/security section, competitor comparison table, updated stats

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/components/Nav.jsx

@@ -2,12 +2,13 @@
 import { useState } from 'react'
 
 const LINKS = [
-  { href: '#manifesto', label: 'Why Fibe' },
+  { href: '#manifesto',  label: 'Why Fibe' },
-  { href: '#features',  label: 'Platform' },
+  { href: '#features',   label: 'Platform' },
-  { href: '#genies',    label: 'Genies' },
+  { href: '#genies',     label: 'Genies' },
-  { href: '#clouds',    label: 'Cloud guides' },
+  { href: '#ownership',  label: 'Security & Ownership' },
-  { href: '#everything',label: 'Everything included' },
+  { href: '#clouds',     label: 'Cloud guides' },
-  { href: '#stack',     label: 'Stack' },
+  { href: '#everything', label: 'Everything included' },
+  { href: '#stack',      label: 'Stack' },
 ]
 
 export default function Nav() {

app/page.jsx

@@ -482,6 +482,108 @@ export default function Home() {
         </div>
       </section>
 
+      {/* ── OWN EVERYTHING ── */}
+      <section id="ownership" className="py-28 px-6 relative overflow-hidden" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
+        <div className="glow-orb" style={{width:700,height:700,background:'radial-gradient(circle, rgba(139,92,246,0.07) 0%, transparent 70%)',top:'50%',left:'50%',transform:'translate(-50%,-50%)'}} />
+        <div className="max-w-6xl mx-auto relative z-10">
+          <div className="text-center mb-16">
+            <p className="text-xs font-semibold uppercase tracking-widest mb-3" style={{color:'rgba(139,92,246,0.7)'}}>Security &amp; Ownership</p>
+            <h2 className="font-display text-4xl md:text-5xl font-normal mb-4" style={{letterSpacing:'-0.02em'}}>
+              Your code. Your data.<br />
+              <em className="gradient-text not-italic">Your servers. Always.</em>
+            </h2>
+            <p className="max-w-xl mx-auto" style={{color:'rgba(161,161,170,0.65)'}}>
+              Fibe never stores, scans or touches your application data. It orchestrates — your infrastructure, your rules, your jurisdiction.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-5">
+            {[
+              {icon:'🔒', title:'Zero vendor access',    desc:'Your code runs on your servers. Fibe connects via SSH to orchestrate — it never reads, stores or processes your application data.'},
+              {icon:'🌍', title:'Data sovereignty',      desc:'Deploy in any region worldwide. Your data stays in your jurisdiction. GDPR, HIPAA, enterprise compliance — by architecture, not policy.'},
+              {icon:'💰', title:'No compute markup',     desc:'You pay AWS, DigitalOcean, GCP or Hetzner directly. Fibe never touches your cloud bill. No bandwidth fees. No egress charges. Ever.'},
+              {icon:'🏗️', title:'Isolated by design',   desc:'Every environment is fully isolated. No shared resources, no noisy neighbors. Complete separation between projects, teams and branches.'},
+              {icon:'🔑', title:'You hold the keys',     desc:'SSH into any server at any time. Your infrastructure works with or without Fibe — no dependency trap, no hostage situation.'},
+              {icon:'👁️', title:'No black boxes',        desc:'Open SDK. Inspect every compose file Fibe generates. Audit, modify, run anywhere. Nothing hidden, nothing proprietary.'},
+            ].map(({icon, title, desc}) => (
+              <div key={title} className="glass rounded-2xl p-6 transition-all hover:scale-[1.01] hover:brightness-105"
+                style={{borderColor:'rgba(139,92,246,0.12)'}}>
+                <div className="text-2xl mb-4">{icon}</div>
+                <h3 className="font-semibold text-white mb-2">{title}</h3>
+                <p className="text-sm leading-relaxed" style={{color:'rgba(161,161,170,0.65)'}}>{desc}</p>
+              </div>
+            ))}
+          </div>
+
+          {/* Pricing hint */}
+          <div className="mt-8 glass rounded-2xl px-8 py-5 flex flex-col md:flex-row items-center justify-between gap-4"
+            style={{borderColor:'rgba(139,92,246,0.1)',background:'rgba(139,92,246,0.03)'}}>
+            <p className="text-sm" style={{color:'rgba(161,161,170,0.6)'}}>
+              <span className="text-white font-medium">Start from ~$12/month</span> on a DigitalOcean Droplet.
+              Scale to whatever your project needs. Pay your cloud provider — not us.
+            </p>
+            <a href="https://next.fibe.live/register"
+              className="shrink-0 text-sm font-semibold px-5 py-2 rounded-xl transition-all hover:brightness-110"
+              style={{background:'linear-gradient(135deg, #7c3aed, #a78bfa)'}}>
+              Start free
+            </a>
+          </div>
+        </div>
+      </section>
+
+      {/* ── COMPARISON ── */}
+      <section className="py-28 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-14">
+            <p className="text-xs font-semibold uppercase tracking-widest mb-3" style={{color:'rgba(139,92,246,0.7)'}}>How Fibe compares</p>
+            <h2 className="font-display text-4xl md:text-5xl font-normal mb-4" style={{letterSpacing:'-0.02em'}}>
+              The platform others can&apos;t be.
+            </h2>
+            <p style={{color:'rgba(161,161,170,0.6)'}}>Your infra. Your AI. Your rules. No one else can offer all three.</p>
+          </div>
+
+          <div className="glass rounded-2xl overflow-hidden" style={{borderColor:'rgba(139,92,246,0.12)'}}>
+            {/* Header */}
+            <div className="grid grid-cols-5 text-xs font-semibold uppercase tracking-widest px-6 py-4"
+              style={{borderBottom:'1px solid rgba(139,92,246,0.1)',background:'rgba(139,92,246,0.05)'}}>
+              <div className="col-span-2" style={{color:'rgba(161,161,170,0.4)'}}>Feature</div>
+              <div className="text-center gradient-text">Fibe</div>
+              <div className="text-center" style={{color:'rgba(161,161,170,0.3)'}}>Vercel / Railway</div>
+              <div className="text-center" style={{color:'rgba(161,161,170,0.3)'}}>Kubernetes</div>
+            </div>
+
+            {[
+              ['Your own infrastructure',     true,  false, true ],
+              ['Zero vendor lock-in',          true,  false, true ],
+              ['No compute markup',            true,  false, true ],
+              ['No code required (AI agents)', true,  false, false],
+              ['60-second environment boot',   true,  false, false],
+              ['Data stays on your servers',   true,  false, true ],
+              ['Any Docker workload',          true,  'part', true ],
+              ['No ops expertise needed',      true,  true,  false],
+              ['AI agents with full env access',true, false, false],
+              ['SSH access anytime',           true,  false, true ],
+              ['Free to start',                true,  true,  false],
+            ].map(([feature, fibe, vercel, k8s], i, arr) => {
+              const cell = (v) => v === true
+                ? <span className="text-emerald-400 text-base">✓</span>
+                : v === false
+                  ? <span style={{color:'rgba(161,161,170,0.18)',fontSize:'1.1rem'}}>—</span>
+                  : <span style={{color:'rgba(234,179,8,0.55)',fontSize:'0.75rem'}}>partial</span>
+              return (
+                <div key={feature} className="grid grid-cols-5 px-6 py-3 text-sm items-center"
+                  style={{borderBottom: i < arr.length-1 ? '1px solid rgba(139,92,246,0.05)' : 'none'}}>
+                  <div className="col-span-2" style={{color:'rgba(161,161,170,0.65)'}}>{feature}</div>
+                  <div className="text-center">{cell(fibe)}</div>
+                  <div className="text-center">{cell(vercel)}</div>
+                  <div className="text-center">{cell(k8s)}</div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </section>
+
       {/* ── EVERYTHING INCLUDED ── */}
       <section id="everything" className="py-28 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
         <div className="max-w-5xl mx-auto">
@@ -600,10 +702,10 @@ export default function Home() {
       <section className="py-20 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
         <div className="max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-5">
           {[
-            {n:'~60s', label:'git to live URL'},
+            {n:'~60s', label:'idea to live app'},
-            {n:'∞',    label:'Playgrounds per Marquee'},
+            {n:'0',    label:'bytes of your code on Fibe servers'},
             {n:'4',    label:'AI providers built-in'},
-            {n:'0',    label:'vendor lock-in'},
+            {n:'∞',    label:'possibilities'},
           ].map(({n, label}) => (
             <div key={label} className="glass rounded-2xl p-6 text-center" style={{borderColor:'rgba(139,92,246,0.12)'}}>
               <div className="font-display text-4xl font-normal mb-1.5 gradient-text" style={{letterSpacing:'-0.02em'}}>{n}</div>