/* =====================================================================
   Astech Soluções Digitais — folha de estilos principal
   ---------------------------------------------------------------------
   Organização (na ordem do arquivo — use Ctrl+F no nome entre colchetes):
     [1] VARIÁVEIS E BASE ....... cores, fontes, reset, fundo quadriculado
     [2] LOGO ................... logo "Astech Soluções Digitais"
     [3] TELA DE ABERTURA ....... #boot (carregamento ao entrar no site)
     [4] CABEÇALHO E BOTÕES ..... menu fixo do topo e botões .btn
     [5] TOPO (HERO) ............ título principal e esfera de partículas
     [6] PADRÕES DE SEÇÃO ....... espaçamento, títulos, animação de entrada
     [7] SOBRE .................. seção #sobre
     [8] SOLUÇÕES ............... seção #solucoes (painel + 6 cards)
     [9] PAINEL DE PRODUTO ...... caixa do Astech Zap / MarIA e o mock do app
     [10] ANEL 3D DE PRODUTOS ... seção #produtos (cards girando, setas, bolinhas)
     [11] PROJETOS .............. seção #projetos
     [12] PROCESSO .............. seção #processo (4 etapas)
     [13] RESULTADOS ............ seção #resultados (números e depoimento)
     [14] CONTATO E RODAPÉ ...... seção #contato, rodapé, botão do WhatsApp
     [15] TABLET (até 960px) .... ajustes para telas médias
     [16] CELULAR (até 560px) ... ajustes para telas pequenas
     [17] MENOS MOVIMENTO ....... para quem desativou animações no sistema

   Cores da marca: azul-marinho #0E1626 / #141E30 e verde-água #12D6A8.
   Para mudar uma cor no site inteiro, altere a variável em [1].
   ===================================================================== */


/* =====================================================================
   [1] VARIÁVEIS E BASE
   ===================================================================== */

/* Variáveis de cor e fonte usadas no site todo (ex.: var(--green)).
   --navy  = fundo principal       --navy2 = fundo de caixas/cards
   --navy3 = fundo de trilhos       --line  = bordas finas verde-transparente
   --green = verde da marca         --green2 = verde mais escuro (números no mock)
   --white = texto principal        --muted = texto secundário (cinza-azulado)
   --mono  = fonte "de código" dos rótulos   --sans = fonte dos textos */
:root {
  --navy: #0E1626;
  --navy2: #141E30;
  --navy3: #1B2740;
  --line: rgba(18, 214, 168, .18);
  --green: #12D6A8;
  --green2: #0FB890;
  --white: #F4F7FA;
  --muted: #8A97AC;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Reset: zera margens padrão do navegador e faz largura/altura incluírem a borda. */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Rolagem suave ao clicar nos links do menu.
   overflow-x impede a página de "vazar" para os lados no celular
   (clip é o ideal; hidden vem antes como reserva para navegadores antigos). */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Fundo azul-marinho, texto claro e fonte principal da página. */
body {
  background: var(--navy);
  width: 100%;
  max-width: 100vw;
  color: var(--white);
  font-family: var(--sans);
  overflow-x: hidden;
  line-height: 1.55;
}

/* Links herdam a cor do texto ao redor e não ficam sublinhados. */
a {
  color: inherit;
  text-decoration: none;
}

/* Rótulos em fonte "de código", maiúsculos e espaçados (ex.: "01 · NOSSOS PRODUTOS"). */
.mono {
  font-family: var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .8125rem;
}

/* Destaca uma palavra em verde (ex.: <span class="g">Zap</span>). */
.g {
  color: var(--green);
}

/* Contêiner central: limita o conteúdo a 1200px e dá margem nas laterais. */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Grade quadriculada sutil no fundo da página inteira.
   Fica fixa (não rola) e some nas bordas por causa da máscara radial. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .25;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}

/* Coloca seções, cabeçalho e rodapé acima da grade de fundo. */
section,
header,
footer {
  position: relative;
  z-index: 1;
}

/* Corta o que passar das laterais de cada seção (evita rolagem horizontal no celular). */
section {
  overflow-x: clip;
}

/* Imagens, ícones e canvas nunca ficam mais largos que o espaço disponível. */
img,
svg,
canvas {
  max-width: 100%;
}


/* =====================================================================
   [2] LOGO — "Astech" + "SOLUÇÕES DIGITAIS" (cabeçalho, abertura e rodapé)
   ===================================================================== */

/* Ícone e texto lado a lado, em negrito. */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -.02em;
}

/* Tamanho do ícone "A" da marca. */
.logo svg {
  width: 34px;
  height: 28px;
}

/* Linha pequena "SOLUÇÕES DIGITAIS" embaixo do nome. */
.logo small {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: .5rem;
  letter-spacing: .3em;
  color: var(--muted);
  margin-top: -2px;
}


/* =====================================================================
   [3] TELA DE ABERTURA — #boot
   Cobre a página ao entrar, com barra de carregamento e botão "Entrar no site".
   O JavaScript (js/boot.js) adiciona .off para escondê-la e .on para mostrar o botão.
   ===================================================================== */

