/* orvio balance — seções da página de produto */

function BReveal({ as: Tag = "div", d, className = "", children, ...rest }) {
  return <Tag className={"reveal " + className} data-d={d} {...rest}>{children}</Tag>;
}

const s = { fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round" };
const Ico = ({ d, cls }) => <svg viewBox="0 0 24 24" className={cls}><g {...s}>{d}</g></svg>;

const I = {
  arrows:   <><path d="M7 7h10M7 7l3-3M7 7l3 3" /><path d="M17 17H7M17 17l-3-3M17 17l-3 3" /></>,
  bank:     <><path d="M3 9l9-5 9 5" /><path d="M5 9v8M19 9v8M9 9v8M15 9v8" /><path d="M3 20h18" /></>,
  card:     <><rect x="3" y="6" width="18" height="12" rx="2" /><path d="M3 10h18" /><path d="M7 14h4" /></>,
  repeat:   <><path d="M4 9a8 8 0 0 1 13-2l2 2" /><path d="M20 15a8 8 0 0 1-13 2l-2-2" /><path d="M19 4v5h-5M5 20v-5h5" /></>,
  list:     <><path d="M8 6h12M8 12h12M8 18h12" /><circle cx="4" cy="6" r="1" fill="currentColor" stroke="none" /><circle cx="4" cy="12" r="1" fill="currentColor" stroke="none" /><circle cx="4" cy="18" r="1" fill="currentColor" stroke="none" /></>,
  tag:      <><path d="M3 12V5a2 2 0 0 1 2-2h7l9 9-9 9z" /><circle cx="8" cy="8" r="1.4" fill="currentColor" stroke="none" /></>,
  bell:     <><path d="M18 9a6 6 0 0 0-12 0c0 5-2 6-2 6h16s-2-1-2-6" /><path d="M10 20a2 2 0 0 0 4 0" /></>,
  theme:    <><circle cx="12" cy="12" r="4.5" /><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M18.4 5.6L17 7M7 17l-1.4 1.4" /></>,
  csv:      <><path d="M14 3v5h5" /><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M9 13v4M9 17l-1.5-1.5M9 17l1.5-1.5" /></>,
  tour:     <><circle cx="12" cy="12" r="9" /><path d="M14.5 9.5l-2 5-3 1 1-3z" /></>,
  user:     <><circle cx="12" cy="8" r="4" /><path d="M5 20c0-3.5 3-6 7-6s7 2.5 7 6" /></>,
  lock:     <><rect x="5" y="11" width="14" height="9" rx="2" /><path d="M8 11V8a4 4 0 0 1 8 0v3" /></>,
  wallet:   <><rect x="3" y="6" width="18" height="13" rx="2.5" /><path d="M16 12h3" /><path d="M3 9h13a2 2 0 0 1 0 4" /></>,
  cart:     <><circle cx="9" cy="20" r="1.4" fill="currentColor" stroke="none" /><circle cx="17" cy="20" r="1.4" fill="currentColor" stroke="none" /><path d="M3 4h2l2.5 12h10L20 7H6.5" /></>,
  layers:   <><path d="M12 3l9 5-9 5-9-5z" /><path d="M3 13l9 5 9-5" /></>,
  toggle:   <><rect x="2" y="7" width="20" height="10" rx="5" /><circle cx="16" cy="12" r="3" fill="currentColor" stroke="none" /></>,
  divide:   <><path d="M5 12h14" /><circle cx="12" cy="7" r="1.3" fill="currentColor" stroke="none" /><circle cx="12" cy="17" r="1.3" fill="currentColor" stroke="none" /></>,
  trending: <><path d="M3 17l6-6 4 4 7-8" /><path d="M21 7v5h-5" /></>,
  eye:      <><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z" /><circle cx="12" cy="12" r="3" /></>,
  update:   <><path d="M12 3v10" /><path d="M8 9l4 4 4-4" /><path d="M5 17a7 7 0 0 0 14 0" /></>,
  shield:   <><path d="M12 3l7 3v5.5c0 4.3-3 7.2-7 8.5-4-1.3-7-4.2-7-8.5V6z" /><path d="M9 12l2 2 4-4" /></>,
  bankoff:  <><path d="M3 9l9-5 9 5" /><path d="M6 10v6M18 10v6M3 20h18" /><path d="M3 3l18 18" /></>,
  cardoff:  <><path d="M3 6h15a2 2 0 0 1 2 2v8M3 8v8a2 2 0 0 0 2 2h11" /><path d="M3 3l18 18" /></>,
  key:      <><circle cx="8" cy="8" r="4" /><path d="M11 11l8 8M16 16l2-2M18 18l2-2" /><path d="M3 3l18 18" /></>,
  insight:  <><path d="M9 18h6M10 21h4" /><path d="M12 3a6 6 0 0 0-4 10.5c.6.6 1 1.3 1 2.5h6c0-1.2.4-1.9 1-2.5A6 6 0 0 0 12 3z" /></>,
  android:  <><path d="M6 11a6 6 0 0 1 12 0v6H6z" /><path d="M6 17v1M18 17v1M9 7L7.5 5M15 7l1.5-2" /><circle cx="9.5" cy="11" r="0.6" fill="currentColor" stroke="none" /><circle cx="14.5" cy="11" r="0.6" fill="currentColor" stroke="none" /></>,
  apple:    <><path d="M16.5 13c0 3-2.2 6-4 6-.8 0-1.3-.4-2.5-.4S8.3 19 7.5 19c-1.8 0-4-3-4-6 0-2.6 1.8-4 3.5-4 1.1 0 1.8.5 2.5.5s1.4-.5 2.5-.5c1.7 0 3.5 1.4 3.5 4z" /><path d="M12 6.5c.2-1.8 1.7-3 3.4-3 .1 1.8-1.4 3.1-3.1 3.1" /></>,
  globe:    <><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c2.5 2.5 2.5 15 0 18M12 3c-2.5 2.5-2.5 15 0 18" /></>,
};

function StoreBadges() {
  const badges = [
    { ico: I.android, s: "Em breve no", m: "Google Play" },
    { ico: I.apple,   s: "Em breve na", m: "App Store" },
    { ico: I.globe,   s: "Em breve no", m: "Acesso web" },
  ];
  return badges.map((b, i) => (
    <span className="bal-store" key={i} aria-hidden="true">
      <Ico d={b.ico} />
      <span className="lbl"><span className="s">{b.s}</span><span className="m">{b.m}</span></span>
    </span>
  ));
}

function BalNav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 24);
    on(); window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <nav className="nav" data-scrolled={scrolled ? "1" : "0"}>
      <div className="wrap">
        <a className="nav-logo" href="#top" aria-label="orvio balance — início">
          <OrvioMark variant="balance" size={30} />
          <Wordmark /><span className="product">balance</span>
        </a>
        <div className="nav-links">
          <a href="#para-quem">Para quem</a>
          <a href="#recursos">Recursos</a>
          <a href="#planos">Free &amp; Plus</a>
          <a href="#privacidade">Privacidade</a>
          <a href="#plataformas">Plataformas</a>
        </div>
        <a className="nav-back" href="/">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.7} strokeLinecap="round" strokeLinejoin="round"><path d="M15 6l-6 6 6 6" /></svg>
          orvio
        </a>
      </div>
    </nav>
  );
}

