:root {
  --lima: #B4FF39;
  --lima-dim: #2A3D0F;
  --lima-700: #7CB800;
  --preto: #000000;
  --preto-080: #0A0A0A;
  --preto-120: #121212;
  --preto-180: #1C1C1E;
  --preto-240: #2A2A2C;
  --branco: #FFFFFF;
  --cinza-claro: #E8E8E8;
  --cinza-medio: #9E9E9E;
  --max-width: 1040px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Mesmo verde-limão do gradiente da hero, só que "grudado" na janela
     (background-attachment: fixed) em vez de na página — assim o brilho
     acompanha a tela em qualquer ponto do scroll, sem depender de acertar a
     altura total do documento (que muda conforme o conteúdo). Um brilho
     maior no topo da tela + dois menores nos cantos inferiores, sempre
     visíveis atrás do que estiver por baixo (seções não têm fundo próprio,
     herdam este). Um pouco mais forte que o da hero sozinha, por pedido. */
  background:
    radial-gradient(ellipse 1200px 900px at 50% 0%, rgba(180, 255, 57, 0.20) 0%, transparent 68%),
    radial-gradient(ellipse 900px 700px at 8% 100%, rgba(180, 255, 57, 0.13) 0%, transparent 65%),
    radial-gradient(ellipse 900px 700px at 92% 100%, rgba(180, 255, 57, 0.13) 0%, transparent 65%),
    var(--preto);
  background-attachment: fixed, fixed, fixed, scroll;
  background-repeat: no-repeat;
  color: var(--cinza-claro);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

a { color: var(--lima); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== Header ===== */
header.site {
  border-bottom: 1px solid var(--preto-240);
  background: var(--preto-080);
  position: sticky;
  top: 0;
  z-index: 10;
  transition: box-shadow .25s ease, background-color .25s ease;
}
header.site.is-scrolled {
  background: var(--preto);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

header.site .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--branco);
}
.brand:hover { text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }

nav.site-nav { display: flex; gap: 24px; }
nav.site-nav a {
  position: relative;
  display: inline-block;
  color: var(--cinza-claro);
  font-weight: 500;
  font-size: 0.95rem;
  padding-bottom: 4px;
  transition: transform .2s cubic-bezier(.16, .84, .44, 1), color .2s ease;
}
nav.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--lima);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(.16, .84, .44, 1);
}
nav.site-nav a:hover {
  color: var(--lima);
  text-decoration: none;
  transform: scale(1.1);
}
nav.site-nav a:hover::after { transform: scaleX(1); }

/* ===== Hero ===== */
.hero {
  padding: 72px 0 56px;
  text-align: center;
  background: radial-gradient(ellipse at top, var(--lima-dim) 0%, var(--preto) 60%);
}

/* Entrada em cascata ao carregar a página — cada elemento some/desce um
   pouco depois do anterior (animation-delay crescente abaixo), em vez de
   tudo aparecer de uma vez. Roda automaticamente (sem JS): a hero já está
   visível no primeiro paint, diferente das seções abaixo da dobra, que usam
   .reveal + IntersectionObserver (ver main.js). */
@keyframes heroEntrada {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes logoRespiro {
  0%, 100% { box-shadow: 0 0 0 rgba(180, 255, 57, 0); }
  50% { box-shadow: 0 0 36px rgba(180, 255, 57, 0.35); }
}

.hero .logo-hero,
.hero h1,
.hero p.tagline,
.hero .btn {
  opacity: 0;
  animation: heroEntrada .7s cubic-bezier(.16, .84, .44, 1) forwards;
}

.hero .logo-hero {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  margin: 0 auto 24px;
  animation-delay: .05s;
  /* Segunda animação encadeada: começa só depois que a entrada termina
     (delay soma duração + folga), pra não competir visualmente com o fade. */
  animation-name: heroEntrada, logoRespiro;
  animation-duration: .7s, 3.5s;
  animation-timing-function: cubic-bezier(.16, .84, .44, 1), ease-in-out;
  animation-delay: .05s, 1.2s;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, none;
}

.hero h1 {
  font-size: 2.4rem;
  margin: 0 0 12px;
  color: var(--branco);
  animation-delay: .18s;
}

.hero p.tagline {
  font-size: 1.15rem;
  color: var(--cinza-medio);
  margin: 0 0 32px;
  animation-delay: .3s;
}

.hero .btn-primary { animation-delay: .42s; }
.hero .btn-secondary { animation-delay: .5s; }

.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.16, .84, .44, 1), box-shadow .2s ease, background-color .2s ease;
}

.btn-primary {
  background: var(--lima);
  color: var(--preto);
}
.btn-primary:hover {
  background: #C5FF66;
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -8px rgba(180, 255, 57, 0.55);
}

.btn-secondary {
  background: transparent;
  color: var(--lima);
  border: 1px solid var(--lima);
  margin-left: 12px;
}
.btn-secondary:hover {
  background: var(--lima-dim);
  text-decoration: none;
  transform: translateY(-3px);
}

