<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="_assets/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="_assets/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="_assets/favicon-16.png">
<link rel="apple-touch-icon" sizes="180x180" href="_assets/apple-touch-icon.png">
<title>Penseonline — Tecnologia com sotaque brasileiro</title>
<meta name="description" content="Agência boutique de tecnologia. Sites, apps, sistemas web e soluções híbridas. 12 especialistas, 3 países, entregas em semanas.">
<link rel="canonical" href="https://penseonline.com.br/">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="Penseonline">
<meta property="og:title" content="Penseonline — Tecnologia com sotaque brasileiro">
<meta property="og:description" content="Agência boutique de tecnologia. Sites, apps, sistemas web e soluções híbridas. 12 especialistas, 3 países, entregas em semanas.">
<meta property="og:url" content="https://penseonline.com.br/">
<meta property="og:image" content="https://penseonline.com.br/_assets/og-penseonline-pt.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Penseonline — Tecnologia com sotaque brasileiro">
<meta property="og:locale" content="pt_BR">
<meta property="og:locale:alternate" content="en_US">
<meta property="og:locale:alternate" content="es_ES">
<meta property="og:locale:alternate" content="mt_MT">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Penseonline — Tecnologia com sotaque brasileiro">
<meta name="twitter:description" content="Agência boutique de tecnologia. Sites, apps, sistemas web e soluções híbridas. 12 especialistas, 3 países, entregas em semanas.">
<meta name="twitter:image" content="https://penseonline.com.br/_assets/og-penseonline-pt.png">

<!-- hreflang -->
<link rel="alternate" hreflang="pt-BR" href="https://penseonline.com.br/?lang=pt">
<link rel="alternate" hreflang="en" href="https://penseonline.com.br/?lang=en">
<link rel="alternate" hreflang="es" href="https://penseonline.com.br/?lang=es">
<link rel="alternate" hreflang="mt" href="https://penseonline.com.br/?lang=mt">
<link rel="alternate" hreflang="x-default" href="https://penseonline.com.br/">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          royal: { 50:'#eef4ff', 100:'#dbe7ff', 400:'#5b85f5', 500:'#3b6cf0', 600:'#2563eb', 700:'#1d4ed8', 800:'#1e40af', 900:'#172554', 950:'#0a1029' },
          coral: { 100:'#cffafe', 400:'#22d3ee', 500:'#06b6d4', 600:'#0891b2', 700:'#0e7490' },
          ink:   '#0a1029'
        },
        fontFamily: { display: ['Outfit', 'sans-serif'], sans: ['Inter', 'sans-serif'] }
      }
    }
  }