function BalHero() {
  const bars = [38, 52, 44, 67, 58, 80, 72];
  return (
    <header className="bal-hero" id="top">
      <div className="bg-field">
        <div className="blob coral" style={{ width: 520, height: 520, top: "8%", right: "2%", opacity: "calc(var(--glow) * 0.8)" }} />
        <div className="blob petrol" style={{ width: 700, height: 700, top: "-16%", left: "-14%" }} />
        <div className="grid-mask" />
      </div>
      <div className="wrap bal-hero-grid">
        <div className="bal-hero-text">
          <BReveal className="bal-eyebrow eyebrow" d="1"><span className="pulse" />Primeiro em órbita · orvio</BReveal>
          <BReveal as="h1" className="bal-hero-name" d="2">
            <span className="o">orvio</span><span className="b">balance</span>
          </BReveal>
          <BReveal as="p" className="bal-tagline" d="3">Suas finanças, com clareza.</BReveal>
          <BReveal as="p" className="bal-sub" d="4">
            Receitas, despesas, contas e cartões num só lugar. Tudo o que você precisa
            para se organizar — <b style={{ color: "var(--fg)", fontWeight: 500 }}>de graça</b>. Recursos avançados com
            compra única, sem assinatura.
          </BReveal>
          <BReveal className="bal-cta-row" d="5">
            <StoreBadges />
          </BReveal>
        </div>

        <BReveal className="bal-hero-stage" d="3">
          <div className="rings" aria-hidden="true"><span /><span /><span /></div>
          <div className="bal-mark-ghost"><OrvioMark variant="balance" size={300} /></div>
          <div className="fin-card">
            <div className="fin-card-top">
              <span className="lab">Saldo geral</span>
              <span className="fin-period">Junho</span>
            </div>
            <div className="fin-balance"><span className="cur">R$</span>4.286,50</div>
            <div className="fin-delta">▲ +R$ 612 este mês</div>
            <div className="fin-bars">
              {bars.map((h, i) => <div key={i} className={"bar" + (i >= 4 ? " on" : "")} style={{ height: h + "%" }} />)}
            </div>
            <div className="fin-rows">
              <div className="fin-row">
                <span className="ico"><Ico d={I.wallet} /></span>
                <span className="nm"><span className="t">Salário</span><span className="c">Receita · Conta Nubank</span></span>
                <span className="val pos">+3.800,00</span>
              </div>
              <div className="fin-row">
                <span className="ico"><Ico d={I.cart} /></span>
                <span className="nm"><span className="t">Mercado</span><span className="c">Cartão · 1/3</span></span>
                <span className="val neg">−248,90</span>
              </div>
              <div className="fin-row">
                <span className="ico"><Ico d={I.repeat} /></span>
                <span className="nm"><span className="t">Assinatura streaming</span><span className="c">Recorrente · todo dia 15</span></span>
                <span className="val neg">−39,90</span>
              </div>
            </div>
            <div className="fin-insight">
              <Ico d={I.insight} />
              <span><b>Insight:</b> seus gastos com cartão caíram 12% vs. o mês passado.</span>
            </div>
          </div>
        </BReveal>
      </div>
    </header>
  );
}