/* Camada que cobre a tela inteira, acima de tudo (z-index 100), com conteúdo centralizado. */
#boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity .8s, visibility .8s;
}

/* Estado fechado: some com transição de 0,8s e deixa de bloquear cliques. */
#boot.off {
  opacity: 0;
  visibility: hidden;
}

/* Cantoneiras verdes nos 4 cantos da tela (estilo "mira"). */
#boot .corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: var(--green);
  border-style: solid;
  opacity: .7;
}

/* Posição e lados visíveis de cada cantoneira: tl = topo-esquerda, tr = topo-direita,
   bl = baixo-esquerda, br = baixo-direita. */
#boot .tl {
  top: 20px;
  left: 20px;
  border-width: 2px 0 0 2px;
}

#boot .tr {
  top: 20px;
  right: 20px;
  border-width: 2px 2px 0 0;
}

#boot .bl {
  bottom: 20px;
  left: 20px;
  border-width: 0 0 2px 2px;
}

#boot .br {
  bottom: 20px;
  right: 20px;
  border-width: 0 2px 2px 0;
}

/* Texto "ASTECH · 01 — Carregando experiência" no canto superior esquerdo. */
#boot .hud {
  position: absolute;
  top: 26px;
  left: 60px;
}

/* Relógio (ano.mês e hora) no canto superior direito. */
#boot .hud2 {
  position: absolute;
  top: 26px;
  right: 60px;
  text-align: right;
  color: var(--muted);
}

/* Círculo fino atrás do logo na abertura. */
.ring {
  position: absolute;
  width: min(380px, 80vw);
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
}

/* Arco verde que gira sem parar sobre o círculo (indicador de "carregando"). */
.ring::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--green);
  animation: spin 2.4s linear infinite;
}

/* Animação de giro completo, reutilizada aqui e nos círculos da seção Sobre. */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Logo maior na abertura (60% maior que no cabeçalho). */
.boot-logo {
  transform: scale(1.6);
  margin-bottom: 60px;
}

/* Trilho da barra de carregamento. */
.bar {
  width: min(300px, 70vw);
  height: 2px;
  background: var(--navy3);
  margin-top: 20px;
  overflow: hidden;
}

/* Parte verde da barra; o JavaScript aumenta a largura de 0% a 100%. */
.bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--green);
  box-shadow: 0 0 12px var(--green);
  transition: width .1s;
}

/* Porcentagem embaixo da barra (ex.: "64%"). */
#pct {
  margin-top: 10px;
  color: var(--muted);
}

/* Texto "Tudo pronto": invisível até a barra chegar a 100%. */
#ready {
  margin-top: 14px;
  color: var(--green);
  opacity: 0;
  transition: .4s;
  letter-spacing: .3em;
}

/* Botão "Entrar no site": invisível e não clicável até a barra chegar a 100%. */
#enter {
  margin-top: 28px;
  opacity: 0;
  pointer-events: none;
  transition: .4s;
}

/* Quando o JavaScript adiciona .on, o texto e o botão aparecem. */
#enter.on,
#ready.on {
  opacity: 1;
  pointer-events: auto;
}


/* =====================================================================
   [4] CABEÇALHO E BOTÕES
   Cabeçalho fixo no topo (#hd). O JavaScript (js/header.js) adiciona
   .s ao rolar a página, .open no menu do celular e .act no link da seção atual.
   ===================================================================== */

/* Cabeçalho preso no topo, transparente enquanto a página está no início. */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: background .3s, border .3s;
  border-bottom: 1px solid transparent;
}

/* Depois de rolar: fundo escuro translúcido com desfoque e linha embaixo. */
header.s {
  background: rgba(14, 22, 38, .85);
  backdrop-filter: blur(12px) saturate(160%);
  border-color: var(--line);
}

/* Quem pediu "reduzir transparência" no sistema recebe o cabeçalho sólido, sem desfoque. */
@media (prefers-reduced-transparency: reduce) {
  header.s {
    background: var(--navy);
    backdrop-filter: none;
  }
}

/* Logo à esquerda, menu no meio e botão "Fale conosco" à direita. */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

/* Lista de links do menu no desktop (no celular vira gaveta — ver [15]). */
nav ul {
  display: flex;
  gap: 28px;
  list-style: none;
  font-size: 1rem;
  color: #c8d1de;
}

/* Link do menu fica verde ao passar o mouse ou quando é a seção atual (.act). */
nav ul a:hover,
nav ul a.act {
  color: var(--green);
}

/* Botão padrão do site: formato de pílula com borda verde (ex.: "Ver soluções"). */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  border: 1px solid var(--green);
  transition: .25s;
  cursor: pointer;
  background: none;
  color: var(--white);
  font-family: inherit;
}

/* Resposta imediata ao toque: o botão "afunda" no instante do clique, não depois. */
.btn:active {
  transform: scale(.97);
  transition-duration: .1s;
}

/* Botão principal (.btn.p): fundo verde preenchido com brilho (ex.: "Quero um orçamento"). */
.btn.p {
  background: var(--green);
  color: var(--navy);
  box-shadow: 0 0 30px rgba(18, 214, 168, .35);
}

