diff --git a/assets/shared.css b/assets/shared.css
index 1e107f7..e79b116 100644
--- a/assets/shared.css
+++ b/assets/shared.css
@@ -14,7 +14,12 @@ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
 
 /* Anchored sections clear the fixed/sticky bar */
 section[id]{scroll-margin-top:84px}
-#lang{min-width:42px;justify-content:center}
+/* ES / EN segmented language toggle (built by shared.js, replaces the old single button) */
+.langseg{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line2,#3A2C22);border-radius:10px;background:rgba(0,0,0,.22)}
+.langseg .langopt{font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.4px;color:var(--dim,#94867A);background:transparent;border:0;border-radius:7px;padding:5px 9px;cursor:pointer;line-height:1;transition:color .14s,background .14s,box-shadow .14s}
+.langseg .langopt:hover{color:var(--bone,#EFE7DC)}
+.langseg .langopt.on{color:#1A0E06;background:linear-gradient(180deg,var(--ember,#FF6A00),var(--brasa,#E0480F));box-shadow:0 4px 14px rgba(255,106,0,.35)}
+.langseg .langopt.on:hover{color:#1A0E06}
 
 /* Skip link */
 .skip{position:absolute;left:8px;top:-52px;z-index:200;background:var(--card,var(--panel,#1A1310));color:var(--bone,#EFE7DC);border:1px solid var(--ember,#FF6A00);padding:10px 16px;border-radius:10px;font-weight:600;transition:top .15s}
diff --git a/assets/shared.js b/assets/shared.js
index 60b8837..8cba179 100644
--- a/assets/shared.js
+++ b/assets/shared.js
@@ -37,39 +37,72 @@
   window.addEventListener('resize',function(){ if(window.innerWidth>880) set(false); });
 })();
 
-/* Fervon bilingual toggle — ES/EN, persisted, used by every page */
+/* Fervon bilingual toggle — ES/EN segmented control, persisted, used by every page */
 (function(){
   var KEY="fervon-lang";
   var base=(document.documentElement.getAttribute("lang")||"es").slice(0,2).toLowerCase();
   var other=base==="es"?"en":"es";
   var nodes=[].slice.call(document.querySelectorAll("[data-"+other+"]"));
   nodes.forEach(function(n){ var a=n.getAttribute("data-i18n-attr"); n.setAttribute("data-"+base, a?(n.getAttribute(a)||""):n.innerHTML); });
+
+  // Replace the legacy single #lang button with an ES/EN segmented control.
+  var opts={};
+  (function(){
+    var old=document.getElementById("lang"); if(!old) return;
+    var seg=document.createElement("div");
+    seg.id="lang"; seg.className="langseg";
+    seg.setAttribute("role","group"); seg.setAttribute("aria-label","Idioma / Language");
+    ["es","en"].forEach(function(lg){
+      var o=document.createElement("button");
+      o.type="button"; o.className="langopt"; o.setAttribute("data-lang",lg);
+      o.textContent=lg.toUpperCase();
+      o.setAttribute("aria-label",lg==="es"?"Español":"English");
+      o.addEventListener("click",function(){
+        if(document.documentElement.getAttribute("lang")===lg) return;
+        try{localStorage.setItem(KEY,lg);}catch(e){}
+        apply(lg);
+      });
+      opts[lg]=o; seg.appendChild(o);
+    });
+    old.parentNode.replaceChild(seg,old);
+  })();
+
   function apply(lang){
     document.documentElement.setAttribute("lang",lang);
     for(var i=0;i<nodes.length;i++){ var n=nodes[i], v=n.getAttribute("data-"+lang); if(v===null) continue; var a=n.getAttribute("data-i18n-attr"); if(a) n.setAttribute(a,v); else n.innerHTML=v; }
-    var b=document.getElementById("lang"); if(b) b.textContent=(lang==="es"?"EN":"ES");
+    if(opts.es&&opts.en){
+      opts.es.classList.toggle("on",lang==="es"); opts.es.setAttribute("aria-pressed",lang==="es"?"true":"false");
+      opts.en.classList.toggle("on",lang==="en"); opts.en.setAttribute("aria-pressed",lang==="en"?"true":"false");
+    }
     document.dispatchEvent(new CustomEvent("fervon:lang",{detail:lang}));
   }
   var saved=null; try{saved=localStorage.getItem(KEY);}catch(e){}
   var initial=saved||(((navigator.language||"").toLowerCase().slice(0,2)==="es")?"es":"en");
   apply(initial);
-  var b=document.getElementById("lang");
-  if(b) b.addEventListener("click",function(){ var nx=(document.documentElement.getAttribute("lang")==="es")?"en":"es"; try{localStorage.setItem(KEY,nx);}catch(e){} apply(nx); });
 })();
 
 /* Reveal-on-scroll — fade/slide elements in as they enter the viewport.
    IO handles below-the-fold; a rAF pass reveals whatever is already on
    screen so content is never left hidden if the initial IO tick is missed. */
 (function(){
-  var els=[].slice.call(document.querySelectorAll(".reveal")); if(!els.length) return;
-  function show(el){ el.classList.add("in"); }
-  if(!("IntersectionObserver" in window)){ els.forEach(show); return; }
-  var rev=new IntersectionObserver(function(es){ es.forEach(function(en){ if(en.isIntersecting){ show(en.target); rev.unobserve(en.target); } }); },{threshold:.12});
-  els.forEach(function(el){ rev.observe(el); });
-  // Safety net: reveal whatever is already on screen, in case the initial
-  // IntersectionObserver tick is missed. setTimeout fires regardless of paint.
-  setTimeout(function(){
+  var pending=[].slice.call(document.querySelectorAll(".reveal")); if(!pending.length) return;
+  function reveal(el){ el.classList.add("in"); }
+  function check(){
+    if(!pending.length) return;
     var vh=window.innerHeight||document.documentElement.clientHeight;
-    els.forEach(function(el){ var r=el.getBoundingClientRect(); if(r.top<vh+40 && r.bottom>-40){ show(el); rev.unobserve(el); } });
-  },60);
+    pending=pending.filter(function(el){
+      var r=el.getBoundingClientRect();
+      if(r.top<vh-40 && r.bottom>-40){ reveal(el); return false; }
+      return true;
+    });
+    if(!pending.length){ window.removeEventListener("scroll",onScroll); window.removeEventListener("resize",onScroll); }
+  }
+  var ticking=false;
+  function onScroll(){ if(ticking) return; ticking=true; requestAnimationFrame(function(){ ticking=false; check(); }); }
+  window.addEventListener("scroll",onScroll,{passive:true});
+  window.addEventListener("resize",onScroll,{passive:true});
+  // Initial passes as fonts/layout settle.
+  requestAnimationFrame(check); setTimeout(check,120); setTimeout(check,500);
+  // Final guard: never leave .reveal content stuck hidden, whatever happens.
+  setTimeout(function(){ pending.forEach(reveal); pending=[]; },4000);
 })();
diff --git a/contacto/index.html b/contacto/index.html
new file mode 100644
index 0000000..65211cd
--- /dev/null
+++ b/contacto/index.html
@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <title>Contacto · Fervon</title>
+  <meta name="description" content="¿Un producto, un servicio o solo saludar? Escríbeme directamente. Te respondo yo, sin intermediarios. Fervon — estudio de software autónomo." />
+  <link rel="canonical" href="https://fervon.dev/contacto/" />
+  <meta name="robots" content="index, follow, max-image-preview:large" />
+  <meta name="author" content="Fervon" />
+  <meta name="theme-color" content="#0E0B0A" />
+  <link rel="icon" href="/assets/favicon.svg" type="image/svg+xml" />
+  <link rel="icon" href="/assets/favicon-32.png" sizes="32x32" type="image/png" />
+  <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png" />
+
+  <meta property="og:type" content="website" />
+  <meta property="og:site_name" content="Fervon" />
+  <meta property="og:title" content="Contacto · Fervon" />
+  <meta property="og:description" content="¿Un producto, un servicio o solo saludar? Escríbeme directamente. Te respondo yo, sin intermediarios." />
+  <meta property="og:url" content="https://fervon.dev/contacto/" />
+  <meta property="og:image" content="https://fervon.dev/assets/og-home.png" />
+  <meta name="twitter:image" content="https://fervon.dev/assets/og-home.png" />
+  <meta property="og:locale" content="es_ES" />
+  <meta name="twitter:card" content="summary_large_image" />
+
+  <link rel="stylesheet" href="/index.css" />
+  <link rel="stylesheet" href="/assets/shared.css" />
+</head>
+<body class="contact-page">
+  <a class="skip" href="#top" data-en="Skip to content">Saltar al contenido</a>
+
+  <nav><div class="bar">
+    <a class="brand" href="/"><svg class="blogo" viewBox="0 0 104 126" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs><linearGradient id="nf" x1="0" y1="1" x2="0" y2="0"><stop offset="0" stop-color="#B5300A"/><stop offset=".45" stop-color="#E0480F"/><stop offset=".75" stop-color="#FF6A00"/><stop offset="1" stop-color="#FFB02E"/></linearGradient><linearGradient id="ns" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#FF6A00"/><stop offset="1" stop-color="#FFD37A"/></linearGradient></defs><path d="M44 4 C30 4 22 13 22 30 L22 40 L8 40 L8 56 L22 56 L22 116 C22 119 24 121 27 121 L37 121 C40 121 42 119 42 116 L42 56 L60 56 L60 40 L42 40 L42 30 C42 23 45 20 52 20 L64 20 L64 4 Z" fill="url(#nf)"/><path d="M58 40 L96 40 C92 47 86 50 78 50 L60 50 L58 56 L60 56 L78 56 C88 56 96 49 99 39 C100 36 99 33 96 33 L60 33 L58 40 Z" fill="url(#ns)"/><circle cx="84" cy="19" r="3.2" fill="#FFD37A"/><circle cx="95" cy="25" r="1.9" fill="#FF6A00"/></svg><span class="bword">fervon</span></a>
+    <div class="links">
+      <div class="hasmega">
+        <a class="navbtn" href="/#productos" aria-haspopup="true" aria-expanded="false" aria-controls="mega-productos" data-en="Products &lt;span class=&quot;s-wo-hrmDi&quot;&gt;▾&lt;/span&gt;">Productos <span class="s-wo-hrmDi">▾</span></a>
+        <div class="mega" id="mega-productos">
+          <div class="megagroup full">
+            <div class="megalabel" data-en="Paid">De pago</div>
+            <a class="megaitem" href="/trace/"><span class="mi-ic" aria-hidden="true"><svg class="ic ic-trace" viewBox="0 0 120 120" aria-hidden="true"><path class="ln" d="M18 90 L46 54 L74 72 L102 30"/><circle class="dot" cx="18" cy="90" r="5"/><circle class="dot" cx="46" cy="54" r="5"/><circle class="dot" cx="74" cy="72" r="5"/><circle class="dot p" cx="102" cy="30" r="5.5"/><circle class="ring" cx="102" cy="30" r="11"/></svg></span><span><span class="mi-n" data-en="Trace &lt;b&gt;PAID&lt;/b&gt;">Trace <b>DE PAGO</b></span><span class="mi-d" data-en="Your personal memory, on your machine. No screen recording.">Tu memoria personal, en tu máquina. Sin grabar la pantalla.</span></span></a>
+          </div>
+          <div class="megagroup">
+            <div class="megalabel" data-en="Local AI &amp; agents">IA local &amp; agentes</div>
+            <a class="megaitem" href="/inferbench/"><span class="mi-ic" aria-hidden="true"><svg class="ic ic-inf" viewBox="0 0 40 40" aria-hidden="true"><rect x="13" y="13" width="14" height="14" rx="2.5"/><circle class="dot" cx="20" cy="20" r="2.4"/><path d="M16 13V8 M24 13V8 M16 32v-5 M24 32v-5 M13 16H8 M13 24H8 M32 16h-5 M32 24h-5"/><path class="sp" d="M30 11 l4 -3 M33 30 l4 2"/></svg></span><span><span class="mi-n">inferbench</span><span class="mi-d" data-en="Benchmark LLMs on your GPU.">Benchmark de LLMs en tu GPU.</span></span></a>
+            <a class="megaitem" href="/lookspan/"><span class="mi-ic" aria-hidden="true"><svg class="ic ic-look" viewBox="0 0 40 40" aria-hidden="true"><rect class="bar" x="9" y="11" width="20" height="3.4" rx="1.7"/><rect class="bar" x="9" y="18.3" width="13" height="3.4" rx="1.7"/><rect class="bar" x="9" y="25.6" width="25" height="3.4" rx="1.7"/></svg></span><span><span class="mi-n">Lookspan</span><span class="mi-d" data-en="Observability for AI agents.">Observabilidad de agentes de IA.</span></span></a>
+            <a class="megaitem" href="/claudescope/"><span class="mi-ic" aria-hidden="true"><svg class="ic ic-scope" viewBox="0 0 40 40" aria-hidden="true"><circle cx="18" cy="18" r="9"/><path d="M25 25 L32 32"/><line class="scan" x1="13.5" y1="18" x2="22.5" y2="18"/></svg></span><span><span class="mi-n">ClaudeScope</span><span class="mi-d" data-en="Search your Claude Code sessions.">Busca tus sesiones de Claude Code.</span></span></a>
+          </div>
+          <div class="megagroup">
+            <div class="megalabel" data-en="Utilities">Utilidades</div>
+            <a class="megaitem" href="/launchpad/"><span class="mi-ic" aria-hidden="true"><svg class="ic ic-launch" viewBox="0 0 40 40" aria-hidden="true"><g class="rk"><path d="M20 7 C24 11 25 18 20 25 C15 18 16 11 20 7 Z"/><circle class="dot" cx="20" cy="15" r="1.8"/><path d="M16 22 L13 28 M24 22 L27 28"/></g></svg></span><span><span class="mi-n">launchpad</span><span class="mi-d" data-en="Spin up all your projects.">Levanta todos tus proyectos.</span></span></a>
+            <a class="megaitem" href="/pregon/"><span class="mi-ic" aria-hidden="true"><svg class="ic ic-pregon" viewBox="0 0 40 40" aria-hidden="true"><circle class="dot" cx="20" cy="20" r="3"/><circle class="ring" cx="20" cy="20" r="7"/><circle class="ring ring2" cx="20" cy="20" r="7"/></svg></span><span><span class="mi-n">Pregón</span><span class="mi-d" data-en="Publish to 8+ channels.">Publica en 8+ canales.</span></span></a>
+          </div>
+        </div>
+      </div>
+      <button id="lang" class="navbtn" type="button" aria-label="Cambiar idioma / Switch language">EN</button>
+      <a class="cta" href="#top" aria-current="page" data-en="Let's talk">Hablemos</a>
+    </div>
+  </div></nav>
+
+  <main class="wrap">
+
+    <!-- HERO -->
+    <header class="chero" id="top">
+      <h1 data-en="Let's build something. &lt;span class=&quot;grad&quot;&gt;Forged red-hot.&lt;/span&gt;">Construyamos algo. <span class="grad">Forjado al rojo vivo.</span></h1>
+      <p data-en="I apply the same engine I build my own products with —fleets of AI agents and a local-first approach— to your company's challenges. From idea to product, fast, and you deal with me directly.">Aplico el mismo motor con el que construyo mis productos —flotas de agentes de IA y un enfoque local-first— a los retos de tu empresa. De la idea al producto, rápido, y hablando directamente conmigo.</p>
+      <div class="cta-row">
+        <a class="btn btn-fire" href="#form" data-en="Tell me about your project">Cuéntame tu proyecto</a>
+        <a class="btn btn-ghost" href="/#productos" data-en="See the products">Ver productos</a>
+      </div>
+    </header>
+
+    <!-- QUÉ PUEDO CONSTRUIR -->
+    <section class="sec" id="que">
+      <h2 data-en="What I can build">Qué puedo construir</h2>
+      <p class="sub" data-en="Bespoke software, with AI agents.">Software a medida, con agentes de IA.</p>
+      <div class="services">
+        <h3 data-en="From an MVP to your own software factory">De un MVP a tu propia fábrica de software</h3>
+        <p class="intro" data-en="Whether you have a clear idea or just a problem to solve, I take it from concept to working product —directing autonomous agent fleets, with everything running local-first when it matters.">Tanto si tienes una idea clara como si solo tienes un problema que resolver, lo llevo del concepto al producto funcionando —dirigiendo flotas de agentes autónomos, con todo corriendo local-first cuando importa.</p>
+        <ul>
+          <li data-en="Bespoke development&lt;span&gt;End-to-end products and MVPs, ready to ship.&lt;/span&gt;">Desarrollo a medida<span>Productos y MVPs de principio a fin, listos para lanzar.</span></li>
+          <li data-en="Agent automation&lt;span&gt;AI fleets that handle your processes and code.&lt;/span&gt;">Automatización con agentes<span>Flotas de IA que se encargan de tus procesos y tu código.</span></li>
+          <li data-en="Internal tools&lt;span&gt;Dashboards, CLIs and local-first observability.&lt;/span&gt;">Herramientas internas<span>Dashboards, CLIs y observabilidad local-first.</span></li>
+          <li data-en="Consulting&lt;span&gt;How to build your own AI software factory.&lt;/span&gt;">Consultoría<span>Cómo montar tu propia fábrica de software con IA.</span></li>
+        </ul>
+      </div>
+    </section>
+
+    <!-- CÓMO TRABAJO -->
+    <section class="sec" id="proceso">
+      <h2 data-en="How it works">Cómo trabajo</h2>
+      <p class="sub" data-en="Clear, direct, no surprises.">Claro, directo y sin sorpresas.</p>
+      <div class="steps">
+        <div class="step">
+          <span class="n">1</span>
+          <h4 data-en="We talk">Hablamos</h4>
+          <p data-en="You tell me the problem. No commitment, no middlemen — you reach me directly.">Me cuentas el problema. Sin compromiso y sin intermediarios — me hablas a mí.</p>
+        </div>
+        <div class="step">
+          <span class="n">2</span>
+          <h4 data-en="Clear proposal">Propuesta clara</h4>
+          <p data-en="Scope, timeline and a fixed price, agreed before any work starts.">Alcance, plazos y precio cerrado, acordados antes de empezar a trabajar.</p>
+        </div>
+        <div class="step">
+          <span class="n">3</span>
+          <h4 data-en="I build with AI fleets">Construyo con flotas de IA</h4>
+          <p data-en="I direct autonomous agents to go from idea to product in record time, around the clock.">Dirijo agentes autónomos para ir de la idea al producto en tiempo récord, sin pausa.</p>
+        </div>
+        <div class="step">
+          <span class="n">4</span>
+          <h4 data-en="Delivery & support">Entrega y soporte</h4>
+          <p data-en="Your code, documented and yours to keep. I stay around after launch.">Tu código, documentado y tuyo. Te acompaño también después del lanzamiento.</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- POR QUÉ FERVON -->
+    <section class="sec" id="porque">
+      <h2 data-en="Why work with me">Por qué trabajar conmigo</h2>
+      <p class="sub" data-en="A studio that ships like a team, run by one person you can actually reach.">Un estudio que entrega como un equipo, llevado por una persona a la que puedes llegar.</p>
+      <div class="why">
+        <div class="whycard">
+          <h4 data-en="Real speed">Velocidad real</h4>
+          <p data-en="Fleets of agents working in parallel, around the clock — what used to take a team takes days.">Flotas de agentes trabajando en paralelo y sin pausa — lo que antes era cosa de un equipo entero sale en días.</p>
+        </div>
+        <div class="whycard">
+          <h4 data-en="Local-first & private">Local-first y privado</h4>
+          <p data-en="Your code and your data stay where they should. Inference can even run on local models, at $0.">Tu código y tus datos se quedan donde deben. La inferencia puede correr incluso en modelos locales, a coste $0.</p>
+        </div>
+        <div class="whycard">
+          <h4 data-en="Product, not hours">Producto, no horas</h4>
+          <p data-en="You get something that works, with a closed scope and price — not an invoice for time spent.">Recibes algo que funciona, con alcance y precio cerrados — no una factura por horas.</p>
+        </div>
+        <div class="whycard">
+          <h4 data-en="You talk to me">Hablas conmigo</h4>
+          <p data-en="No account managers, no sales layer. The person who builds it is the person who answers you.">Sin gestores de cuenta ni capa comercial. Quien lo construye es quien te responde.</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- CONTACTO -->
+    <section class="sec" id="form">
+      <h2 data-en="Let's talk">Hablemos</h2>
+      <p class="sub" data-en="A product, a service or just to say hi? Drop me a line — you reach me directly.">¿Un producto, un servicio o solo saludar? Escríbeme — me llega a mí directamente.</p>
+      <div class="contact">
+        <form action="https://formspree.io/f/mnjyoknb" method="POST">
+          <input type="hidden" name="origen" value="contacto" />
+          <input type="hidden" name="_subject" value="fervon.dev · contacto" />
+          <label class="vh" for="c-nombre" data-en="Your name">Tu nombre</label>
+          <input type="text" id="c-nombre" name="nombre" placeholder="Tu nombre" autocomplete="name" required data-i18n-attr="placeholder" data-en="Your name" />
+          <label class="vh" for="c-email" data-en="Your email">Tu email</label>
+          <input type="email" id="c-email" name="email" placeholder="Tu email" autocomplete="email" required data-i18n-attr="placeholder" data-en="Your email" />
+          <label class="vh" for="c-mensaje" data-en="Your message">Tu mensaje</label>
+          <textarea id="c-mensaje" name="mensaje" rows="5" placeholder="Cuéntame en qué andas: el problema, el plazo, lo que tengas…" required data-i18n-attr="placeholder" data-en="Tell me what you're working on: the problem, the timeline, whatever you've got…"></textarea>
+          <button type="submit" class="btn btn-fire" data-en="Send message">Enviar mensaje</button>
+        </form>
+        <p class="note" data-en="You reach me directly, no middlemen. Prefer code? &lt;a href=&quot;https://github.com/Fervon&quot;&gt;Find me on GitHub&lt;/a&gt;.">Te respondo yo, sin intermediarios. ¿Prefieres código? <a href="https://github.com/Fervon">Encuéntrame en GitHub</a>.</p>
+      </div>
+    </section>
+
+    <!-- FAQ -->
+    <section class="sec" id="faq">
+      <h2 data-en="FAQ">Preguntas frecuentes</h2>
+      <p class="sub" data-en="The things people usually ask before we start.">Lo que la gente suele preguntar antes de empezar.</p>
+      <div class="faq">
+        <details>
+          <summary data-en="What do you build with?">¿Con qué tecnologías trabajas?</summary>
+          <p data-en="TypeScript/Node and React on the front, Python where it fits, SQLite/Postgres for data, and deep LLM integration —Claude plus local models via llama.cpp. The same stack behind my own products.">TypeScript/Node y React en el front, Python donde encaja, SQLite/Postgres para datos, e integración profunda con LLMs —Claude y modelos locales vía llama.cpp. El mismo stack que hay detrás de mis productos.</p>
+        </details>
+        <details>
+          <summary data-en="Do you work with startups or companies?">¿Trabajas con startups o con empresas?</summary>
+          <p data-en="Both. From a weekend MVP for a founder to automating internal processes for an established team. If it can be forged, we can talk.">Con ambas. Desde un MVP para un fundador hasta automatizar procesos internos de un equipo ya establecido. Si se puede forjar, podemos hablar.</p>
+        </details>
+        <details>
+          <summary data-en="How does pricing work?">¿Cómo es el precio?</summary>
+          <p data-en="Per project, with a closed scope and price agreed up front —not per hour. You always know what you'll pay before any work begins.">Por proyecto, con alcance y precio cerrados acordados antes de empezar —no por horas. Siempre sabes lo que vas a pagar antes de que arranque nada.</p>
+        </details>
+        <details>
+          <summary data-en="Where are you based?">¿Dónde estás?</summary>
+          <p data-en="Remote, from Spain (CET). I work with clients in any timezone — async by default, calls when they help.">Remoto, desde España (CET). Trabajo con clientes de cualquier zona horaria — asíncrono por defecto y llamadas cuando hacen falta.</p>
+        </details>
+        <details>
+          <summary data-en="Who owns the code?">¿De quién es el código?</summary>
+          <p data-en="You do. Everything I deliver is yours, documented and handed over — no lock-in to me or to any platform.">Tuyo. Todo lo que entrego es tuyo, documentado y traspasado — sin dependencia de mí ni de ninguna plataforma.</p>
+        </details>
+      </div>
+    </section>
+
+  </main>
+
+  <footer><div class="wrap">
+    <div class="mark"><svg class="blogo" viewBox="0 0 104 126" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs><linearGradient id="ff" x1="0" y1="1" x2="0" y2="0"><stop offset="0" stop-color="#B5300A"/><stop offset=".45" stop-color="#E0480F"/><stop offset=".75" stop-color="#FF6A00"/><stop offset="1" stop-color="#FFB02E"/></linearGradient><linearGradient id="fs" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#FF6A00"/><stop offset="1" stop-color="#FFD37A"/></linearGradient></defs><path d="M44 4 C30 4 22 13 22 30 L22 40 L8 40 L8 56 L22 56 L22 116 C22 119 24 121 27 121 L37 121 C40 121 42 119 42 116 L42 56 L60 56 L60 40 L42 40 L42 30 C42 23 45 20 52 20 L64 20 L64 4 Z" fill="url(#ff)"/><path d="M58 40 L96 40 C92 47 86 50 78 50 L60 50 L58 56 L60 56 L78 56 C88 56 96 49 99 39 C100 36 99 33 96 33 L60 33 L58 40 Z" fill="url(#fs)"/></svg> fervon</div>
+    <div class="flinks">
+      <a href="/#productos" data-en="Products">Productos</a>
+      <a href="/contacto/" data-en="Contact">Contacto</a>
+      <a href="https://github.com/Fervon">GitHub</a>
+    </div>
+    <div class="copy" data-en="Forged red-hot · © 2026 Fervon">Forjado al rojo vivo · © 2026 Fervon</div>
+  </div></footer>
+
+  <script src="/assets/shared.js" defer></script>
+</body>
+</html>
diff --git a/index.css b/index.css
index 5b83099..20eb9e7 100644
--- a/index.css
+++ b/index.css
@@ -1,4 +1,4 @@
-:root{--carbon:#0E0B0A;--carbon-2:#16110E;--card:#1A1310;--line:#2C211B;--line2:#3A2C22;--ember:#FF6A00;--brasa:#E0480F;--amber:#FFB02E;--bone:#EFE7DC;--ash:#A89A8E;--dim:#94867A}
+:root{--carbon:#0E0B0A;--carbon-2:#16110E;--card:#1A1310;--line:#2C211B;--line2:#3A2C22;--ember:#FF6A00;--brasa:#E0480F;--amber:#FFB02E;--bone:#EFE7DC;--ash:#A89A8E;--dim:#B0A296}
     *{box-sizing:border-box;margin:0;padding:0}
     html{scroll-behavior:smooth}
     body{background:var(--carbon);color:var(--bone);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
@@ -37,9 +37,48 @@
     .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:11px;font-size:15px;font-weight:600;cursor:pointer;border:0;transition:.16s}
     .btn-fire{background:linear-gradient(180deg,var(--ember),var(--brasa));color:#1A0E06;box-shadow:0 8px 26px rgba(255,106,0,.3)}
     .btn-fire:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(255,106,0,.42)}
+    .btn-fire{position:relative;overflow:hidden}
+    .btn-fire::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-18deg);transition:left .55s ease}
+    .btn-fire:hover::after{left:160%}
     .btn-ghost{border:1px solid var(--line2);color:var(--bone);background:transparent}
     .btn-ghost:hover{border-color:var(--ember);color:var(--amber)}
 
+    /* Reveal-on-scroll (driven by shared.js IntersectionObserver) */
+    .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*70ms)}
+    .reveal.in{opacity:1;transform:none}
+    @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
+
+    /* Product/star icons animate only on hover — quieter by default */
+    .pcard .ic *,.star .ic *{animation-play-state:paused}
+    .pcard:hover .ic *,.star:hover .ic *{animation-play-state:running}
+
+    /* Thesis strip (between hero and products) */
+    .thesis{padding:30px 0 8px}
+    .thesis .tline{max-width:760px;margin:0 auto 26px;text-align:center;font-size:19px;line-height:1.55;color:var(--ash)}
+    .thesis .tline strong{color:var(--bone);font-weight:600}
+    .proof{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
+    @media(max-width:860px){.proof{grid-template-columns:repeat(2,1fr)}}
+    @media(max-width:520px){.proof{grid-template-columns:1fr}}
+    .proofcard{background:linear-gradient(165deg,rgba(255,255,255,.022),transparent),var(--card);border:1px solid var(--line);border-radius:13px;padding:18px 18px}
+    .proofcard .pf-h{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;color:var(--bone)}
+    .proofcard .pf-h svg{width:18px;height:18px;flex:none;color:var(--ember)}
+    .proofcard p{margin-top:7px;color:var(--ash);font-size:13px;line-height:1.5}
+
+    /* Whole-card stretched link (so the card stays clickable without nesting anchors) */
+    .pcard .card-link{position:absolute;inset:0;z-index:3;border-radius:inherit}
+    /* Product source link — sits above the stretched card link */
+    .pcard .psrc{margin-top:10px;font-size:12.5px;font-weight:600;color:var(--dim);display:inline-flex;align-items:center;gap:6px;position:relative;z-index:4;transition:color .15s ease}
+    .pcard .psrc svg{width:14px;height:14px}
+    .pcard .psrc:hover{color:var(--amber)}
+
+    /* Closing CTA */
+    .endcta{padding:8px 0 40px}
+    .endcta .endbox{position:relative;text-align:center;border:1px solid var(--line2);border-radius:20px;padding:44px 28px;overflow:hidden;background:linear-gradient(150deg,#241510,#15100E)}
+    .endcta .endbox::before{content:"";position:absolute;left:50%;top:-60px;width:420px;height:300px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(255,106,0,.18),transparent 68%);pointer-events:none}
+    .endcta .endbox h2{position:relative;font-size:clamp(24px,3.4vw,32px);font-weight:800;letter-spacing:-.5px;color:var(--bone);text-transform:none}
+    .endcta p{position:relative;max-width:520px;margin:12px auto 24px;color:var(--ash);font-size:16px}
+    .endcta .cta-row{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
+
     /* Hero */
     .hero{position:relative;text-align:center;padding:84px 24px 52px;overflow:hidden;background:linear-gradient(rgba(14,11,10,.74),rgba(14,11,10,.93)),url(/assets/textura-forja.png) center/cover no-repeat}
     .hero::before{content:"";position:absolute;top:-120px;left:50%;width:760px;height:520px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(255,106,0,.2),rgba(224,72,15,.08) 38%,transparent 70%);pointer-events:none;animation:breathe 6s ease-in-out infinite}
@@ -64,10 +103,13 @@
     .sec .sub{text-align:center;color:var(--dim);font-size:15px;margin-bottom:32px}
 
     /* Trace destacado */
-    .star{position:relative;border-radius:18px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;background:linear-gradient(150deg,#1d1420,#15100E);border:1px solid var(--line2);overflow:hidden;padding:30px 34px;transition:border-color .18s ease,box-shadow .18s ease}
+    .star{position:relative;border-radius:18px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;background:linear-gradient(150deg,#241510,#15100E);border:1px solid var(--line2);overflow:hidden;padding:30px 34px;transition:border-color .18s ease,box-shadow .18s ease}
     .star::before{content:"";position:absolute;right:-20px;top:50%;width:280px;height:280px;transform:translateY(-50%);background:radial-gradient(circle,color-mix(in srgb,var(--ac) 17%,transparent),transparent 64%);pointer-events:none}
     .star:hover{border-color:color-mix(in srgb,var(--ac) 48%,var(--line2));box-shadow:0 18px 44px rgba(0,0,0,.5)}
     .star .scontent{position:relative;z-index:2}
+    .star .pname-link{display:inline-block;color:inherit;text-decoration:none}
+    .star .pname-link:hover .pname{color:var(--amber)}
+    .star .sbig-link{display:block;position:relative;z-index:2}
     .star .sbig{width:116px;height:116px;flex:none;position:relative;z-index:2}
     .star .pname{font-size:25px;font-weight:800;letter-spacing:-.4px;margin-top:12px}
     .star .pname small{color:var(--dim);font-weight:400;font-size:15px}
@@ -120,23 +162,71 @@
     .badge.paid{background:rgba(255,176,46,.14);color:var(--amber);border:1px solid rgba(255,176,46,.32)}
 
     /* Servicios */
-    .services{background:linear-gradient(150deg,#1A1310,#140E0B);border:1px solid var(--line);border-radius:18px;padding:34px 32px}
-    .services h3{font-size:22px;font-weight:800}
-    .services .intro{color:var(--ash);margin-top:10px;max-width:640px}
-    .services ul{list-style:none;margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 26px}
-    .services li{padding-left:24px;position:relative;color:var(--bone);font-size:15px;font-weight:600}
-    .services li::before{content:"";position:absolute;left:0;top:4px;width:15px;height:15px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6A00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E")}
-    .services li span{display:block;color:var(--ash);font-size:13.5px;font-weight:400}
-    .services .sact{margin-top:26px}
+    .services{position:relative;background:linear-gradient(150deg,#1d1510,#140E0B);border:1px solid var(--line2);border-radius:20px;padding:40px 36px;overflow:hidden}
+    .services::before{content:"";position:absolute;right:-90px;top:-90px;width:360px;height:360px;background:radial-gradient(circle,rgba(255,106,0,.16),rgba(224,72,15,.05) 42%,transparent 68%);pointer-events:none}
+    .services>*{position:relative;z-index:2}
+    .services h3{font-size:23px;font-weight:800;letter-spacing:-.3px}
+    .services .intro{color:var(--ash);margin-top:11px;max-width:620px;line-height:1.62}
+    .services ul{list-style:none;margin-top:28px;display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
+    @media(max-width:620px){.services ul{grid-template-columns:1fr}}
+    .services li{padding:16px 16px 16px 54px;position:relative;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:13px;color:var(--bone);font-size:15px;font-weight:700;transition:border-color .16s ease,background .16s ease,transform .16s ease}
+    .services li:hover{border-color:color-mix(in srgb,var(--ember) 44%,var(--line));background:rgba(255,106,0,.055);transform:translateY(-2px)}
+    .services li::before{content:"";position:absolute;left:14px;top:15px;width:28px;height:28px;border-radius:9px;border:1px solid color-mix(in srgb,var(--ember) 28%,transparent);background:color-mix(in srgb,var(--ember) 12%,#0c0908) no-repeat center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6A00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E");transition:transform .16s ease}
+    .services li:hover::before{transform:scale(1.08)}
+    .services li span{display:block;color:var(--ash);font-size:13.5px;font-weight:400;margin-top:5px;line-height:1.45}
+    .services .sact{margin-top:30px}
+    @media(max-width:560px){.services{padding:30px 22px}}
 
     /* Contacto */
-    .contact{max-width:580px;margin:0 auto}
-    .contact form{display:flex;flex-direction:column;gap:14px;margin-top:8px}
-    .contact input,.contact textarea{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:13px 15px;color:var(--bone);font-family:inherit;font-size:15px;transition:border-color .15s ease;resize:vertical}
+    .contact{max-width:600px;margin:0 auto}
+    .contact form{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px;background:linear-gradient(150deg,#1A1310,#140E0B);border:1px solid var(--line2);border-radius:18px;padding:28px;overflow:hidden}
+    .contact form::before{content:"";position:absolute;left:-80px;bottom:-90px;width:320px;height:320px;background:radial-gradient(circle,rgba(255,106,0,.13),transparent 66%);pointer-events:none}
+    .contact input,.contact textarea{position:relative;z-index:2;background:#0E0B0A;border:1px solid var(--line);border-radius:11px;padding:14px 16px;color:var(--bone);font-family:inherit;font-size:15px;transition:border-color .15s ease,box-shadow .15s ease;resize:vertical}
+    .contact textarea,.contact button{grid-column:1 / -1}
     .contact input::placeholder,.contact textarea::placeholder{color:var(--dim)}
-    .contact input:focus,.contact textarea:focus{outline:none;border-color:var(--ember)}
-    .contact button{align-self:flex-start}
-    .contact .note{text-align:center;color:var(--dim);font-size:13px;margin-top:14px}
+    .contact input:focus,.contact textarea:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(255,106,0,.15)}
+    .contact button{position:relative;z-index:2;justify-self:start}
+    .contact .note{text-align:center;color:var(--dim);font-size:13px;margin-top:16px}
+    .contact .note a{color:var(--amber);font-weight:600}
+    .contact .note a:hover{text-decoration:underline}
+    /* Standalone contact / hire page */
+    .contact-page{display:flex;flex-direction:column;min-height:100vh}
+    .contact-page main{flex:1;padding-bottom:32px}
+    .chero{text-align:center;padding:62px 0 4px}
+    .chero h1{font-size:clamp(30px,5vw,46px);font-weight:800;letter-spacing:-1px;line-height:1.08;color:var(--bone)}
+    .chero h1 .grad{background:linear-gradient(90deg,var(--ember),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
+    .chero p{max-width:600px;margin:18px auto 0;color:var(--ash);font-size:18px;line-height:1.6}
+    .chero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
+
+    /* Process steps */
+    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
+    @media(max-width:860px){.steps{grid-template-columns:repeat(2,1fr)}}
+    @media(max-width:520px){.steps{grid-template-columns:1fr}}
+    .step{background:linear-gradient(165deg,rgba(255,255,255,.022),transparent),var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 20px}
+    .step .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;font-weight:800;font-size:15px;color:#1A0E06;background:linear-gradient(180deg,var(--ember),var(--brasa));box-shadow:0 4px 14px rgba(255,106,0,.3)}
+    .step h4{margin-top:14px;font-size:16px;font-weight:700;color:var(--bone)}
+    .step p{margin-top:7px;color:var(--ash);font-size:13.6px;line-height:1.55}
+
+    /* Why cards */
+    .why{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
+    @media(max-width:860px){.why{grid-template-columns:repeat(2,1fr)}}
+    @media(max-width:520px){.why{grid-template-columns:1fr}}
+    .whycard{background:linear-gradient(165deg,rgba(255,255,255,.022),transparent),var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 20px;transition:border-color .16s ease,transform .16s ease}
+    .whycard:hover{border-color:color-mix(in srgb,var(--ember) 40%,var(--line));transform:translateY(-3px)}
+    .whycard h4{font-size:16px;font-weight:700;color:var(--bone);display:flex;align-items:center;gap:10px}
+    .whycard h4::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ember);box-shadow:0 0 10px var(--ember);flex:none}
+    .whycard p{margin-top:9px;color:var(--ash);font-size:13.8px;line-height:1.55}
+
+    /* FAQ */
+    .faq{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
+    .faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:2px 18px;transition:border-color .16s ease}
+    .faq details[open]{border-color:var(--line2)}
+    .faq summary{cursor:pointer;list-style:none;padding:15px 0;font-weight:600;font-size:15px;color:var(--bone);display:flex;justify-content:space-between;align-items:center;gap:14px}
+    .faq summary::-webkit-details-marker{display:none}
+    .faq summary::after{content:"+";color:var(--ember);font-size:22px;font-weight:300;line-height:1;transition:transform .2s ease}
+    .faq details[open] summary::after{transform:rotate(45deg)}
+    .faq details p{color:var(--ash);font-size:14px;line-height:1.6;margin:0;padding:0 0 16px}
+    @media(max-width:560px){.contact form{grid-template-columns:1fr;padding:22px}}
 
     /* Footer */
     footer{border-top:1px solid var(--line);margin-top:70px;padding:40px 0 56px;text-align:center}
@@ -151,10 +241,10 @@
 /* === utility classes extracted from style="" attributes === */
 .s-wo-hrmDi{font-size:10px}
 .s-ZETSm3WM{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
-.s-h_iOgBNu{--ac:#B98BFF}
-.s-f1Zbn6Zb{--ac:#FFB02E}
-.s-9MORdOj_{--ac:#5BC8D8}
-.s-5h9VS3PC{--ac:#A78BFF}
-.s-LQsgACj5{--ac:#8FD06B}
-.s-Cl-z-CpE{--ac:#FF8A66}
+.s-h_iOgBNu{--ac:var(--ember)}
+.s-f1Zbn6Zb{--ac:var(--amber)}
+.s-9MORdOj_{--ac:var(--ember)}
+.s-5h9VS3PC{--ac:var(--amber)}
+.s-LQsgACj5{--ac:var(--ember)}
+.s-Cl-z-CpE{--ac:var(--amber)}
 
diff --git a/index.html b/index.html
index 9101e46..ab20eb6 100644
--- a/index.html
+++ b/index.html
@@ -69,9 +69,8 @@
           </div>
         </div>
       </div>
-      <a href="#servicios" data-en="Services">Servicios</a>
       <button id="lang" class="navbtn" type="button" aria-label="Cambiar idioma / Switch language">EN</button>
-      <a class="cta" href="#contacto" data-en="Let's talk">Hablemos</a>
+      <a class="cta" href="/contacto/" data-en="Let's talk">Hablemos</a>
     </div>
   </div></nav>
 
@@ -102,107 +101,114 @@ <h1 class="s-ZETSm3WM">Fervon — estudio de software autónomo. Forjado al rojo
         </g>
       </svg>
     </div>
-    <p class="lead" data-en="&lt;strong&gt;Autonomous software studio.&lt;/strong&gt; I forge products, open-source tools and bespoke software by directing fleets of AI agents — local-first, around the clock."><strong>Estudio de software autónomo.</strong> Forjo productos, herramientas open source y software a medida dirigiendo flotas de agentes de IA — local-first, sin pausa.</p>
+    <p class="lead" data-en="&lt;strong&gt;Autonomous software studio.&lt;/strong&gt; I design and ship bespoke software and my own products by directing fleets of AI agents — local-first, around the clock."><strong>Estudio de software autónomo.</strong> Diseño y entrego software a medida y productos propios, dirigiendo flotas de agentes de IA — local-first y sin pausa.</p>
     <p class="root" data-en="from the Latin &lt;em&gt;fervere&lt;/em&gt; — to burn, to boil, to seethe with fervor">del latín <em>fervere</em> — arder, hervir, bullir con fervor</p>
     <div class="cta-row">
-      <a class="btn btn-fire" href="#productos" data-en="See the products">Ver productos</a>
-      <a class="btn btn-ghost" href="#contacto" data-en="Let's talk">Hablemos</a>
+      <a class="btn btn-fire" href="/contacto/" data-en="Let's talk">Hablemos</a>
+      <a class="btn btn-ghost" href="#productos" data-en="See the products">Ver productos →</a>
     </div>
   </header>
 
   <main class="wrap">
 
+    <!-- TESIS + PRUEBA -->
+    <section class="sec thesis" id="estudio">
+      <p class="tline reveal" data-en="Not an agency. One person directs &lt;strong&gt;fleets of AI agents&lt;/strong&gt; that work around the clock — and every tool below was forged with that same method.">No es una agencia. Una persona dirige <strong>flotas de agentes de IA</strong> que trabajan sin pausa — y cada herramienta de aquí abajo nació de ese mismo método.</p>
+      <div class="proof">
+        <div class="proofcard reveal" style="--i:0">
+          <div class="pf-h"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg><span data-en="One person behind it">Una persona detrás</span></div>
+          <p data-en="Jonathan Martín runs every project end to end. You talk to the builder.">Jonathan Martín dirige cada proyecto de principio a fin. Hablas con quien lo construye.</p>
+        </div>
+        <div class="proofcard reveal" style="--i:1">
+          <div class="pf-h"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 18 2 12l6-6"/><path d="m16 6 6 6-6 6"/></svg><span data-en="Open source">Código abierto</span></div>
+          <p data-en="Most of the work is OSS — inspectable on GitHub, not a black box.">La mayoría del trabajo es OSS — inspeccionable en GitHub, no una caja negra.</p>
+        </div>
+        <div class="proofcard reveal" style="--i:2">
+          <div class="pf-h"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2 4 6v6c0 5 3.5 8 8 10 4.5-2 8-5 8-10V6z"/></svg><span data-en="Local-first & private">Local-first y privado</span></div>
+          <p data-en="No telemetry by default: your code and your data stay on your machine.">Sin telemetría por defecto: tu código y tus datos se quedan en tu máquina.</p>
+        </div>
+        <div class="proofcard reveal" style="--i:3">
+          <div class="pf-h"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2 3 14h8l-1 8 10-12h-8z"/></svg><span data-en="Fleet speed">Velocidad de flota</span></div>
+          <p data-en="Agents working in parallel, around the clock — what took a team takes days.">Agentes en paralelo y sin pausa — lo que era cosa de un equipo sale en días.</p>
+        </div>
+      </div>
+    </section>
+
     <!-- PRODUCTOS -->
     <section class="sec" id="productos">
       <h2 data-en="Products">Productos</h2>
-      <p class="sub" data-en="Every product has its own page. Grouped by what they're for.">Cada producto tiene su propia página. Divididos por para qué sirven.</p>
+      <p class="sub" data-en="Each tool is its own product — and proof of what I ship.">Cada herramienta es un producto propio — y prueba de lo que entrego.</p>
 
-      <a href="/trace/" class="star s-h_iOgBNu">
+      <div class="star s-h_iOgBNu reveal">
         <div class="scontent">
           <span class="badge paid" data-en="⭐ Flagship product · paid">⭐ Producto estrella · de pago</span>
-          <div class="pname">Trace <small>by Fervon</small></div>
+          <a href="/trace/" class="pname-link"><div class="pname">Trace <small>by Fervon</small></div></a>
           <p class="pdesc" data-en="Your personal memory, on your machine. Everything you see, read and write — instantly searchable, cross-platform and &lt;strong&gt;without recording your screen&lt;/strong&gt;. The &quot;Rewind&quot; Meta killed, but local and private.">Tu memoria personal, en tu máquina. Todo lo que ves, lees y escribes — buscable al instante, cross-platform y <strong>sin grabar tu pantalla</strong>. El "Rewind" que Meta mató, pero local y privado.</p>
           <div class="acts">
-            <span class="btn btn-fire" data-en="See Trace →">Ver Trace →</span>
-            <span class="btn btn-ghost" data-en="Join the waitlist">Únete a la lista</span>
+            <a class="btn btn-fire" href="/trace/#waitlist" data-en="Join the waitlist">Únete a la lista</a>
+            <a class="btn btn-ghost" href="/trace/" data-en="See Trace →">Ver Trace →</a>
           </div>
         </div>
-        <svg class="ic ic-trace sbig" viewBox="0 0 120 120" aria-hidden="true"><path class="ln" d="M18 90 L46 54 L74 72 L102 30"/><circle class="dot" cx="18" cy="90" r="5"/><circle class="dot" cx="46" cy="54" r="5"/><circle class="dot" cx="74" cy="72" r="5"/><circle class="dot p" cx="102" cy="30" r="5.5"/><circle class="ring" cx="102" cy="30" r="11"/></svg>
-      </a>
+        <a href="/trace/" class="sbig-link" tabindex="-1" aria-hidden="true"><svg class="ic ic-trace sbig" viewBox="0 0 120 120" aria-hidden="true"><path class="ln" d="M18 90 L46 54 L74 72 L102 30"/><circle class="dot" cx="18" cy="90" r="5"/><circle class="dot" cx="46" cy="54" r="5"/><circle class="dot" cx="74" cy="72" r="5"/><circle class="dot p" cx="102" cy="30" r="5.5"/><circle class="ring" cx="102" cy="30" r="11"/></svg></a>
+      </div>
 
-      <div class="catrow"><span class="cattag" data-en="Local AI &amp; agents">IA local &amp; agentes</span><span class="catnote" data-en="To build and measure with LLMs on your own machine">Para construir y medir con LLMs en tu equipo</span></div>
+      <div class="catrow reveal"><span class="cattag" data-en="Local AI &amp; agents">IA local &amp; agentes</span><span class="catnote" data-en="To build and measure with LLMs on your own machine">Para construir y medir con LLMs en tu equipo</span></div>
       <div class="products">
-        <a href="/inferbench/" class="pcard s-f1Zbn6Zb">
+        <div class="pcard s-f1Zbn6Zb reveal" style="--i:0">
+          <a href="/inferbench/" class="card-link" aria-label="inferbench"></a>
           <div class="iconwrap"><svg class="ic ic-inf" width="26" height="26" viewBox="0 0 40 40" aria-hidden="true"><rect x="13" y="13" width="14" height="14" rx="2.5"/><circle class="dot" cx="20" cy="20" r="2.4"/><path d="M16 13V8 M24 13V8 M16 32v-5 M24 32v-5 M13 16H8 M13 24H8 M32 16h-5 M32 24h-5"/><path class="sp" d="M30 11 l4 -3 M33 30 l4 2"/></svg></div>
           <div class="pname">inferbench</div>
           <div class="pdesc" data-en="Know which LLM runs on your GPU and at how many tok/s. A real benchmark in one click.">Sabe qué LLM corre en tu GPU y a cuántos tok/s. Benchmark real con un click.</div>
           <div class="pgo" data-en="See inferbench">Ver inferbench</div>
-        </a>
-        <a href="/lookspan/" class="pcard s-9MORdOj_">
+          <a class="psrc" href="https://github.com/JoniMartin27/inferbench" target="_blank" rel="noopener" data-en="View source"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 18 2 12l6-6"/><path d="m16 6 6 6-6 6"/></svg>Ver código</a>
+        </div>
+        <div class="pcard s-9MORdOj_ reveal" style="--i:1">
+          <a href="/lookspan/" class="card-link" aria-label="Lookspan"></a>
           <div class="iconwrap"><svg class="ic ic-look" width="26" height="26" viewBox="0 0 40 40" aria-hidden="true"><rect class="bar" x="9" y="11" width="20" height="3.4" rx="1.7"/><rect class="bar" x="9" y="18.3" width="13" height="3.4" rx="1.7"/><rect class="bar" x="9" y="25.6" width="25" height="3.4" rx="1.7"/></svg></div>
           <div class="pname">Lookspan</div>
           <div class="pdesc" data-en="Local-first observability for AI agents. Every LLM call, MCP tool and cost.">Observabilidad local-first para agentes de IA. Cada llamada LLM, herramienta MCP y coste.</div>
           <div class="pgo" data-en="See Lookspan">Ver Lookspan</div>
-        </a>
-        <a href="/claudescope/" class="pcard s-5h9VS3PC">
+          <a class="psrc" href="https://github.com/JoniMartin27/lookspan" target="_blank" rel="noopener" data-en="View source"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 18 2 12l6-6"/><path d="m16 6 6 6-6 6"/></svg>Ver código</a>
+        </div>
+        <div class="pcard s-5h9VS3PC reveal" style="--i:2">
+          <a href="/claudescope/" class="card-link" aria-label="ClaudeScope"></a>
           <div class="iconwrap"><svg class="ic ic-scope" width="26" height="26" viewBox="0 0 40 40" aria-hidden="true"><circle cx="18" cy="18" r="9"/><path d="M25 25 L32 32"/><line class="scan" x1="13.5" y1="18" x2="22.5" y2="18"/></svg></div>
           <div class="pname">ClaudeScope</div>
           <div class="pdesc" data-en="Search across all your Claude Code sessions. Local-first dashboard, 0 deps, 0 network.">Busca en todas tus sesiones de Claude Code. Dashboard local-first, 0 deps, 0 red.</div>
           <div class="pgo" data-en="See ClaudeScope">Ver ClaudeScope</div>
-        </a>
+          <a class="psrc" href="https://github.com/JoniMartin27/claudescope" target="_blank" rel="noopener" data-en="View source"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 18 2 12l6-6"/><path d="m16 6 6 6-6 6"/></svg>Ver código</a>
+        </div>
       </div>
 
-      <div class="catrow"><span class="cattag" data-en="Your utilities">Tus utilidades</span><span class="catnote" data-en="For your day-to-day as a dev">Para tu día a día como dev</span></div>
+      <div class="catrow reveal"><span class="cattag" data-en="Your utilities">Tus utilidades</span><span class="catnote" data-en="For your day-to-day as a dev">Para tu día a día como dev</span></div>
       <div class="products">
-        <a href="/launchpad/" class="pcard s-LQsgACj5">
+        <div class="pcard s-LQsgACj5 reveal" style="--i:0">
+          <a href="/launchpad/" class="card-link" aria-label="launchpad"></a>
           <div class="iconwrap"><svg class="ic ic-launch" width="26" height="26" viewBox="0 0 40 40" aria-hidden="true"><g class="rk"><path d="M20 7 C24 11 25 18 20 25 C15 18 16 11 20 7 Z"/><circle class="dot" cx="20" cy="15" r="1.8"/><path d="M16 22 L13 28 M24 22 L27 28"/></g></svg></div>
           <div class="pname">launchpad</div>
           <div class="pdesc" data-en="A local launcher that discovers and spins up all your projects with no port collisions.">Launcher local que descubre y levanta todos tus proyectos sin colisión de puertos.</div>
           <div class="pgo" data-en="See launchpad">Ver launchpad</div>
-        </a>
-        <a href="/pregon/" class="pcard s-Cl-z-CpE">
+          <a class="psrc" href="https://github.com/JoniMartin27/launchpad" target="_blank" rel="noopener" data-en="View source"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 18 2 12l6-6"/><path d="m16 6 6 6-6 6"/></svg>Ver código</a>
+        </div>
+        <div class="pcard s-Cl-z-CpE reveal" style="--i:1">
+          <a href="/pregon/" class="card-link" aria-label="Pregón"></a>
           <div class="iconwrap"><svg class="ic ic-pregon" width="26" height="26" viewBox="0 0 40 40" aria-hidden="true"><circle class="dot" cx="20" cy="20" r="3"/><circle class="ring" cx="20" cy="20" r="7"/><circle class="ring ring2" cx="20" cy="20" r="7"/></svg></div>
           <div class="pname">Pregón</div>
           <div class="pdesc" data-en="Compose once, publish to 8+ channels and track the traction of your launches.">Compón una vez, publica en 8+ canales y mide la tracción de tus lanzamientos.</div>
           <div class="pgo" data-en="See Pregón">Ver Pregón</div>
-        </a>
-      </div>
-    </section>
-
-    <!-- SERVICIOS -->
-    <section class="sec" id="servicios">
-      <h2 data-en="Services">Servicios</h2>
-      <p class="sub" data-en="Need me to forge something for you?">¿Necesitas que forje algo para ti?</p>
-      <div class="services">
-        <h3 data-en="Bespoke software, with AI agents">Software a medida, con agentes de IA</h3>
-        <p class="intro" data-en="I apply the same engine I build my own products with —fleets of autonomous agents and a local-first approach— to your company's challenges. From idea to product, fast.">Aplico el mismo motor con el que construyo mis productos —flotas de agentes autónomos y un enfoque local-first— a los retos de tu empresa. De la idea al producto, rápido.</p>
-        <ul>
-          <li data-en="Bespoke development&lt;span&gt;End-to-end products and MVPs.&lt;/span&gt;">Desarrollo a medida<span>Productos y MVPs de principio a fin.</span></li>
-          <li data-en="Agent automation&lt;span&gt;AI fleets for processes and code.&lt;/span&gt;">Automatización con agentes<span>Flotas de IA para procesos y código.</span></li>
-          <li data-en="Internal tools&lt;span&gt;Dashboards, CLIs and local-first observability.&lt;/span&gt;">Herramientas internas<span>Dashboards, CLIs y observabilidad local-first.</span></li>
-          <li data-en="Consulting&lt;span&gt;How to build your own AI software factory.&lt;/span&gt;">Consultoría<span>Cómo montar tu propia fábrica de software con IA.</span></li>
-        </ul>
-        <div class="sact"><a class="btn btn-fire" href="#contacto" data-en="Tell me about your project">Cuéntame tu proyecto</a></div>
+          <a class="psrc" href="https://github.com/JoniMartin27/pregon" target="_blank" rel="noopener" data-en="View source"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 18 2 12l6-6"/><path d="m16 6 6 6-6 6"/></svg>Ver código</a>
+        </div>
       </div>
     </section>
 
-    <!-- CONTACTO -->
-    <section class="sec" id="contacto">
-      <h2 data-en="Let's talk">Hablemos</h2>
-      <p class="sub" data-en="A product, a service or just to say hi? Drop me a line.">¿Un producto, un servicio o solo saludar? Escríbeme.</p>
-      <div class="contact">
-        <form action="https://formspree.io/f/mnjyoknb" method="POST">
-          <input type="hidden" name="origen" value="home" />
-          <input type="hidden" name="_subject" value="fervon.dev · home" />
-          <label class="vh" for="c-nombre" data-en="Your name">Tu nombre</label>
-          <input type="text" id="c-nombre" name="nombre" placeholder="Tu nombre" autocomplete="name" required data-i18n-attr="placeholder" data-en="Your name" />
-          <label class="vh" for="c-email" data-en="Your email">Tu email</label>
-          <input type="email" id="c-email" name="email" placeholder="Tu email" autocomplete="email" required data-i18n-attr="placeholder" data-en="Your email" />
-          <label class="vh" for="c-mensaje" data-en="Your message">Tu mensaje</label>
-          <textarea id="c-mensaje" name="mensaje" rows="4" placeholder="Cuéntame en qué andas…" required data-i18n-attr="placeholder" data-en="Tell me what you're working on…"></textarea>
-          <button type="submit" class="btn btn-fire" data-en="Send message">Enviar mensaje</button>
-        </form>
-        <p class="note" data-en="You reach me directly, no middlemen.">Te respondo yo, sin intermediarios.</p>
+    <!-- CTA DE CIERRE -->
+    <section class="sec endcta reveal">
+      <div class="endbox">
+        <h2 data-en="Need something forged?">¿Necesitas que forje algo?</h2>
+        <p data-en="A product, an internal tool or an MVP — tell me what you're working on. You reach me directly.">Un producto, una herramienta interna o un MVP — cuéntame en qué andas. Te respondo yo.</p>
+        <div class="cta-row">
+          <a class="btn btn-fire" href="/contacto/" data-en="Let's talk">Hablemos</a>
+        </div>
       </div>
     </section>
 
@@ -212,8 +218,7 @@ <h2 data-en="Let's talk">Hablemos</h2>
     <div class="mark"><svg class="blogo" viewBox="0 0 104 126" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs><linearGradient id="ff" x1="0" y1="1" x2="0" y2="0"><stop offset="0" stop-color="#B5300A"/><stop offset=".45" stop-color="#E0480F"/><stop offset=".75" stop-color="#FF6A00"/><stop offset="1" stop-color="#FFB02E"/></linearGradient><linearGradient id="fs" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#FF6A00"/><stop offset="1" stop-color="#FFD37A"/></linearGradient></defs><path d="M44 4 C30 4 22 13 22 30 L22 40 L8 40 L8 56 L22 56 L22 116 C22 119 24 121 27 121 L37 121 C40 121 42 119 42 116 L42 56 L60 56 L60 40 L42 40 L42 30 C42 23 45 20 52 20 L64 20 L64 4 Z" fill="url(#ff)"/><path d="M58 40 L96 40 C92 47 86 50 78 50 L60 50 L58 56 L60 56 L78 56 C88 56 96 49 99 39 C100 36 99 33 96 33 L60 33 L58 40 Z" fill="url(#fs)"/></svg> fervon</div>
     <div class="flinks">
       <a href="#productos" data-en="Products">Productos</a>
-      <a href="#servicios" data-en="Services">Servicios</a>
-      <a href="#contacto" data-en="Contact">Contacto</a>
+      <a href="/contacto/" data-en="Contact">Contacto</a>
       <a href="https://github.com/Fervon">GitHub</a>
     </div>
     <div class="copy" data-en="Forged red-hot · © 2026 Fervon">Forjado al rojo vivo · © 2026 Fervon</div>