function BalPurpose() {
  const aud = [
    { ico: I.user,   t: "Quem ganha e quer ver pra onde vai", d: "Renda fixa ou variável — o saldo sempre claro, sem planilha." },
    { ico: I.card,   t: "Quem vive de cartão e parcela", d: "Faturas, parcelas e projeções sob controle, mês a mês." },
    { ico: I.bank,   t: "Quem tem mais de uma conta", d: "Transferências e saldos somados numa visão única." },
    { ico: I.lock,   t: "Quem foge de assinatura", d: "O essencial é grátis. O avançado, compra única." },
  ];
  return (
    <section className="band bal-purpose" id="para-quem">
      <div className="wrap">
        <div className="section-head">
          <BReveal className="eyebrow" d="1">O propósito</BReveal>
          <BReveal as="h2" d="1">Dinheiro organizado<br />não precisa ser <span className="accent">complicado</span>.</BReveal>
        </div>
        <div className="purpose-body">
          <BReveal as="p" d="2">
            O <b>orvio balance</b> existe para dar clareza ao seu dinheiro. Você lança o que entra
            e o que sai, acompanha contas e cartões, e enxerga o saldo real — sem fórmulas,
            sem ruído, sem precisar virar especialista em finanças.
          </BReveal>
          <BReveal as="p" d="3">
            É para <b>qualquer pessoa que tenha uma renda e queira organizar a vida financeira</b>.
            Do primeiro salário ao orçamento da casa: começa de graça e
            cresce com você quando precisar de mais.
          </BReveal>
        </div>
        <BReveal className="audience" d="2">
          {aud.map((a, i) => (
            <div className="aud" key={i}>
              <Ico d={a.ico} />
              <h4>{a.t}</h4>
              <p>{a.d}</p>
            </div>
          ))}
        </BReveal>
      </div>
    </section>
  );
}

