/* ==========================================================
   XMTI — style.css
   A "pele" do site. Organização:
   1. Design tokens (variáveis)   4. Cabeçalho e navegação
   2. Reset e base                5. Seções (hero → contato)
   3. Utilitários (botões etc.)   6. Rodapé e responsivo
   ========================================================== */

/* ---------- 1. DESIGN TOKENS ----------
   Variáveis CSS: definimos cores e medidas UMA vez e
   reutilizamos em todo o arquivo. Mudar a marca inteira
   = mudar uma linha aqui. */
:root {
  /* Cores da marca */
  --verde: #15803D;          /* o verde XMTI */
  --verde-vivo: #22C55E;     /* versão clara, p/ destaques no fundo escuro */
  --verde-noite: #06281A;    /* fundo do hero */
  --verde-noite-2: #0A3A24;  /* variação p/ profundidade */

  /* Neutros (puxados pro tom da marca) */
  --tinta: #0B1F16;          /* texto principal: verde-carvão, não preto puro */
  --tinta-suave: #47594F;    /* texto secundário */
  --fundo: #FAFCFA;          /* branco-quente esverdeado */
  --fundo-alt: #F0F5F1;      /* seções alternadas */
  --branco: #FFFFFF;
  --linha: #DCE5DE;          /* bordas discretas */

  /* Tipografia */
  --fonte-titulo: 'Space Grotesk', sans-serif;
  --fonte-texto: 'IBM Plex Sans', sans-serif;

  /* Escala de espaçamento (múltiplos de 8) */
  --e1: 8px;  --e2: 16px; --e3: 24px;
  --e4: 40px; --e5: 64px; --e6: 96px;

  --raio: 14px;              /* cantos arredondados padrão */
  --sombra: 0 6px 24px rgba(11, 31, 22, 0.08);
}

/* ---------- 2. RESET E BASE ----------
   Navegadores vêm com estilos próprios e inconsistentes.
   O "reset" zera isso p/ começarmos do mesmo ponto em todos. */
*, *::before, *::after {
  box-sizing: border-box;    /* padding conta DENTRO da largura — evita surpresas */
  margin: 0;
}

html {
  scroll-behavior: smooth;   /* cliques no menu deslizam suave até a seção */
}

body {
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.65;         /* respiro entre linhas = conforto de leitura */
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  line-height: 1.15;
  letter-spacing: -0.02em;   /* títulos levemente compactados = ar moderno */
}

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

/* Acessibilidade: quem navega por teclado precisa VER onde está */
:focus-visible {
  outline: 3px solid var(--verde-vivo);
  outline-offset: 3px;
}

/* Quem pediu menos movimento no sistema, recebe menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- 3. UTILITÁRIOS ---------- */
/* Container: limita a largura e centraliza. Textos infinitos
   de ponta a ponta da tela são ilegíveis. */
.container {
  max-width: 1080px;
  margin-inline: auto;       /* auto dos dois lados = centralizado */
  padding-inline: var(--e3);
}

.botao-primario,
.botao-secundario {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 999px;      /* pílula */
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.botao-primario {
  background: var(--verde);
  color: var(--branco);
  box-shadow: 0 4px 14px rgba(21, 128, 61, 0.35);
}
.botao-primario:hover {
  background: #166B36;
  transform: translateY(-2px);           /* levanta de leve */
  box-shadow: 0 8px 22px rgba(21, 128, 61, 0.45);
}

.botao-secundario {
  color: var(--branco);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.botao-secundario:hover {
  border-color: var(--verde-vivo);
  color: var(--verde-vivo);
}

/* ---------- 4. CABEÇALHO / NAVEGAÇÃO ---------- */
header {
  position: sticky;          /* o menu acompanha a rolagem */
  top: 0;
  z-index: 50;
  background: rgba(6, 40, 26, 0.92);     /* verde-noite translúcido */
  backdrop-filter: blur(10px);           /* efeito vidro fosco */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

header nav {
  max-width: 1080px;
  margin-inline: auto;
  padding: 12px var(--e3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
}

header .logo img { height: 44px; }

header ul {
  display: flex;
  gap: var(--e3);
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}

header ul a {
  color: #D8E9DD;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.2s ease;
}
header ul a:hover { color: var(--verde-vivo); }

/* ---------- 5. SEÇÕES ---------- */
section { padding-block: var(--e6); }

section h2 {
  font-size: clamp(28px, 4vw, 40px);     /* cresce com a tela, com limites */
  margin-bottom: var(--e3);
  max-width: 22ch;                       /* títulos não viram linhões */
}

.destaque {
  font-size: 19px;
  color: var(--tinta-suave);
  max-width: 62ch;                       /* conforto de leitura: ~65 caracteres */
  margin-bottom: var(--e4);
}

/* --- 5.1 HERO: o palco escuro --- */
#inicio {
  background:
    radial-gradient(1000px 500px at 85% -10%, var(--verde-noite-2), transparent),
    var(--verde-noite);
  color: var(--branco);
  padding-block: calc(var(--e6) + 20px);
}

#inicio h1 {
  font-size: clamp(34px, 5.5vw, 58px);
  max-width: 18ch;
  margin-bottom: var(--e3);
}

#inicio p {
  font-size: 19px;
  color: #C4DACB;
  max-width: 58ch;
  margin-bottom: var(--e4);
}

#inicio .acoes {
  display: flex;
  gap: var(--e2);
  flex-wrap: wrap;
}

