/* global React, IA2D */
// variant-b.jsx — Editorial Document Premium
// Light/cream paper feel, sober editorial layout (think Bloomberg / Stripe docs),
// dark feature blocks (hero + final CTA + investimento) for contrast.
// Strong typographic hierarchy, generous whitespace, mono labels.

const VB = ({ tweak }) => {
  const D = window.IA2D;
  const accent = tweak?.accent || "#2dd4bf";
  const cta = tweak?.cta || "#f4b740";
  const density = tweak?.density || "regular";
  const fontDisplay = tweak?.fontDisplay || '"Space Grotesk", Inter, sans-serif';
  const fontBody = tweak?.fontBody || '"Inter", system-ui, sans-serif';

  const pad = density === "compact" ? "72px" : density === "comfy" ? "144px" : "108px";

  return (
    <div
      className="vb-root"
      style={{
        ["--accent"]: accent,
        ["--cta"]: cta,
        ["--pad"]: pad,
        ["--font-display"]: fontDisplay,
        ["--font-body"]: fontBody
      }}>
      
      <VBStyles />

      {/* === DOCUMENT HEADER (printable) === */}
      <header className="vb-doc-head">
        <div className="vb-doc-head-l">
          <div className="vb-doc-mark" aria-hidden="true">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAOsUlEQVR42u1ae3Cc1XX/nXPv9+1L8ko2so0ThzEQDLbxxMj4hYQs4vAoTWNDdttk0pmQKTgMTKdOMp1MZpKVAiWlCQTaTgikpswknQm7QCAYCAi8UnD91BpjkGyDAwTGPPyStJJWu/vde0//kNaxXVE/JBtCff7Z2W927/3OPa/f+d0DnJEzckbOyBn5EBEhpFIMEfrEK5oS4cMfHf39dMlpPelLN7VNEkJcXnrjndzKlQFECETyyVF4xHUXbdgQFin8kyj+a2eDWg57O1wpaOlcctWTp1vpU+pWKWBYGRm63auduIpEpjFxhJS+BD4/tnhrxxIQyel0bzql1iWShds3TEFfoRua484GAIGFXKDiMd8NFB7esvCqv4EIg8j9uVuYAEAKhakAqmAME8AgEIiUGOucuOmV4/kkuLQAQCnEfwRhL/k+QWAgcBAx7PustMoBQCKT4T87hRPptGrKZnUinVYYid2UCL88r7nX+t4PoBRULOKx77FXEw+ZgYE9GupeAJRJdEklDCrrYHidj2EMf1iWrTwf+Zy/uf06ErlVnDmLteoUN/TPWxZe+9qh36VSjNZWd9zrn6TosR/Z8MssbMs2kOBCHQ69vu6FZ18EkTtc6U6ixwA8Vt/Z6W2ePz8Y5VBc/f33e2bB9Ga40gwdCnXl5vzFupH1abzinMZkWQAN616poULfg6LVcvY1nDMQZ7LWlv9247Jle+o7O72q/n7ZV1fHdfv2uaVL212ma7aOFM+Vqv5+Gaiuptz8+cGi3O/OD3z8UhQtgscQG8BZ+2QwMHRT94LEB4cf7keicCol3NpK7vLnNvxcx+MrS737rZAAJNC1cVXO96ydvv++KzPJjD3WWvWd93uOpv1e18YXBb19VlgAFujJtaq8/+DqV+Ys/7vxKl00lrht7Og8G8Xiq1Aq7mxAYGGBiDAceUqJKT0P5bY7cRYQcswADARCoklAEBGj4HE9hf0mFwRWSBRYIBCHkBbnzIHwhKmztnx64YHxiOeTi+GW4ZiSwNTCSTWJ4UNHRyCIKDEGuqZmmS0NLfNiEQgJnAlAER/iynDWQEiG64SvYPr6BBB1WN0gWMtEFBIUowAOAC0EEUogQ5mWLhk1yZ1KC9d3dkajPeWtrPRMUx4KwKKF4KCIwGKdczd7E6NrTbE0y1nzM4qGptmhwWcDlH6sRecBwHJgSelG+HyvkECcBcixMAxFfO2CYGfhogvn7cZ/BeBWd0TqOgk31yebmVMi3EpUaOzYdBuEfqUiUc/ZMkix4qiP8kD+uxuvuGL1yD/eXLi+7UlYucXT+ttbFly166gVt8976ZlaPaHqNlsagjgDCmmPmCBD5Tt20wWlyg/n7H58vmI30QyWdnQRvXN66/CIpS9r37SCnPuOODMdGn3GlB7atGzZXQkR1dWVUbO7Yfd8ZmKLMe57OhKd3ht6d//glkGOxWIOs4Dy21W0+5prgvqXn13p2K4UyGQQ3rFB+Z5X5q34NYhk3qtPnG9D8h8OrhGa2DF6EAT3dp+X+OGJZPBxBR4N27fXHty5c7A7mSxXamdC0ipDSbt4U7bFOvd9P+aftW5uY88xPAiQP73/orfTkcFBb6Oqjc0NevsETAJNzLUx2PzAyu5zvvxAZZ/TAjwS6bTKJJN23dy5PRWYmUkeubm1JqSrqlHqz/+ofv0zL5GGFgvlCCUoR0KOxLiQkUBInAPBJ620sC0M5tW1HPPnBj15Q0xKSFicM26oxM6Ym5sk+2AGzRYynDLHprAIJTIZziQSLtUC6p6doaOVySSTtimb1R1Ll1oQSSaZtIeUzlSWQZmUYh2vXkkew4mDC0rQkRBEAoAA0QRvJHMLHEACUYCQIDjYa4lJC0aAl4hCYEDAlPd39kVwEfqHwRCNwaWPhZNHAxFtbfHcui/0oxUOAEEEIJJLN7VNIlENEgRMHpeF3A1UHV0e9PX+HCy/8T3FQ6XBSRYuIOIiAAjbEIdCQ8KyQlVHbjTFggGBQUJCYrg67NlCcf2OGV2NQIscTxzTsZRdlm6LGz/+bbAsBiFPzj6c/dKS9BHMI5EseS57I+vQN5wrnyOa9lg7dN/mz1/9YEJEZQA5unzM2/DUDf7EmgcHew8seXXhX2041ovO2fHo07qu5hrTm4fAgSIexFlxzqzYcU7iieMtUfr/wsnL0p1xq9yToeraRlMuAIoARdddvmbDjN8T3dmUzeqO5mbT8Gz7P+oJtXfachFsNaDV2SoaWb3whbZQhui+UfdwjiACthIfaSkVgD+FSgJABtibqKMOLLVq2+NftT35HwlwnRDCMPYPtli8fefMrzxRaT5OOksn0qIySbLNmS2r/Jqau0v9B8sgUYAINCtHUjKKP7f+mgW7mtZkp1qtXyVP11pbdiCnhMiSz+ycHRRnbuAQdwaCsLblmAuRBSJ5i8J3dbz6ptL+viu3NV7bNlqiGy2EZr2anirhSHW09923cvNXBh/aVp6IhWclhjOdsFzqTGABKCJSAkCsERWNhJXCeQB22WjVeWSDSS4ogxgsRABBSxAIFFd7NfFHrCnDUwTSURAcnFgoCcMWhuDEqOOpBBCh+twDOjcn+T6A9ytNR67+JoPW1rEhre7MiOVJ7SFiBZFAhBgkIGbYIDCwGK6l2vYgcAGYFeAIICI4ccSOtVJmYPC3xNRlxITBAClhIQRCciWHvblwzjtejJSbj6C+Mx0v1dBnA6X352aseAtYOfbmYVbXsIW1X/WgKRVu9KJV8aA4CIDAWosNinve8yZvhQitQ8vOhrVXr/GrqlaU+g5aYLhw+DU1yuR7fr1x6RVfGW2P+ZvbdpDvryaPXCWGE+n0KPEF7EUddVCzufiV9D+Uot7fO2emK3EDF735aNpVTfnOrrqG/uPtpEZVuLWVHFIpfv4vZ+5oWrP1yzDB3WDMFBERQkiFwlMnB3sX7KYLXkQqRfTF+C1Bf3+Mff9K8hScC2D6B9Y4P3zLsCvm9LlvvOEyiYSrvJQztqRE4HmxvZnkcntEwhpFLu7O3MK1E35qi0WQIwBSoyZNuCk48F4ckvoqWlqOi/08rjp8/tNPh6bJ5AscGUts5ikVWS3OvuZP8RfXvPZaMZNMWohQ4/pcs7HBOY7w5qbGxe1HJ5z6zs4olfo+B88FgKzk6ujXTb7vX0vFwu/8cMgqT5vAOTauWOXYKHB4gMlYDvH5YNwFzTFnjIChhMSJgkCTEkX1Oz91/dbjKU36OLui0m7glUqINzy1LhqZNOWBoXc/uKstmfxmUzarO4jMi8Da0Q6sgnO51HuzioV/4pwBR3w4E8CbVLtKI75K4AAIPBZ4qgojVAKEBRTWMD29cOVASBMPMytgOHHkeSLWTQOwFcjQydXhw917hIxLtYDQArS3t3NHc8Mvmp7Z0BCeWLdyyZrsuo7m5l81ZbN68r59sreujibv2yeZZPKQ+1bgpTPB2VrFYAb7VtvB3pe09h0XxFglnpBVLHpI1Mi1C4uQJudgEeTdDGJ8C54KibUCBYaIgCEwhm3Z7T18n7E3D0TSCghaAaRSgAjpzTu+ZQb6l3jR6n9f8sK6DR3NDX9oymZ1R3u7S7S0VCDlUctomMEBKeSL3995zfXvnUh2nb3rN706XvVjm++HOCsgkD4rroKe/NPT3q7b+vqwNx2zWzpxIr611SUyGX5h4awDTplvkNbV7Pg/m7LZqo7mZoPWVpchsofRq4dpLATrEPFDfkLSqr7zfq/yOdpWTZLVTdmUbpKs7pq54ie2dzAFxfuhmMjTRds7+Gh44pSvdzQ3m1NOAFTQWMNz637gVcdby/merZZlFykKA67DJ7m/Y+nSUiKT4TfO7eFz36h1b30q/kMA3ysY+cysD/Lv7q2rIwDoaG42czt/26A9fasVmcQed7IK35W7sHn/0eVm1ptrphLReUYH+3d9evmukUudY7aF48ZLN7W3h0xRdesJVTNELIQEHPZRyvc+sbF56fLD/7Lgxbb7OOZ/0w4MzNxy+bWvVZ5f0vnUFRTynqKwF3Y2AEdDMH35l8pxb1n39Kt6DkNbR2bhSgNzAkzm2AgAIhl6eqPvc0C2VHJiytaRYwwVRMfCX1r4/Nq7AfeQV+0Xg1L5ElG4DsSOFN9xScdTP3NkLTwVJeDfiDls+gcCENgNFa2aVD3Pyw/eCKI7E5JWGcAeus3IZBiJLjkZnnosChMA8appOgo0DcYwACIiAgnMUMH6k+Kr7FBhlQkM9IQqOHIQE0DV1lwPE1wvLgBHQrDlImxhyJEmTyAQAsRYC8i84eTbJUdd7diTfemxKCwAYGtj76li/gAzTXGm7CDCAnE6GtFBX+/D5MnjEJSCgYIjlMOORVxQLhE7B8CYoDRNCHdwyJ9sg7IBgyGwpNgX5q5hdDmbMhgf0WNx5xFQcrAxu/mnKhz6F5SJBQ6qKsrlQv9zIeGvdVx27Axa/3Lbfig8pkNR7UwArgr7dmDwLVXlrQYwTLp/3K5LF6/975sU0w0OEiEPzwV16vbNFyzKz0qn/e5ksnxpe9ti5fPXhFyt81SOJkR/sfmzC/vrczmdmz8/mLft2S+yx7c6CaZA0cu+p27fdP6Vr4/3den4zniIUBOgOojM4ezlovXZq6H4EQr7MREDCnkI+vPtMmni8ty59fmRC3T3v24TTsGEz7hOAIBIOohMIp1WSKU4k0y6L2zbFhORe0ipmO3vL5vBgjU9fWUdr14qfflbQCQJZCiRTqtDVI0IQ1J8KsaZaNzXG2EpK5ZatL79YglMTlg0CBAWEhKrYmEypaH23KVXf/4ImuYEQMRHauFDmbtileH+FBTy8iAqEw8zRIdYagIR6/7RjgynUE7d9Exrq0ulUryh/rI/wvMe0fEJLBDAiSOltRAT/PAvASAxe/ZpG4E89aOHRGjYvr2mXOp9CM5eCxIlig4K47bOec33nO7RQzpNewgIqN+2/hIEwVkI887cnMa3MY7DKh8vGW0++iMaH9anx49GeuPhiznKdJ0c8D8jZ+SMnJH/d/I/pY4Hti7HMwwAAAAASUVORK5CYII=" alt="" />
          </div>
          <div>
            <div className="vb-doc-brand">Canal Veritas</div>
            <div className="vb-doc-cnpj">CNPJ {D.meta.cnpj}</div>
          </div>
        </div>
        <div className="vb-doc-head-r">
          <span className="vb-doc-id">PROPOSTA IA2D / PGE-MS
</span>
        </div>
      </header>

      {/* === HERO (dark feature block) === */}
      <section className="vb-hero">
        <div className="vb-hero-bg" aria-hidden="true">
          <NeuralMeshB />
        </div>
        <div className="vb-hero-content">
          <div className="vb-hero-flag">
            <span className="vb-hero-dot" />
            {D.meta.flag}
          </div>
          <h1 className="vb-hero-h">
            <span className="vb-hero-id">IA²D</span>
            <span className="vb-hero-subname">{D.meta.subtitle}</span>
          </h1>
          <p className="vb-hero-lead">
            Proposta comercial para procuradores em cenário de{" "}
            <em>compra direta</em> com posterior <em>reembolso institucional</em>.
            20h certificadas, 12 meses de acesso, 100% online.
          </p>
          <div className="vb-hero-stats">
            {D.highlights.map((h, i) => <div key={i} className="vb-hero-stat">
                <div className="vb-stat-k">{h.k}</div>
                <div className="vb-stat-v">{h.v}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* === ABERTURA / TÍTULO DOCUMENTO === */}
      <div className="vb-opener">
        <div className="vb-opener-inner">
          <div className="vb-opener-eyebrow">Proposta comercial</div>
          <h2 className="vb-opener-h">
            Inteligência Artificial<br />
            <span className="vb-opener-em">Aplicada ao Direito.</span>
          </h2>
          <div className="vb-opener-meta">
            <div>
              <div className="vb-opener-mk">Destinatário</div>
              <div className="vb-opener-mv">Procuradores e servidores da PGE/MS </div>
            </div>
            <div>
              <div className="vb-opener-mk">Modalidade</div>
              <div className="vb-opener-mv">Compra direta · Reembolso institucional</div>
            </div>
            <div>
              <div className="vb-opener-mk">Página oficial</div>
              <div className="vb-opener-mv">{D.meta.site}</div>
            </div>
          </div>
        </div>
      </div>

      {/* === RESUMO === */}
      <SectionMarkB n="01" t="Resumo executivo" sub="Síntese da oferta" />
      <section className="vb-section">
        <div className="vb-summary">
          {D.summary.map(([k, v], i) =>
          <div key={i} className="vb-srow">
              <div className="vb-sk">{k}</div>
              <div className="vb-sv">{v}</div>
            </div>
          )}
        </div>
      </section>

      {/* === FINALIDADE === */}
      <SectionMarkB n="02" t="Finalidade desta proposta" sub="Escopo e abrangência" />
      <section className="vb-section">
        <div className="vb-twocol-prose">
          <div className="vb-prose">
            {D.finalidade.map((p, i) => <p key={i}>{p}</p>)}
          </div>
          <aside className="vb-aside">
            <div className="vb-aside-h">Importante</div>
            <p>{D.finalidadeNota}</p>
          </aside>
        </div>
      </section>

      {/* === PROGRAMA === */}
      <SectionMarkB n="03" t="Conteúdo programático" sub="Seis eixos · 20h certificadas" />
      <section id="programa" className="vb-section">
        <div className="vb-modules">
          {D.modules.map((m, i) =>
          <article key={i} className="vb-mod">
              <div className="vb-mod-h">
                <span className="vb-mod-n">{m.n}</span>
                <h3 className="vb-mod-t">{m.t}</h3>
              </div>
              <p className="vb-mod-d">{m.d}</p>
              <div className="vb-mod-tag">Eixo {m.n}</div>
            </article>
          )}
        </div>
      </section>

      {/* === INVESTIMENTO (DARK FEATURE) === */}
      <SectionMarkB n="04" t="Investimento" sub="Valor de referência" />
      <section className="vb-section">
        <div className="vb-invest-card">
          <div className="vb-invest-l">
            <div className="vb-invest-eyebrow">Investimento individual</div>
            <div className="vb-invest-price">
              <span className="vb-cur">R$</span>
              <span className="vb-amt">997</span>
              <span className="vb-cents">,00</span>
            </div>
            <div className="vb-invest-vista">à vista</div>
            <div className="vb-invest-rule" />
            <div className="vb-invest-parc">
              ou em até <strong>{D.meta.priceInstall}</strong>
            </div>
            <div className="vb-invest-fine">
              Conforme opções no checkout oficial.
            </div>
          </div>

          <div className="vb-invest-r">
            <div className="vb-pay-grid">
              <div>
                <div className="vb-pay-h">Pagamento</div>
                <p>Realizado diretamente pelo participante nas formas disponíveis no site de vendas.</p>
              </div>
              <div>
                <div className="vb-pay-h">Faturamento</div>
                <p>Comprovante, recibo ou nota fiscal conforme os dados informados pelo comprador.</p>
              </div>
            </div>
            <div className="vb-pay-note">
              Prevalecerão sempre o preço, condições e regras exibidos no
              checkout oficial no momento da conclusão da compra.
            </div>
            <a className="vb-cta vb-cta-on-dark" href="https://pay.hotmart.com/A105016825O?checkoutMode=10&bid=1778598644003">
              Acessar página de inscrição <span>→</span>
            </a>
          </div>
        </div>
      </section>

      {/* === REEMBOLSO === */}
      <SectionMarkB n="05" t="Reembolso pela instituição" sub="Procedimento individual" />
      <section className="vb-section">
        <div className="vb-twocol-prose">
          <div className="vb-prose">
            {D.reembolso.intro.map((p, i) => <p key={i}>{p}</p>)}
          </div>
          <div className="vb-docs">
            <div className="vb-docs-h">Documentos exigidos</div>
            <ol>
              {D.reembolso.docs.map((d, i) =>
              <li key={i}>
                  <span className="vb-docs-n">{String(i + 1).padStart(2, "0")}</span>
                  <span>{d}</span>
                </li>
              )}
            </ol>
          </div>
        </div>
      </section>

      {/* === SUPORTE === */}
      <SectionMarkB n="06" t="Suporte e certificação" sub="Pós-venda" />
      <section className="vb-section">
        <div className="vb-twocol">
          <div className="vb-spec">
            <div className="vb-spec-h">
              <span className="vb-spec-icon" aria-hidden="true">●</span>
              Suporte
            </div>
            <p>{D.suporte.s}</p>
          </div>
          <div className="vb-spec">
            <div className="vb-spec-h">
              <span className="vb-spec-icon" aria-hidden="true">◆</span>
              Certificação digital
            </div>
            <p>
              Emitido aos participantes que cumprirem os requisitos de conclusão,
              com aproveitamento mínimo de <strong>70% das aulas</strong> concluídas
              na plataforma.
            </p>
          </div>
        </div>
      </section>

      {/* === DOCENTE === */}
      <SectionMarkB n="07" t="Corpo docente" sub="Coordenação acadêmica" />
      <section className="vb-section">
        <div className="vb-prof">
          <div className="vb-prof-l">
            <div className="vb-prof-portrait" aria-hidden="true">
              <img className="vb-prof-photo" src="https://veritascursos.com.br/wp-content/uploads/2025/03/foto-bio-1.webp" alt="Prof. Miguel Câmara" />
              <div className="vb-prof-frame" />
              <div className="vb-prof-stamp">Professor titular</div>
            </div>
          </div>
          <div className="vb-prof-r">
            <h3 className="vb-prof-name">{D.docente.nome}</h3>
            <div className="vb-prof-role">{D.docente.cargo}</div>
            <p className="vb-prof-bio">{D.docente.bio}</p>
            <div className="vb-prof-stats">
              <div>
                <div className="vb-prof-stat-k">12+ anos</div>
                <div className="vb-prof-stat-v">advocacia & setor público</div>
              </div>
              <div>
                <div className="vb-prof-stat-k">2021</div>
                <div className="vb-prof-stat-v">pesquisa & aplicação de IA</div>
              </div>
              <div>
                <div className="vb-prof-stat-k">+15</div>
                <div className="vb-prof-stat-v">instituições atendidas</div>
              </div>
            </div>
            <div className="vb-prof-inst-h">Formações ministradas em</div>
            <div className="vb-inst-grid">
              {D.docente.instituicoes.map((x, i) =>
              <span key={i} className="vb-inst-chip">{x}</span>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* === FINAL CTA (DARK) === */}
      <section className="vb-final">
        <div className="vb-final-bg" aria-hidden="true">
          <NeuralMeshB />
        </div>
        <div className="vb-final-content">
          <div className="vb-final-eyebrow">Inscrições abertas</div>
          <h2 className="vb-final-h" style={{ fontWeight: "100", letterSpacing: "-1.5px", margin: "24px 0px", padding: "0px", textAlign: "left", height: "120px", fontSize: "50px" }}>
            Pronto para incorporar a IA<br />
            <span className="vb-final-em" style={{ textAlign: "left" }}>à sua rotina jurídica?</span>
          </h2>
          <p>
            O IA²D é uma formação prática, atualizada e voltada à aplicação
            responsável da inteligência artificial no Direito. Cada participante
            realiza a própria inscrição diretamente no site.
          </p>
          <div className="vb-final-cta-row">
            <a className="vb-cta vb-cta-on-dark vb-cta-lg" href="https://pay.hotmart.com/A105016825O?checkoutMode=10&bid=1778598644003">
              Inscrever-se agora <span>→</span>
            </a>
            <span className="vb-final-url">{D.meta.site}</span>
          </div>
        </div>
      </section>

      {/* === FOOTER === */}
      <footer className="vb-foot">
        <div className="vb-foot-inner">
          <div className="vb-foot-l">
            <img src="data:image/png;base64,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" alt="" style={{ width: 22, height: 22, objectFit: "contain" }} />
            <div>
              <strong>Veritas Cursos e Consultoria LTDA</strong>
              <div>CNPJ {D.meta.cnpj}</div>
            </div>
          </div>
          <div className="vb-foot-r">
            <a href="https://canalveritas.com.br">canalveritas.com.br</a>
            <a href="https://pay.hotmart.com/A105016825O?checkoutMode=10&bid=1778598644003">{D.meta.site}</a>
          </div>
        </div>
      </footer>
    </div>);

};

const SectionMarkB = ({ n, t, sub }) =>
<div className="vb-mark">
    <div className="vb-mark-inner">
      <div className="vb-mark-l">
        <div className="vb-mark-n">§ {n}</div>
        <div className="vb-mark-meta">{sub}</div>
      </div>
      <h2 className="vb-mark-t">{t}</h2>
      <div className="vb-mark-line" />
    </div>
  </div>;


const BrandIconB = () =>
<svg viewBox="0 0 64 64" width="22" height="22" aria-hidden="true">
    <defs>
      <linearGradient id="brandGB" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor="var(--accent)" />
        <stop offset="100%" stopColor="oklch(60% 0.10 195)" />
      </linearGradient>
    </defs>
    <g fill="none" stroke="url(#brandGB)" strokeWidth="2.5" strokeLinecap="round">
      <circle cx="14" cy="22" r="3" fill="url(#brandGB)" />
      <circle cx="14" cy="42" r="3" fill="url(#brandGB)" />
      <circle cx="32" cy="14" r="3" fill="url(#brandGB)" />
      <circle cx="32" cy="32" r="3.5" fill="url(#brandGB)" />
      <circle cx="32" cy="50" r="3" fill="url(#brandGB)" />
      <circle cx="50" cy="22" r="3" fill="url(#brandGB)" />
      <circle cx="50" cy="42" r="3" fill="url(#brandGB)" />
      <path d="M14 22 L32 14 M14 22 L32 32 M14 42 L32 32 M14 42 L32 50 M32 14 L50 22 M32 32 L50 22 M32 32 L50 42 M32 50 L50 42" />
    </g>
  </svg>;


const NeuralMeshB = () => {
  const cols = 7,rows = 5;
  const nodes = [];
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      if ((r * 3 + c) % 9 === 4) continue;
      const jx = (r * 13 + c * 7) % 11 - 5;
      const jy = (r * 5 + c * 11) % 13 - 6;
      nodes.push({
        x: 60 + c * 80 + jx,
        y: 50 + r * 80 + jy,
        r: 1.5 + r * c % 4 * 0.6,
        bright: (r + c * 3) % 5 === 0
      });
    }
  }
  const lines = [];
  for (let i = 0; i < nodes.length; i++) {
    let nearest = [];
    for (let j = 0; j < nodes.length; j++) {
      if (i === j) continue;
      const dx = nodes[i].x - nodes[j].x;
      const dy = nodes[i].y - nodes[j].y;
      const d = Math.sqrt(dx * dx + dy * dy);
      if (d < 110) nearest.push({ j, d });
    }
    nearest.sort((a, b) => a.d - b.d).slice(0, 2).forEach(({ j }) => {
      if (j > i) lines.push([i, j]);
    });
  }

  return (
    <svg className="vb-mesh" viewBox="0 0 700 480" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="lineGB" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.45" />
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0.05" />
        </linearGradient>
      </defs>
      {lines.map(([a, b], i) =>
      <line
        key={i}
        x1={nodes[a].x} y1={nodes[a].y}
        x2={nodes[b].x} y2={nodes[b].y}
        stroke="url(#lineGB)"
        strokeWidth="0.7" />

      )}
      {nodes.map((n, i) =>
      <circle
        key={i}
        cx={n.x} cy={n.y} r={n.r}
        fill={n.bright ? "var(--accent)" : "oklch(70% 0.10 195)"}
        opacity={n.bright ? 0.95 : 0.55} />

      )}
    </svg>);

};