const FREE_FEATURES = [
  { ico: I.arrows,  t: "Receitas e despesas", d: "Lançamento manual rápido do que entra e do que sai." },
  { ico: I.bank,    t: "Conta bancária", d: "Cadastre sua conta e acompanhe o saldo em tempo real." },
  { ico: I.card,    t: "Cartão de crédito", d: "Controle de fatura e limite, com lançamentos vinculados." },
  { ico: I.repeat,  t: "Transações recorrentes", d: "Motor master + override: edite uma ocorrência sem mexer nas outras." },
  { ico: I.list,    t: "Extrato com filtros", d: "Histórico completo, filtrável por conta, categoria e período." },
  { ico: I.tag,     t: "Categorias personalizáveis", d: "Organize do seu jeito — salvas na sua conta." },
  { ico: I.bell,    t: "Notificações locais", d: "Lembretes de contas a vencer e faturas próximas." },
  { ico: I.theme,   t: "Tema claro e escuro", d: "A interface se adapta ao seu gosto e à hora do dia." },
  { ico: I.csv,     t: "Exportação CSV", d: "Leve seus dados para a planilha quando quiser." },
  { ico: I.tour,    t: "Tour guiado", d: "Onboarding tela a tela para começar sem dúvidas." },
];

function BalFeatures() {
  return (
    <section className="band" id="recursos">
      <div className="wrap">
        <div className="section-head">
          <BReveal className="eyebrow" d="1">Recursos</BReveal>
          <BReveal as="h2" d="1">Tudo o que você precisa<br />para começar.</BReveal>
          <BReveal className="feat-banner" d="2"><span>✦</span> Grátis, sem pegadinha</BReveal>
        </div>
        <div className="feat-grid">
          {FREE_FEATURES.map((f, i) => (
            <BReveal className="feat" key={i} d={String((i % 3) + 1)}>
              <Ico d={f.ico} cls="feat-ico" />
              <h3>{f.t}</h3>
              <p>{f.d}</p>
            </BReveal>
          ))}
          <a className="feat feat-cta" href="#planos">
            <OrvioMark variant="balance" size={30} />
            <h3>Precisa de mais?</h3>
            <p>Contas e cartões ilimitados, dashboard e insights — tudo no Plus, com compra única.</p>
            <span className="feat-cta-link">Ver Free &amp; Plus →</span>
          </a>
        </div>
      </div>
    </section>
  );
}

const TICK = <svg viewBox="0 0 24 24" className="tick"><g {...s}><path d="M5 12.5l4.5 4.5L19 7" /></g></svg>;
const DASH = <span className="dash">—</span>;

const CMP = [
  { group: "Contas & cartões" },
  { name: "Contas bancárias", free: "1 conta", plus: "Ilimitadas" },
  { name: "Cartões de crédito", free: "1 cartão", plus: "Ilimitados" },
  { name: "Transferências entre contas", sub: "requer mais de uma conta", free: false, plus: true },
  { group: "Lançamentos" },
  { name: "Receitas e despesas", free: true, plus: true },
  { name: "Transações recorrentes", sub: "edite uma sem afetar as outras", free: true, plus: true },
  { name: "Lançamentos por voz", sub: "fale o gasto, o app preenche", free: false, plus: true },
  { name: "Categorias personalizáveis", free: true, plus: true },
  { group: "Visão & análise" },
  { name: "Extrato completo com filtros", free: true, plus: true },
  { name: "Dashboard completo", sub: "gráficos mensais, anuais e por categoria", free: false, plus: true },
  { name: "Insights inteligentes", sub: "10 checks de saúde financeira", free: false, plus: true },
  { group: "Experiência" },
  { name: "Tema claro/escuro · CSV · notificações", free: true, plus: true },
  { name: "Sem anúncios", free: false, plus: true },
];

function cell(v) {
  if (v === true) return TICK;
  if (v === false) return DASH;
  return <span className="mono">{v}</span>;
}

function BalPlans() {
  return (
    <section className="band" id="planos">
      <div className="wrap">
        <div className="cmp-intro">
          <div className="section-head" style={{ marginBottom: 0 }}>
            <BReveal className="eyebrow" d="1">Free &amp; Plus</BReveal>
            <BReveal as="h2" d="1">Comece de graça.<br />Evolua quando quiser.</BReveal>
          </div>
          <BReveal className="cmp-price" d="2">
            <div className="k">Plus</div>
            <div className="v">Compra única — <b>sem assinatura</b></div>
            <div className="v" style={{ color: "var(--fg-3)", fontSize: 14, marginTop: 4 }}>Valor em breve</div>
          </BReveal>
        </div>

        <BReveal className="cmp-table" d="2">
          <div className="cmp-row cmp-head">
            <div className="cmp-cell feat-name">Recurso</div>
            <div className="cmp-cell col"><span className="tier">Free</span><span className="meta">Sempre grátis</span></div>
            <div className="cmp-cell col plus"><span className="tier">Plus</span><span className="meta">Compra única</span></div>
          </div>
          {CMP.map((r, i) => r.group ? (
            <div className="cmp-row" key={i}><div className="cmp-group">{r.group}</div></div>
          ) : (
            <div className="cmp-row" key={i}>
              <div className="cmp-cell feat-name">{r.name}{r.sub && <span className="sub">{r.sub}</span>}</div>
              <div className="cmp-cell col">{cell(r.free)}</div>
              <div className="cmp-cell col plus">{cell(r.plus)}</div>
            </div>
          ))}
        </BReveal>
      </div>
    </section>
  );
}