/* Botão principal ao passar o mouse: verde mais claro e sobe 2px. */
.btn.p:hover {
  background: #3FF0C4;
  transform: translateY(-2px);
}

/* Botão de contorno ao passar o mouse: ganha um fundo verde bem leve. */
.btn:not(.p):hover {
  background: rgba(18, 214, 168, .1);
}

/* Botão ☰ do menu: escondido no desktop, aparece no tablet/celular (ver [15]).
   Área de toque de 44px (tamanho mínimo confortável para o dedo). */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 12px 10px;
  background: none;
  border: 0;
  cursor: pointer;
}

/* As três barras do ☰, desenhadas com spans (em vez de um caractere de texto). */
.burger span {
  display: block;
  height: 2px;
  margin: 4px 0;
  border-radius: 2px;
  background: var(--white);
}


/* =====================================================================
   [5] TOPO (HERO) — primeira dobra: título, chamadas e esfera de partículas
   ===================================================================== */

/* Ocupa a tela inteira e centraliza o conteúdo na vertical; o padding deixa espaço para o cabeçalho. */
.hero {
  min-height: 100vh; /* reserva para navegadores antigos */
  min-height: 100svh; /* altura real da tela no celular (sem "pular" com a barra do navegador) */
  display: flex;
  align-items: center;
  padding: 120px 0 60px;
  overflow: hidden;
}

/* Canvas da esfera de partículas (js/orb.js), atrás do texto, metade para fora à direita. */
#orb {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: min(760px, 90vw);
  aspect-ratio: 1;
  z-index: 0;
  opacity: .9;
}

/* Garante que o texto do topo fique na frente da esfera. */
.hero .wrap {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Etiqueta "TECNOLOGIA QUE GERA RESULTADO" acima do título. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(18, 214, 168, .06);
  margin-bottom: 28px;
}

/* Bolinha verde piscando dentro da etiqueta (indicador "ao vivo"). */
.tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  animation: pulse 1.6s infinite;
}

/* Animação de piscar: fica mais apagado no meio do ciclo. */
@keyframes pulse {
  50% {
    opacity: .3;
  }
}

/* Título principal da página: grande, maiúsculo e com letras próximas.
   clamp() faz o tamanho acompanhar a largura da tela entre um mínimo e um máximo. */
h1 {
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: .98;
  font-weight: 800;
  letter-spacing: -.04em;
  text-transform: uppercase;
  max-width: 1100px;
}

/* Palavra em verde no título ganha um brilho ("ACELERAM"). */
h1 .g {
  text-shadow: 0 0 40px rgba(18, 214, 168, .5);
}

/* Parágrafo de apoio abaixo do título. */
.hero p.lead {
  max-width: 520px;
  color: #B7C2D3;
  font-size: 1.1rem;
  margin: 28px 0 36px;
}

/* Grupo de botões de chamada, lado a lado (quebram linha se não couberem). */
.cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Linha "Web / CRM / IA" no rodapé do topo. */
.hero-meta {
  display: flex;
  gap: 40px;
  margin-top: 70px;
  flex-wrap: wrap;
}

/* Palavra grande de cada item ("Web", "CRM", "IA"). */
.hero-meta b {
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
}

/* Descrição pequena embaixo de cada item. */
.hero-meta span {
  color: var(--muted);
}


/* =====================================================================
   [6] PADRÕES DE SEÇÃO — usados por todas as seções a partir de Produtos
   ===================================================================== */

/* Espaço vertical padrão de cada seção (.sec). */
.sec {
  padding: 120px 0;
}

/* Rótulo numerado acima do título da seção (ex.: "02 // SOBRE NÓS"). */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--green);
  margin-bottom: 18px;
}

/* Bolinha vazada antes do rótulo numerado. */
.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--green);
}

/* Título de cada seção: grande, maiúsculo, tamanho acompanha a tela. */
h2 {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

/* Texto de apoio abaixo de um título de seção. */
.sub {
  color: #B7C2D3;
  max-width: 520px;
  margin-top: 18px;
}

/* Animação de entrada: o elemento começa invisível e 40px abaixo.
   O JavaScript (js/reveal.js) adiciona .in quando ele aparece na tela. */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s, transform .9s;
}

/* Estado revelado: visível e na posição final. */
.reveal.in {
  opacity: 1;
  transform: none;
}


/* =====================================================================
   [7] SOBRE — seção #sobre (texto, círculo animado e citação)
   ===================================================================== */

/* Título da seção Sobre um pouco menor, porque divide a largura com mais duas colunas
   (assim cabe em 2 linhas). */
.about h2 {
  font-size: clamp(1.9rem, 2.8vw, 2.4rem);
}

/* Três colunas: texto | círculo animado | citação. */
.about {
  display: grid;
  grid-template-columns: 1.4fr .9fr .8fr;
  gap: 40px;
  align-items: center;
}