/* --- 5.2 GRADES DE CARTÕES --- */
.grade {
  display: grid;
  gap: var(--e3);
  grid-template-columns: 1fr;            /* celular: 1 coluna */
}

.cartao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: var(--e3);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.cartao:hover {
  transform: translateY(-6px);
  border-color: var(--verde);
  box-shadow: var(--sombra);
}

.cartao h3 {
  font-size: 19px;
  margin-bottom: var(--e1);
  color: var(--verde-noite);
}

.cartao p { color: var(--tinta-suave); font-size: 16px; }

.cartao .nota {
  margin-top: var(--e2);
  font-size: 13.5px;
  color: var(--verde);
  font-weight: 500;
}

/* --- 5.3 SEGURANÇA: fundo alternado p/ ritmo --- */
#seguranca { background: var(--fundo-alt); }

#seguranca .destaque strong { color: var(--verde-noite); }

/* --- 5.4 XMTI OS: a vitrine do produto --- */
#xmti-os figure {
  margin-block: var(--e4);
  border-radius: var(--raio);
  overflow: hidden;                      /* a imagem respeita os cantos */
  border: 1px solid var(--linha);
  box-shadow: var(--sombra);
}

#xmti-os figcaption {
  padding: var(--e2);
  font-size: 14px;
  color: var(--tinta-suave);
  background: var(--branco);
  border-top: 1px solid var(--linha);
}

#xmti-os .botao-primario { margin-top: var(--e4); }

/* --- 5.5 SOBRE --- */
.diferenciais {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--e2);
  max-width: 70ch;
}

.diferenciais li {
  padding: var(--e2) var(--e3);
  background: var(--branco);
  border-left: 4px solid var(--verde);
  border-radius: 0;                      /* borda de um lado só = canto reto */
}

/* --- 5.6 CONTATO: fecho escuro, espelho do hero --- */
#contato {
  background: var(--verde-noite);
  color: var(--branco);
}

#contato h2 { color: var(--branco); }
#contato > .container > p { color: #C4DACB; margin-bottom: var(--e3); }

.canais {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--e1);
  margin-bottom: var(--e4);
}

.canais a { color: var(--verde-vivo); }

/* ---------- 6. RODAPÉ ---------- */
footer {
  background: #041C11;
  color: #9DB8A6;
  font-size: 14px;
  padding-block: var(--e4);
  text-align: center;
}

footer p { margin-bottom: var(--e1); }
footer a { color: var(--verde-vivo); }

/* ---------- RESPONSIVO ----------
   Mobile-first: tudo acima vale pro celular.
   Aqui, os ajustes p/ telas maiores. */
@media (min-width: 720px) {
  .grade { grid-template-columns: 1fr 1fr; }         /* tablet: 2 colunas */
}

