/* Rise Intelligence Business · página geral
   Mesma família da entrada do Intelligence Security: fundo escuro, dourado da marca, tipografia
   sóbria. Sem script, sem fonte de fora, sem imagem de fora. */
:root {
  color-scheme: dark;
  --pagina: #070808;
  --superficie: #101115;
  --texto: #f5f5f7;
  --apagado: #b0b2bf;
  --linha: #363841;
  --ouro: #f2b705;
  --ouro-claro: #ffd567;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --suave: cubic-bezier(.2, .7, .2, 1);
  font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--texto);
  background: var(--pagina);
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%; display: flex; flex-direction: column;
  padding: 0 clamp(18px, 5vw, 96px);
  background:
    radial-gradient(120% 70% at 85% 0%, #f2b70514 0%, #f2b70500 60%),
    linear-gradient(to bottom, #0b0c0e 0%, var(--pagina) 46%);
  border-top: 2px solid var(--ouro);
}
h1, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 3px; }

/* ───── topo ───── */
.topo { display: flex; align-items: center; gap: 18px; min-height: 76px; }
.marca { display: flex; align-items: center; gap: 15px; min-height: 44px; text-decoration: none; }
.marca img { display: block; width: 111px; height: auto; }
.marca span { border-left: 1px solid #52525a; padding-left: 15px; font: 500 12px/22px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #e3dfd5; }
.topo-elo { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--apagado); text-decoration: none; }
.topo-elo:hover { color: var(--texto); }

/* ───── abertura ───── */
main { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: clamp(28px, 5vh, 56px); padding-block: clamp(24px, 6vh, 72px); }
.sobretitulo { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ouro-claro); margin-bottom: 18px; }
.sobretitulo::before { content: ""; display: inline-block; width: 18px; height: 2px; margin-right: 10px; vertical-align: middle; background: var(--ouro); }
.titulo { font-size: clamp(40px, 5.6vw, 92px); font-weight: 650; line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.titulo em { font-style: normal; color: var(--ouro); }
.titulo.menor { font-size: clamp(34px, 4.4vw, 68px); }
.apoio { margin-top: 20px; max-width: 52ch; font-size: clamp(15px, 1.15vw, 19px); line-height: 1.6; color: #d2d2cc; text-wrap: pretty; }

/* ───── fundo em planos ─────
   Dois blocos de números, um grande e um miúdo, em contraste baixo, que se movem devagar em
   sentidos opostos. Ficam atrás de tudo, somem em direção ao texto e não recebem clique. */
.planos {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 34%, transparent 76%);
  mask-image: linear-gradient(to left, #000 0%, #000 34%, transparent 76%);
}
.plano { position: absolute; margin: 0; white-space: nowrap; text-align: right; font-family: var(--mono); font-weight: 500; }
.plano b { font-weight: 500; }
.plano-a { top: 15%; right: clamp(18px, 5vw, 96px); font-size: clamp(16px, 1.9vw, 30px); line-height: 2.25; letter-spacing: .2em; color: #1a1b21; animation: deriva 38s ease-in-out infinite alternate; }
.plano-a b { color: #4a3a0c; }
.plano-b { top: 76%; right: clamp(18px, 5vw, 96px); font-size: 11px; line-height: 2.5; letter-spacing: .3em; color: #262830; animation: deriva 54s ease-in-out infinite alternate-reverse; }
.plano-b b { color: #5c4a14; }
@keyframes deriva { from { transform: translateY(0); } to { transform: translateY(-56px); } }
.topo, main, .rodape { position: relative; z-index: 1; }

/* ───── os cinco acessos ───── */
.frentes ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.frente {
  display: grid; grid-template-rows: auto 1fr auto; gap: 14px; height: 100%; min-height: 168px; padding: 20px 18px 16px;
  border: 1px solid var(--linha); border-radius: 6px; background: #101115cc; text-decoration: none;
  transition: border-color .2s ease, transform .2s var(--suave), background .2s ease;
}
.frente:hover { border-color: #6a6c78; transform: translateY(-2px); background: #14151ad9; }
.frente svg { width: 30px; height: 30px; color: var(--apagado); }
.frente-nome { align-self: end; font-size: clamp(16px, 1.25vw, 20px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.frente-nome b { font-weight: 600; }
.frente-nome i { font-style: normal; color: #6a6c78; }
.frente-estado { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8a8c98; }
/* a frente que já funciona */
.frente.ativa { border-color: var(--ouro); background: #16140cd9; }
.frente.ativa:hover { border-color: var(--ouro-claro); }
.frente.ativa svg, .frente.ativa .frente-estado { color: var(--ouro-claro); }

/* ───── rodapé ───── */
.rodape { display: grid; gap: 4px; padding: 22px 0 26px; border-top: 1px solid #26272e; font-size: 13px; color: var(--apagado); }
.rodape-rotulo { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ouro-claro); }
.rodape-contato { color: #d2d2cc; }
.rodape-contato + .rodape-empresa { margin-top: 8px; }   /* o respiro só existe quando há contato acima */
.rodape-direitos { color: #8a8c98; }

/* ───── frente em manutenção ───── */
.manutencao { align-items: flex-start; gap: 0; }
.manutencao svg { width: 44px; height: 44px; margin-bottom: 26px; color: var(--ouro-claro); }
.voltar { display: inline-flex; align-items: center; min-height: 46px; margin-top: 30px; padding: 10px 22px; border: 1px solid var(--ouro); border-radius: 5px; color: var(--ouro-claro); font-weight: 600; font-size: 14px; text-decoration: none; transition: background .2s, color .2s; }
.voltar:hover { background: var(--ouro); color: #101115; }

/* ───── telas menores ───── */
@media (max-width: 1100px) { .frentes ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .frentes ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .frente { min-height: 132px; padding: 16px 14px 14px; }
  .marca img { width: 84px; }
  .marca span { font-size: 10px; padding-left: 10px; }
  .topo { min-height: 62px; }
}
/* Cabeçalho em tela estreita: o contato fica só no rodapé; abaixo de 340px sobra só o desenho da marca. */
@media (max-width: 480px) { .topo-elo { display: none; } .marca span { white-space: nowrap; } }
@media (max-width: 400px) { .frentes ul { grid-template-columns: minmax(0, 1fr); } .frente { min-height: 0; grid-template-rows: auto auto auto; } }
@media (max-width: 340px) { .marca span { display: none; } .titulo { font-size: 34px; } .titulo.menor { font-size: 30px; } }
/* Em tela estreita o fundo fica só atrás da abertura e sobe junto com a página, para não passar por trás dos acessos. */
@media (max-width: 700px) {
  .planos { position: absolute; inset: 0 0 auto; height: 430px; }
  .plano-b { display: none; }
  .plano-a { top: 70px; color: #15161b; }
  .plano-a b { color: #33290b; }
}
@media (prefers-reduced-motion: reduce) { .frente, .voltar { transition: none; } .frente:hover { transform: none; } .plano { animation: none; } }