/* Lista dos 3 diferenciais abaixo do texto. */
.pills {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

/* Cada diferencial: caixa com barra verde à esquerda. */
.pills div {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  background: rgba(27, 39, 64, .5);
  font-weight: 600;
  font-size: 1rem;
}

/* Área quadrada do círculo animado, com o logo no centro. */
.core {
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
}

/* Base dos três anéis concêntricos. */
.core .c {
  position: absolute;
  border: 1px solid var(--line);
  border-radius: 50%;
}

/* Anel externo: tracejado, gira devagar (30s por volta). */
.core .c:nth-child(1) {
  inset: 0;
  animation: spin 30s linear infinite;
  border-style: dashed;
}

/* Anel do meio: gira no sentido contrário (18s), com um trecho verde. */
.core .c:nth-child(2) {
  inset: 15%;
  animation: spin 18s linear infinite reverse;
  border-top-color: var(--green);
}

/* Anel interno: brilho verde de fundo atrás do logo. */
.core .c:nth-child(3) {
  inset: 30%;
  background: radial-gradient(circle, rgba(18, 214, 168, .35), transparent 70%);
  border-color: rgba(18, 214, 168, .4);
}

/* Logo no centro do círculo, com brilho verde. */
.core svg {
  width: 30%;
  filter: drop-shadow(0 0 20px var(--green));
}

/* Coluna da citação, separada por uma linha vertical à esquerda. */
.quote {
  border-left: 1px solid var(--line);
  padding-left: 28px;
}

/* Aspas grandes em verde. */
.quote .q {
  font-size: 3rem;
  color: var(--green);
  line-height: 1;
}

/* Frase da citação. */
.quote h3 {
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 8px 0 16px;
}

/* Tracinho verde embaixo da frase. */
.quote h3::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--green);
  margin-top: 16px;
}

/* Texto menor da citação. */
.quote p {
  color: var(--muted);
  font-size: 1rem;
}


/* =====================================================================
   [8] SOLUÇÕES — seção #solucoes ("Painel Astech" + 6 cards)
   ===================================================================== */

/* Topo da seção: título à esquerda e painel de status à direita. */
.sol-head {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

/* "Painel Astech" (o texto muda sozinho via js/ticker.js). */
.status {
  border: 1px solid var(--line);
  background: rgba(27, 39, 64, .6);
  padding: 18px 22px;
  min-width: 280px;
}

/* Cada linha do painel: rótulo à esquerda e valor à direita. */
.status .r {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: var(--muted);
}

/* Valor de cada linha do painel, em branco. */
.status .r b {
  color: var(--white);
  font-weight: 500;
}

/* Grade dos 6 cards de soluções: 3 colunas no desktop. */
.grid5 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Card de solução (também usado em outros lugares): caixa escura com borda fina. */
.card {
  position: relative;
  padding: 28px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(27, 39, 64, .75), rgba(14, 22, 38, .6));
  transition: .35s;
  overflow: hidden;
}

/* Linha verde no topo do card, escondida (largura 0) até passar o mouse. */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--green), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: .5s;
}

/* Card ao passar o mouse: sobe 6px, borda e sombra verdes. */
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(18, 214, 168, .5);
  box-shadow: 0 20px 50px -20px rgba(18, 214, 168, .35);
}

/* Ao passar o mouse, a linha verde do topo "desliza" da esquerda para a direita. */
.card:hover::before {
  transform: scaleX(1);
}

/* Quadrado do ícone no topo de cada card. */
.ic {
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  color: var(--green);
}

/* Tamanho do ícone dentro do quadrado. */
.ic svg {
  width: 22px;
  height: 22px;
}

/* Título do card (ex.: "SITES & PLATAFORMAS"). */
.card h3 {
  font-size: 1.25rem;
  text-transform: uppercase;
  margin: 6px 0 10px;
  letter-spacing: -.01em;
}

/* Descrição do card. */
.card p {
  color: #B7C2D3;
  font-size: 1rem;
}

/* Linha de palavras-chave no rodapé do card (ex.: "WEB · LANDING PAGES"). */
.card .t {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: var(--muted);
  font-size: .8125rem;
}


/* =====================================================================
   [9] PAINEL DE PRODUTO — caixa de detalhes de cada produto (.zap)
   Usada pelos slides do Astech Zap e da MarIA dentro de #produtos.
   À esquerda: logo, recursos e botão. À direita: desenho do app (.mock).
   ===================================================================== */

/* Caixa do produto: duas colunas, bordas arredondadas e brilho verde no canto. */
.zap {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 60px;
  align-items: center;
  border: 1px solid var(--line);
  background: radial-gradient(ellipse at top right, rgba(18, 214, 168, .14), transparent 60%), var(--navy2);
  padding: 60px;
  border-radius: 24px;
}

/* Nome do produto grande, com o ícone ao lado (ex.: "Astech Zap"). */
.zap-logo {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -.04em;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Tamanho do ícone ao lado do nome do produto. */
.zap-logo svg {
  width: 56px;
  height: 46px;
}

/* Lista de recursos do produto em duas colunas. */
.zap .feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 28px 0 34px;
}

/* Cada recurso: ícone + texto lado a lado. */
.zap .feat div {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 600;
  font-size: 1rem;
}