@media (min-width: 1024px) {
  #servicos .grade { grid-template-columns: repeat(2, 1fr); }
  #seguranca .grade,
  #xmti-os .grade { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================
   REFLEXOS — estilos do menu mobile, cena 3D e revelação
   ========================================================== */

/* ---------- MENU MOBILE (hambúrguer) ---------- */
.menu-btn {
  display: none;                 /* só aparece em telas pequenas (abaixo) */
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.menu-btn span {
  width: 24px;
  height: 2px;
  background: #D8E9DD;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Hambúrguer vira X quando aberto */
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 719px) {
  .menu-btn { display: flex; }
  header ul {
    /* menu recolhido: presente no HTML, escondido visualmente */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(6, 40, 26, 0.98);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  header ul.aberto { max-height: 320px; }
  header ul li { padding: 14px 24px; }
}

/* ---------- HERO EM DUAS COLUNAS ---------- */
.hero-grid {
  display: grid;
  gap: var(--e4);
  align-items: center;
  grid-template-columns: 1fr;    /* celular: só o texto */
}

.anel-cena { display: none; }    /* a cena 3D entra só no desktop */

@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; }
  .anel-cena {
    display: flex;
    justify-content: center;
    perspective: 900px;          /* a "câmera": dá profundidade ao palco */
  }
}

/* ---------- A CENA 3D ---------- */
.anel-3d {
  position: relative;
  width: 340px;
  height: 340px;
  transform-style: preserve-3d;  /* filhos vivem em 3D de verdade */
  transition: transform 0.15s ease-out;
}

.camada { position: absolute; inset: 0; }
/* Cada camada mora numa profundidade diferente do palco */
.c1 { transform: translateZ(0px); }
.c2 { transform: translateZ(45px); }
.c3 { transform: translateZ(90px); }

/* O anel do meio gira devagar, sempre */
.gira {
  animation: girar 24s linear infinite;
  transform-origin: center;
}
@keyframes girar {
  to { transform: translateZ(45px) rotate(360deg); }
}

/* ---------- REVELAÇÃO AO ROLAR ----------
   Progressive enhancement: os cartões só começam invisíveis
   se o JS estiver ativo (html.js-on). Sem JS, tudo aparece. */
html.js-on .cartao,
html.js-on #xmti-os figure {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js-on .visivel {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ==========================================================
   LOGO — lockup tipográfico (handoff do Claude Design)
   Fiel ao XMTI Logo Negative.dc.html, escalado p/ o cabeçalho
   ========================================================== */
.logo {
  display: flex;
  align-items: center;
  gap: 14px;                       /* proporção do gap 28px @ 62px */
  text-decoration: none;
}

.logo-marca {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 30px;                 /* 62px no design, escalado p/ header */
  letter-spacing: 0.01em;
  line-height: 0.9;
}
.logo-marca .xm { color: #5FE08A; }   /* variante clara do próprio design */
.logo-marca .ti { color: #F2F6F3; }

.logo-divisor {
  width: 2px;
  align-self: stretch;
  margin: 3px 0;
  background: rgba(242, 246, 243, 0.28);
}

.logo-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: 'Chakra Petch', sans-serif;
}
.logo-sub {
  color: #B7C7BD;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
}
.logo-fone {
  color: #F2F6F3;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.06em;
}

/* Celular: só a marca; assinatura e fone ficam p/ telas maiores */
@media (max-width: 599px) {
  .logo-divisor, .logo-info { display: none; }
}

/* Anel da marca no cabeçalho (casa com a cor do lockup) */
.logo-anel { height: 38px; width: 38px; }

/* A cena da marca flutua suavemente, como se respirasse */
@media (min-width: 960px) {
  .anel-cena { animation: flutuar 7s ease-in-out infinite; }
}
@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* ==========================================================
   IMAGENS DE MARCA — card de segurança e foto do fundador
   ========================================================== */
.seg-intro {
  display: grid;
  gap: var(--e4);
  align-items: center;
  margin-bottom: var(--e4);
}
.seg-figura {
  margin: 0;
  justify-self: center;
}
.seg-figura img {
  max-width: 340px;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  box-shadow: var(--sombra);
}
@media (min-width: 960px) {
  .seg-intro { grid-template-columns: 1.2fr 0.8fr; }
}

.sobre-grid {
  display: grid;
  gap: var(--e4);
  align-items: center;
}
.sobre-foto {
  margin: 0;
  text-align: center;
  justify-self: center;
}
.sobre-foto img {
  max-width: 300px;
  filter: drop-shadow(0 10px 24px rgba(11, 31, 22, 0.18));
}
.sobre-foto figcaption {
  margin-top: var(--e2);
  font-size: 14.5px;
  color: var(--tinta-suave);
}
@media (min-width: 960px) {
  .sobre-grid { grid-template-columns: 0.7fr 1.3fr; }
}

/* ==========================================================
   MOONSTONE — a fonte original da marca, hospedada em casa
   ========================================================== */
@font-face {
  font-family: 'Moonstone';
  src: url('../fonts/moonstone.woff') format('woff'),
       url('../fonts/moonstone.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;   /* mostra texto com a reserva enquanto carrega */
}

/* Lockup atualizado conforme o design: Moonstone, peso normal */
.logo-marca {
  font-family: 'Moonstone', 'Chakra Petch', sans-serif;
  font-weight: normal;
  letter-spacing: 0.02em;
  font-size: 32px;      /* 68px no design @62px de faixa → proporção do header */
}

/* ==========================================================
   PROFUNDIDADE 2.0 — vidro, brilho, contra-rotação e sombra
   ========================================================== */
.anel-cena { position: relative; perspective: 750px; } /* câmera mais perto = mais drama */

/* Alturas do palco (bem mais separadas que antes) */
.l1  { transform: translateZ(0);
       filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.22)); }
.lv  { transform: translateZ(48px); }
.l2  { transform: translateZ(95px);
       animation: girar95 26s linear infinite;
       filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.45)); }
