/* ============================================================
   AXIUM REMEMBER — MATERIAIS DE APRESENTACAO
   Paleta oficial do manual de marca (nenhuma cor inventada).
   Tema escuro do inicio ao fim — padrao Axium sites 3D.
   ============================================================ */

@font-face {
  font-family: 'Marine';
  src: url('Marine-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Marine';
  src: url('Marine-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Marine';
  src: url('Marine-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Marine';
  src: url('Marine-Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
}

:root {
  /* cores de marca, exatamente como no manual */
  --azul-chumbo: #0d1725;
  --azul-acinzentado: #9ac7e6;
  --branco: #ffffff;

  /* escala auxiliar (manual, pag. 9) */
  --chumbo-90: #243854;
  --chumbo-70: #3d5679;
  --chumbo-60: #2f5994;
  --chumbo-50: #6295dd;
  --chumbo-20: #a6bad6;
  --acinzentado-clr: #c8e9ff;
  --acinzentado-med: #a4c6dd;
  --neutro-osso: #f4f1ee;

  /* tokens semanticos */
  --fundo: var(--azul-chumbo);
  --painel: rgba(36, 56, 84, 0.55);            /* chumbo-90 em vidro */
  --painel-solido: var(--chumbo-90);
  --borda: rgba(154, 199, 230, 0.16);
  --borda-forte: rgba(154, 199, 230, 0.32);
  --texto: var(--neutro-osso);
  --texto-suave: rgba(244, 241, 238, 0.66);
  --destaque: var(--azul-acinzentado);
  --destaque-claro: var(--acinzentado-clr);
  --ok: #7fc491;
  --ok-wash: rgba(127, 196, 145, 0.12);

  --fonte: 'Marine', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --raio-cartao: 18px;
  --raio-pill: 999px;
  --sombra-flutuante: 0 18px 50px rgba(0, 0, 0, 0.45);
  --sombra-brilho: 0 8px 40px rgba(154, 199, 230, 0.18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }

img { max-width: 100%; }

a { color: var(--destaque); }

::selection { background: var(--chumbo-60); color: var(--branco); }

/* ---------- topbar de vidro ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem clamp(1.1rem, 4vw, 2.4rem);
  background: rgba(13, 23, 37, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda);
}
.topbar-logo { display: flex; align-items: center; }
.topbar-logo img { height: 30px; width: auto; display: block; }
.topbar nav {
  display: flex;
  gap: clamp(0.8rem, 2.5vw, 1.6rem);
  font-size: 0.86rem;
}
.topbar nav a {
  color: var(--texto-suave);
  text-decoration: none;
  padding: 0.3rem 0.15rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.topbar nav a:hover { color: var(--destaque-claro); }
.topbar nav a.atual {
  color: var(--destaque);
  border-bottom-color: var(--destaque);
}
.topbar nav a:focus-visible,
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--destaque);
  outline-offset: 3px;
  border-radius: 4px;
}

/* No celular a barra fixa com 6 links não cabe numa linha e passa a
   atrapalhar o gesto de rolar a tela — desafixa e deixa os links
   quebrarem em linhas normais, dentro do fluxo da página. */
@media (max-width: 640px) {
  .topbar {
    position: static;
    flex-wrap: wrap;
    row-gap: 0.6rem;
  }
  .topbar nav {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    width: 100%;
  }
}

/* ---------- hero com cena 3D ---------- */
.hero3d {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* fallback sem WebGL: o gradiente da marca ja esta pintado por baixo */
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(47, 89, 148, 0.5), transparent 60%),
    radial-gradient(90% 70% at 20% 85%, rgba(36, 56, 84, 0.75), transparent 65%),
    var(--azul-chumbo);
}
.hero3d canvas.cena3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero3d .hero-conteudo {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem clamp(1.2rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.7rem;
}
.hero3d::after {
  /* garante leitura do texto sobre o 3D */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(60% 55% at 50% 52%, rgba(13, 23, 37, 0.55), transparent 75%);
  pointer-events: none;
}
.hero-logo { width: clamp(240px, 42vw, 460px); height: auto; filter: drop-shadow(0 6px 30px rgba(0,0,0,0.5)); }

/* ---------- componentes ---------- */
.vidro {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cartao3d {
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s, border-color 0.35s;
  transform-style: preserve-3d;
  will-change: transform;
}
.cartao3d:hover {
  border-color: var(--borda-forte);
  box-shadow: var(--sombra-brilho);
}

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--destaque);
  font-weight: 700;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: linear-gradient(160deg, var(--chumbo-60), var(--chumbo-90));
  color: var(--branco);
  font-family: var(--fonte);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  padding: 0.95rem 2rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pill);
  box-shadow: var(--sombra-brilho);
  transition: transform 0.25s, box-shadow 0.25s;
}
.botao:hover { transform: translateY(-3px); box-shadow: 0 14px 50px rgba(154, 199, 230, 0.3); }

.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--raio-pill);
  border: 1px solid var(--borda);
  background: rgba(36, 56, 84, 0.4);
  color: var(--texto-suave);
  font-size: 0.88rem;
}
.selo svg { flex-shrink: 0; color: var(--destaque); }

/* ---------- revelacao no scroll ----------
   Regra de ouro Axium: e o JS que esconde e revela.
   Sem JS, tudo fica 100% visivel. */
.js-pronto .revela {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.js-pronto .revela.visivel {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-pronto .revela { opacity: 1; transform: none; transition: none; }
  .cartao3d, .botao { transition: none; }
}

/* ---------- CTA de instalar o app (reutilizavel em todas as paginas) ---------- */
.hero-acoes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.6rem;
}
.link-instalacao {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--texto-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 0.9rem;
}
.link-instalacao:hover { color: var(--destaque-claro); }

.instalar-secao {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 2rem) clamp(2.4rem, 6vw, 3.6rem);
  display: flex;
  justify-content: center;
}
.instalar-secao .hero-acoes { margin-top: 0; }
.instalar-secao.instalar-topo {
  padding: clamp(1.8rem, 5vw, 2.6rem) clamp(1.2rem, 4vw, 2rem) 0;
}

/* ---------- utilidades ---------- */
.numtab { font-variant-numeric: tabular-nums; }
.rolagem-x { overflow-x: auto; }