</script>
<style>
  html { scroll-behavior: smooth; }
  body { background: #f5f7fb; }
  .blob { filter: blur(60px); }
  .float-slow { animation: float 8s ease-in-out infinite; }
  .float-fast { animation: float 5s ease-in-out infinite; }
  @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
  .marquee { display:flex; overflow:hidden; mask-image: linear-gradient(90deg, transparent 0, black 80px, black calc(100% - 80px), transparent); }
  .marquee-track { display:flex; gap:3rem; padding-right:3rem; animation: scroll 30s linear infinite; flex-shrink:0; align-items:center; }
  .marquee-track > * { flex-shrink:0; }
  .marquee-slot { width:200px; height:48px; display:flex; align-items:center; justify-content:center; }
  @keyframes scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
  .reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal-l { opacity: 0; transform: translateX(-40px); transition: opacity .9s, transform .9s; }
  .reveal-l.visible { opacity: 1; transform: translateX(0); }
  .reveal-r { opacity: 0; transform: translateX(40px); transition: opacity .9s, transform .9s; }
  .reveal-r.visible { opacity: 1; transform: translateX(0); }
  .grid-pattern { background-image: linear-gradient(rgba(37,99,235,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,.06) 1px, transparent 1px); background-size: 40px 40px; }
  .tilt-card { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
  .tilt-card:hover { transform: rotate(-1deg) translateY(-8px); }
  .glow { box-shadow: 0 0 0 1px rgba(37,99,235,.2), 0 30px 60px -20px rgba(37,99,235,.4); }
  .nav-blur { backdrop-filter: saturate(180%) blur(16px); }
</style>
<script>
  // Roteamento de marca por host
  (function(){
    var host = location.hostname.toLowerCase();
    var qs = new URLSearchParams(location.search).get('brand'); // ?brand=penseonline|bb para teste local
    var isBB = qs === 'bb' || host === 'brazilianbureau.com' || host === 'www.brazilianbureau.com' || host === 'brazilianbureau.com.br' || host === 'www.brazilianbureau.com.br';
    // Penseonline é o padrão (inclusive localhost) — só vira BB se host/qs disser explicitamente
    window.__brand = isBB ? 'bb' : 'penseonline';
  })();
</script>
<style>
  /* aplicado quando JS roda; sem JS ambos ficam visíveis */
  html[data-brand="penseonline"] [data-brand="penseonline"] { display: none !important; }
  html[data-brand="bb"] [data-brand="bb"] { display: none !important; }
</style>
</head>
<body class="font-sans text-ink antialiased">

<!-- NAV -->
<header id="site-header" class="fixed top-0 inset-x-0 z-50 bg-white/30 nav-blur border-b border-royal-100/40 transition-colors duration-300">
  <nav class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between gap-4">
    <a href="#" class="flex items-center gap-2.5">
      <!-- <img src="_assets/brazilian-bureau-logo.png" alt="Brazilian Bureau" class="h-9 md:h-10 w-auto"> -->
      <img src="_assets/penseonline-logo-transparent.png" alt="Penseonline" class="h-9 md:h-10 w-auto" data-brand-header>
    </a>
    <div class="flex items-center gap-2 lg:gap-6">
      <ul class="hidden lg:flex items-center gap-5 text-sm font-medium">
        <li><a href="#sobre" class="nav-link flex items-center gap-1.5 hover:text-coral-500 transition">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>
          <span data-i18n="nav.about">Sobre</span></a></li>
        <li><a href="#servicos" class="nav-link flex items-center gap-1.5 hover:text-coral-500 transition">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 0 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 0 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 0 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h.1a1.7 1.7 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 0 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v.1a1.7 1.7 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>
          <span data-i18n="nav.services">Serviços</span></a></li>
        <li><a href="#processo" class="nav-link flex items-center gap-1.5 hover:text-coral-500 transition">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.2-8.5"/><path d="M21 4v5h-5"/></svg>
          <span data-i18n="nav.process">Processo</span></a></li>
        <li><a href="#portfolio" class="nav-link flex items-center gap-1.5 hover:text-coral-500 transition">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
          <span data-i18n="nav.portfolio">Portfólio</span></a></li>
        <li><a href="#cases" class="nav-link flex items-center gap-1.5 hover:text-coral-500 transition">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
          <span data-i18n="nav.cases">Cases</span></a></li>
        <li><a href="#clientes" class="nav-link flex items-center gap-1.5 hover:text-coral-500 transition">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.9"/><path d="M16 3.1a4 4 0 0 1 0 7.8"/></svg>
          <span data-i18n="nav.clients">Clientes</span></a></li>
        <li><a href="#blog" class="nav-link flex items-center gap-1.5 hover:text-coral-500 transition">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>
          <span data-i18n="nav.blog">Blog</span></a></li>
      </ul>
      <div class="relative" id="lang-switcher">
        <button type="button" id="lang-trigger" aria-haspopup="listbox" aria-expanded="false"
                class="flex items-center gap-2 text-sm font-semibold bg-transparent hover:bg-white/50 border border-transparent hover:border-royal-100 rounded-lg px-3 py-2 transition">
          <span id="lang-flag" class="text-base leading-none">🇧🇷</span>
          <span id="lang-label">PT</span>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 4.5l3 3 3-3"/></svg>
        </button>
        <ul id="lang-menu" role="listbox"
            class="hidden absolute right-0 mt-2 w-40 bg-white shadow-lg rounded-lg border border-royal-100 overflow-hidden z-50">
          <li><button type="button" data-lang="pt" data-flag="🇧🇷" data-label="PT" class="lang-opt w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-royal-50"><span>🇧🇷</span><span>Português</span></button></li>
          <li><button type="button" data-lang="en" data-flag="🇺🇸" data-label="EN" class="lang-opt w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-royal-50"><span>🇺🇸</span><span>English</span></button></li>
          <li><button type="button" data-lang="es" data-flag="🇪🇸" data-label="ES" class="lang-opt w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-royal-50"><span>🇪🇸</span><span>Español</span></button></li>
          <li><button type="button" data-lang="mt" data-flag="🇲🇹" data-label="MT" class="lang-opt w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-royal-50"><span>🇲🇹</span><span>Malti</span></button></li>
        </ul>
      </div>
      <button type="button" id="mobile-toggle" class="lg:hidden p-2 rounded-lg hover:bg-white/50 transition" aria-label="Abrir menu" aria-expanded="false">
        <svg id="icon-open" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
        <svg id="icon-close" class="hidden" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg>
      </button>
    </div>
  </nav>
  <div id="mobile-menu" class="hidden lg:hidden border-t border-royal-100/40 bg-white/95 nav-blur">
    <ul class="max-w-7xl mx-auto px-6 py-3 flex flex-col text-sm font-medium">
      <li><a href="#sobre" class="mob-link flex items-center gap-2 py-3 border-b border-royal-100/40 hover:text-coral-500 transition">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>
        <span data-i18n="nav.about">Sobre</span></a></li>
      <li><a href="#servicos" class="mob-link flex items-center gap-2 py-3 border-b border-royal-100/40 hover:text-coral-500 transition">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 0 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 0 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 0 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h.1a1.7 1.7 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 0 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v.1a1.7 1.7 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>
        <span data-i18n="nav.services">Serviços</span></a></li>
      <li><a href="#processo" class="mob-link flex items-center gap-2 py-3 border-b border-royal-100/40 hover:text-coral-500 transition">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.2-8.5"/><path d="M21 4v5h-5"/></svg>
        <span data-i18n="nav.process">Processo</span></a></li>
      <li><a href="#portfolio" class="mob-link flex items-center gap-2 py-3 border-b border-royal-100/40 hover:text-coral-500 transition">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
        <span data-i18n="nav.portfolio">Portfólio</span></a></li>
      <li><a href="#cases" class="mob-link flex items-center gap-2 py-3 border-b border-royal-100/40 hover:text-coral-500 transition">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
        <span data-i18n="nav.cases">Cases</span></a></li>
      <li><a href="#clientes" class="mob-link flex items-center gap-2 py-3 border-b border-royal-100/40 hover:text-coral-500 transition">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.9"/><path d="M16 3.1a4 4 0 0 1 0 7.8"/></svg>
        <span data-i18n="nav.clients">Clientes</span></a></li>
      <li><a href="#blog" class="mob-link flex items-center gap-2 py-3 hover:text-coral-500 transition">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>
        <span data-i18n="nav.blog">Blog</span></a></li>
    </ul>
  </div>
</header>

<!-- HERO -->
<section class="relative pt-32 pb-20 overflow-hidden grid-pattern">
  <div class="absolute top-20 right-10 w-96 h-96 bg-coral-400 rounded-full blob opacity-40 float-slow"></div>
  <div class="absolute bottom-0 left-10 w-80 h-80 bg-royal-400 rounded-full blob opacity-50 float-fast"></div>
  <div class="max-w-7xl mx-auto px-6 grid lg:grid-cols-12 gap-10 items-center relative">
    <div class="lg:col-span-7">
      <h1 class="animate__animated animate__fadeInUp font-display text-5xl md:text-7xl lg:text-[5.5rem] font-bold leading-[0.95] mb-6 text-royal-800">
        <span data-i18n="hero.title1">Sites.</span><br>
        <span data-i18n="hero.title2">Apps.</span>
        <span class="text-coral-500" data-i18n="hero.title3">Soluções</span><br>
        <span data-i18n="hero.title4">que</span>
        <span class="relative inline-block">
          <span class="relative z-10" data-i18n="hero.title5">resolvem.</span>
          <span class="absolute bottom-2 left-0 w-full h-4 bg-coral-400/40 -z-0"></span>
        </span>
      </h1>
      <p class="animate__animated animate__fadeInUp animate__delay-1s text-lg md:text-xl text-ink/70 max-w-xl mb-8" data-i18n="hero.subtitle">
        Automatizamos processos com sistemas web ou híbridos web + hardware. Para empresas que querem ir do problema à solução em semanas, não em anos.
      </p>
      <div class="animate__animated animate__fadeInUp animate__delay-2s flex flex-col sm:flex-row gap-4 mb-12">
        <a href="#contato" class="bg-ink hover:bg-coral-500 text-white px-7 py-4 rounded-xl font-semibold transition inline-flex items-center gap-2 group">
          <span data-i18n="hero.cta1">Começar projeto</span>
          <svg class="group-hover:translate-x-1 transition" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </a>
        <a href="#cases" class="bg-white border-2 border-ink/10 hover:border-ink text-ink px-7 py-4 rounded-xl font-semibold transition" data-i18n="hero.cta2">Ver portfolio</a>
      </div>
      <div class="flex items-center gap-4 text-sm">
        <div class="flex -space-x-3">
          <div class="w-10 h-10 rounded-full border-2 border-white bg-gradient-to-br from-royal-500 to-royal-700"></div>
          <div class="w-10 h-10 rounded-full border-2 border-white bg-gradient-to-br from-coral-400 to-coral-600"></div>
          <div class="w-10 h-10 rounded-full border-2 border-white bg-gradient-to-br from-royal-400 to-royal-600"></div>
          <div class="w-10 h-10 rounded-full border-2 border-white bg-ink flex items-center justify-center text-white text-xs font-bold">+8</div>
        </div>
        <div class="text-ink/70" data-i18n="hero.team"><b class="text-ink">12 especialistas</b> · 3 países · 1 missão</div>
      </div>
    </div>
    <div class="lg:col-span-5 relative">
      <div class="relative animate__animated animate__fadeInRight">
        <div class="absolute -top-6 -left-6 bg-coral-500 text-white px-4 py-2 rounded-xl font-display font-bold text-sm shadow-xl rotate-[-6deg] z-10">
          <span data-i18n="hero.tag1">⚡ 4-12 sem</span>
        </div>
        <div class="relative bg-white rounded-3xl p-2 shadow-2xl glow rotate-2">
          <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=700" class="rounded-2xl w-full h-[480px] object-cover">
        </div>
        <div class="absolute -bottom-6 -right-6 bg-ink text-white p-5 rounded-2xl shadow-xl rotate-3">
          <div class="font-display font-bold text-3xl text-coral-400">120+</div>
          <div class="text-xs opacity-70" data-i18n="hero.tag2">projetos entregues</div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- MARQUEE CLIENTES -->
<section class="py-12 bg-ink text-white overflow-hidden">
  <div class="max-w-7xl mx-auto px-6 mb-6">
    <div class="text-xs uppercase tracking-[0.3em] text-coral-400 font-bold" data-i18n="marquee.title">Confiam em nós</div>
  </div>
  <div class="marquee">
    <div class="marquee-track">
      <div class="marquee-slot" data-brand="penseonline"><img src="_assets/penseonline-logo-white.png" alt="Penseonline" class="h-10 md:h-12 max-h-full max-w-full object-contain opacity-70 hover:opacity-100 transition"></div>
      <div class="marquee-slot" data-brand="bb"><img src="_assets/brazilian-bureau-logo-white.png" alt="Brazilian Bureau" class="h-10 md:h-12 max-h-full max-w-full object-contain opacity-70 hover:opacity-100 transition"></div>
      <div class="marquee-slot"><img src="_assets/brands/finduway-logo.png" alt="FindUWay" class="h-10 md:h-12 max-h-full max-w-full object-contain opacity-70 hover:opacity-100 transition"></div>
      <div class="marquee-slot"><img src="_assets/brands/sistemaclinical-logo.png" alt="Sistema Clinical" class="h-10 md:h-12 max-h-full max-w-full object-contain opacity-70 hover:opacity-100 transition"></div>
      <div class="marquee-slot"><img src="_assets/brands/freefi-logo.png" alt="FreeFi" class="h-10 md:h-12 max-h-full max-w-full object-contain opacity-70 hover:opacity-100 transition"></div>
      <div class="marquee-slot"><img src="_assets/brands/cafecomarco-logo-white.png" alt="Café com Arco" class="h-10 md:h-12 max-h-full max-w-full object-contain opacity-70 hover:opacity-100 transition"></div>
      <div class="marquee-slot" data-brand="penseonline" aria-hidden="true"><img src="_assets/penseonline-logo-white.png" alt="" class="h-10 md:h-12 max-h-full max-w-full object-contain opacity-70"></div>
      <div class="marquee-slot" data-brand="bb" aria-hidden="true"><img src="_assets/brazilian-bureau-logo-white.png" alt="" class="h-10 md:h-12 max-h-full max-w-full object-contain opacity-70"></div>
      <div class="marquee-slot" aria-hidden="true"><img src="_assets/brands/finduway-logo.png" alt="" class="h-10 md:h-12 max-h-full max-w-full object-contain opacity-70"></div>
      <div class="marquee-slot" aria-hidden="true"><img src="_assets/brands/sistemaclinical-logo.png" alt="" class="h-10 md:h-12 max-h-full max-w-full object-contain opacity-70"></div>
      <div class="marquee-slot" aria-hidden="true"><img src="_assets/brands/freefi-logo.png" alt="" class="h-10 md:h-12 max-h-full max-w-full object-contain opacity-70"></div>
      <div class="marquee-slot" aria-hidden="true"><img src="_assets/brands/cafecomarco-logo-white.png" alt="" class="h-10 md:h-12 max-h-full max-w-full object-contain opacity-70"></div>
    </div>
  </div>
</section>

<!-- SOBRE -->
<section id="sobre" class="py-24">
  <div class="max-w-7xl mx-auto px-6 grid lg:grid-cols-12 gap-12 items-center">
    <div class="lg:col-span-5 reveal-l">
      <div class="grid grid-cols-2 gap-4">
        <div class="bg-royal-600 text-white rounded-2xl p-6 -rotate-2 tilt-card">
          <div class="font-display font-bold text-4xl">15+</div>
          <div class="text-xs opacity-80 mt-1" data-i18n="about.metric1">anos de experiência</div>
        </div>
        <div class="bg-coral-500 text-white rounded-2xl p-6 rotate-2 mt-8 tilt-card">
          <div class="font-display font-bold text-4xl">98%</div>
          <div class="text-xs opacity-90 mt-1" data-i18n="about.metric2">satisfação</div>
        </div>
        <div class="bg-yellow-500 text-ink rounded-2xl p-6 rotate-1 tilt-card">
          <div class="font-display font-bold text-4xl">3</div>
          <div class="text-xs opacity-70 mt-1" data-i18n="about.metric3">continentes</div>
        </div>
        <div class="bg-white border-2 border-ink rounded-2xl p-6 -rotate-1 mt-8 tilt-card">
          <div class="font-display font-bold text-4xl">24/7</div>
          <div class="text-xs opacity-70 mt-1" data-i18n="about.metric4">suporte</div>
        </div>
      </div>
    </div>
    <div class="lg:col-span-7 reveal-r">
      <div class="text-xs uppercase tracking-[0.3em] text-coral-500 font-bold mb-4" data-i18n="about.eyebrow">[ Sobre nós ]</div>
      <h2 class="font-display text-4xl md:text-5xl font-bold mb-6 leading-tight" data-i18n="about.title">
        Não fazemos apenas sites bonitos. <span class="text-coral-500">Fazemos negócios funcionarem.</span>
      </h2>
      <p class="text-lg text-ink/70 mb-4" data-i18n="about.p1">
        Penseonline é uma agência boutique focada em resolver problemas reais de operação. Cada projeto começa com uma pergunta: "qual processo estamos eliminando?".
      </p>
      <p class="text-lg text-ink/70 mb-8" data-i18n="about.p2">
        Combinamos código limpo, design funcional e — quando necessário — hardware integrado, para entregar soluções que sua equipe usa de verdade.
      </p>
      <div class="flex flex-wrap gap-3">
        <span class="bg-royal-50 text-royal-700 px-4 py-2 rounded-full text-sm font-semibold" data-i18n="about.tag1">Squads enxutos</span>
        <span class="bg-coral-100 text-coral-700 px-4 py-2 rounded-full text-sm font-semibold" data-i18n="about.tag2">Prazos curtos</span>
        <span class="bg-yellow-500 text-ink px-4 py-2 rounded-full text-sm font-semibold" data-i18n="about.tag3">Código aberto</span>
        <span class="bg-royal-50 text-royal-700 px-4 py-2 rounded-full text-sm font-semibold" data-i18n="about.tag4">Sem amarras</span>
      </div>
    </div>
  </div>
</section>

<!-- SERVIÇOS -->
<section id="servicos" class="py-24 bg-ink text-white relative overflow-hidden">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-royal-600 rounded-full blob opacity-30"></div>
  <div class="max-w-7xl mx-auto px-6 relative">
    <div class="grid lg:grid-cols-2 gap-12 mb-16 items-end reveal">
      <div>
        <div class="text-xs uppercase tracking-[0.3em] text-coral-400 font-bold mb-4" data-i18n="services.eyebrow">[ O que fazemos ]</div>
        <h2 class="font-display text-5xl md:text-6xl font-bold leading-tight" data-i18n="services.title">
          Seis serviços. <br>Uma <span class="text-coral-400">obsessão</span>.
        </h2>
      </div>
      <p class="text-lg text-white/60" data-i18n="services.subtitle">
        Tudo que entregamos passa pelo mesmo filtro: resolve um problema mensurável da sua empresa? Se sim, fazemos. Se não, dizemos.
      </p>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
      <div class="bg-white/5 hover:bg-white/10 backdrop-blur border border-white/10 rounded-2xl p-7 transition-all hover:-translate-y-2 reveal group relative overflow-hidden">
        <svg class="absolute -bottom-6 -right-6 w-48 h-48 text-coral-400/10 group-hover:text-coral-400/20 transition pointer-events-none" fill="none" stroke="currentColor" stroke-width="1.2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 010 20M12 2a15.3 15.3 0 000 20"/></svg>
        <div class="relative z-10">
          <div class="text-coral-400 font-display font-bold text-5xl mb-4 group-hover:scale-110 transition origin-left">01</div>
          <h3 class="font-display font-bold text-xl mb-2" data-i18n="services.s1.t">Websites Institucionais</h3>
          <p class="text-white/60 text-sm" data-i18n="services.s1.d">Sites multilíngues, otimizados para SEO e conversão, com painel administrativo próprio.</p>
        </div>
      </div>
      <div class="bg-white/5 hover:bg-white/10 backdrop-blur border border-white/10 rounded-2xl p-7 transition-all hover:-translate-y-2 reveal group relative overflow-hidden">
        <svg class="absolute -bottom-6 -right-6 w-48 h-48 text-coral-400/10 group-hover:text-coral-400/20 transition pointer-events-none" fill="none" stroke="currentColor" stroke-width="1.2" viewBox="0 0 24 24"><rect x="6" y="2" width="12" height="20" rx="2"/><path d="M11 18h2"/></svg>
        <div class="relative z-10">
          <div class="text-coral-400 font-display font-bold text-5xl mb-4 group-hover:scale-110 transition origin-left">02</div>
          <h3 class="font-display font-bold text-xl mb-2" data-i18n="services.s2.t">Aplicativos Mobile & PWA</h3>
          <p class="text-white/60 text-sm" data-i18n="services.s2.d">Apps nativos, híbridos e Progressive Web Apps com performance e UX premium.</p>
        </div>
      </div>
      <div class="bg-white/5 hover:bg-white/10 backdrop-blur border border-white/10 rounded-2xl p-7 transition-all hover:-translate-y-2 reveal group relative overflow-hidden">
        <svg class="absolute -bottom-6 -right-6 w-48 h-48 text-coral-400/10 group-hover:text-coral-400/20 transition pointer-events-none" fill="none" stroke="currentColor" stroke-width="1.2" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
        <div class="relative z-10">
          <div class="text-coral-400 font-display font-bold text-5xl mb-4 group-hover:scale-110 transition origin-left">03</div>
          <h3 class="font-display font-bold text-xl mb-2" data-i18n="services.s3.t">Sistemas Web & E-commerce</h3>
          <p class="text-white/60 text-sm" data-i18n="services.s3.d">ERPs, CRMs, e-commerce e marketplaces sob medida — automatizamos exatamente o que sua operação precisa.</p>
        </div>
      </div>
      <div class="bg-white/5 hover:bg-white/10 backdrop-blur border border-white/10 rounded-2xl p-7 transition-all hover:-translate-y-2 reveal group relative overflow-hidden">
        <svg class="absolute -bottom-6 -right-6 w-48 h-48 text-coral-400/10 group-hover:text-coral-400/20 transition pointer-events-none" fill="none" stroke="currentColor" stroke-width="1.2" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 15h3M1 9h3M1 15h3"/></svg>
        <div class="relative z-10">
          <div class="text-coral-400 font-display font-bold text-5xl mb-4 group-hover:scale-110 transition origin-left">04</div>
          <h3 class="font-display font-bold text-xl mb-2" data-i18n="services.s4.t">Soluções Híbridas Web + Hardware</h3>
          <p class="text-white/60 text-sm" data-i18n="services.s4.d">Integração de IoT, totens, leitores e dispositivos físicos com plataformas digitais.</p>
        </div>
      </div>
      <div class="bg-white/5 hover:bg-white/10 backdrop-blur border border-white/10 rounded-2xl p-7 transition-all hover:-translate-y-2 reveal group relative overflow-hidden">
        <svg class="absolute -bottom-6 -right-6 w-48 h-48 text-coral-400/10 group-hover:text-coral-400/20 transition pointer-events-none" fill="none" stroke="currentColor" stroke-width="1.2" viewBox="0 0 24 24"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/><circle cx="7" cy="14" r="1.5"/><circle cx="11" cy="10" r="1.5"/><circle cx="15" cy="14" r="1.5"/><circle cx="20" cy="9" r="1.5"/></svg>
        <div class="relative z-10">
          <div class="text-coral-400 font-display font-bold text-5xl mb-4 group-hover:scale-110 transition origin-left">05</div>
          <h3 class="font-display font-bold text-xl mb-2" data-i18n="services.s5.t">Automação & Integrações</h3>
          <p class="text-white/60 text-sm" data-i18n="services.s5.d">APIs, webhooks, RPA e integrações com ERPs, gateways e plataformas externas.</p>
        </div>
      </div>
      <div class="bg-coral-500 hover:bg-coral-600 backdrop-blur rounded-2xl p-7 transition-all hover:-translate-y-2 reveal group cursor-pointer relative overflow-hidden">
        <svg class="absolute -bottom-6 -right-6 w-48 h-48 text-white/15 group-hover:text-white/25 transition pointer-events-none" fill="none" stroke="currentColor" stroke-width="1.2" viewBox="0 0 24 24"><path d="M9 21h6M10 3a6 6 0 014 11v3H10v-3a6 6 0 010-11z"/><path d="M12 3v0M8 7l-1-1M16 7l1-1"/></svg>
        <div class="relative z-10">
          <div class="text-white font-display font-bold text-5xl mb-4 group-hover:scale-110 transition origin-left">06</div>
          <h3 class="font-display font-bold text-xl mb-2 text-white" data-i18n="services.s6.t">Consultoria & Discovery</h3>
          <p class="text-white/90 text-sm mb-3" data-i18n="services.s6.d">Mapeamento de processos, descoberta técnica e recomendação de stack ideal para seu caso.</p>
          <div class="text-white text-sm font-semibold inline-flex items-center gap-1" data-i18n="services.s6.cta">Saiba mais →</div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- PROCESSO -->
<section id="processo" class="py-24 bg-white">
  <div class="max-w-7xl mx-auto px-6">
    <div class="grid lg:grid-cols-2 gap-12 mb-16 items-end reveal">
      <div>
        <div class="text-xs uppercase tracking-[0.3em] text-coral-500 font-bold mb-4" data-i18n="process.eyebrow">[ Como rodamos ]</div>
        <h2 class="font-display text-5xl md:text-6xl font-bold leading-tight" data-i18n="process.title">
          Quatro passos. <span class="text-coral-500">Zero surpresas.</span>
        </h2>
      </div>
      <p class="text-lg text-ink/70" data-i18n="process.subtitle">
        Sem reuniões intermináveis. Sem PowerPoints de 80 slides. Apenas execução clara, com entregas validadas a cada ciclo.
      </p>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
      <div class="reveal">
        <img src="_assets/process/discovery.webp" alt="Discovery" loading="lazy" decoding="async" width="720" height="320" class="rounded-2xl mb-4 h-32 w-full object-cover">
        <div class="text-coral-500 text-sm font-bold mb-1">01</div>
        <h3 class="font-display font-bold text-2xl mb-2" data-i18n="process.p1.t">Discovery</h3>
        <p class="text-ink/60 text-sm" data-i18n="process.p1.d">Imersão no problema, mapeamento de processos e definição de escopo objetivo.</p>
      </div>
      <div class="reveal lg:mt-12">
        <img src="_assets/process/design.webp" alt="Design" loading="lazy" decoding="async" width="720" height="320" class="rounded-2xl mb-4 h-32 w-full object-cover">
        <div class="text-coral-500 text-sm font-bold mb-1">02</div>
        <h3 class="font-display font-bold text-2xl mb-2" data-i18n="process.p2.t">Design</h3>
        <p class="text-ink/60 text-sm" data-i18n="process.p2.d">UX, UI e protótipos navegáveis aprovados antes de qualquer linha de código.</p>
      </div>
      <div class="reveal">
        <img src="_assets/process/build.webp" alt="Build" loading="lazy" decoding="async" width="720" height="320" class="rounded-2xl mb-4 h-32 w-full object-cover">
        <div class="text-coral-500 text-sm font-bold mb-1">03</div>
        <h3 class="font-display font-bold text-2xl mb-2" data-i18n="process.p3.t">Build</h3>
        <p class="text-ink/60 text-sm" data-i18n="process.p3.d">Sprints quinzenais, código revisado, testes automatizados e CI/CD do dia 1.</p>
      </div>
      <div class="reveal lg:mt-12">
        <img src="_assets/process/launch.webp" alt="Launch" loading="lazy" decoding="async" width="720" height="320" class="rounded-2xl mb-4 h-32 w-full object-cover">
        <div class="text-coral-500 text-sm font-bold mb-1">04</div>
        <h3 class="font-display font-bold text-2xl mb-2" data-i18n="process.p4.t">Launch</h3>
        <p class="text-ink/60 text-sm" data-i18n="process.p4.d">Deploy, monitoramento, suporte contínuo e ciclos de evolução do produto.</p>
      </div>
    </div>
  </div>
</section>

<!-- PORTFOLIO -->
<section id="portfolio" class="py-24 bg-white">
  <div class="max-w-7xl mx-auto px-6">
    <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between mb-16 gap-6 reveal">
      <div>
        <div class="text-xs uppercase tracking-[0.3em] text-coral-500 font-bold mb-4" data-i18n="portfolio.eyebrow">[ Produtos próprios ]</div>
        <h2 class="font-display text-5xl md:text-6xl font-bold" data-i18n="portfolio.title">Nosso <span class="text-coral-500">portfólio</span></h2>
      </div>
      <p class="text-lg text-ink/70 lg:max-w-md" data-i18n="portfolio.subtitle">Produtos que construímos, operamos e evoluímos. A mesma equipe que entrega para clientes externos.</p>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
      <a href="https://app.finduway.com" target="_blank" rel="noopener" class="group reveal block">
        <div class="relative overflow-hidden rounded-3xl mb-5 h-72">
          <img src="_assets/finduway-app.png" alt="FindUWay" loading="lazy" decoding="async" class="w-full h-full object-cover group-hover:scale-105 transition duration-700">
          <div class="absolute top-5 left-5 bg-coral-500 text-white px-4 py-1.5 rounded-full text-xs font-bold" data-i18n="portfolio.p1.tag">Marketplace de eventos</div>
        </div>
        <h3 class="font-display font-bold text-3xl mb-2 group-hover:text-coral-500 transition">FindUWay <span class="text-coral-500 inline-block group-hover:translate-x-1 transition">↗</span></h3>
        <p class="text-ink/60" data-i18n="portfolio.p1.d">App para venda e validação de tickets de eventos, com web, mobile (iOS/Android) e dashboard para organizadores.</p>
      </a>
      <a href="https://sistemaclinical.com.br" target="_blank" rel="noopener" class="group reveal block">
        <div class="relative overflow-hidden rounded-3xl mb-5 h-72">
          <img src="_assets/sistemaclinical.webp" alt="Sistema Clinical" loading="lazy" decoding="async" class="w-full h-full object-cover group-hover:scale-105 transition duration-700">
          <div class="absolute top-5 left-5 bg-white px-4 py-1.5 rounded-full text-xs font-bold text-ink" data-i18n="portfolio.p2.tag">SaaS de saúde</div>
        </div>
        <h3 class="font-display font-bold text-3xl mb-2 group-hover:text-coral-500 transition">Sistema Clinical <span class="text-coral-500 inline-block group-hover:translate-x-1 transition">↗</span></h3>
        <p class="text-ink/60" data-i18n="portfolio.p2.d">Sistema multi-tenant para atendimento clínico, com 21 implantações ativas e ~72k pacientes gerenciados.</p>
      </a>
      <a href="https://freefi.com.br" target="_blank" rel="noopener" class="group reveal block">
        <div class="relative overflow-hidden rounded-3xl mb-5 h-72">
          <img src="_assets/freefi-wifi.webp" alt="FreeFi" loading="lazy" decoding="async" class="w-full h-full object-cover group-hover:scale-105 transition duration-700">
          <div class="absolute top-5 left-5 bg-ink text-white px-4 py-1.5 rounded-full text-xs font-bold" data-i18n="portfolio.p3.tag">AdTech · OOH</div>
        </div>
        <h3 class="font-display font-bold text-3xl mb-2 group-hover:text-coral-500 transition">FreeFi <span class="text-coral-500 inline-block group-hover:translate-x-1 transition">↗</span></h3>
        <p class="text-ink/60" data-i18n="portfolio.p3.d">Hotspot Wi-Fi com mídia OOH (out-of-home) para captação, engajamento e monetização em pontos de alto fluxo.</p>
      </a>
    </div>
  </div>
</section>

<!-- CASES -->
<section id="cases" class="py-24 bg-royal-50">
  <div class="max-w-7xl mx-auto px-6">
    <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between mb-16 gap-6 reveal">
      <div>
        <div class="text-xs uppercase tracking-[0.3em] text-coral-500 font-bold mb-4" data-i18n="cases.eyebrow">[ Trabalhos selecionados ]</div>
        <h2 class="font-display text-5xl md:text-6xl font-bold" data-i18n="cases.title">Cases <span class="text-coral-500">recentes</span></h2>
      </div>
      <a href="#" class="text-ink font-bold hover:text-coral-500 transition inline-flex items-center gap-2" data-i18n="cases.all">Ver todos →</a>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
      <article class="group reveal">
        <div class="relative overflow-hidden rounded-3xl mb-5 h-72">
          <img src="_assets/zionct-login.png" alt="Zion CT" loading="lazy" decoding="async" class="w-full h-full object-cover group-hover:scale-105 transition duration-700">
          <div class="absolute top-5 left-5 bg-coral-500 text-white px-4 py-1.5 rounded-full text-xs font-bold" data-i18n="cases.c2.tag">Fitness · Híbrido</div>
        </div>
        <h3 class="font-display font-bold text-3xl mb-2">Zion CT</h3>
        <p class="text-ink/60" data-i18n="cases.c2.d">Sistema de gestão para box de CrossFit com checkin via app, gateway de pagamento e ACL granular.</p>
      </article>
      <article class="group reveal">
        <div class="relative overflow-hidden rounded-3xl mb-5 h-72">
          <img src="_assets/buscabusca-bi.webp" alt="BuscaBusca BI" loading="lazy" decoding="async" class="w-full h-full object-cover group-hover:scale-105 transition duration-700">
          <div class="absolute top-5 left-5 bg-ink text-white px-4 py-1.5 rounded-full text-xs font-bold" data-i18n="cases.c3.tag">E-commerce · BI</div>
        </div>
        <h3 class="font-display font-bold text-3xl mb-2">BuscaBusca BI</h3>
        <p class="text-ink/60" data-i18n="cases.c3.d">Inteligência de mercado com análise de concorrência multi-marketplace e exports auditáveis.</p>
      </article>
      <article class="group reveal">
        <div class="relative overflow-hidden rounded-3xl mb-5 h-72">
          <img src="https://storage.cafecomarco.com.br/images/site/2953c60f4f764c1fb25a1ee914d268cd.jpg" alt="Café com Arco" class="w-full h-full object-cover group-hover:scale-105 transition duration-700">
          <div class="absolute top-5 left-5 bg-white text-ink px-4 py-1.5 rounded-full text-xs font-bold" data-i18n="cases.c6.tag">Esporte · Campeonatos</div>
        </div>
        <h3 class="font-display font-bold text-3xl mb-2">Café com Arco</h3>
        <p class="text-ink/60" data-i18n="cases.c6.d">Plataforma oficial para campeonatos de tiro com arco no Brasil — gestão de inscrições, rankings em tempo real e auditoria de pagamentos.</p>
      </article>
    </div>
  </div>
</section>

<!-- DEPOIMENTOS -->
<section id="clientes" class="py-24 bg-white">
  <div class="max-w-7xl mx-auto px-6">
    <div class="text-center max-w-2xl mx-auto mb-16 reveal">
      <div class="text-xs uppercase tracking-[0.3em] text-coral-500 font-bold mb-4" data-i18n="clients.eyebrow">[ O que dizem ]</div>
      <h2 class="font-display text-5xl md:text-6xl font-bold" data-i18n="clients.title">Clientes <span class="text-coral-500">felizes</span>.</h2>
    </div>
    <div class="grid md:grid-cols-3 gap-6">
      <div class="bg-royal-50 rounded-3xl p-8 reveal">
        <div class="text-coral-500 text-5xl font-display font-bold leading-none mb-4">"</div>
        <p class="text-ink mb-6" data-i18n="clients.q1">Substituíram um sistema legado de 10 anos em 3 meses, sem perder um único registro. Nível de execução raro.</p>
        <div class="flex items-center gap-3 pt-4 border-t border-royal-100">
          <div class="w-10 h-10 rounded-full bg-gradient-to-br from-royal-500 to-royal-700"></div>
          <div>
            <div class="font-bold text-sm">Marina Costa</div>
            <div class="text-xs text-ink/60" data-i18n="clients.q1role">CTO, Acme Corp</div>
          </div>
        </div>
      </div>
      <div class="bg-coral-500 text-white rounded-3xl p-8 md:-mt-6 reveal">
        <div class="text-white/40 text-5xl font-display font-bold leading-none mb-4">"</div>
        <p class="mb-6" data-i18n="clients.q2">Entenderam a operação tão bem quanto a engenharia. O resultado é um sistema que parece feito por dentro de casa.</p>
        <div class="flex items-center gap-3 pt-4 border-t border-white/20">
          <div class="w-10 h-10 rounded-full bg-white/20"></div>
          <div>
            <div class="font-bold text-sm">Paolo Bianchi</div>
            <div class="text-xs opacity-80" data-i18n="clients.q2role">CEO, Ventura Group</div>
          </div>
        </div>
      </div>
      <div class="bg-ink text-white rounded-3xl p-8 reveal">
        <div class="text-coral-400 text-5xl font-display font-bold leading-none mb-4">"</div>
        <p class="mb-6" data-i18n="clients.q3">Atendimento europeu com agilidade brasileira. Combinação que eu não sabia que existia.</p>
        <div class="flex items-center gap-3 pt-4 border-t border-white/20">
          <div class="w-10 h-10 rounded-full bg-coral-500"></div>
          <div>
            <div class="font-bold text-sm">Sofia Almeida</div>
            <div class="text-xs opacity-80" data-i18n="clients.q3role">Founder, Lumière Studio</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- BLOG -->
<section id="blog" class="py-24 bg-royal-50">
  <div class="max-w-7xl mx-auto px-6">
    <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-16 gap-6 reveal">
      <div>
        <div class="text-xs uppercase tracking-[0.3em] text-coral-500 font-bold mb-4" data-i18n="blog.eyebrow">[ Insights ]</div>
        <h2 class="font-display text-5xl md:text-6xl font-bold" data-i18n="blog.title">Do nosso <span class="text-coral-500">blog</span></h2>
      </div>
      <a href="#" class="text-ink font-bold hover:text-coral-500 transition" data-i18n="blog.all">Todos os artigos →</a>
    </div>
    <div class="grid md:grid-cols-3 gap-6">
      <a href="blog/app-proprio-ou-web-app-custo-real/" class="group bg-white rounded-3xl overflow-hidden reveal hover:-translate-y-2 transition block">
        <img src="_assets/blog/app-vs-webapp-cover.webp" alt="App próprio ou web app?" loading="lazy" decoding="async" width="1200" height="630" class="w-full h-52 object-cover">
        <div class="p-6">
          <div class="text-xs uppercase tracking-widest text-coral-500 font-bold mb-3" data-i18n="blog.b1.cat">Estratégia · 9 min</div>
          <h3 class="font-display font-bold text-xl mb-2 group-hover:text-coral-500 transition" data-i18n="blog.b1.t">App próprio ou web app? O custo real de cada caminho</h3>
          <p class="text-ink/60 text-sm" data-i18n="blog.b1.d">Framework de decisão de 5 perguntas + estimativa real de custo (3 anos) entre nativo, híbrido, PWA e web.</p>
        </div>
      </a>
      <article class="group bg-white rounded-3xl overflow-hidden reveal hover:-translate-y-2 transition">
        <img src="https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=600" class="w-full h-52 object-cover">
        <div class="p-6">
          <div class="text-xs uppercase tracking-widest text-coral-500 font-bold mb-3" data-i18n="blog.b2.cat">Automação · 6 min</div>
          <h3 class="font-display font-bold text-xl mb-2 group-hover:text-coral-500 transition" data-i18n="blog.b2.t">5 processos manuais que toda PME deveria automatizar</h3>
          <p class="text-ink/60 text-sm" data-i18n="blog.b2.d">Da emissão fiscal ao onboarding — o ROI costuma aparecer no primeiro trimestre.</p>
        </div>
      </article>
      <article class="group bg-white rounded-3xl overflow-hidden reveal hover:-translate-y-2 transition">
        <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?w=600" class="w-full h-52 object-cover">
        <div class="p-6">
          <div class="text-xs uppercase tracking-widest text-coral-500 font-bold mb-3" data-i18n="blog.b3.cat">Hardware · 10 min</div>
          <h3 class="font-display font-bold text-xl mb-2 group-hover:text-coral-500 transition" data-i18n="blog.b3.t">Integrando IoT a sistemas legados sem quebrar nada</h3>
          <p class="text-ink/60 text-sm" data-i18n="blog.b3.d">Padrões de integração para conectar sensores a ERPs antigos com mínima fricção.</p>
        </div>
      </article>
    </div>
  </div>
</section>

<!-- CONTATO -->
<section id="contato" class="py-24 bg-ink text-white relative overflow-hidden">
  <div class="absolute -top-40 -right-40 w-[500px] h-[500px] bg-coral-500 rounded-full blob opacity-30"></div>
  <div class="absolute -bottom-40 -left-40 w-[500px] h-[500px] bg-royal-600 rounded-full blob opacity-50"></div>
  <div class="max-w-5xl mx-auto px-6 relative">
    <div class="grid lg:grid-cols-2 gap-12 items-center">
      <div class="reveal-l">
        <div class="text-xs uppercase tracking-[0.3em] text-coral-400 font-bold mb-4" data-i18n="contact.eyebrow">[ Vamos conversar ]</div>
        <h2 class="font-display text-5xl md:text-6xl font-bold mb-6 leading-tight" data-i18n="contact.title">
          Pronto para <span class="text-coral-400">resolver</span>?
        </h2>
        <p class="text-lg text-white/70 mb-8" data-i18n="contact.subtitle">Conte-nos sobre seu projeto. Resposta em até 24 horas úteis com proposta inicial e estimativa.</p>
        <div class="space-y-4">
          <div class="flex items-center gap-3"><div class="w-10 h-10 rounded-full bg-coral-500 flex items-center justify-center">📧</div><div>contato@eurobureau.digital</div></div>
          <div class="flex items-center gap-3"><div class="w-10 h-10 rounded-full bg-royal-600 flex items-center justify-center">📱</div><div>+55 11 9999-9999</div></div>
          <div class="flex items-center gap-3"><div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center">📍</div><div data-i18n="contact.address">São Paulo · BR · Valletta · MT</div></div>
        </div>
      </div>
      <form class="bg-white/5 backdrop-blur border border-white/10 rounded-3xl p-8 reveal-r">
        <div class="space-y-4">
          <input type="text" placeholder="Nome" data-i18n-ph="contact.name" class="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 focus:outline-none focus:border-coral-400 transition placeholder-white/40">
          <input type="email" placeholder="E-mail" data-i18n-ph="contact.email" class="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 focus:outline-none focus:border-coral-400 transition placeholder-white/40">
          <input type="text" placeholder="Empresa" data-i18n-ph="contact.company" class="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 focus:outline-none focus:border-coral-400 transition placeholder-white/40">
          <textarea rows="4" placeholder="Conte sobre seu projeto" data-i18n-ph="contact.message" class="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 focus:outline-none focus:border-coral-400 transition placeholder-white/40"></textarea>
          <button type="submit" class="w-full bg-coral-500 hover:bg-coral-600 text-white px-7 py-4 rounded-xl font-bold transition" data-i18n="contact.submit">Enviar mensagem →</button>
        </div>
      </form>
    </div>
  </div>
</section>

<!-- FOOTER -->
<footer class="bg-royal-950 text-white/60 py-12">
  <div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
    <div class="flex items-center gap-2.5">
      <img src="_assets/penseonline-logo-white.png" alt="Penseonline" class="h-9 md:h-10 w-auto" data-brand-footer>
    </div>
    <div class="text-sm">© 2026 Penseonline. <span data-i18n="footer.rights">Todos os direitos reservados.</span></div>
    <div class="flex gap-6 text-sm">
      <a href="#" class="hover:text-coral-400 transition" data-i18n="footer.privacy">Privacidade</a>
      <a href="#" class="hover:text-coral-400 transition" data-i18n="footer.terms">Termos</a>
    </div>
  </div>
</footer>

<!-- WhatsApp Float -->
<a href="https://wa.me/5583986612061?text=Ol%C3%A1!%20Gostaria%20de%20falar%20com%20um%20especialista%20da%20Brazilian%20Bureau." target="_blank" rel="noopener" id="waFloat" class="fixed bottom-6 right-6 z-50 group flex items-center gap-3 bg-[#25D366] hover:bg-[#1ebe5d] text-white pl-4 pr-5 py-3.5 rounded-full shadow-2xl shadow-[#25D366]/40 transition-all hover:scale-105">
  <span class="absolute inset-0 rounded-full bg-[#25D366] animate-ping opacity-30"></span>
  <svg class="relative w-6 h-6" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.464 3.488"/></svg>
  <span class="relative font-semibold text-sm whitespace-nowrap hidden sm:inline" data-i18n="wa.label">Fale com um especialista</span>
</a>

<script>
// Aplicar marca ao DOM o quanto antes
(function(){
  if (!window.__brand) return;
  document.documentElement.setAttribute('data-brand', window.__brand);
  function applyBrand(){
    if (window.__brand === 'bb') {
      document.querySelectorAll('[data-brand-header]').forEach(function(img){
        img.src = '_assets/brazilian-bureau-logo-transparent.png';
        img.alt = 'Brazilian Bureau';
      });
      document.querySelectorAll('[data-brand-footer]').forEach(function(img){
        img.src = '_assets/brazilian-bureau-logo-white.png';
        img.alt = 'Brazilian Bureau';
      });
    } else if (window.__brand === 'penseonline') {
      document.querySelectorAll('[data-brand-header]').forEach(function(img){
        img.src = '_assets/penseonline-logo-transparent.png';
        img.alt = 'Penseonline';
      });
      document.querySelectorAll('[data-brand-footer]').forEach(function(img){
        img.src = '_assets/penseonline-logo-white.png';
        img.alt = 'Penseonline';
      });
    }
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', applyBrand);
  } else {
    applyBrand();
  }
})();

const i18n = {
  pt: {
    'nav.about':'Sobre','nav.services':'Serviços','nav.process':'Processo','nav.portfolio':'Portfólio','nav.cases':'Cases','nav.clients':'Clientes','nav.blog':'Blog','nav.cta':'Fale conosco →',
    'portfolio.eyebrow':'[ Produtos próprios ]','portfolio.title':'Nosso <span class="text-coral-500">portfólio</span>','portfolio.subtitle':'Produtos que construímos, operamos e evoluímos. A mesma equipe que entrega para clientes externos.',
    'portfolio.p1.tag':'Marketplace de eventos','portfolio.p1.d':'App para venda e validação de tickets de eventos, com web, mobile (iOS/Android) e dashboard para organizadores.',
    'portfolio.p2.tag':'SaaS de saúde','portfolio.p2.d':'Sistema multi-tenant para atendimento clínico, com 21 implantações ativas e ~72k pacientes gerenciados.',
    'portfolio.p3.tag':'AdTech · OOH','portfolio.p3.d':'Hotspot Wi-Fi com mídia OOH (out-of-home) para captação, engajamento e monetização em pontos de alto fluxo.',
    'hero.badge':'Aceitando 3 projetos para o trimestre',
    'hero.title1':'Sites.','hero.title2':'Apps.','hero.title3':'Soluções','hero.title4':'que','hero.title5':'resolvem.',
    'hero.subtitle':'Automatizamos processos com sistemas web ou híbridos web + hardware. Para empresas que querem ir do problema à solução em semanas, não em anos.',
    'hero.cta1':'Começar projeto','hero.cta2':'Ver portfolio',
    'hero.team':'<b class="text-ink">12 especialistas</b> · 3 países · 1 missão',
    'hero.tag1':'⚡ 4-12 sem','hero.tag2':'projetos entregues',
    'marquee.title':'Confiam em nós',
    'about.eyebrow':'[ Sobre nós ]','about.title':'Não fazemos apenas sites bonitos. <span class="text-coral-500">Fazemos negócios funcionarem.</span>',
    'about.p1':'Penseonline é uma agência boutique focada em resolver problemas reais de operação. Cada projeto começa com uma pergunta: "qual processo estamos eliminando?".',
    'about.p2':'Combinamos código limpo, design funcional e — quando necessário — hardware integrado, para entregar soluções que sua equipe usa de verdade.',
    'about.metric1':'anos de experiência','about.metric2':'satisfação','about.metric3':'continentes','about.metric4':'suporte',
    'about.tag1':'Squads enxutos','about.tag2':'Prazos curtos','about.tag3':'Código aberto','about.tag4':'Sem amarras',
    'services.eyebrow':'[ O que fazemos ]','services.title':'Seis serviços. <br>Uma <span class="text-coral-400">obsessão</span>.',
    'services.subtitle':'Tudo que entregamos passa pelo mesmo filtro: resolve um problema mensurável da sua empresa? Se sim, fazemos. Se não, dizemos.',
    'services.s1.t':'Websites Institucionais','services.s1.d':'Sites multilíngues, otimizados para SEO e conversão, com painel administrativo próprio.',
    'services.s2.t':'Aplicativos Mobile & PWA','services.s2.d':'Apps nativos, híbridos e Progressive Web Apps com performance e UX premium.',
    'services.s3.t':'Sistemas Web & E-commerce','services.s3.d':'ERPs, CRMs, e-commerce e marketplaces sob medida — automatizamos exatamente o que sua operação precisa.',
    'services.s4.t':'Soluções Híbridas Web + Hardware','services.s4.d':'Integração de IoT, totens, leitores e dispositivos físicos com plataformas digitais.',
    'services.s5.t':'Automação & Integrações','services.s5.d':'APIs, webhooks, RPA e integrações com ERPs, gateways e plataformas externas.',
    'services.s6.t':'Consultoria & Discovery','services.s6.d':'Mapeamento de processos, descoberta técnica e recomendação de stack ideal para seu caso.','services.s6.cta':'Saiba mais →',
    'process.eyebrow':'[ Como rodamos ]','process.title':'Quatro passos. <span class="text-coral-500">Zero surpresas.</span>',
    'process.subtitle':'Sem reuniões intermináveis. Sem PowerPoints de 80 slides. Apenas execução clara, com entregas validadas a cada ciclo.',
    'process.p1.t':'Discovery','process.p1.d':'Imersão no problema, mapeamento de processos e definição de escopo objetivo.',
    'process.p2.t':'Design','process.p2.d':'UX, UI e protótipos navegáveis aprovados antes de qualquer linha de código.',
    'process.p3.t':'Build','process.p3.d':'Sprints quinzenais, código revisado, testes automatizados e CI/CD do dia 1.',
    'process.p4.t':'Launch','process.p4.d':'Deploy, monitoramento, suporte contínuo e ciclos de evolução do produto.',
    'cases.eyebrow':'[ Trabalhos selecionados ]','cases.title':'Cases <span class="text-coral-500">recentes</span>','cases.all':'Ver todos →',
    'cases.c1.tag':'Saúde · SaaS','cases.c1.d':'Plataforma multi-tenant para clínicas com 21 implantações ativas e ~72k pacientes gerenciados.',
    'cases.c2.tag':'Fitness · Híbrido','cases.c2.d':'Sistema de gestão para box de CrossFit com checkin via app, gateway de pagamento e ACL granular.',
    'cases.c3.tag':'E-commerce · BI','cases.c3.d':'Inteligência de mercado com análise de concorrência multi-marketplace e exports auditáveis.',
    'cases.c4.tag':'Conectividade · IoT','cases.c4.d':'Portal de provisionamento de mídia DOOH em Wi-Fi público.',
    'cases.c5.tag':'Eventos · Mobile + Web','cases.c5.d':'Plataforma de descoberta de eventos e nightlife em Malta — web app, mobile (iOS/Android) e dashboard para organizadores.',
    'cases.c6.tag':'Esporte · Campeonatos','cases.c6.d':'Plataforma oficial para campeonatos de tiro com arco no Brasil — gestão de inscrições, rankings em tempo real e auditoria de pagamentos.',
    'clients.eyebrow':'[ O que dizem ]','clients.title':'Clientes <span class="text-coral-500">felizes</span>.',
    'clients.q1':'Substituíram um sistema legado de 10 anos em 3 meses, sem perder um único registro. Nível de execução raro.','clients.q1role':'CTO, Acme Corp',
    'clients.q2':'Entenderam a operação tão bem quanto a engenharia. O resultado é um sistema que parece feito por dentro de casa.','clients.q2role':'CEO, Ventura Group',
    'clients.q3':'Atendimento europeu com agilidade brasileira. Combinação que eu não sabia que existia.','clients.q3role':'Founder, Lumière Studio',
    'blog.eyebrow':'[ Insights ]','blog.title':'Do nosso <span class="text-coral-500">blog</span>','blog.all':'Todos os artigos →',
    'blog.b1.cat':'Estratégia · 9 min','blog.b1.t':'App próprio ou web app? O custo real de cada caminho','blog.b1.d':'Framework de decisão de 5 perguntas + estimativa real de custo (3 anos) entre nativo, híbrido, PWA e web.',
    'blog.b2.cat':'Automação · 6 min','blog.b2.t':'5 processos manuais que toda PME deveria automatizar','blog.b2.d':'Da emissão fiscal ao onboarding — o ROI costuma aparecer no primeiro trimestre.',
    'blog.b3.cat':'Hardware · 10 min','blog.b3.t':'Integrando IoT a sistemas legados sem quebrar nada','blog.b3.d':'Padrões de integração para conectar sensores a ERPs antigos com mínima fricção.',
    'contact.eyebrow':'[ Vamos conversar ]','contact.title':'Pronto para <span class="text-coral-400">resolver</span>?',
    'contact.subtitle':'Conte-nos sobre seu projeto. Resposta em até 24 horas úteis com proposta inicial e estimativa.',
    'contact.address':'São Paulo · BR · Valletta · MT',
    'contact.name':'Nome','contact.email':'E-mail','contact.company':'Empresa','contact.message':'Conte sobre seu projeto','contact.submit':'Enviar mensagem →',
    'footer.rights':'Todos os direitos reservados.','footer.privacy':'Privacidade','footer.terms':'Termos',
    'wa.label':'Fale com um especialista'
  },
  en: {
    'nav.about':'About','nav.services':'Services','nav.process':'Process','nav.portfolio':'Portfolio','nav.cases':'Cases','nav.clients':'Clients','nav.blog':'Blog','nav.cta':'Get in touch →',
    'portfolio.eyebrow':'[ Our own products ]','portfolio.title':'Our <span class="text-coral-500">portfolio</span>','portfolio.subtitle':'Products we built, operate and evolve. The same team that delivers to external clients.',
    'portfolio.p1.tag':'Event marketplace','portfolio.p1.d':'App for ticket sales and validation, with web, mobile (iOS/Android) and an organizers dashboard.',
    'portfolio.p2.tag':'Healthcare SaaS','portfolio.p2.d':'Multi-tenant clinic system with 21 active deployments and ~72k patients managed.',
    'portfolio.p3.tag':'AdTech · OOH','portfolio.p3.d':'Wi-Fi hotspot with out-of-home media for capture, engagement and monetization in high-traffic locations.',
    'hero.badge':'Accepting 3 projects this quarter',
    'hero.title1':'Sites.','hero.title2':'Apps.','hero.title3':'Solutions','hero.title4':'that','hero.title5':'work.',
    'hero.subtitle':'We automate processes with web or hybrid web + hardware systems. For companies that want to go from problem to solution in weeks, not years.',
    'hero.cta1':'Start project','hero.cta2':'See portfolio',
    'hero.team':'<b class="text-ink">12 specialists</b> · 3 countries · 1 mission',
    'hero.tag1':'⚡ 4-12 wks','hero.tag2':'projects delivered',
    'marquee.title':'They trust us',
    'about.eyebrow':'[ About us ]','about.title':"We don't just make pretty websites. <span class=\"text-coral-500\">We make businesses work.</span>",
    'about.p1':'Penseonline is a boutique agency focused on solving real operational problems. Every project starts with a question: "what process are we eliminating?".',
    'about.p2':'We combine clean code, functional design and — when needed — integrated hardware, to deliver solutions your team actually uses.',
    'about.metric1':'years of experience','about.metric2':'satisfaction','about.metric3':'continents','about.metric4':'support',
    'about.tag1':'Lean squads','about.tag2':'Short timelines','about.tag3':'Open code','about.tag4':'No lock-in',
    'services.eyebrow':'[ What we do ]','services.title':'Six services. <br>One <span class="text-coral-400">obsession</span>.',
    'services.subtitle':'Everything we deliver passes the same filter: does it solve a measurable problem for your company? If yes, we do it. If not, we say so.',
    'services.s1.t':'Corporate Websites','services.s1.d':'Multilingual websites, optimized for SEO and conversion, with built-in admin panel.',
    'services.s2.t':'Mobile Apps & PWA','services.s2.d':'Native, hybrid and Progressive Web Apps with premium performance and UX.',
    'services.s3.t':'Web Systems & E-commerce','services.s3.d':'Custom ERPs, CRMs, e-commerce and marketplaces — we automate exactly what your operation needs.',
    'services.s4.t':'Hybrid Solutions Web + Hardware','services.s4.d':'IoT integration, kiosks, readers and physical devices with digital platforms.',
    'services.s5.t':'Automation & Integrations','services.s5.d':'APIs, webhooks, RPA and integrations with ERPs, gateways and external platforms.',
    'services.s6.t':'Consulting & Discovery','services.s6.d':'Process mapping, technical discovery and ideal stack recommendation for your case.','services.s6.cta':'Learn more →',
    'process.eyebrow':'[ How we run ]','process.title':'Four steps. <span class="text-coral-500">Zero surprises.</span>',
    'process.subtitle':'No endless meetings. No 80-slide decks. Just clear execution, with deliveries validated each cycle.',
    'process.p1.t':'Discovery','process.p1.d':'Immersion in the problem, process mapping and objective scope definition.',
    'process.p2.t':'Design','process.p2.d':'UX, UI and navigable prototypes approved before any line of code.',
    'process.p3.t':'Build','process.p3.d':'Two-week sprints, reviewed code, automated tests and CI/CD from day 1.',
    'process.p4.t':'Launch','process.p4.d':'Deploy, monitoring, ongoing support and product evolution cycles.',
    'cases.eyebrow':'[ Selected works ]','cases.title':'Recent <span class="text-coral-500">cases</span>','cases.all':'See all →',
    'cases.c1.tag':'Healthcare · SaaS','cases.c1.d':'Multi-tenant platform for clinics with 21 active deployments and ~72k managed patients.',
    'cases.c2.tag':'Fitness · Hybrid','cases.c2.d':'Management system for CrossFit box with app check-in, payment gateway and granular ACL.',
    'cases.c3.tag':'E-commerce · BI','cases.c3.d':'Market intelligence with multi-marketplace competitive analysis and auditable exports.',
    'cases.c4.tag':'Connectivity · IoT','cases.c4.d':'DOOH media provisioning portal over public Wi-Fi.',
    'cases.c5.tag':'Events · Mobile + Web','cases.c5.d':'Event and nightlife discovery platform for Malta — web app, mobile (iOS/Android) and organizer dashboard.',
    'cases.c6.tag':'Sports · Championships','cases.c6.d':'Official platform for archery championships in Brazil — registration management, real-time rankings and payment audit.',
    'clients.eyebrow':'[ What they say ]','clients.title':'Happy <span class="text-coral-500">clients</span>.',
    'clients.q1':'They replaced a 10-year-old legacy system in 3 months, without losing a single record. A rare level of execution.','clients.q1role':'CTO, Acme Corp',
    'clients.q2':'They understood the operation as well as the engineering. The result feels like it was built in-house.','clients.q2role':'CEO, Ventura Group',
    'clients.q3':'European care with Brazilian agility. A combination I didn\'t know existed.','clients.q3role':'Founder, Lumière Studio',
    'blog.eyebrow':'[ Insights ]','blog.title':'From our <span class="text-coral-500">blog</span>','blog.all':'All articles →',
    'blog.b1.cat':'Strategy · 9 min','blog.b1.t':'Native app or web app? The real cost of each path','blog.b1.d':'5-question decision framework + real 3-year cost estimate across native, hybrid, PWA and web.',
    'blog.b2.cat':'Automation · 6 min','blog.b2.t':'5 manual processes every SMB should automate','blog.b2.d':'From tax issuance to onboarding — ROI usually shows up in the first quarter.',
    'blog.b3.cat':'Hardware · 10 min','blog.b3.t':'Integrating IoT into legacy systems without breaking anything','blog.b3.d':'Integration patterns to connect sensors to old ERPs with minimal friction.',
    'contact.eyebrow':"[ Let's talk ]",'contact.title':'Ready to <span class="text-coral-400">solve</span>?',
    'contact.subtitle':'Tell us about your project. Reply within 24 business hours with initial proposal and estimate.',
    'contact.address':'São Paulo · BR · Valletta · MT',
    'contact.name':'Name','contact.email':'Email','contact.company':'Company','contact.message':'Tell us about your project','contact.submit':'Send message →',
    'footer.rights':'All rights reserved.','footer.privacy':'Privacy','footer.terms':'Terms',
    'wa.label':'Talk to a specialist'
  },
  es: {
    'nav.about':'Nosotros','nav.services':'Servicios','nav.process':'Proceso','nav.portfolio':'Portafolio','nav.cases':'Casos','nav.clients':'Clientes','nav.blog':'Blog','nav.cta':'Contáctanos →',
    'portfolio.eyebrow':'[ Productos propios ]','portfolio.title':'Nuestro <span class="text-coral-500">portafolio</span>','portfolio.subtitle':'Productos que construimos, operamos y evolucionamos. El mismo equipo que entrega a clientes externos.',
    'portfolio.p1.tag':'Marketplace de eventos','portfolio.p1.d':'App para venta y validación de tickets, con web, mobile (iOS/Android) y panel para organizadores.',
    'portfolio.p2.tag':'SaaS de salud','portfolio.p2.d':'Sistema multi-tenant para atención clínica, con 21 implantaciones activas y ~72k pacientes gestionados.',
    'portfolio.p3.tag':'AdTech · OOH','portfolio.p3.d':'Hotspot Wi-Fi con medios OOH (out-of-home) para captación, engagement y monetización en puntos de alto tráfico.',
    'hero.badge':'Aceptando 3 proyectos este trimestre',
    'hero.title1':'Sitios.','hero.title2':'Apps.','hero.title3':'Soluciones','hero.title4':'que','hero.title5':'funcionan.',
    'hero.subtitle':'Automatizamos procesos con sistemas web o híbridos web + hardware. Para empresas que quieren ir del problema a la solución en semanas, no en años.',
    'hero.cta1':'Iniciar proyecto','hero.cta2':'Ver portfolio',
    'hero.team':'<b class="text-ink">12 especialistas</b> · 3 países · 1 misión',
    'hero.tag1':'⚡ 4-12 sem','hero.tag2':'proyectos entregados',
    'marquee.title':'Confían en nosotros',
    'about.eyebrow':'[ Sobre nosotros ]','about.title':'No solo hacemos sitios bonitos. <span class="text-coral-500">Hacemos que los negocios funcionen.</span>',
    'about.p1':'Penseonline es una agencia boutique enfocada en resolver problemas reales de operación. Cada proyecto empieza con una pregunta: "¿qué proceso estamos eliminando?".',
    'about.p2':'Combinamos código limpio, diseño funcional y — cuando hace falta — hardware integrado, para entregar soluciones que tu equipo realmente usa.',
    'about.metric1':'años de experiencia','about.metric2':'satisfacción','about.metric3':'continentes','about.metric4':'soporte',
    'about.tag1':'Squads ágiles','about.tag2':'Plazos cortos','about.tag3':'Código abierto','about.tag4':'Sin ataduras',
    'services.eyebrow':'[ Lo que hacemos ]','services.title':'Seis servicios. <br>Una <span class="text-coral-400">obsesión</span>.',
    'services.subtitle':'Todo lo que entregamos pasa por el mismo filtro: ¿resuelve un problema medible de tu empresa? Si sí, lo hacemos. Si no, te lo decimos.',
    'services.s1.t':'Sitios Institucionales','services.s1.d':'Sitios multilingües, optimizados para SEO y conversión, con panel administrativo propio.',
    'services.s2.t':'Apps Móviles & PWA','services.s2.d':'Apps nativas, híbridas y Progressive Web Apps con rendimiento y UX premium.',
    'services.s3.t':'Sistemas Web & E-commerce','services.s3.d':'ERPs, CRMs, e-commerce y marketplaces a medida — automatizamos exactamente lo que tu operación necesita.',
    'services.s4.t':'Soluciones Híbridas Web + Hardware','services.s4.d':'Integración de IoT, tótems, lectores y dispositivos físicos con plataformas digitales.',
    'services.s5.t':'Automatización & Integraciones','services.s5.d':'APIs, webhooks, RPA e integraciones con ERPs, gateways y plataformas externas.',
    'services.s6.t':'Consultoría & Discovery','services.s6.d':'Mapeo de procesos, descubrimiento técnico y recomendación del stack ideal para tu caso.','services.s6.cta':'Saber más →',
    'process.eyebrow':'[ Cómo trabajamos ]','process.title':'Cuatro pasos. <span class="text-coral-500">Cero sorpresas.</span>',
    'process.subtitle':'Sin reuniones interminables. Sin presentaciones de 80 slides. Solo ejecución clara, con entregas validadas cada ciclo.',
    'process.p1.t':'Discovery','process.p1.d':'Inmersión en el problema, mapeo de procesos y definición objetiva del alcance.',
    'process.p2.t':'Diseño','process.p2.d':'UX, UI y prototipos navegables aprobados antes de cualquier línea de código.',
    'process.p3.t':'Build','process.p3.d':'Sprints quincenales, código revisado, pruebas automatizadas y CI/CD desde el día 1.',
    'process.p4.t':'Launch','process.p4.d':'Despliegue, monitoreo, soporte continuo y ciclos de evolución del producto.',
    'cases.eyebrow':'[ Trabajos seleccionados ]','cases.title':'Casos <span class="text-coral-500">recientes</span>','cases.all':'Ver todos →',
    'cases.c1.tag':'Salud · SaaS','cases.c1.d':'Plataforma multi-tenant para clínicas con 21 implantaciones activas y ~72k pacientes gestionados.',
    'cases.c2.tag':'Fitness · Híbrido','cases.c2.d':'Sistema de gestión para box de CrossFit con check-in vía app, gateway de pago y ACL granular.',
    'cases.c3.tag':'E-commerce · BI','cases.c3.d':'Inteligencia de mercado con análisis competitivo multi-marketplace y exports auditables.',
    'cases.c4.tag':'Conectividad · IoT','cases.c4.d':'Portal de aprovisionamiento de medios DOOH en Wi-Fi público.',
    'cases.c5.tag':'Eventos · Mobile + Web','cases.c5.d':'Plataforma de descubrimiento de eventos y nightlife en Malta — web app, móvil (iOS/Android) y dashboard para organizadores.',
    'cases.c6.tag':'Deporte · Campeonatos','cases.c6.d':'Plataforma oficial para campeonatos de tiro con arco en Brasil — gestión de inscripciones, rankings en tiempo real y auditoría de pagos.',
    'clients.eyebrow':'[ Lo que dicen ]','clients.title':'Clientes <span class="text-coral-500">felices</span>.',
    'clients.q1':'Reemplazaron un sistema legado de 10 años en 3 meses, sin perder un solo registro. Un nivel de ejecución poco común.','clients.q1role':'CTO, Acme Corp',
    'clients.q2':'Entendieron la operación tan bien como la ingeniería. El resultado parece hecho dentro de casa.','clients.q2role':'CEO, Ventura Group',
    'clients.q3':'Atención europea con agilidad brasileña. Una combinación que no sabía que existía.','clients.q3role':'Founder, Lumière Studio',
    'blog.eyebrow':'[ Insights ]','blog.title':'Desde nuestro <span class="text-coral-500">blog</span>','blog.all':'Todos los artículos →',
    'blog.b1.cat':'Estrategia · 9 min','blog.b1.t':'¿App propia o web app? El costo real de cada camino','blog.b1.d':'Framework de decisión de 5 preguntas + estimación real de costo (3 años) entre nativo, híbrido, PWA y web.',
    'blog.b2.cat':'Automatización · 6 min','blog.b2.t':'5 procesos manuales que toda PyME debería automatizar','blog.b2.d':'De la emisión fiscal al onboarding — el ROI suele aparecer en el primer trimestre.',
    'blog.b3.cat':'Hardware · 10 min','blog.b3.t':'Integrando IoT a sistemas legados sin romper nada','blog.b3.d':'Patrones de integración para conectar sensores a ERPs antiguos con mínima fricción.',
    'contact.eyebrow':'[ Conversemos ]','contact.title':'¿Listo para <span class="text-coral-400">resolver</span>?',
    'contact.subtitle':'Cuéntanos sobre tu proyecto. Respuesta en hasta 24 horas hábiles con propuesta inicial y estimación.',
    'contact.address':'São Paulo · BR · Valletta · MT',
    'contact.name':'Nombre','contact.email':'Correo','contact.company':'Empresa','contact.message':'Cuéntanos sobre tu proyecto','contact.submit':'Enviar mensaje →',
    'footer.rights':'Todos los derechos reservados.','footer.privacy':'Privacidad','footer.terms':'Términos',
    'wa.label':'Habla con un especialista'
  },
  mt: {
    'nav.about':'Dwarna','nav.services':'Servizzi','nav.process':'Proċess','nav.portfolio':'Portafoll','nav.cases':'Każijiet','nav.clients':'Klijenti','nav.blog':'Blog','nav.cta':'Ikkuntattjana →',
    'portfolio.eyebrow':'[ Prodotti tagħna ]','portfolio.title':'Il-<span class="text-coral-500">portafoll</span> tagħna','portfolio.subtitle':'Prodotti li bnejna, noperaw u nevolvu. L-istess tim li jagħti servizz lill-klijenti esterni.',
    'portfolio.p1.tag':'Suq tal-avvenimenti','portfolio.p1.d':'App għall-bejgħ u validazzjoni ta\' biljetti tal-avvenimenti, b\'web, mobile (iOS/Android) u dashboard għall-organizzaturi.',
    'portfolio.p2.tag':'SaaS tas-saħħa','portfolio.p2.d':'Sistema multi-tenant għal kura klinika, b\'21 implimentazzjoni attiva u ~72k pazjent immaniġġjat.',
    'portfolio.p3.tag':'AdTech · OOH','portfolio.p3.d':'Hotspot Wi-Fi b\'midja OOH (out-of-home) għall-kaptura, engagement u monetizzazzjoni f\'postijiet ta\' traffiku għoli.',
    'hero.badge':'Naċċettaw 3 proġetti dan it-trimestru',
    'hero.title1':'Websajts.','hero.title2':'Apps.','hero.title3':'Soluzzjonijiet','hero.title4':'li','hero.title5':'jaħdmu.',
    'hero.subtitle':'Awtomatizzaw il-proċessi b\'sistemi web jew ibridi web + ħardwer. Għal kumpaniji li jridu jgħaddu mill-problema għas-soluzzjoni fi ġimgħat, mhux snin.',
    'hero.cta1':'Ibda proġett','hero.cta2':'Ara l-portafoll',
    'hero.team':'<b class="text-ink">12-il speċjalist</b> · 3 pajjiżi · 1 missjoni',
    'hero.tag1':'⚡ 4-12-il ġimgħa','hero.tag2':'proġetti mwassla',
    'marquee.title':'Jafdaw fina',
    'about.eyebrow':'[ Dwarna ]','about.title':'Mhux biss nagħmlu websajts sbieħ. <span class="text-coral-500">Nagħmlu n-negozji jaħdmu.</span>',
    'about.p1':'Penseonline hi aġenzija boutique iffokata fuq is-soluzzjoni ta\' problemi reali tal-operat. Kull proġett jibda b\'mistoqsija: "liema proċess qed jelimina?".',
    'about.p2':'Ngħaqqdu kodiċi nadif, disinn funzjonali u — meta jkun meħtieġ — ħardwer integrat, biex inwasslu soluzzjonijiet li t-tim tiegħek tassew juża.',
    'about.metric1':'snin esperjenza','about.metric2':'sodisfazzjon','about.metric3':'kontinenti','about.metric4':'appoġġ',
    'about.tag1':'Squads aġili','about.tag2':'Skadenzi qosra','about.tag3':'Kodiċi miftuħ','about.tag4':'Ebda lock-in',
    'services.eyebrow':'[ X nagħmlu ]','services.title':'Sitt servizzi. <br>Ossessjoni <span class="text-coral-400">waħda</span>.',
    'services.subtitle':'Kollox li nwasslu jgħaddi mill-istess filtru: jissolvi problema kejlbarja tan-negozju tiegħek? Jekk iva, nagħmluh. Jekk le, ngħidulek.',
    'services.s1.t':'Websajts Istituzzjonali','services.s1.d':'Websajts multilingwi, ottimizzati għal SEO u konverżjoni, b\'panel amministrattiv proprjetarju.',
    'services.s2.t':'Apps Mobbli & PWA','services.s2.d':'Apps nattivi, ibridi u Progressive Web Apps b\'prestazzjoni u UX premium.',
    'services.s3.t':'Sistemi Web & E-commerce','services.s3.d':'ERPs, CRMs, e-commerce u marketplaces fuq miżura — nawtomatizzaw eżatt dak li tinħtieġ l-operat tiegħek.',
    'services.s4.t':'Soluzzjonijiet Ibridi Web + Ħardwer','services.s4.d':'Integrazzjoni ta\' IoT, totem, qarrejja u apparat fiżiku ma\' pjattaformi diġitali.',
    'services.s5.t':'Awtomatizzazzjoni & Integrazzjonijiet','services.s5.d':'APIs, webhooks, RPA u integrazzjonijiet ma\' ERPs, gateways u pjattaformi esterni.',
    'services.s6.t':'Konsulenza & Discovery','services.s6.d':'Mappar tal-proċessi, discovery tekniku u rakkomandazzjoni tal-istack ideali għall-każ tiegħek.','services.s6.cta':'Tgħallem aktar →',
    'process.eyebrow':'[ Kif naħdmu ]','process.title':'Erba\' passi. <span class="text-coral-500">Ebda sorpriżi.</span>',
    'process.subtitle':'Bla laqgħat infiniti. Bla preżentazzjonijiet ta\' 80 slide. Biss eżekuzzjoni ċara, b\'kunsinni vvalidati f\'kull ċiklu.',
    'process.p1.t':'Discovery','process.p1.d':'Immersjoni fil-problema, mappar tal-proċessi u definizzjoni oġġettiva tal-iskop.',
    'process.p2.t':'Disinn','process.p2.d':'UX, UI u prototipi navigabbli approvati qabel kull linja ta\' kodiċi.',
    'process.p3.t':'Build','process.p3.d':'Sprints kull ġimagħtejn, kodiċi rivedut, testijiet awtomatizzati u CI/CD mill-ewwel jum.',
    'process.p4.t':'Launch','process.p4.d':'Deploy, monitoraġġ, appoġġ kontinwu u ċikli ta\' evoluzzjoni tal-prodott.',
    'cases.eyebrow':'[ Xogħlijiet magħżula ]','cases.title':'Każijiet <span class="text-coral-500">reċenti</span>','cases.all':'Ara kollox →',
    'cases.c1.tag':'Saħħa · SaaS','cases.c1.d':'Pjattaforma multi-tenant għal kliniki b\'21 implimentazzjoni attiva u ~72k pazjent.',
    'cases.c2.tag':'Fitness · Ibridu','cases.c2.d':'Sistema ta\' ġestjoni għal box CrossFit b\'check-in via app, gateway tal-ħlas u ACL granulari.',
    'cases.c3.tag':'E-commerce · BI','cases.c3.d':'Intelliġenza tas-suq b\'analiżi tal-kompetizzjoni multi-marketplace u esports verifikabbli.',
    'cases.c4.tag':'Konnettività · IoT','cases.c4.d':'Portal ta\' provvediment ta\' midja DOOH fuq Wi-Fi pubbliku.',
    'cases.c5.tag':'Avvenimenti · Mobile + Web','cases.c5.d':'Pjattaforma ta\' skoperta ta\' avvenimenti u nightlife f\'Malta — web app, mobile (iOS/Android) u dashboard għall-organizzaturi.',
    'cases.c6.tag':'Sport · Kampjonati','cases.c6.d':'Pjattaforma uffiċjali għall-kampjonati tal-isparar bl-arko fil-Brażil — ġestjoni ta\' applikazzjonijiet, rankings f\'ħin reali u verifika ta\' ħlasijiet.',
    'clients.eyebrow':'[ X jgħidu ]','clients.title':'Klijenti <span class="text-coral-500">kuntenti</span>.',
    'clients.q1':'Issostitwew sistema legacy ta\' 10 snin fi 3 xhur, mingħajr ma tilfu rekord wieħed. Livell ta\' eżekuzzjoni rari.','clients.q1role':'CTO, Acme Corp',
    'clients.q2':'Fehmu l-operat daqs l-inġinerija. Ir-riżultat jidher magħmul fid-dar.','clients.q2role':'CEO, Ventura Group',
    'clients.q3':'Servizz Ewropew b\'aġilità Brażiljana. Taħlita li ma kontx naf li teżisti.','clients.q3role':'Founder, Lumière Studio',
    'blog.eyebrow':'[ Insights ]','blog.title':'Mill-<span class="text-coral-500">blog</span> tagħna','blog.all':'L-artikli kollha →',
    'blog.b1.cat':'Strateġija · 9 min','blog.b1.t':'App proprjetarja jew web app? L-ispiża reali ta\' kull triq','blog.b1.d':'Qafas ta\' deċiżjoni ta\' 5 mistoqsijiet + stima reali tal-ispiża (3 snin) bejn nattiv, ibridu, PWA u web.',
    'blog.b2.cat':'Awtomatizzazzjoni · 6 min','blog.b2.t':'5 proċessi manwali li kull SME għandha tawtomatizza','blog.b2.d':'Mill-ħruġ ta\' fatturi sal-onboarding — ir-ROI normalment jidher fl-ewwel trimestru.',
    'blog.b3.cat':'Ħardwer · 10 min','blog.b3.t':'Tintegra IoT ma\' sistemi legacy mingħajr ma tkisser xejn','blog.b3.d':'Mudelli ta\' integrazzjoni biex tqabbad sensors ma\' ERPs antiki bl-inqas frizzjoni.',
    'contact.eyebrow':'[ Nitkellmu ]','contact.title':'Lest biex <span class="text-coral-400">issolvi</span>?',
    'contact.subtitle':'Għidilna dwar il-proġett tiegħek. Risposta sa 24 siegħa tax-xogħol bi proposta inizjali u stima.',
    'contact.address':'São Paulo · BR · Valletta · MT',
    'contact.name':'Isem','contact.email':'Email','contact.company':'Kumpanija','contact.message':'Għidilna dwar il-proġett tiegħek','contact.submit':'Ibgħat messaġġ →',
    'footer.rights':'Drittijiet kollha riservati.','footer.privacy':'Privatezza','footer.terms':'Termini',
    'wa.label':'Tkellem ma\' speċjalist'
  }
};

function setLang(lang){
  document.querySelectorAll('[data-i18n]').forEach(el=>{
    const k = el.getAttribute('data-i18n');
    if(i18n[lang] && i18n[lang][k]) el.innerHTML = i18n[lang][k];
  });
  document.querySelectorAll('[data-i18n-ph]').forEach(el=>{
    const k = el.getAttribute('data-i18n-ph');
    if(i18n[lang] && i18n[lang][k]) el.placeholder = i18n[lang][k];
  });
  const trig = document.getElementById('lang-trigger');
  const flagEl = document.getElementById('lang-flag');
  const labelEl = document.getElementById('lang-label');
  const opt = document.querySelector(`.lang-opt[data-lang="${lang}"]`);
  if (opt && flagEl && labelEl){ flagEl.textContent = opt.dataset.flag; labelEl.textContent = opt.dataset.label; }
  document.querySelectorAll('.lang-opt').forEach(o=>o.classList.toggle('bg-royal-50', o.dataset.lang===lang));
  document.documentElement.lang = lang==='pt'?'pt-BR':lang;
  localStorage.setItem('eb_lang', lang);
}
document.querySelectorAll('.lang-opt').forEach(b=>b.addEventListener('click',()=>{ setLang(b.dataset.lang); document.getElementById('lang-menu').classList.add('hidden'); document.getElementById('lang-trigger').setAttribute('aria-expanded','false'); }));
const langTrig = document.getElementById('lang-trigger');
const langMenu = document.getElementById('lang-menu');
if (langTrig && langMenu){
  langTrig.addEventListener('click', e=>{ e.stopPropagation(); const open = langMenu.classList.toggle('hidden'); langTrig.setAttribute('aria-expanded', String(!open)); });
  document.addEventListener('click', e=>{ if (!document.getElementById('lang-switcher').contains(e.target)){ langMenu.classList.add('hidden'); langTrig.setAttribute('aria-expanded','false'); }});
}
const mobToggle = document.getElementById('mobile-toggle');
const mobMenu = document.getElementById('mobile-menu');
const iconOpen = document.getElementById('icon-open');
const iconClose = document.getElementById('icon-close');
function setMobOpen(open){
  if (!mobMenu) return;
  mobMenu.classList.toggle('hidden', !open);
  iconOpen?.classList.toggle('hidden', open);
  iconClose?.classList.toggle('hidden', !open);
  mobToggle?.setAttribute('aria-expanded', String(open));
}
mobToggle?.addEventListener('click', () => setMobOpen(mobMenu.classList.contains('hidden')));
document.querySelectorAll('.mob-link').forEach(a => a.addEventListener('click', () => setMobOpen(false)));

async function detectDefaultLang(){
  const stored = localStorage.getItem('eb_lang');
  if (stored) return stored;
  try {
    const ctrl = new AbortController();
    const t = setTimeout(()=>ctrl.abort(), 2500);
    const r = await fetch('https://ipwho.is/?fields=country_code,success', { signal: ctrl.signal });
    clearTimeout(t);
    const d = await r.json();
    if (!d || d.success === false) throw new Error('lookup failed');
    if (d.country_code === 'BR') return 'pt';
    if (d.country_code === 'MT') return 'mt';
    return 'en';
  } catch(e) {
    return 'en';
  }
}
detectDefaultLang().then(setLang);

const siteHeader = document.getElementById('site-header');
function updateHeader(){
  if (!siteHeader) return;
  if (window.scrollY > 30){
    siteHeader.classList.remove('bg-white/30','border-royal-100/40');
    siteHeader.classList.add('bg-white/90','border-royal-100','shadow-sm');
  } else {
    siteHeader.classList.add('bg-white/30','border-royal-100/40');
    siteHeader.classList.remove('bg-white/90','border-royal-100','shadow-sm');
  }
}
window.addEventListener('scroll', updateHeader, { passive: true });
updateHeader();

const io = new IntersectionObserver((entries)=>{
  entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('visible'); io.unobserve(e.target); }});
},{threshold:0.1});
document.querySelectorAll('.reveal, .reveal-l, .reveal-r').forEach(el=>io.observe(el));
</script>
</body>
</html>