/* Quadradinho verde-claro que envolve o ícone de cada recurso. */
.zap .feat i {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(18, 214, 168, .12);
  display: grid;
  place-items: center;
  color: var(--green);
  font-style: normal;
}

/* Ícone de linha dentro do quadradinho do recurso. */
.zap .feat i svg {
  width: 16px;
  height: 16px;
}

/* Linha "Atendimento • CRM • IA" abaixo do nome do produto no painel de detalhes. */
.tagline {
  color: #c8d1de;
  margin-top: 8px;
  letter-spacing: .3em;
}

/* Desenho simplificado da tela do app (fundo claro): barra lateral + área principal. */
.mock {
  background: #F4F7FA;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 120px 1fr;
  box-shadow: 0 40px 80px -30px #000;
  color: #141E30;
  font-size: .7rem;
  min-height: 330px;
}

/* Barra lateral escura do app desenhado (menu "Conversas, CRM..."). */
.mock .side {
  background: var(--navy2);
  color: #c8d1de;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Nome do produto no topo da barra lateral. */
.mock .side b {
  color: #fff;
  font-size: .875rem;
  margin-bottom: 10px;
}

/* Cada item do menu lateral do app. */
.mock .side span {
  padding: 7px 8px;
  border-radius: 6px;
}

/* Item ativo do menu lateral, destacado em verde. */
.mock .side span.on {
  background: var(--green);
  color: var(--navy);
  font-weight: 700;
}

/* Área principal do app desenhado. */
.mock .main {
  padding: 16px;
}

/* Título da área principal (ex.: "Visão geral"). */
.mock h4 {
  font-size: 1rem;
  margin-bottom: 12px;
}

/* Linha de 3 indicadores (ex.: Conversas, Leads, IA ativa). */
.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

/* Caixinha branca de cada indicador. */
.kpis div {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  font-weight: 700;
}

/* Número do indicador, em verde e maior. */
.kpis div em {
  display: block;
  font-style: normal;
  font-size: 1.1rem;
  color: var(--green2);
}

/* Três colunas do funil (ex.: Novos, Em atendimento, Concluídos). */
.cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* Caixinha branca de cada coluna do funil. */
.cols > div {
  background: #fff;
  border-radius: 8px;
  padding: 8px;
}

/* Título de cada coluna do funil. */
.cols p {
  font-weight: 700;
  margin-bottom: 6px;
}

/* Linha de um contato no funil: avatar + barra cinza (texto fictício). */
.lead-r {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
}

/* Avatar redondo com as iniciais (ex.: "MF"); a cor de fundo vem do HTML. */
.av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .8125rem;
  font-weight: 800;
}

/* Barra cinza que simula uma linha de texto. */
.ln {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: #E3E8EF;
}


/* =====================================================================
   [10] ANEL 3D DE PRODUTOS — seção #produtos
   Estrutura: #ring3d (palco) > .tilt (inclinação) > #ringr (anel que gira) > .face (cards).
   Os cards são criados pelo JavaScript (js/carousel3d.js), que também gira o anel
   e troca o painel de detalhes (#track) conforme o card que está de frente.
   ===================================================================== */

/* Janela dos painéis de detalhe: esconde os que estão fora de vista.
   touch-action: pan-y deixa o dedo rolar a página na vertical. */
.car {
  overflow: hidden;
  border-radius: 24px;
  touch-action: pan-y;
}

/* Fila de painéis lado a lado; o JavaScript desliza com translateX para trocar de produto. */
.track {
  display: flex;
  transition: transform .6s cubic-bezier(.22, .8, .2, 1);
}

/* Cada painel ocupa 100% da largura da janela. */
.track .slide {
  flex: 0 0 100%;
  min-width: 0;
}

/* Palco do anel 3D: dá perspectiva (profundidade), centraliza o anel e mostra a mãozinha de arrastar.
   A máscara apaga suavemente os cards nas bordas esquerda e direita. */