.l2b { transform: translateZ(122px);
       animation: girarRev 34s linear infinite; }
.l3  { transform: translateZ(158px);
       filter: drop-shadow(0 0 18px rgba(95, 224, 138, 0.5))
               drop-shadow(0 8px 12px rgba(0, 0, 0, 0.45)); }

@keyframes girar95  { to { transform: translateZ(95px)  rotate(360deg); } }
@keyframes girarRev { to { transform: translateZ(122px) rotate(-360deg); } }

/* Varredura de radar dentro do vidro */
.varre {
  transform-box: view-box;
  transform-origin: center;
  animation: varrer 7s linear infinite;
}
@keyframes varrer { to { transform: rotate(360deg); } }

/* Sombra no chão: ancora a marca no espaço e pulsa com a flutuação */
.anel-piso {
  position: absolute;
  left: 50%;
  bottom: -34px;
  width: 230px;
  height: 34px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
              rgba(0, 0, 0, 0.45), transparent 70%);
  animation: piso 7s ease-in-out infinite;
}
@keyframes piso {
  0%, 100% { transform: translateX(-50%) scale(1);    opacity: 0.55; }
  50%      { transform: translateX(-50%) scale(0.82); opacity: 0.35; }
}

/* ==========================================================
   LINGUAGEM TECH NO SITE INTEIRO
   vidro, brilho, circuito e profundidade em todas as seções
   ========================================================== */

/* ---------- Texturas de fundo (100% CSS, zero imagens) ---------- */
/* Palcos escuros: grade técnica fina */
#inicio {
  background:
    linear-gradient(rgba(95, 224, 138, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 224, 138, 0.045) 1px, transparent 1px),
    radial-gradient(1000px 500px at 85% -10%, var(--verde-noite-2), transparent),
    var(--verde-noite);
  background-size: 46px 46px, 46px 46px, auto, auto;
}
#contato {
  background:
    linear-gradient(rgba(95, 224, 138, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 224, 138, 0.04) 1px, transparent 1px),
    var(--verde-noite);
  background-size: 46px 46px, 46px 46px, auto;
}
/* Palcos claros: pontilhado de circuito sutil */
#servicos, #sobre {
  background-image: radial-gradient(rgba(21, 128, 61, 0.08) 1px, transparent 1.6px);
  background-size: 28px 28px;
}
#xmti-os {
  background:
    radial-gradient(rgba(21, 128, 61, 0.06) 1px, transparent 1.6px),
    var(--fundo-alt);
  background-size: 28px 28px, auto;
}

/* ---------- Assinatura técnica nos títulos ---------- */
section h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 14px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--verde), var(--verde-vivo));
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.55);
}

/* ---------- Cartões com DNA da cena ---------- */
.cartao { position: relative; overflow: hidden; }
.cartao::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--verde-vivo), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cartao:hover::before { opacity: 1; }
.cartao:hover {
  box-shadow: 0 12px 30px rgba(11, 31, 22, 0.10),
              0 0 22px rgba(34, 197, 94, 0.16);
}