/* ===== Sections ===== */
section { padding: 56px 0; border-top: 1px solid var(--preto-180); }

section h2 {
  font-size: 1.7rem;
  color: var(--branco);
  margin: 0 0 8px;
  text-align: center;
}

section p.section-lead {
  text-align: center;
  color: var(--cinza-medio);
  max-width: 640px;
  margin: 0 auto 40px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.card {
  position: relative;
  overflow: hidden;
  background: var(--preto-120);
  border: 1px solid var(--preto-240);
  border-radius: 16px;
  padding: 24px;
  transition: transform .3s cubic-bezier(.16, .84, .44, 1), box-shadow .3s ease, border-color .3s ease;
}
.card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--lima-700);
  box-shadow: 0 16px 36px -10px rgba(180, 255, 57, 0.28);
}

/* Brilho que segue o cursor dentro do card — main.js atualiza --mx/--my (em
   px, relativos ao card) a cada mousemove. overflow:hidden do .card acima
   já clipa isso nos cantos arredondados, sem precisar repetir o border-radius
   aqui. Só a opacidade anima (o círculo em si só "teleporta" com o mouse),
   então é barato de rodar a cada movimento. */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(180, 255, 57, 0.18), transparent 70%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.card:hover::before { opacity: 1; }

/* "Zoom" no título ao passar o mouse no card — origin à esquerda pra crescer
   pro lado do texto, não estourar pro lado de fora do card (ver regra base
   de .card h3, com a transition, mais abaixo junto das outras cores/tamanhos
   do card). */
.card:hover h3 { transform: scale(1.06); transform-origin: left center; }

/* Revela ao rolar a página (ver IntersectionObserver em main.js) — nasce
   discreto e some/desce até .is-visible entrar. Cards escalonam via
   transition-delay por nth-child (sem depender de JS calcular atraso), e o
   combinador de irmão adjacente dá o mesmo efeito de cascata entre título e
   texto de cada seção (o 2º .reveal logo após outro .reveal atrasa um pouco). */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s cubic-bezier(.16, .84, .44, 1), transform .7s cubic-bezier(.16, .84, .44, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal + .reveal { transition-delay: .12s; }

.grid .card:nth-child(1) { transition-delay: 0s; }
.grid .card:nth-child(2) { transition-delay: .08s; }
.grid .card:nth-child(3) { transition-delay: .16s; }
.grid .card:nth-child(4) { transition-delay: .24s; }
.grid .card:nth-child(5) { transition-delay: .32s; }

.card h3 {
  color: var(--lima);
  margin: 0 0 8px;
  font-size: 1.1rem;
  transition: transform .3s cubic-bezier(.16, .84, .44, 1);
}

.card p { color: var(--cinza-medio); margin: 0; font-size: 0.95rem; }

.screenshots {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 8px 0 16px;
}
.screenshots img {
  width: 220px;
  border-radius: 16px;
  border: 1px solid var(--preto-240);
  flex-shrink: 0;
}

/* ===== Footer ===== */
footer.site {
  border-top: 1px solid var(--preto-240);
  padding: 32px 0;
  color: var(--cinza-medio);
  font-size: 0.9rem;
}
footer.site .container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}
footer.site nav { display: flex; gap: 20px; flex-wrap: wrap; }
footer.site nav a {
  display: inline-block;
  transition: transform .2s cubic-bezier(.16, .84, .44, 1), color .2s ease;
}
footer.site nav a:hover { transform: scale(1.1); }

/* ===== Legal pages (Termos / Privacidade) ===== */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 20px 80px;
}
.legal h1 { color: var(--branco); font-size: 2rem; margin-bottom: 4px; }
.legal .atualizado {
  color: var(--cinza-medio);
  font-size: 0.9rem;
  margin-bottom: 32px;
}
.legal h2 {
  color: var(--lima);
  font-size: 1.25rem;
  margin-top: 40px;
  margin-bottom: 12px;
}
.legal p, .legal li { color: var(--cinza-claro); }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal .aviso {
  background: var(--preto-120);
  border: 1px solid var(--preto-240);
  border-left: 3px solid var(--lima);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 24px 0;
  color: var(--cinza-claro);
  font-size: 0.95rem;
}

/* ===== 404 ===== */
.page-404 {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
}
.page-404 h1 { font-size: 4rem; color: var(--lima); margin: 0; }

@media (max-width: 640px) {
  nav.site-nav { display: none; }
  .hero h1 { font-size: 1.9rem; }
  .btn-secondary { margin-left: 0; margin-top: 12px; display: block; }
}

/* Quem pede menos movimento no sistema não deve receber fade/slide/glow —
   tudo nasce direto no estado final, sem animação nem transição. */
@media (prefers-reduced-motion: reduce) {
  .hero .logo-hero,
  .hero h1,
  .hero p.tagline,
  .hero .btn,
  .reveal {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .card:hover,
  .card:hover h3,
  nav.site-nav a:hover,
  footer.site nav a:hover {
    transform: none;
  }
  .card::before { display: none; }
}