.ring3d {
  position: relative;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 3000px;
  cursor: grab;
  touch-action: pan-y;
  margin-bottom: 30px;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* Enquanto arrasta, o cursor vira "mão fechada". */
.ring3d:active {
  cursor: grabbing;
}

/* Inclina o anel 14° para trás, para ver os cards de cima (efeito de carrossel em perspectiva). */
.ring3d .tilt {
  transform-style: preserve-3d;
  transform: rotateX(-14deg);
}

/* O anel que gira. Largura/altura vêm das variáveis --cw/--ch, definidas pelo JavaScript
   (cards menores no celular). */
.ringr {
  position: relative;
  width: var(--cw);
  height: var(--ch);
  transform-style: preserve-3d;
}

/* Cada card do anel; o JavaScript posiciona com rotateY + translateZ em volta do círculo. */
.face {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* Frente e verso do card: cantos arredondados e o lado de trás fica invisível quando virado. */
.face > div {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Frente do card: fundo escuro com brilho verde no topo; conteúdo empilhado na vertical.
   user-select: none evita selecionar o texto sem querer ao arrastar. */
.face .fr {
  background:
    radial-gradient(ellipse at top, rgba(18, 214, 168, .28), transparent 60%),
    linear-gradient(180deg, #1B2740, #0E1626);
  border: 1px solid rgba(18, 214, 168, .35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  user-select: none;
}

/* Verso do card (visto quando ele está do outro lado do anel): escurecido. */
.face .bk {
  transform: rotateY(180deg);
  background: #0E1626;
  filter: brightness(.4);
  border: 1px solid var(--line);
}

/* Ícone da marca na frente do card. */
.face .fr svg {
  width: 48px;
  height: 40px;
  color: #fff;
}

/* Nome do produto no card (ex.: "Astech Zap"). */
.face .fr b {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

/* Linha "Atendimento • CRM • IA" no card. */
.face .fr .mono {
  font-size: .8125rem;
  color: #c8d1de;
}

/* Mini desenho de tela clara no rodapé do card (empurrado para baixo com margin-top: auto). */
.face .fr .mini {
  margin-top: auto;
  background: #F4F7FA;
  border-radius: 14px;
  padding: 12px;
  display: grid;
  gap: 7px;
}

/* Barras cinza do mini desenho (simulam linhas de texto). */
.face .fr .mini i {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: #E3E8EF;
}

/* Barra verde do mini desenho (simula um progresso). */
.face .fr .mini i.g2 {
  background: var(--green);
  width: 60%;
}

/* Etiqueta "DISPONÍVEL" / "EM BREVE" no topo do card. */
.face .fr .pill {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .15em;
  border: 1px solid var(--green);
  color: var(--green);
}

/* Card que está de frente (o JavaScript adiciona .front): borda e brilho verdes. */
.face.front .fr {
  border-color: var(--green);
  box-shadow: 0 0 40px rgba(18, 214, 168, .35);
}

/* Texto "ARRASTE PARA GIRAR" embaixo do anel. */
.hint {
  position: absolute;
  bottom: 8px;
  color: var(--muted);
  font-size: .8125rem;
}

/* Grupo das setas ← → ao lado do título da seção. */
.car-nav {
  display: flex;
  gap: 10px;
}

/* Cada seta: botão redondo com borda fina. */
.cbtn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--navy2);
  color: var(--white);
  font-size: 1.1rem;
  cursor: pointer;
  transition: .25s;
}

/* Seta ao passar o mouse: borda e ícone verdes. */
.cbtn:hover {
  border-color: var(--green);
  color: var(--green);
}

/* Linha de bolinhas embaixo do painel (uma por produto). */
.dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

/* Bolinha inativa: pequena e escura. */
.dots button {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: var(--navy3);
  cursor: pointer;
  transition: .3s;
}

/* Bolinha do produto atual (.on): vira um traço verde mais largo. */
.dots button.on {
  width: 30px;
  background: var(--green);
}

/* Etiqueta "EM BREVE" no painel de detalhes da MarIA. */
.soon {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(18, 214, 168, .12);
  border: 1px solid var(--green);
  color: var(--green);
}

/* Painel da MarIA: brilho verde no canto esquerdo (o do Astech Zap fica à direita). */
.maria {
  background: radial-gradient(ellipse at top left, rgba(18, 214, 168, .12), transparent 60%), var(--navy2);
}


/* =====================================================================
   [11] PROJETOS — seção #projetos (3 cards de exemplo)
   ===================================================================== */

/* Grade de 3 projetos lado a lado. */
.cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 50px;
}

/* Card de projeto. */
.case {
  border: 1px solid var(--line);
  background: var(--navy2);
  overflow: hidden;
  transition: .35s;
}

/* Card de projeto ao passar o mouse: borda verde e sobe 6px. */
.case:hover {
  border-color: var(--green);
  transform: translateY(-6px);
}

/* Área de "imagem" do projeto (proporção 16:10), com o título centralizado. */
.case .img {
  aspect-ratio: 16 / 10;
  position: relative;
  background: linear-gradient(135deg, #1B2740, #0E1626);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Quadriculado verde por cima da área de imagem. */
.case .img::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .5;
}

/* Título dentro da área de imagem, na frente do quadriculado. */
.case .img b {
  position: relative;
  z-index: 1;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.03em;
}

/* Corpo de texto do card de projeto. */
.case .bd {
  padding: 22px;
}

/* Descrição do projeto. */
.case .bd p {
  color: #B7C2D3;
  font-size: 1rem;
  margin: 8px 0 16px;
}

/* Link "Quero um assim →" em verde. */
.case .bd a {
  color: var(--green);
  font-weight: 700;
  font-size: .875rem;
}


/* =====================================================================
   [12] PROCESSO — seção #processo (linha do tempo com 4 etapas)
   ===================================================================== */

/* 4 colunas com uma linha horizontal no topo (a "linha do tempo"). */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 60px;
  border-top: 1px solid var(--line);
}

/* Cada etapa, separada da próxima por uma linha vertical. */
.step {
  padding: 34px 26px;
  border-right: 1px solid var(--line);
  position: relative;
}

/* A última etapa não tem linha à direita. */
.step:last-child {
  border-right: 0;
}

/* Bolinha verde brilhante sobre a linha do tempo, marcando cada etapa. */
.step::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 26px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--navy);
  border: 2px solid var(--green);
  box-shadow: 0 0 12px var(--green);
}

/* Número grande da etapa ("01", "02"...) só com o contorno verde, sem preenchimento. */
.step .n {
  font-size: 3rem;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1px rgba(18, 214, 168, .6);
  line-height: 1;
}

/* Nome da etapa (ex.: "Diagnóstico"). */
.step h3 {
  font-size: 1.25rem;
  margin: 14px 0 10px;
}

/* Descrição da etapa. */
.step p {
  color: #B7C2D3;
  font-size: 1rem;
}

/* Linha "ENTREGA: ..." no fim de cada etapa. */
.step .d {
  margin-top: 18px;
  color: var(--green);
  font-size: .8125rem;
}


/* =====================================================================
   [13] RESULTADOS — seção #resultados (3 números animados + depoimento)
   ===================================================================== */

/* Grade dos 3 números lado a lado. */
.nums {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 50px;
}

/* Caixa de cada número. */
.num {
  padding: 36px;
  border: 1px solid var(--line);
  background: rgba(27, 39, 64, .4);
}

/* O número em si (ex.: "24h"), enorme e verde. O valor sobe de 0 via js/reveal.js. */
.num b {
  font-size: clamp(3rem, 6vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--green);
  line-height: 1;
}

/* Rótulo abaixo do número (ex.: "IA SEMPRE ATIVA"). */
.num h4 {
  margin: 12px 0 6px;
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .15em;
}

/* Explicação abaixo do rótulo. */
.num p {
  color: var(--muted);
  font-size: 1rem;
}

/* Caixa do depoimento: avatar à esquerda e frase à direita. */
.testi {
  margin-top: 30px;
  padding: 40px;
  border: 1px solid var(--line);
  background: var(--navy2);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 30px;
  align-items: center;
}

/* Avatar grande e verde do depoimento (substitui o .av pequeno do mock). */
.testi .av {
  width: 70px;
  height: 70px;
  font-size: 1.3rem;
  background: var(--green);
  color: var(--navy);
}

/* Frase do depoimento. */
.testi blockquote {
  font-size: 1.2rem;
  font-weight: 500;
}

/* Autor do depoimento, embaixo da frase. */
.testi cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  color: var(--muted);
  font-size: 1rem;
}