/* ---------- SEGURANÇA: o segundo palco escuro, com vidro ---------- */
#seguranca {
  background:
    linear-gradient(rgba(95, 224, 138, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 224, 138, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, #06281A 0%, #0A3A24 55%, #06281A 100%);
  background-size: 46px 46px, 46px 46px, auto;
}
#seguranca h2 { color: #F2F6F3; }
#seguranca .destaque { color: #B7C7BD; }
#seguranca .destaque strong { color: #5FE08A; }

/* Cartões de vidro: translúcidos, desfocando o fundo */
#seguranca .cartao {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(95, 224, 138, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#seguranca .cartao h3 { color: #EAF6EE; }
#seguranca .cartao p  { color: #B7C7BD; }
#seguranca .cartao:hover {
  border-color: #5FE08A;
  box-shadow: 0 0 26px rgba(34, 197, 94, 0.22);
}
#seguranca .seg-figura img { border-color: rgba(255, 255, 255, 0.15); }

/* ---------- XMTI OS: a vitrine do produto ganha brilho ---------- */
#xmti-os figure {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#xmti-os figure:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(11, 31, 22, 0.14),
              0 0 30px rgba(34, 197, 94, 0.18);
}

/* ---------- Sobre: diferenciais com energia ---------- */
.diferenciais li {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.diferenciais li:hover {
  border-left-color: var(--verde-vivo);
  box-shadow: 0 6px 18px rgba(11, 31, 22, 0.08),
              0 0 16px rgba(34, 197, 94, 0.14);
  transform: translateX(4px);
}

/* ---------- Botão primário: energia própria ---------- */
.botao-primario:hover {
  box-shadow: 0 8px 22px rgba(21, 128, 61, 0.45),
              0 0 26px rgba(34, 197, 94, 0.35);
}

/* ==========================================================
   SELO 3D NO CABEÇALHO — a marca como moeda viva
   ========================================================== */
.logo { perspective: 600px; }             /* a câmera do mini-palco */

.logo-anel {
  height: 46px;
  width: 46px;
  border-radius: 50%;                     /* disco perfeito, estilo ícone de app */
  background: #FFFFFF;
  transform-style: preserve-3d;
  animation: moeda 6s ease-in-out infinite;
  box-shadow:
    0 0 0 2px rgba(95, 224, 138, 0.4),    /* aro de energia */
    0 0 18px rgba(34, 197, 94, 0.4),      /* brilho verde */
    0 4px 10px rgba(0, 0, 0, 0.35);       /* sombra de volume */
}

/* Balanço de moeda suspensa */
@keyframes moeda {
  0%, 100% { transform: rotateY(-16deg); }
  50%      { transform: rotateY(16deg); }
}

/* Ao pousar o mouse: giro completo */
.logo:hover .logo-anel {
  animation: giroCompleto 0.9s ease-in-out;
}
@keyframes giroCompleto {
  to { transform: rotateY(360deg); }
}

/* ==========================================================
   PLACA DE CIRCUITO — fundo 3D do Hero (inspiração aprovada,
   redesenhada em SVG vetorial nos verdes XMTI)
   ========================================================== */
#inicio { position: relative; overflow: hidden; }
#inicio .container { position: relative; z-index: 1; }

.circuito-camada {
  position: absolute;
  inset: -60px;                        /* sobra p/ o deslize da paralaxe */
  background-image: url('../img/circuito-fundo.svg');
  background-size: 600px 600px;
  animation: derivaCircuito 90s linear infinite alternate;
  transition: transform 0.2s ease-out;
  will-change: transform;
}

/* Deriva lenta: a placa "vive" mesmo sem mouse */
@keyframes derivaCircuito {
  from { background-position: 0 0; }
  to   { background-position: 300px 180px; }
}

/* Contato ganha a mesma placa, estática e mais discreta */
#contato {
  background:
    url('../img/circuito-fundo.svg'),
    linear-gradient(rgba(95, 224, 138, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 224, 138, 0.04) 1px, transparent 1px),
    var(--verde-noite);
  background-size: 600px 600px, 46px 46px, 46px 46px, auto;
}

/* ==========================================================
   MARCA 3D NO CELULAR — revisão: a cena acompanha todos
   (flutuação e rotações são CSS/GPU, custo mínimo;
    a inclinação por mouse não existe no toque)
   ========================================================== */
.anel-cena {
  display: flex;                 /* revoga o display:none do mobile */
  justify-content: center;
  perspective: 750px;
  animation: flutuar 7s ease-in-out infinite;
}

@media (max-width: 959px) {
  .anel-cena { margin-top: var(--e4); }
  .anel-3d  { width: 250px; height: 250px; }
  .anel-piso { width: 165px; bottom: -22px; }
}