'Your phone is a dev machine' — any device, anywhere section + hero badge update

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

app/components/Nav.jsx

@@ -5,6 +5,7 @@ const LINKS = [
   { href: '#manifesto',  label: 'Why Fibe' },
   { href: '#features',   label: 'Platform' },
   { href: '#genies',     label: 'Genies' },
+  { href: '#anywhere',   label: 'Any device, anywhere' },
   { href: '#ownership',  label: 'Security & Ownership' },
   { href: '#clouds',     label: 'Cloud guides' },
   { href: '#everything', label: 'Everything included' },

app/page.jsx

@@ -18,7 +18,7 @@ export default function Home() {
           <div className="inline-flex items-center gap-2 text-xs font-medium rounded-full px-4 py-1.5 mb-10"
             style={{color:'#c4b5fd',border:'1px solid rgba(139,92,246,0.3)',background:'rgba(139,92,246,0.1)'}}>
             <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
-            No code required &nbsp;·&nbsp; no DevOps &nbsp;·&nbsp; no limits
+            No code required &nbsp;·&nbsp; any device &nbsp;·&nbsp; anywhere in the world
           </div>
 
           <h1 className="font-display text-6xl md:text-[5.5rem] font-normal tracking-tight leading-[1.02] mb-8"
@@ -34,7 +34,8 @@ export default function Home() {
           </p>
           <p className="text-base max-w-xl mx-auto mb-14"
             style={{color:'rgba(161,161,170,0.4)'}}>
-            Zero DevOps expertise. Zero setup ceremony. Just your idea, live.
+            Zero DevOps. Zero local setup. Zero powerful hardware.
+            Any device, anywhere in the world.
           </p>
 
           <div className="flex flex-col sm:flex-row gap-3 justify-center mb-24">
@@ -482,6 +483,57 @@ export default function Home() {
         </div>
       </section>
 
+      {/* ── ANY DEVICE ANYWHERE ── */}
+      <section id="anywhere" className="py-28 px-6 relative overflow-hidden" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
+        <div className="max-w-5xl mx-auto text-center">
+          <p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(139,92,246,0.7)'}}>
+            Develop from anywhere
+          </p>
+          <h2 className="font-display text-4xl md:text-6xl font-normal mb-6" style={{letterSpacing:'-0.02em'}}>
+            Your phone is now<br />
+            <em className="gradient-text not-italic">a development machine.</em>
+          </h2>
+          <p className="text-lg max-w-2xl mx-auto mb-14 leading-relaxed" style={{color:'rgba(161,161,170,0.7)'}}>
+            The entire dev environment lives in the cloud. Your device is just a window into it.
+            Open a browser, describe your idea, watch Genies build it —
+            from a Tokyo coffee shop, your couch or a $200 Chromebook.
+            Same experience everywhere.
+          </p>
+
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
+            {[
+              {icon:'📱', label:'Smartphone',   desc:'Full terminal, editor and Genie control from your thumb. iOS or Android.'},
+              {icon:'📲', label:'Tablet',        desc:'Perfect for reviewing Genie progress, leaving feedback and approving changes.'},
+              {icon:'💻', label:'Laptop / PC',   desc:'The classic dev experience — but zero local setup. No Node, no Docker, nothing.'},
+              {icon:'🖥️', label:'Any browser',   desc:'Chrome, Safari, Firefox, Arc. If it has a browser, it runs Fibe.'},
+            ].map(({icon, label, desc}) => (
+              <div key={label} className="glass rounded-2xl p-5 text-center transition-all hover:scale-[1.02] hover:brightness-105"
+                style={{borderColor:'rgba(139,92,246,0.12)'}}>
+                <div className="text-3xl mb-3">{icon}</div>
+                <h3 className="font-semibold text-white text-sm mb-2">{label}</h3>
+                <p className="text-xs leading-relaxed" style={{color:'rgba(161,161,170,0.55)'}}>{desc}</p>
+              </div>
+            ))}
+          </div>
+
+          <div className="flex flex-wrap justify-center gap-3">
+            {[
+              'No local install. Ever.',
+              'No powerful hardware required.',
+              'Works on a $200 Chromebook.',
+              'New device? Ready in 30 seconds.',
+              'Internet + browser = full dev environment.',
+              'Ship from anywhere in the world.',
+            ].map(s => (
+              <span key={s} className="px-4 py-2 rounded-full text-sm glass"
+                style={{color:'rgba(196,181,253,0.65)',borderColor:'rgba(139,92,246,0.12)'}}>
+                {s}
+              </span>
+            ))}
+          </div>
+        </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%)'}} />