/* =====================================================================
   [14] CONTATO E RODAPÉ — seção #contato, rodapé e botão flutuante do WhatsApp
   ===================================================================== */

/* Seção de contato: tudo centralizado, com brilho verde no fundo. */
.contact {
  text-align: center;
  padding: 140px 0;
  background: radial-gradient(ellipse at center, rgba(18, 214, 168, .15), transparent 65%);
}

/* Título da seção de contato centralizado e com largura limitada. */
.contact h2 {
  max-width: 900px;
  margin: 0 auto;
}

/* Botões da seção de contato centralizados. */
.contact .cta {
  justify-content: center;
  margin-top: 40px;
}

/* Rodapé com linha fina no topo e texto pequeno. */
footer {
  border-top: 1px solid var(--line);
  padding: 40px 0;
  color: var(--muted);
  font-size: .875rem;
}

/* Logo à esquerda e direitos autorais à direita. */
footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Botão redondo do WhatsApp fixo no canto inferior direito da tela. */
.wa {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--green);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(18, 214, 168, .5);
}

/* Ícone do WhatsApp dentro do botão, em azul-marinho. */
.wa svg {
  width: 28px;
  fill: var(--navy);
}


/* =====================================================================
   [15] TABLET (até 960px)
   Menu vira gaveta aberta pelo ☰ e as grades passam a ter menos colunas.
   ===================================================================== */
@media (max-width: 960px) {
  /* Menu escondido; quando aberto (.open) aparece como gaveta embaixo do cabeçalho. */
  nav ul {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--navy2);
    padding: 24px;
    gap: 18px;
    border-bottom: 1px solid var(--line);
  }

  /* Menu aberto pelo botão ☰. */
  nav ul.open {
    display: flex;
  }

  /* Mostra o botão ☰. */
  .burger {
    display: block;
  }

  /* Esconde o botão "Fale conosco" do cabeçalho (falta espaço). */
  nav .btn {
    display: none;
  }

  /* Seção Sobre e painéis de produto passam a ter uma coluna só. */
  .about,
  .zap {
    grid-template-columns: 1fr;
  }

  /* Painel de produto com menos espaço interno. */
  .zap {
    padding: 30px 20px;
  }

  /* Cards de soluções, projetos e resultados em uma coluna. */
  .grid5,
  .cases,
  .nums {
    grid-template-columns: 1fr;
  }

  /* Etapas do processo em duas colunas (2 × 2). */
  .steps {
    grid-template-columns: 1fr 1fr;
  }

  /* Segunda etapa fecha a linha, então perde a linha vertical à direita. */
  .step:nth-child(2) {
    border-right: 0;
  }

  /* Esfera de partículas mais apagada e mais para fora, para não brigar com o texto. */
  #orb {
    opacity: .35;
    right: -30%;
  }

  /* Citação da seção Sobre sem a linha vertical (agora fica embaixo, não ao lado). */
  .quote {
    border-left: 0;
    padding-left: 0;
  }
}