window.VariantB = VB;

const VBStyles = () =>
<style>{`
    .vb-root{
      --paper: oklch(97.5% 0.005 90);
      --paper-2: oklch(94.5% 0.008 90);
      --paper-3: oklch(91% 0.010 90);
      --line: oklch(85% 0.012 90);
      --line-strong: oklch(75% 0.015 90);
      --ink: oklch(15% 0.010 200);
      --ink-soft: oklch(28% 0.010 200);
      --ink-mute: oklch(48% 0.010 200);
      --ink-dim: oklch(62% 0.010 200);

      --dark: oklch(13% 0.020 200);
      --dark-2: oklch(18% 0.022 200);
      --dark-line: oklch(28% 0.020 200);
      --dark-text: oklch(94% 0.005 200);
      --dark-mute: oklch(68% 0.012 200);
      --dark-dim: oklch(50% 0.012 200);

      background: var(--paper);
      color: var(--ink);
      font-family: var(--font-body);
      font-size: 16px; line-height: 1.6;
      letter-spacing: -0.005em;
      font-feature-settings: "ss01";
      text-rendering: optimizeLegibility;
      min-height: 100%;
    }

    /* === DOC HEADER === */
    .vb-doc-head{
      max-width: 1240px; margin: 0 auto;
      padding: 26px 56px;
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid var(--line);
    }
    .vb-doc-head-l{ display: flex; align-items: center; gap: 14px; }
    .vb-doc-mark{
      width: 38px; height: 38px; border-radius: 10px;
      background: var(--paper-2);
      display: grid; place-items: center;
      border: 1px solid var(--line);
      overflow: hidden;
    }
    .vb-doc-mark img{ width: 30px; height: 30px; object-fit: contain; }
    .vb-prof-photo{
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; object-position: center 18%; z-index: 1;
      filter: saturate(1.05);
    }
    .vb-doc-brand{
      font-family: var(--font-display);
      font-size: 13px; font-weight: 600;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--ink);
    }
    .vb-doc-cnpj{
      font-family: var(--font-mono);
      font-size: 11px; color: var(--ink-mute);
      letter-spacing: 0.04em; margin-top: 2px;
    }
    .vb-doc-head-r{ display: flex; align-items: center; gap: 12px; }
    .vb-doc-tag{
      font-family: var(--font-mono);
      font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--ink-dim);
    }
    .vb-doc-id{
      font-family: var(--font-mono);
      font-size: 11px; letter-spacing: 0.08em;
      padding: 6px 12px;
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--ink-soft);
    }

    /* === HERO === */
    .vb-hero{
      position: relative;
      max-width: 1240px; margin: 24px auto 0;
      padding: 80px 56px 96px;
      background: var(--dark);
      color: var(--dark-text);
      border-radius: 24px;
      overflow: hidden;
    }
    .vb-hero-bg{
      position: absolute; inset: 0;
      opacity: 0.55;
    }
    .vb-mesh{ position: absolute; inset: 0; width: 100%; height: 100%; }
    .vb-hero-bg::after{
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 0%, var(--dark) 95%),
                  linear-gradient(90deg, var(--dark) 0%, transparent 30%, transparent 70%, var(--dark) 100%);
      pointer-events: none;
    }
    .vb-hero-content{
      position: relative;
      max-width: 800px;
    }
    .vb-hero-flag{
      display: inline-flex; align-items: center; gap: 10px;
      padding: 7px 14px;
      font-family: var(--font-mono);
      font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
      background: color-mix(in oklch, var(--accent) 15%, transparent);
      border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
      color: color-mix(in oklch, var(--accent) 90%, white);
      border-radius: 999px;
      margin-bottom: 36px;
    }
    .vb-hero-dot{
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 12px var(--accent);
    }
    .vb-hero-h{
      display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap;
      margin: 0 0 28px;
      font-family: var(--font-display);
    }
    .vb-hero-id{
      font-size: clamp(80px, 9vw, 140px); line-height: 0.85;
      font-weight: 500; letter-spacing: -0.04em;
      background: linear-gradient(180deg, var(--dark-text) 0%, var(--accent) 110%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .vb-hero-subname{
      font-size: clamp(20px, 2.4vw, 28px);
      font-weight: 400; letter-spacing: -0.01em;
      color: var(--dark-mute);
      max-width: 360px;
      line-height: 1.2;
    }
    .vb-hero-lead{
      font-size: 18px; line-height: 1.6;
      color: var(--dark-mute);
      max-width: 600px;
      margin: 0 0 40px;
    }
    .vb-hero-lead em{
      font-style: normal;
      color: var(--accent);
      font-weight: 500;
    }
    .vb-hero-stats{
      display: flex; gap: 0;
      border-top: 1px solid var(--dark-line);
      padding-top: 24px;
    }
    .vb-hero-stat{
      flex: 1;
      padding-right: 24px;
      border-right: 1px solid var(--dark-line);
    }
    .vb-hero-stat:last-child{ border-right: none; }
    .vb-hero-stat:not(:first-child){ padding-left: 24px; }
    .vb-stat-k{
      font-family: var(--font-display);
      font-size: 22px; font-weight: 500; letter-spacing: -0.015em;
      color: var(--dark-text);
      margin-bottom: 4px;
    }
    .vb-stat-v{
      font-family: var(--font-mono);
      font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--dark-dim);
    }

    /* === OPENER (document title) === */
    .vb-opener{ padding: 80px 56px 0; }
    .vb-opener-inner{ max-width: 1240px; margin: 0 auto; }
    .vb-opener-eyebrow{
      font-family: var(--font-mono);
      font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 16px;
    }
    .vb-opener-h{
      font-family: var(--font-display);
      font-size: clamp(48px, 6vw, 88px);
      line-height: 0.98; letter-spacing: -0.03em;
      font-weight: 500;
      margin: 0 0 48px;
      color: var(--ink);
      text-wrap: balance;
    }
    .vb-opener-em{
      font-style: italic; font-weight: 400;
      color: var(--ink-mute);
    }
    .vb-opener-meta{
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      padding: 24px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .vb-opener-mk{
      font-family: var(--font-mono);
      font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--ink-dim);
      margin-bottom: 8px;
    }
    .vb-opener-mv{
      font-family: var(--font-display);
      font-size: 16px; font-weight: 500; color: var(--ink);
      letter-spacing: -0.01em;
    }

    /* === SECTION MARK === */
    .vb-mark{ max-width: 1240px; margin: 0 auto; padding: var(--pad) 56px 28px; }
    .vb-mark-inner{
      display: grid; grid-template-columns: 200px 1fr auto;
      align-items: end;
      gap: 32px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--line-strong);
    }
    .vb-mark-l{ display: flex; flex-direction: column; gap: 6px; }
    .vb-mark-n{
      font-family: var(--font-mono);
      font-size: 11px; letter-spacing: 0.18em;
      color: var(--accent);
      font-weight: 500;
    }
    .vb-mark-meta{
      font-family: var(--font-mono);
      font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--ink-dim);
    }
    .vb-mark-t{
      font-family: var(--font-display);
      font-size: clamp(28px, 3.4vw, 44px);
      font-weight: 500; letter-spacing: -0.02em;
      margin: 0;
      color: var(--ink);
    }
    .vb-mark-line{
      width: 60px; height: 1px;
      background: var(--accent);
      align-self: end;
      margin-bottom: 12px;
    }

    /* === SECTION === */
    .vb-section{ max-width: 1240px; margin: 0 auto; padding: 0 56px; }

    /* === SUMMARY === */
    .vb-summary{ margin-top: 8px; }
    .vb-srow{
      display: grid; grid-template-columns: 240px 1fr;
      gap: 32px; padding: 18px 4px;
      border-bottom: 1px solid var(--line);
    }
    .vb-srow:hover{ background: var(--paper-2); }
    .vb-sk{
      font-family: var(--font-mono);
      font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--ink-dim);
      padding-top: 3px;
    }
    .vb-sv{ font-size: 15.5px; color: var(--ink); }

    /* === PROSE / TWO COL === */
    .vb-twocol-prose{
      display: grid; grid-template-columns: 1.5fr 1fr;
      gap: 56px;
    }
    .vb-prose p{
      font-size: 17px; line-height: 1.65;
      color: var(--ink-soft);
      margin: 0 0 18px;
    }
    .vb-prose p:first-child::first-letter{
      font-family: var(--font-display);
      float: left;
      font-size: 56px;
      line-height: 0.95;
      padding: 4px 12px 0 0;
      font-weight: 500;
      color: var(--accent);
    }
    .vb-aside{
      padding: 24px 24px;
      background: var(--paper-2);
      border-left: 3px solid var(--cta);
      border-radius: 4px 12px 12px 4px;
      align-self: start;
    }
    .vb-aside-h{
      font-family: var(--font-mono);
      font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--cta);
      margin-bottom: 12px;
      font-weight: 600;
      filter: brightness(0.7) saturate(1.4);
    }
    .vb-aside p{
      margin: 0; font-size: 13.5px; line-height: 1.6;
      color: var(--ink-soft);
      font-style: italic;
    }

    /* === MODULES === */
    .vb-modules{
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 8px;
    }
    .vb-mod{
      position: relative;
      padding: 28px 24px 80px;
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: var(--r-md, 12px);
      transition: transform .2s, border-color .2s, background .2s;
      min-height: 220px;
    }
    .vb-mod:hover{
      transform: translateY(-3px);
      border-color: color-mix(in oklch, var(--accent) 50%, var(--line));
      background: var(--paper);
    }
    .vb-mod-h{
      display: flex; align-items: baseline; gap: 14px;
      margin-bottom: 14px;
    }
    .vb-mod-n{
      font-family: var(--font-mono);
      font-size: 11px; letter-spacing: 0.14em;
      color: var(--accent);
      font-weight: 500;
    }
    .vb-mod-t{
      font-family: var(--font-display);
      font-size: 20px; font-weight: 500; letter-spacing: -0.015em;
      color: var(--ink);
      margin: 0;
      flex: 1;
    }
    .vb-mod-d{
      font-size: 14.5px; line-height: 1.55;
      color: var(--ink-mute);
      margin: 0;
    }
    .vb-mod-tag{
      position: absolute; left: 24px; bottom: 22px;
      font-family: var(--font-mono);
      font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--ink-dim);
      padding: 4px 10px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 999px;
    }

    /* === INVEST CARD === */
    .vb-invest-card{
      display: grid; grid-template-columns: 1fr 1.1fr;
      background: var(--dark);
      color: var(--dark-text);
      border-radius: 24px;
      overflow: hidden;
      margin-top: 8px;
      border: 1px solid var(--dark-line);
    }
    .vb-invest-l{
      padding: 56px 48px;
      background:
        radial-gradient(80% 60% at 30% 30%, color-mix(in oklch, var(--accent) 18%, transparent), transparent 70%);
      border-right: 1px solid var(--dark-line);
      display: flex; flex-direction: column; justify-content: center; gap: 12px;
    }
    .vb-invest-eyebrow{
      font-family: var(--font-mono);
      font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--dark-dim);
    }
    .vb-invest-price{
      font-family: var(--font-display);
      display: inline-flex; align-items: baseline; gap: 4px;
    }
    .vb-cur{
      font-size: 22px; color: var(--dark-mute);
      align-self: flex-start; padding-top: 14px;
    }
    .vb-amt{
      font-size: 132px; line-height: 0.85; font-weight: 500;
      letter-spacing: -0.05em;
      background: linear-gradient(180deg, var(--dark-text) 0%, var(--accent) 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .vb-cents{
      font-size: 28px; color: var(--dark-mute); font-weight: 500;
    }
    .vb-invest-vista{
      font-family: var(--font-mono);
      font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--dark-dim);
    }
    .vb-invest-rule{ height: 1px; background: var(--dark-line); margin: 4px 0; max-width: 200px; }
    .vb-invest-parc{ font-size: 14.5px; color: var(--dark-mute); }
    .vb-invest-parc strong{ color: var(--dark-text); font-weight: 500; }
    .vb-invest-fine{ font-size: 12px; color: var(--dark-dim); }

    .vb-invest-r{
      padding: 56px 48px;
      display: flex; flex-direction: column; gap: 28px;
      justify-content: center;
    }
    .vb-pay-grid{
      display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
    }
    .vb-pay-h{
      font-family: var(--font-mono);
      font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 8px;
    }
    .vb-pay-grid p{ margin: 0; font-size: 14px; line-height: 1.55; color: var(--dark-mute); }
    .vb-pay-note{
      padding: 14px 18px;
      background: var(--dark-2);
      border: 1px solid var(--dark-line);
      border-radius: 10px;
      font-size: 12.5px; font-style: italic;
      color: var(--dark-dim); line-height: 1.55;
    }

    /* === DOCS LIST === */
    .vb-docs{
      padding: 24px 24px;
      background: var(--paper-2);
      border-radius: var(--r-md, 12px);
      border: 1px solid var(--line);
      align-self: start;
    }
    .vb-docs-h{
      font-family: var(--font-mono);
      font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--ink-dim);
      margin-bottom: 16px;
    }
    .vb-docs ol{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
    .vb-docs li{
      display: flex; align-items: baseline; gap: 14px;
      font-size: 14.5px; color: var(--ink-soft);
      padding-bottom: 12px;
      border-bottom: 1px dashed var(--line);
    }
    .vb-docs li:last-child{ border-bottom: none; padding-bottom: 0; }
    .vb-docs-n{
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--accent);
      flex: 0 0 auto;
      letter-spacing: 0.06em;
    }

    /* === SPEC TWO-COL === */
    .vb-twocol{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
    .vb-spec{
      padding: 32px 32px;
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: var(--r-lg, 18px);
    }
    .vb-spec-h{
      font-family: var(--font-display);
      font-size: 18px; font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin-bottom: 12px;
      display: flex; align-items: center; gap: 10px;
    }
    .vb-spec-icon{
      color: var(--accent);
      font-size: 12px;
      line-height: 1;
    }
    .vb-spec p{ margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

    /* === DOCENTE === */
    .vb-prof{
      display: grid; grid-template-columns: 280px 1fr;
      gap: 56px;
      margin-top: 8px;
    }
    .vb-prof-portrait{
      position: relative;
      aspect-ratio: 1; width: 100%;
      background: var(--dark);
      color: var(--dark-text);
      border-radius: var(--r-lg, 18px);
      overflow: hidden;
      display: grid; place-items: center;
    }
    .vb-prof-portrait::before{
      content: "";
      position: absolute; inset: 0;
      background: radial-gradient(60% 60% at 50% 30%, color-mix(in oklch, var(--accent) 28%, transparent), transparent 70%);
    }
    .vb-prof-mono{
      position: relative;
      font-family: var(--font-display);
      font-size: 96px; font-weight: 500; letter-spacing: -0.04em;
      color: var(--dark-text);
    }
    .vb-prof-frame{
      position: absolute; inset: 12px;
      border: 1px dashed color-mix(in oklch, var(--accent) 50%, transparent);
      border-radius: calc(var(--r-lg, 18px) - 6px);
    }
    .vb-prof-stamp{
      position: absolute; left: 16px; bottom: 16px;
      font-family: var(--font-mono);
      font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--accent);
      padding: 6px 10px;
      background: color-mix(in oklch, var(--dark) 80%, transparent);
      border: 1px solid var(--dark-line);
      border-radius: 999px;
    }
    .vb-prof-name{
      font-family: var(--font-display);
      font-size: 40px; font-weight: 500; letter-spacing: -0.025em;
      margin: 0 0 4px;
      color: var(--ink);
    }
    .vb-prof-role{
      font-family: var(--font-mono);
      font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--ink-mute);
      margin-bottom: 24px;
    }
    .vb-prof-bio{
      font-size: 16px; line-height: 1.65; color: var(--ink-soft);
      margin: 0 0 32px;
      max-width: 660px;
    }
    .vb-prof-stats{
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      padding: 24px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      margin-bottom: 28px;
    }
    .vb-prof-stat-k{
      font-family: var(--font-display);
      font-size: 24px; font-weight: 500; letter-spacing: -0.015em;
      color: var(--accent);
      margin-bottom: 4px;
    }
    .vb-prof-stat-v{
      font-family: var(--font-mono);
      font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--ink-mute);
    }
    .vb-prof-inst-h{
      font-family: var(--font-mono);
      font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--ink-dim);
      margin-bottom: 12px;
    }
    .vb-inst-grid{ display: flex; flex-wrap: wrap; gap: 6px; }
    .vb-inst-chip{
      padding: 7px 12px;
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 11.5px; letter-spacing: 0.04em;
      color: var(--ink-soft);
    }
    .vb-inst-chip:hover{
      border-color: color-mix(in oklch, var(--accent) 50%, var(--line));
      background: var(--paper);
    }

    /* === CTA === */
    .vb-cta{
      display: inline-flex; align-items: center; gap: 12px;
      padding: 14px 24px;
      background: var(--cta);
      color: oklch(20% 0.04 60);
      font-family: var(--font-display);
      font-weight: 600; font-size: 14.5px;
      border-radius: 12px;
      text-decoration: none;
      box-shadow: 0 8px 22px color-mix(in oklch, var(--cta) 25%, transparent);
      transition: transform .15s, box-shadow .15s;
    }
    .vb-cta:hover{
      transform: translateY(-1px);
      box-shadow: 0 12px 30px color-mix(in oklch, var(--cta) 40%, transparent);
    }
    .vb-cta-on-dark{
      background: var(--accent);
      color: oklch(15% 0.02 195);
      box-shadow: 0 8px 22px color-mix(in oklch, var(--accent) 35%, transparent);
    }
    .vb-cta-lg{ padding: 18px 32px; font-size: 16px; border-radius: 14px; }
    .vb-cta span{ display: inline-block; transition: transform .2s; }
    .vb-cta:hover span{ transform: translateX(3px); }

    /* === FINAL === */
    .vb-final{
      position: relative;
      max-width: 1240px; margin: 96px auto 0;
      padding: 96px 56px;
      background: var(--dark);
      color: var(--dark-text);
      border-radius: 24px;
      overflow: hidden;
    }
    .vb-final-bg{ position: absolute; inset: 0; opacity: 0.45; }
    .vb-final-bg::after{
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 0%, var(--dark) 95%);
    }
    .vb-final-content{
      position: relative;
      max-width: 720px;
      text-align: left;
    }
    .vb-final-eyebrow{
      font-family: var(--font-mono);
      font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 20px;
    }
    .vb-final-h{
      font-family: var(--font-display);
      font-size: clamp(36px, 4.4vw, 60px);
      line-height: 1.05; letter-spacing: -0.025em;
      font-weight: 500; margin: 0 0 24px;
    }
    .vb-final-em{
      font-style: italic; font-weight: 400;
      color: var(--accent);
    }
    .vb-final-content p{
      font-size: 17px; line-height: 1.65;
      color: var(--dark-mute);
      margin: 0 0 36px;
      max-width: 580px;
    }
    .vb-final-cta-row{
      display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    }
    .vb-final-url{
      font-family: var(--font-mono);
      font-size: 13px; letter-spacing: 0.06em;
      color: var(--dark-dim);
    }

    /* === FOOTER === */
    .vb-foot{
      max-width: 1240px; margin: 0 auto;
      padding: 32px 56px 40px;
    }
    .vb-foot-inner{
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 24px; flex-wrap: wrap;
    }
    .vb-foot-l{
      display: flex; align-items: center; gap: 14px;
      font-family: var(--font-display);
      font-size: 13px; color: var(--ink);
    }
    .vb-foot-l div div{
      font-family: var(--font-mono);
      font-size: 11px; color: var(--ink-mute);
      margin-top: 2px; letter-spacing: 0.04em;
    }
    .vb-foot-r{
      display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
    }
    .vb-foot-r a{
      font-family: var(--font-mono);
      font-size: 11.5px; letter-spacing: 0.04em;
      color: var(--accent); text-decoration: none;
    }
    .vb-foot-r a:hover{ text-decoration: underline; }
    .vb-foot-rule{
      height: 1px; background: var(--line);
      margin: 24px 0;
    }
    .vb-foot-meta{
      font-family: var(--font-mono);
      font-size: 10.5px; letter-spacing: 0.08em;
      color: var(--ink-dim);
    }

    /* Responsive */
    @media (max-width: 980px){
      .vb-hero-h{ flex-direction: column; align-items: flex-start; gap: 8px; }
      .vb-opener-meta{ grid-template-columns: 1fr; }
      .vb-modules{ grid-template-columns: 1fr; }
      .vb-twocol{ grid-template-columns: 1fr; }
      .vb-twocol-prose{ grid-template-columns: 1fr; gap: 24px; }
      .vb-prof{ grid-template-columns: 1fr; }
      .vb-invest-card{ grid-template-columns: 1fr; }
      .vb-invest-l{ border-right: none; border-bottom: 1px solid var(--dark-line); }
      .vb-pay-grid{ grid-template-columns: 1fr; }
      .vb-mark-inner{ grid-template-columns: 1fr; gap: 12px; }
      .vb-srow{ grid-template-columns: 1fr; gap: 4px; }
    }
  `}</style>;