:root{
    --navy:#003057; --navy-2:#0f3d5e; --navy-ink:#021d2e;
    --ouro:#c69941; --ouro-2:#a67c2e; --ouro-bg:#fbf6ec;
    --papel:#ffffff; --fundo:#f6f5f1; --linha:#e4e1d8; --linha-2:#d6d2c6;
    --texto:#1b2430; --texto-2:#4b5563; --texto-3:#636a78;
    --ok:#1f7a4d; --ok-bg:#e8f4ec; --ruim:#a8322d; --ruim-bg:#fbeceb; --neutro-bg:#f0efea;
    --nota:#7c3aed; --nota-bg:#f5f0ff;
    /* Faixa escura fixa: NÃO inverte no modo escuro (--navy-ink inverte e deixava o convite ilegível) */
    --faixa:#021d2e;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --papel:#0f1a24; --fundo:#0a131b; --linha:#22313f; --linha-2:#2c3d4d;
      --texto:#e6e9ee; --texto-2:#b3bcc8; --texto-3:#8893a2;
      --navy:#9cc3e6; --navy-2:#7fb0dc; --navy-ink:#e6e9ee;
      --ouro-bg:#2a2216; --ok-bg:#12291d; --ruim-bg:#2e1716; --neutro-bg:#18232e;
      --nota-bg:#21173a;
    }
  }
  :root[data-theme="dark"]{
    --papel:#0f1a24; --fundo:#0a131b; --linha:#22313f; --linha-2:#2c3d4d;
    --texto:#e6e9ee; --texto-2:#b3bcc8; --texto-3:#8893a2;
    --navy:#9cc3e6; --navy-2:#7fb0dc; --navy-ink:#e6e9ee;
    --ouro-bg:#2a2216; --ok-bg:#12291d; --ruim-bg:#2e1716; --neutro-bg:#18232e;
    --nota-bg:#21173a;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--fundo);color:var(--texto);font:16px/1.6 "Fira Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
  .num,code,.mono{font-family:"Fira Code",ui-monospace,monospace;font-variant-numeric:tabular-nums}
  a{color:inherit}
  .wrap{max-width:1080px;margin:0 auto;padding:0 16px}
  @media(min-width:720px){.wrap{padding:0 32px}}


  header.topo{background:var(--papel);border-bottom:1px solid var(--linha)}
  header.topo .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
  .marca{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--navy);text-decoration:none;font-size:18px;letter-spacing:-.01em}
  .selo{width:28px;height:28px;border:2px solid var(--navy);border-radius:4px;display:grid;place-items:center;font:600 12px "Fira Code",monospace;color:var(--navy)}
  nav.links{display:none;gap:28px;font-size:15px;color:var(--texto-2)}
  nav.links a{text-decoration:none} nav.links a:hover{color:var(--navy)}
  @media(min-width:820px){nav.links{display:flex}}
  .btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 "Fira Sans",sans-serif;text-decoration:none;border-radius:6px;padding:13px 18px;border:1px solid transparent;cursor:pointer;min-height:44px}
  .btn-ouro{background:var(--ouro);color:#1b1305}
  .btn-ouro:hover{background:#d4a84f}
  .btn-linha{border-color:var(--linha-2);color:var(--texto);background:var(--papel)}
  .btn-linha:hover{border-color:var(--navy)}
  .topo .entrar{font-size:15px;color:var(--texto-2);text-decoration:none;margin-right:6px}

  /* Hero */
  .hero{background:var(--papel);border-bottom:1px solid var(--linha)}
  .hero .wrap{display:grid;gap:40px;padding-top:56px;padding-bottom:64px}
  @media(min-width:960px){.hero .wrap{grid-template-columns:1.05fr .95fr;align-items:center;gap:56px}}
  .eyebrow{font:500 13px "Fira Code",monospace;letter-spacing:.04em;color:var(--ouro-2);text-transform:uppercase}
  h1{font-size:clamp(32px,5vw,50px);line-height:1.08;letter-spacing:-.025em;margin:14px 0 18px;color:var(--navy-ink);font-weight:700;text-wrap:balance}
  h1 em{font-style:normal;border-bottom:3px solid var(--ouro)}
  .lead{font-size:19px;color:var(--texto-2);max-width:34em;margin:0 0 28px}
  .acoes{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
  .miudo{font-size:14px;color:var(--texto-3);margin-top:14px}

  /* "Relatório" — o elemento assinatura: parece papel de auditoria, não card de SaaS */
  .relatorio{background:var(--papel);border:1px solid var(--linha-2);border-radius:4px;box-shadow:0 1px 0 var(--linha),0 18px 40px -24px rgba(2,29,46,.35)}
  .relatorio .cab{display:flex;justify-content:space-between;align-items:baseline;padding:14px 18px;border-bottom:1px dashed var(--linha-2);font:500 12px "Fira Code",monospace;color:var(--texto-3)}
  .relatorio .cab strong{font:600 14px "Fira Sans",sans-serif;color:var(--texto)}
  .linha-ed{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:12px 18px;border-bottom:1px solid var(--linha);font-size:14px}
  .linha-ed:last-child{border-bottom:0}
  .linha-ed .obj{color:var(--texto);line-height:1.4}
  .linha-ed .meta{grid-column:1/2;font:12px "Fira Code",monospace;color:var(--texto-3)}
  .linha-ed .val{font:600 13px "Fira Code",monospace;text-align:right;white-space:nowrap}
  .tag{display:inline-block;font:600 11px "Fira Code",monospace;padding:2px 7px;border-radius:3px;letter-spacing:.02em;white-space:nowrap}
  .tag-ok{background:var(--ok-bg);color:var(--ok)}
  .tag-ruim{background:var(--ruim-bg);color:var(--ruim)}
  .tag-neutro{background:var(--neutro-bg);color:var(--texto-3)}
  .riscado .obj{color:var(--texto-3);text-decoration:line-through;text-decoration-color:var(--linha-2)}
  .riscado .val{color:var(--texto-3)}

  section{padding:72px 0}
  section.alt{background:var(--papel);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
  h2{font-size:clamp(26px,3.4vw,34px);line-height:1.15;letter-spacing:-.02em;margin:10px 0 14px;color:var(--navy-ink);text-wrap:balance}
  .sub{color:var(--texto-2);max-width:40em;margin:0 0 36px;font-size:17px}

  /* Comparação lado a lado */
  .lado{display:grid;gap:20px}
  @media(min-width:900px){.lado{grid-template-columns:1fr 1fr}}
  .lado h3{font-size:15px;margin:0 0 10px;display:flex;gap:10px;align-items:center}
  .lado .rot{font:500 12px "Fira Code",monospace;color:var(--texto-3)}

  /* Números reais */
  .numeros{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:4px;overflow:hidden;margin-top:40px}
  @media(min-width:720px){.numeros{grid-template-columns:repeat(4,1fr)}}
  .numeros div{background:var(--papel);padding:20px 18px}
  .numeros .n{font:600 30px/1 "Fira Code",monospace;color:var(--navy);letter-spacing:-.02em}
  .numeros .l{font-size:14px;color:var(--texto-2);margin-top:8px;line-height:1.4}
  .fonte{font:12px "Fira Code",monospace;color:var(--texto-3);margin-top:10px}

  /* Passos: lista numerada simples, sem círculos dourados */
  ol.passos{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--linha)}
  ol.passos li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--linha)}
  @media(min-width:820px){ol.passos li{grid-template-columns:72px 260px 1fr}}
  ol.passos .k{font:600 15px "Fira Code",monospace;color:var(--ouro-2);padding-top:2px}
  ol.passos h3{font-size:18px;margin:0}
  ol.passos p{margin:0;color:var(--texto-2)}
  @media(max-width:819px){ol.passos p{grid-column:2}}

  /* "Vem junto": tabela de duas colunas em vez de 4 cards com ícone */
  .junto{display:grid;gap:0;border-top:1px solid var(--linha)}
  @media(min-width:820px){.junto{grid-template-columns:1fr 1fr;column-gap:48px}}
  .junto div{padding:18px 0;border-bottom:1px solid var(--linha)}
  .junto b{display:block;font-size:16px;margin-bottom:4px}
  .junto span{color:var(--texto-2);font-size:15px}

  /* Módulos sob medida */
  .modulos{display:grid;gap:24px}
  @media(min-width:900px){.modulos{grid-template-columns:1fr 1fr;align-items:start}}
  .modulos ul{margin:0;padding:0;list-style:none}
  .modulos li{padding:12px 0;border-bottom:1px dashed var(--linha-2);display:flex;gap:12px}
  .modulos li::before{content:"→";color:var(--ouro-2);font-family:"Fira Code",monospace}
  .citacao{border-left:3px solid var(--ouro);padding:4px 0 4px 18px;color:var(--texto-2);font-size:17px}

  /* Convite final */
  .convite{background:var(--faixa);color:#e9eef4}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .convite{background:#06101a;border-top:1px solid var(--linha)} }
  :root[data-theme="dark"] .convite{background:#06101a;border-top:1px solid var(--linha)}
  .convite h2{color:#fff}
  .convite .sub{color:#b8c5d3}
  .convite .wrap{display:grid;gap:40px}
  @media(min-width:960px){.convite .wrap{grid-template-columns:1fr 1fr;align-items:start}}
  .entrega{margin:0;padding:0;list-style:none}
  .entrega li{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12);display:flex;gap:12px;color:#d7e0ea}
  .entrega .d{font:600 13px "Fira Code",monospace;color:var(--ouro);min-width:56px}
  form.f{background:var(--papel);color:var(--texto);border-radius:4px;padding:24px;display:grid;gap:14px}
  form.f label{font-size:14px;font-weight:500;display:grid;gap:6px}
  form.f input,form.f textarea{font:inherit;padding:11px 12px;border:1px solid var(--linha-2);border-radius:6px;background:var(--papel);color:var(--texto);min-height:44px}
  form.f input:focus,form.f textarea:focus{outline:2px solid var(--ouro);outline-offset:1px;border-color:var(--ouro)}
  form.f .arquivo{border:1px dashed var(--linha-2);border-radius:6px;padding:16px;text-align:center;color:var(--texto-3);font-size:14px}
  form.f .ajuda{font-size:13px;color:var(--texto-3)}

  /* Quem atende: pessoas reais, não "time de especialistas" */
  .pessoas{display:grid;gap:20px}
  @media(min-width:820px){.pessoas{grid-template-columns:1fr 1fr}}
  .pessoa{background:var(--papel);border:1px solid var(--linha-2);border-radius:4px;padding:22px;display:grid;grid-template-columns:88px 1fr;gap:18px;align-items:start}
  img.foto{width:88px;height:88px;border-radius:4px;object-fit:cover;border:1px solid var(--linha-2);display:block}
  div.foto{width:88px;height:88px;border-radius:4px;background:var(--neutro-bg);border:1px dashed var(--linha-2);display:grid;place-items:center;font:600 18px "Fira Code",monospace;color:var(--texto-3)}
  .pessoa h3{margin:0;font-size:18px}
  .pessoa .papel{font:500 12px "Fira Code",monospace;color:var(--ouro-2);text-transform:uppercase;letter-spacing:.04em;margin:2px 0 10px}
  .pessoa p{margin:0 0 8px;color:var(--texto-2);font-size:15px}
  .link-site{font:500 13px "Fira Code",monospace;color:var(--navy);text-decoration:underline;text-underline-offset:3px;display:inline-block;min-height:24px}
  .link-site:hover{color:var(--ouro-2)}
  .preencher{background:var(--ouro-bg);border:1px dashed var(--ouro);border-radius:3px;padding:0 5px;color:var(--texto);font-size:.95em}
  .compromissos{display:grid;gap:0;border-top:1px solid var(--linha);margin-top:36px}
  @media(min-width:820px){.compromissos{grid-template-columns:repeat(3,1fr);column-gap:32px}}
  .compromissos div{padding:18px 0;border-bottom:1px solid var(--linha)}
  .compromissos b{display:block;margin-bottom:4px}
  .compromissos span{color:var(--texto-2);font-size:15px}

  footer.rodape{padding:32px 0;font-size:14px;color:var(--texto-3)}
  footer.rodape .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

  @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

  /* Compensa o reset do Tailwind (preflight) carregado globalmente pelo app.css */
  h1,h2,h3{font-weight:700}
  b,strong{font-weight:700}
  .relatorio a,.rodape a{text-decoration:underline;text-underline-offset:3px}
  input,textarea,button{font:inherit}
  form.f .erro,.f .erro{font-size:13px;color:var(--ruim);font-weight:500}
  .f b{color:var(--texto)}
  /* O Router dá foco ao h1 a cada navegação (FocusOnNavigate) — sem anel visível no título */
  h1:focus{outline:none}