/* =====================================================================
   [16] CELULAR (até 560px)
   Fontes e espaços menores, tudo em uma coluna e botões ocupando a largura toda.
   ===================================================================== */
@media (max-width: 560px) {
  /* Margem lateral menor (16px). */
  .wrap {
    padding: 0 16px;
  }

  /* Topo não ocupa mais a tela inteira; só a altura do conteúdo. */
  .hero {
    min-height: auto;
    padding: 110px 0 70px;
  }

  /* Esfera maior e bem apagada, como pano de fundo atrás do título. */
  #orb {
    width: 120vw;
    right: -45%;
    top: 30%;
    opacity: .25;
  }

  /* Título principal menor para caber sem quebrar palavras. */
  h1 {
    font-size: clamp(1.7rem, 7.6vw, 2.4rem);
    line-height: 1.04;
  }

  /* Títulos de seção menores, para caberem em até 2 linhas. */
  h2 {
    font-size: clamp(1.5rem, 6.8vw, 2.1rem);
  }

  /* Título da seção Sobre (palavras mais longas) um pouco menor para caber em 2 linhas. */
  .about h2 {
    font-size: clamp(1.4rem, 6.2vw, 1.9rem);
  }

  /* Linha de categorias do produto com menos espaçamento, para não encostar na borda. */
  .tagline {
    letter-spacing: .14em;
  }

  /* Texto de apoio do topo um pouco menor. */
  .hero p.lead {
    font-size: 1rem;
  }

  /* Botões de chamada ocupam a linha inteira (mais fáceis de tocar). */
  .cta .btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  /* Linha "Web / CRM / IA" mais compacta. */
  .hero-meta {
    gap: 22px;
    margin-top: 44px;
  }

  .hero-meta b {
    font-size: 1.4rem;
  }

  /* Círculo animado da seção Sobre menor e centralizado (antes vazava da tela). */
  .core {
    width: min(240px, 70vw);
    margin: 0 auto;
  }

  /* Mais espaço entre os blocos da seção Sobre empilhados. */
  .about {
    gap: 48px;
  }

  /* "Painel Astech" ocupa a largura toda. */
  .sol-head {
    margin-bottom: 36px;
  }

  .status {
    min-width: 0;
    width: 100%;
  }

  /* Cards com menos espaço interno. */
  .card {
    padding: 22px;
  }

  /* Nome do produto e ícone menores no painel de produto. */
  .zap-logo {
    font-size: 2rem;
  }

  .zap-logo svg {
    width: 42px;
    height: 34px;
  }

  /* Colunas do funil no desenho do app empilhadas. */
  .mock .cols {
    grid-template-columns: 1fr;
  }

  /* Caixas de resultados mais compactas. */
  .num {
    padding: 26px;
  }

  /* Depoimento mais compacto e alinhado à esquerda. */
  .testi {
    padding: 26px;
    text-align: left;
  }

  /* Seção de contato com menos espaço vertical. */
  .contact {
    padding: 90px 0;
  }

  /* Rodapé empilhado e centralizado. */
  footer .wrap {
    flex-direction: column;
    text-align: center;
  }

  /* Botão do WhatsApp menor no celular. */
  .wa {
    bottom: 16px;
    right: 16px;
    width: 52px;
    height: 52px;
  }

  /* Textos dos cantos da tela de abertura menores e mais próximos das bordas. */
  #boot .hud,
  #boot .hud2 {
    top: 22px;
    font-size: .8125rem;
  }

  #boot .hud {
    left: 46px;
  }

  #boot .hud2 {
    right: 46px;
  }

  /* Logo da abertura um pouco menor. */
  .boot-logo {
    transform: scale(1.25);
  }

  /* Animação de entrada mais curta e mais rápida no celular. */
  .reveal {
    transform: translateY(24px);
    transition-duration: .6s;
  }

  /* Etapas do processo em uma coluna, separadas por linha horizontal. */
  .steps {
    grid-template-columns: 1fr;
  }

  .step {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  /* Desenho do app sem a barra lateral (só a área principal). */
  .mock {
    grid-template-columns: 1fr;
  }

  .mock .side {
    display: none;
  }

  /* Recursos do produto em uma coluna. */
  .zap .feat {
    grid-template-columns: 1fr;
  }

  /* Depoimento empilhado (avatar em cima da frase). */
  .testi {
    grid-template-columns: 1fr;
  }

  /* Seções com menos espaço vertical. */
  .sec {
    padding: 80px 0;
  }

  /* Palco do anel 3D mais baixo (os cards também ficam menores, via JavaScript). */
  .ring3d {
    height: 400px;
  }
}


/* =====================================================================
   [17] MENOS MOVIMENTO
   Para quem ativou "reduzir movimento" no sistema: desliga animações e transições
   e já mostra os elementos .reveal sem a animação de entrada.
   (O giro automático do anel 3D é desligado no JavaScript.)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}