/* Spazio Hub — página institucional */
:root {
  --marinho: #0c0a2a;
  --marinho-2: #17143d;
  --texto: #1b1840;
  --texto-suave: #55527a;
  --borda: #e6e3f2;
  --fundo-suave: #f7f5fd;
  --roxo: #8b1cf5;
  --roxo-escuro: #6a0dd8;
  --roxo-claro: #f3ebff;
  --laranja: #ff5a00;
  --laranja-claro: #ff9a1a;
  --gradiente: linear-gradient(135deg, #8b1cf5 0%, #c2189e 50%, #ff5a00 100%);
  --raio: 16px;
  --sombra: 0 24px 60px -20px rgba(12, 10, 42, 0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.container { width: min(1160px, 100% - 32px); margin-inline: auto; }

.pular {
  position: absolute; left: -9999px; top: 8px;
  background: #fff; color: var(--marinho); padding: 8px 12px; border-radius: 8px; z-index: 100;
}
.pular:focus { left: 8px; }

:focus-visible { outline: 3px solid var(--laranja-claro); outline-offset: 3px; border-radius: 6px; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 0.95rem;
  text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.botao:hover { transform: translateY(-1px); }
.botao-principal { background: var(--gradiente); color: #fff; box-shadow: 0 10px 24px -10px rgba(194, 24, 158, 0.7); }
.botao-claro { background: #fff; color: var(--marinho); }
.botao-contorno { border: 1.5px solid currentColor; color: inherit; padding: 10px 20px; }
.botao-contorno:hover { background: rgba(255, 255, 255, 0.08); }

/* Topo */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12, 10, 42, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.topo-linha { display: flex; align-items: center; gap: 24px; height: 68px; }
.topo-logo img { height: 34px; width: auto; }
.topo-nav { display: flex; gap: 28px; margin-left: auto; font-size: 0.92rem; }
.topo-nav a { text-decoration: none; color: rgba(255, 255, 255, 0.78); }
.topo-nav a:hover { color: #fff; }

/* Abertura */
.abertura {
  color: #fff;
  background:
    radial-gradient(circle at 8% 10%, rgba(139, 28, 245, 0.55), transparent 42%),
    radial-gradient(circle at 95% 85%, rgba(255, 90, 0, 0.38), transparent 45%),
    var(--marinho);
  padding: 72px 0 96px;
  overflow: hidden;
}
.abertura-grade { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.etiqueta {
  display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--roxo); margin-bottom: 12px;
}
.abertura .etiqueta, .etiqueta-clara { color: var(--laranja-claro); }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; }
.destaque {
  background: linear-gradient(90deg, #c08bff, #ff9a1a); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.abertura-sub { margin-top: 20px; font-size: 1.1rem; color: rgba(255, 255, 255, 0.8); max-width: 34em; }
.abertura-acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.abertura-pontos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; font-size: 0.88rem; color: rgba(255, 255, 255, 0.72); }
.abertura-pontos li::before { content: "✓"; color: var(--laranja-claro); font-weight: 700; margin-right: 6px; }

.abertura-imagens { position: relative; padding-bottom: 40px; }
.moldura-navegador {
  background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--sombra);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.moldura-barra { display: flex; gap: 6px; padding: 10px 12px; background: #eceaf5; }
.moldura-barra span { width: 10px; height: 10px; border-radius: 50%; background: #c9c5dc; }
.moldura-celular {
  position: absolute; right: -12px; bottom: 0; width: 30%;
  border: 6px solid #0a0820; border-radius: 26px; overflow: hidden; background: #0a0820;
  box-shadow: var(--sombra);
}
.moldura-celular img { border-radius: 20px; }

/* Seções */
.secao { padding: 96px 0; }
.secao-suave { background: var(--fundo-suave); }
.secao-escura {
  color: #fff;
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 28, 245, 0.35), transparent 40%),
    var(--marinho);
}
.secao-cabecalho { max-width: 680px; margin-bottom: 48px; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.2; font-weight: 800; letter-spacing: -0.015em; }
.secao-cabecalho p:not(.etiqueta) { margin-top: 14px; color: var(--texto-suave); font-size: 1.05rem; }
h3 { font-size: 1.08rem; font-weight: 700; line-height: 1.35; }

.grade-recursos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.recurso {
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 24px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.recurso:hover { border-color: #d7c4fb; box-shadow: 0 16px 40px -24px rgba(139, 28, 245, 0.45); transform: translateY(-2px); }
.recurso-icone {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--roxo-claro); color: var(--roxo); margin-bottom: 16px;
}
.recurso:nth-child(even) .recurso-icone { background: #fff1e6; color: #e04e00; }
.recurso-icone svg { width: 22px; height: 22px; }
.recurso p, .perfil p { margin-top: 8px; color: var(--texto-suave); font-size: 0.93rem; }

.grade-perfis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.perfil {
  background: #fff; border-radius: var(--raio); padding: 28px 24px; border: 1px solid var(--borda);
  border-top: 4px solid var(--roxo);
}
.perfil:nth-child(2) { border-top-color: #b4179f; }
.perfil:nth-child(3) { border-top-color: #e5375a; }
.perfil:nth-child(4) { border-top-color: var(--laranja); }

.celular-grade { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: center; }
.celular-imagem { display: flex; justify-content: center; }
.moldura-celular-grande { position: static; width: min(300px, 80%); }
.texto-grande { margin-top: 16px; font-size: 1.08rem; color: var(--texto-suave); }
.lista-check { list-style: none; margin-top: 24px; display: grid; gap: 12px; }
.lista-check li { display: flex; gap: 12px; align-items: flex-start; }
.lista-check li::before {
  content: "✓"; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.8rem; font-weight: 700;
  background: var(--roxo-claro); color: var(--roxo);
}

.grade-seguranca { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grade-seguranca article {
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--raio); padding: 24px;
  background: rgba(255, 255, 255, 0.04);
}
.grade-seguranca p { margin-top: 8px; color: rgba(255, 255, 255, 0.72); font-size: 0.93rem; }

.chamada {
  text-align: center; border-radius: 24px; padding: 64px 32px; color: #fff;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.16), transparent 45%),
    var(--gradiente);
}
.chamada p { margin-top: 12px; font-size: 1.08rem; color: rgba(255, 255, 255, 0.9); }
.chamada-acoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.chamada .botao-principal { background: #fff; color: var(--marinho); box-shadow: none; }

/* Rodapé */
.rodape { background: var(--marinho); color: rgba(255, 255, 255, 0.65); padding: 36px 0; font-size: 0.88rem; }
.rodape-linha { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.rodape-linha img { height: 28px; width: auto; }
.rodape-kirev { margin-left: auto; }
.rodape-kirev .kirev { color: #fff; font-weight: 700; }
.rodape-kirev .one { color: var(--laranja-claro); font-weight: 700; }
.rodape-kirev a { text-decoration: none; }
.rodape-kirev a:hover .kirev, .rodape-kirev a:hover .one { text-decoration: underline; }

/* Responsivo */
@media (max-width: 980px) {
  .abertura-grade, .celular-grade { grid-template-columns: 1fr; }
  .abertura { padding: 48px 0 72px; }
  .grade-recursos, .grade-perfis, .grade-seguranca { grid-template-columns: repeat(2, 1fr); }
  .celular-imagem { order: 2; }
}
@media (max-width: 720px) {
  .topo-nav { display: none; }
  .topo-linha .botao { margin-left: auto; }
  .secao { padding: 64px 0; }
  .grade-recursos, .grade-perfis, .grade-seguranca { grid-template-columns: 1fr; }
  .moldura-celular { width: 34%; right: -4px; }
  .chamada { padding: 44px 20px; }
  .rodape-kirev { margin-left: 0; }
  .abertura-acoes .botao { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .botao, .recurso { transition: none; }
}