const TECH = [
  { ico: I.layers,   t: "Recorrências flexíveis", d: "Edite ou apague uma parcela isolada sem mexer nas demais da série." },
  { ico: I.toggle,   t: "Dois modos de cartão", d: <React.Fragment>Controle <b style={{color:"var(--fg)",fontWeight:500}}>por fatura</b> ou <b style={{color:"var(--fg)",fontWeight:500}}>por compra</b> — configurável em cada cartão.</React.Fragment> },
  { ico: I.divide,   t: "Parcelamento de compras", d: "Divida uma compra em várias parcelas — cada uma cai na fatura do mês certo, sozinha." },
  { ico: I.trending, t: "Projeção de faturas futuras", d: "Veja de 1 a 12 meses à frente quanto cada cartão vai pesar." },
  { ico: I.eye,      t: "Cartão no saldo geral", d: "Escolha se os gastos do cartão entram no saldo geral — ou não." },
  { ico: I.update,   t: "Atualizações automáticas", d: "O app se atualiza sozinho pela Play Store — sem precisar abrir a loja." },
  { ico: I.lock,     t: "Pagamento seguro", d: "Google Play Billing no Android; Stripe Checkout na web." },
];

function BalTech() {
  return (
    <section className="band">
      <div className="bg-field">
        <div className="blob graph" style={{ width: 560, height: 560, top: "12%", left: "-14%", opacity: "calc(var(--glow) * 0.6)" }} />
      </div>
      <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
        <div className="section-head">
          <BReveal className="eyebrow" d="1">Por baixo do capô</BReveal>
          <BReveal as="h2" d="1">Engenharia que você sente,<br />mesmo sem ver.</BReveal>
          <BReveal as="p" d="2">Detalhes técnicos que tornam o dia a dia mais preciso — do motor de recorrência ao controle de cartões.</BReveal>
        </div>
        <div className="tech-grid">
          {TECH.map((t, i) => (
            <BReveal className="tech" key={i} d={String((i % 2) + 1)}>
              <span className="tech-ico"><Ico d={t.ico} /></span>
              <div>
                <h3>{t.t}</h3>
                <p>{t.d}</p>
              </div>
            </BReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function BalPlatforms() {
  const plat = [
    { ico: I.android, t: "Android nativo", d: "App nativo, leve e rápido, publicado na Google Play." },
    { ico: I.apple,   t: "iOS / iPhone", d: "App nativo para iPhone. Em breve." },
    { ico: I.globe,   t: "Acesso web", d: "Sua conta também no navegador. Em breve." },
    { ico: I.update,  t: "Sempre atualizado", d: "Updates automáticos, sem fricção e sem abrir a loja." },
  ];
  return (
    <section className="band" id="plataformas">
      <div className="wrap">
        <div className="section-head">
          <BReveal className="eyebrow" d="1">Onde rodar</BReveal>
          <BReveal as="h2" d="1">No bolso e no navegador.</BReveal>
        </div>
        <div className="plat-grid">
          {plat.map((p, i) => (
            <BReveal className="plat" key={i} d={String((i % 4) + 1)}>
              <Ico d={p.ico} />
              <h4>{p.t}</h4>
              <p>{p.d}</p>
            </BReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function BalPrivacy() {
  const pts = [
    { ico: I.bankoff, t: "Sem login do banco", d: "Não conectamos nem acessamos suas contas." },
    { ico: I.cardoff, t: "Sem número de cartão", d: "Você lança os gastos; o número fica com você." },
    { ico: I.key,     t: "Sem senhas ou tokens", d: "Nenhuma credencial bancária passa pelo app." },
  ];
  return (
    <section className="band bal-privacy" id="privacidade">
      <div className="wrap">
        <BReveal className="priv-card" d="1">
          <div className="priv-left">
            <span className="priv-shield"><Ico d={I.shield} /></span>
            <BReveal className="eyebrow" as="span" d="1" style={{ display: "block", marginBottom: 16 }}>Privacidade</BReveal>
            <h2>Não pedimos os dados<br />do seu <span className="accent">banco</span>.</h2>
            <p className="lead">
              Nada de conexão bancária, número de cartão ou senha. Você registra
              manualmente o que quiser — e dados sensíveis assim simplesmente não
              passam pelo orvio balance. Seu dinheiro, sob seu controle.
            </p>
          </div>
          <div className="priv-list">
            {pts.map((p, i) => (
              <div className="priv-item" key={i}>
                <Ico d={p.ico} />
                <div><div className="t">{p.t}</div><div className="d">{p.d}</div></div>
              </div>
            ))}
          </div>
        </BReveal>
      </div>
    </section>
  );
}

function BalClosing() {
  return (
    <section className="bal-closing">
      <div className="bg-field">
        <div className="blob coral" style={{ width: 620, height: 620, top: "-20%", left: "30%", opacity: "calc(var(--glow) * 0.8)" }} />
      </div>
      <div className="orbits" aria-hidden="true">
        <svg viewBox="-260 -260 520 520">
          <g fill="none" stroke="currentColor" style={{ color: "var(--ink-4)" }}>
            <circle r="90" strokeWidth="1" opacity="0.5" />
            <circle r="150" strokeWidth="1" opacity="0.36" />
            <circle r="210" strokeWidth="1" opacity="0.24" />
            <circle r="255" strokeWidth="1" opacity="0.14" />
          </g>
          <path d="M 210 0 A 210 210 0 0 1 -148 148" fill="none" stroke="url(#balance-stroke)" strokeWidth="2.5" strokeLinecap="round" opacity="0.9" />
          <circle cx="210" cy="0" r="4.5" fill="#B6F0DD" />
        </svg>
      </div>
      <div className="wrap">
        <BReveal className="eyebrow" d="1">Vem aí</BReveal>
        <BReveal as="h2" d="2">O <span className="accent">balance</span> está chegando.<br />Em breve no ar.</BReveal>
        <BReveal as="p" d="3">
          O primeiro produto em órbita da Orvio. Ainda não liberamos o acesso ao público —
          mas falta pouco. Fique de olho.
        </BReveal>
        <BReveal className="bal-cta-row" d="4">
          <StoreBadges />
        </BReveal>
      </div>
    </section>
  );
}

function BalFooter() {
  const Social = ({ label, href = "#", d }) => (
    <a href={href} aria-label={label} target={href !== "#" ? "_blank" : undefined} rel={href !== "#" ? "noopener noreferrer" : undefined}>
      <svg viewBox="0 0 24 24" width="16" height="16"><g {...s}>{d}</g></svg>
    </a>
  );
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="nav-logo">
              <OrvioMark variant="balance" size={32} /><Wordmark /><span className="product">balance</span>
            </div>
            <p>Suas finanças, com clareza. O primeiro produto do ecossistema Orvio.</p>
          </div>
          <div className="footer-cols">
            <div className="footer-col">
              <h4>Produto</h4>
              <a href="#para-quem">Para quem</a>
              <a href="#recursos">Recursos</a>
              <a href="#planos">Free &amp; Plus</a>
              <a href="#plataformas">Plataformas</a>
            </div>
            <div className="footer-col">
              <h4>Orvio</h4>
              <a href="/">Ecossistema</a>
              <a href="/#arquitetura">Arquitetura</a>
              <a href="/contato">Contato</a>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span className="meta">© Orvio · 2026 — Rio Grande do Sul · Brasil</span>
          <div className="footer-social">
            <Social label="Instagram" href="https://www.instagram.com/orvioapp" d={<><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17" cy="7" r="0.6" fill="currentColor" stroke="none" /></>} />
            <Social label="X" d={<path d="M5 5l14 14M19 5L5 19" />} />
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { BalNav, BalHero, BalPurpose, BalFeatures, BalPlans, BalTech, BalPlatforms, BalPrivacy, BalClosing, BalFooter });
