/* Estilos do site, usados pela home e por /videohub. Tokens em tokens.css. */
@property --ang    { syntax: '<angle>';   initial-value: 0deg; inherits: false; }
@property --n      { syntax: '<integer>'; initial-value: 3;    inherits: false; }
@property --step-c { syntax: '<color>';   initial-value: rgba(228,240,251,0.14); inherits: true; }

/* ——— RESET ——— */
/* NÃO colocar background no seletor html: hoje o fundo escuro está só no body e
   propaga para o canvas da raiz, que é pintado ANTES dos filhos de z-index negativo.
   Com background no html a propagação para e o body cobre as partículas, sem erro. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { display: block; max-width: 100%; }
p, li, figcaption { text-wrap: pretty; }
h1, h2, .prod-name { text-wrap: balance; }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ——— CURSOR (sem rAF: transform + transition) ——— */
#cursor {
  position: fixed; top: 0; left: 0;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.45;
  transform: translate3d(-9999px, -9999px, 0);
  transition: transform 0.18s linear, width 0.2s var(--ease), height 0.2s var(--ease), opacity 0.2s var(--ease);
  will-change: transform;
  margin: -4px 0 0 -4px;
}
body:has(a:hover) #cursor,
body:has(button:hover) #cursor { width: 20px; height: 20px; opacity: 0.2; margin: -10px 0 0 -10px; }

/* ——— FILETE DE PROGRESSO ——— */
.progress {
  position: fixed; inset: 0 0 auto 0;
  height: 2px; z-index: 210;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--ocean), var(--accent));
  pointer-events: none;
}

/* ——— NAV ——— */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 20px var(--page);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: linear-gradient(to bottom, rgba(4,13,24,0.96) 0%, transparent 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: padding 0.3s var(--ease), background 0.3s var(--ease),
              border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
nav.scrolled {
  padding: 13px var(--page);
  background: rgba(4,13,24,0.82);
  border-bottom-color: var(--border);
  box-shadow: 0 8px 30px rgba(0,0,0,0.28);
}
.nav-logo { display: flex; align-items: center; gap: 11px; }
.nav-shield { width: 32px; height: auto; filter: drop-shadow(0 0 10px rgba(0,200,240,0.35)); }
.nav-wordmark {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.1rem; letter-spacing: 0.08em; color: var(--text);
}
.nav-wordmark em { font-style: normal; color: var(--accent); }
.nav-right { display: flex; align-items: center; gap: 36px; margin-left: auto; }
.nav-links { display: flex; align-items: center; gap: 34px; list-style: none; }
.nav-links a, .foot-col a, .prod-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: right bottom;
  transition: background-size 0.42s var(--ease), color 0.25s var(--ease);
}
.nav-links a:hover, .foot-col a:hover, .prod-link:hover {
  background-size: 100% 1px; background-position: left bottom; color: var(--accent);
}
.nav-links a {
  font-size: var(--fs-small); font-weight: 500;
  color: var(--text-2); letter-spacing: 0.03em;
  padding: 10px 0;
}

/* ——— HAMBURGER ——— */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; align-items: center; justify-content: center;
}
.hamburger span {
  display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ——— MENU MOBILE ——— */
#mobile-nav {
  position: fixed; inset: 0; z-index: 190;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0s 0.3s;
}
#mobile-nav.open { opacity: 1; visibility: visible; transition: opacity 0.3s var(--ease); }
#mobile-nav:focus { outline: none; }
.mob-link {
  font-family: var(--f-display); font-weight: 600; font-size: 1.4rem;
  color: var(--text); padding: 14px 24px; min-height: 44px;
  display: flex; align-items: center;
}
.mob-link.mob-cta {
  color: var(--bg); background: linear-gradient(120deg, var(--azure), var(--accent));
  border-radius: 100px; font-size: 1.05rem; margin-bottom: 18px;
}

/* ——— SKIP / SR / FOCUS ——— */
.skip-link {
  position: fixed; top: -120px; left: 16px; z-index: 9999;
  background: var(--accent); color: var(--bg);
  padding: 10px 18px; border-radius: 8px;
  font-family: var(--f-display); font-weight: 600; font-size: 0.9rem;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; outline: 2px solid var(--bg); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ——— HERO (geometria intocada: dela depende a amostragem do escudo) ——— */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  text-align: center;
}
.hero:focus { outline: none; }
#mesh {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: -1;
  opacity: 0.85;
  pointer-events: none;
}
.hero-shield {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  height: 65%; width: auto;
  opacity: 0.09; /* era 0.05: apagada demais para a logo se ler como camada própria */
  pointer-events: none;
  z-index: 0;
}
.hero-radial {
  position: absolute; top: 10%; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(0,200,240,0.055) 0%, transparent 65%);
  pointer-events: none;
}
.hero-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; max-width: 900px;
  padding: 0 var(--page);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center;
}
.hero-frente { width: 100%; display: flex; flex-direction: column; align-items: center; }
h1 {
  width: 100%; margin-bottom: 30px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px;
}
.hl-lead {
  font-family: var(--f-body); font-weight: 300; font-style: italic;
  font-size: clamp(1.05rem, 2.1vw, 1.7rem);
  letter-spacing: 0.06em; color: var(--text); text-transform: lowercase;
  display: inline-flex; align-items: center; gap: 18px; margin: 4px 0;
}
.hl-lead::before, .hl-lead::after {
  content: ''; width: clamp(28px, 6vw, 66px); height: 1px;
  background: linear-gradient(to right, transparent, var(--accent));
}
.hl-lead::after { background: linear-gradient(to left, transparent, var(--accent)); }
.hl-big {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--fs-h1); line-height: 1.04;
  letter-spacing: -0.03em; text-transform: lowercase; color: var(--text);
}
.hl-big em { font-style: normal; color: var(--accent); }
.hl-t { display: inline-block; white-space: pre-wrap; }
/* o gradiente vive no MESMO elemento que carrega o texto (.wi), nunca num ancestral:
   background-clip:text não sobrevive a um descendente transformado. */
.grad .hl-t, .grad .wi {
  background: linear-gradient(120deg, var(--azure) 0%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* H1 que se escreve: translateY com overflow no pai (100% compositor) */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.wi {
  display: inline-block; font-style: inherit;
  transform: translateY(125%);
  transition: transform 0.9s var(--mola-suave);
  transition-delay: calc(var(--i, 0) * 55ms + 220ms);
}
h1.lit .wi { transform: translateY(0); }

.hero-fade { opacity: 0; transform: translateY(12px); transition: opacity 0.7s var(--ease), transform 0.7s var(--mola-suave); }
.loaded .hero-fade { opacity: 1; transform: none; }
.hero .hero-acao.hero-fade { transition-delay: 900ms; }
.hero .home-topo.hero-fade { transition-delay: 1100ms; }
.hero .home-pe.hero-fade { transition-delay: 1300ms; }

/* ——— CAMADAS 3D (lógica em site.js) ———
   O .em-camadas só entra na home e com movimento liberado. O #perto é a camada 4: fica na frente
   do conteúdo e nunca recebe clique.
   O .hero-frente é um plano 3D: cada linha do slogan e o botão ficam numa altura (--z, em px), e
   o scale desfaz o aumento que a altura daria, para nada mudar de tamanho com a cena parada.
   --foco é o FOCO de site.js. O transform do .home-topo vem do JS a cada quadro, então ele não
   pode passar pela transição do .hero-fade.
   O plano gira em torno de um ponto abaixo do meio: mais perto do botão, a perspectiva não anula a
   diagonal dele; mais perto do topo, as linhas de cima balançam menos e não saem pela borda. */
.em-camadas { --foco: 800; }
.em-camadas .hero-frente { transform-origin: 50% 60%; }
.em-camadas .hero-frente, .em-camadas .hero-shield, .em-camadas .home-topo { will-change: transform; }
.em-camadas .hero-radial, .em-camadas .home-pe { will-change: translate; }
.em-camadas .home-topo { transition-property: opacity; }
.em-camadas .hero-frente, .em-camadas .hero-frente h1, .em-camadas .hero-acao { transform-style: preserve-3d; }
.em-camadas .hl-lead { --z: 22; }
.em-camadas .hl-big { --z: 46; }
.em-camadas .selfie-halo { --z: 70; }
@media (max-width: 420px) { /* celular: a margem é curta, e com a altura cheia o texto encostaria na borda */
  .em-camadas .hl-lead { --z: 14; }
  .em-camadas .hl-big { --z: 26; }
  .em-camadas .selfie-halo { --z: 40; }
}
.em-camadas .hl-lead, .em-camadas .hl-big, .em-camadas .selfie-halo {
  transform: translateZ(calc(var(--z) * 1px)) scale(calc(1 - var(--z) / var(--foco)));
}
#perto {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 4;
  pointer-events: none;
}


/* ——— BOTÕES ——— */
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ——— BOTÃO DA BUSCA ———
   A ação principal do site. Três camadas, e só transform e opacity: o site tem UM rAF, e
   ele é das partículas.
     1. aura que respira atrás do botão (.selfie-halo::before)
     2. anel de luz que percorre a borda (.btn-selfie::before, com o miolo por cima)
     3. brilho que atravessa de tempos em tempos (.brilho)
   Com movimento reduzido tudo para no último quadro e o botão segue o elemento mais forte
   da tela. O ciano é o da marca: o violeta e o rosa do totem ficam lá. */
.hero-acao { display: flex; justify-content: center; width: 100%; margin-top: 18px; }
.selfie-halo { position: relative; display: flex; width: min(100%, 380px); isolation: isolate; }
.selfie-halo::before {
  content: ''; position: absolute; inset: -22px -30px; z-index: -1;
  background: radial-gradient(closest-side, rgba(0,200,240,0.5), rgba(0,200,240,0) 100%);
  animation: aura 3.8s ease-in-out infinite;
  translate: var(--aura-x, 0) var(--aura-y, 0); /* vem das CAMADAS 3D, somado à respiração */
  pointer-events: none;
}
@keyframes aura {
  0%, 100% { opacity: 0.45; transform: scale(0.96); }
  50%      { opacity: 1;    transform: scale(1.05); }
}
.selfie-halo .btn-selfie {
  width: 100%; min-height: 66px; padding: 20px 28px;
  font-size: 1.1875rem; border-radius: 14px; isolation: isolate;
  background: var(--azure);
  box-shadow: 0 12px 44px rgba(0,200,240,0.3);
}
.btn-selfie::before {
  content: ''; position: absolute; left: 50%; top: 50%; z-index: -2;
  width: 560px; height: 560px;
  background: conic-gradient(from 0deg,
    rgba(255,255,255,0) 0turn, rgba(255,255,255,0) 0.6turn,
    rgba(191,246,255,0.75) 0.72turn, #fff 0.78turn, rgba(255,255,255,0) 0.86turn);
  transform: translate(-50%, -50%);
  animation: anel 3.8s linear infinite;
}
@keyframes anel { to { transform: translate(-50%, -50%) rotate(360deg); } }
.btn-selfie::after {
  content: ''; position: absolute; inset: 2px; z-index: -1; border-radius: 12px;
  background: linear-gradient(120deg, var(--azure) 0%, var(--accent) 100%);
}
.btn-selfie .brilho {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; z-index: -1;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
  transform: translateX(-160%) skewX(-18deg);
  animation: brilho 5.6s ease-in-out infinite;
}
@keyframes brilho {
  0%, 62% { transform: translateX(-160%) skewX(-18deg); }
  84%, 100% { transform: translateX(460%) skewX(-18deg); }
}
.btn-selfie .rotulo { display: inline-flex; align-items: center; gap: 12px; }
.btn-selfie svg { width: 23px; height: 23px; flex: none; }
.selfie-halo .btn-selfie:hover { box-shadow: 0 14px 56px rgba(0,200,240,0.5); }

/* O convite ao criador: no canto e discreto, para não disputar com a busca, a ação da página. */
.home-topo {
  position: absolute; top: 16px; right: var(--page); z-index: 3;
  max-width: calc(100% - 2 * var(--page));
}
.home-topo .btn-outline {
  min-height: 44px; padding: 10px 18px;
  font-size: var(--fs-micro); background: var(--bg-card);
}

/* A linha discreta do pé da home: a marca e o caminho para o resto do site. */
.home-pe {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2;
  display: flex; justify-content: center; align-items: center; gap: 8px 22px; flex-wrap: wrap;
  padding: 0 var(--page); font-size: var(--fs-micro); color: var(--text-muted);
}
.home-pe a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); transition: color 0.25s var(--ease); }
.home-pe a:hover { color: var(--accent); }
.btn-primary, .btn-outline, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-display); font-weight: 600; font-size: 0.95rem;
  padding: 15px 28px; border-radius: 10px; min-height: 50px;
  position: relative; overflow: hidden;
}
.btn-primary {
  background: linear-gradient(120deg, var(--azure) 0%, var(--accent) 100%);
  color: #041017;
  box-shadow: 0 8px 30px rgba(0,200,240,0.18);
  transition: transform 0.45s var(--mola-firme), box-shadow 0.35s var(--ease);
}
.btn-primary:hover { box-shadow: 0 12px 40px rgba(0,200,240,0.3); }
.btn-outline {
  border: 1px solid var(--border-hover); color: var(--text);
  transition: transform 0.45s var(--mola-firme), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.btn-outline:hover { border-color: var(--accent); background: rgba(0,200,240,0.05); }
.btn-ghost {
  font-size: var(--fs-small); font-weight: 600; padding: 11px 20px; min-height: 44px;
  border: 1px solid var(--border); color: var(--text);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.25s var(--ease);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: rgba(0,200,240,0.05); }
/* seta fantasma: uma sai, outra entra */
.btn-arrow { display: inline-block; position: relative; width: 1em; height: 1em; overflow: hidden; }
.btn-arrow::before, .btn-arrow::after {
  content: '\2192'; position: absolute; left: 0; top: 0;
  transition: transform 0.5s var(--mola-suave);
}
.btn-arrow::after { transform: translateX(-140%); }
.btn-primary:hover .btn-arrow::before,
.btn-outline:hover .btn-arrow::before,
.btn-ghost:hover  .btn-arrow::before { transform: translateX(140%); }
.btn-primary:hover .btn-arrow::after,
.btn-outline:hover .btn-arrow::after,
.btn-ghost:hover  .btn-arrow::after { transform: translateX(0); }

/* ——— SISTEMA DE SEÇÃO ——— */
/* NÃO colocar overflow, contain nem content-visibility em main, .solutions, .about,
   .sec-grid ou .prod-main: mata o position:sticky do trilho e do painel, sem erro nenhum.
   O estouro de -40px do .prod-main cabe dentro do gap de 64px do grid, não vaza da página. */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--page); }
.sec-grid { display: grid; gap: var(--gap-m); }
.sec-rail { display: flex; flex-direction: column; }
.rail-rule { height: 1px; background: var(--rule); transform-origin: left; margin-bottom: 22px; }
.rail-id { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.rail-id .num {
  font-family: var(--f-display); font-weight: 700; font-size: var(--fs-num);
  line-height: 1; color: var(--num-sec); font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}
.rail-id .label {
  font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-muted);
}
.sec-rail h2, .cta-band h2 {
  font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h2);
  line-height: 1.08; letter-spacing: -0.015em; color: var(--text);
}
/* o trilho é uma coluna estreita: com o corpo de --fs-h2 o título quebra em
   cinco linhas de duas palavras. Escala própria, medida em ch coerente com a coluna. */
.sec-rail h2 { font-size: var(--fs-h2-rail); max-width: 17ch; }
.rail-p { font-weight: 300; font-size: var(--fs-body); color: var(--text-2); margin-top: 20px; max-width: 34ch; }

/* ——— SOLUÇÕES ——— */
.solutions { padding-block: var(--gap-xl) var(--gap-l); }
.prod {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(24px, 3.2vw, 44px);
  position: relative; isolation: isolate;
  transition: border-color 0.35s var(--ease);
}
.prod:hover { border-color: var(--border-hover); }
/* borda cônica: desenha só a borda, sem elemento extra */
.prod::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius);
  padding: 1px; pointer-events: none; opacity: 0; z-index: 1;
  background: conic-gradient(from var(--ang), transparent 0turn, var(--accent) 0.06turn, transparent 0.14turn, transparent 1turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity 0.4s var(--ease);
}
.prod:hover::before { opacity: 1; animation: spin 2.6s linear infinite; }
@keyframes spin { to { --ang: 360deg; } }
/* brilho seguindo o cursor, reaproveitando --mx/--my que o pointermove já escreve */
.prod::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius);
  pointer-events: none; opacity: 0; z-index: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(0,200,240,0.07), transparent 60%);
  transition: opacity 0.4s var(--ease);
}
.prod.lit::after { opacity: 1; }
.prod > * { position: relative; z-index: 2; }

.prod-alt { max-width: 780px; padding: clamp(22px, 2.6vw, 34px); margin-top: 28px; }
.prod-name { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-prod); line-height: 1.1; letter-spacing: -0.02em; }
.prod-alt .prod-name { font-size: var(--fs-prod-s); }
.prod-desc { margin-top: 14px; color: var(--text-2); max-width: 46ch; }
.prod-alt .prod-desc { max-width: 50ch; }

/* escada de passos: a corrente que se desenha */
.steps { list-style: none; margin: 34px 0 0; padding: 0 0 0 26px; position: relative; }
.steps::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--rule); transform: scaleY(0); transform-origin: top;
}
.steps li { display: grid; grid-template-columns: 56px 1fr; gap: 4px; padding-block: 22px; position: relative; }
.steps li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); transform: scaleX(0); transform-origin: left; }
.step-num {
  font-family: var(--f-display); font-weight: 600; font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums; color: var(--step-c); line-height: 1.9;
  transition: color 0.5s var(--ease);
}
.step-t { font-family: var(--f-display); font-weight: 600; font-size: 1rem; }
.step-d { font-size: var(--fs-small); color: var(--text-2); max-width: 44ch; grid-column: 2; }

.facts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; }
.facts span { font-weight: 600; font-size: var(--fs-micro); color: var(--text); }
.facts span + span { border-left: 1px solid var(--rule-strong); padding-left: 14px; }
/* na coluna estreita do bloco principal o filete separador fica pendurado no
   começo da linha quebrada: ali os fatos viram lista vertical, com marcador próprio. */
.prod-main .facts { flex-direction: column; align-items: flex-start; gap: 9px; }
.prod-main .facts span { display: flex; align-items: center; gap: 9px; }
.prod-main .facts span::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.prod-main .facts span + span { border-left: none; padding-left: 0; }
.prod-foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 30px; }
.prod-link { font-size: var(--fs-small); color: var(--text-muted); }

/* painel do VideoHub: o vídeo do produto, em retrato 4:5, ao lado dos três passos.
   ⚠️ O quadro continua sendo OBSTÁCULO do canvas de partículas pelo seletor `.mech`.
   Renomear esta classe muda o comportamento das partículas lá embaixo, não só o estilo. */
/* empilhado (celular e tablet), o quadro vem logo depois do botão "Abrir o VideoHub"
   e encostava nele. O respiro só existe aqui: em ≥1180px a figure vira coluna e o
   afastamento passa a ser o gap do grid. */
/* teto de largura no empilhado: sem ele, entre 900 e 1180px o retrato 4:5 assume a
   largura toda e fica MAIS ALTO QUE A TELA (829×1037 num 1024×768), obrigando a rolar
   durante a reprodução. Em celular a largura já é menor que 420, então nada muda lá. */
.mech-fig { margin: 44px 0 0; max-width: 420px; }
.mech {
  position: relative; aspect-ratio: 4 / 5;
  background: var(--bg-card-2); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.mech-video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  display: block; object-fit: cover;
  background: var(--bg-card-2);
}
/* filete por dentro: separa o clipe do fundo sem depender do que o clipe mostra */
.mech::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(228,240,251,0.07);
}
/* rever: entra só quando o clipe termina (e já de saída em movimento reduzido,
   onde nada toca sozinho e o botão é o único caminho para ver) */
.mech-replay {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-display); font-weight: 600; font-size: var(--fs-nano);
  color: var(--text); background: rgba(6,18,32,0.78);
  border: 1px solid var(--border-hover); border-radius: 100px;
  padding: 8px 15px; cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s, color 0.25s var(--ease), border-color 0.25s var(--ease);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.mech.is-fim .mech-replay { opacity: 1; visibility: visible; }
/* no toque o botão cresce para 44px de altura: com dedo, 32px é alvo pequeno.
   No mouse ele fica compacto, que é o que o canto do vídeo pede visualmente. */
@media (hover: none) {
  .mech-replay { min-height: 44px; padding: 8px 18px; }
}
.mech-replay:hover { color: var(--accent); border-color: var(--accent); }
.mech-replay .rp-ico { width: 11px; height: 11px; flex: none; }
/* rede de segurança: clipe ausente, barrado ou corrompido NÃO deixa um retângulo
   vazio no meio da seção. A figure some e o texto fica sozinho, que é um layout válido.
   O refreshCards já ignora rect de largura 0, então o obstáculo sai junto sem artefato. */
.mech-fig.is-erro { display: none; }
/* e a coluna vazia não pode sobrar no lugar: o texto volta a ocupar a largura toda */
@media (min-width: 1180px) {
  .prod-inner:has(.mech-fig.is-erro) { grid-template-columns: 1fr; }
}
.mech-cap { margin-top: 12px; font-size: var(--fs-small); color: var(--text-muted); }

.servicos .prod-alt { margin-top: 0; }

/* ——— SOBRE ——— */
.about { padding-block: var(--gap-l); }
.about .rail-p { max-width: 36ch; font-size: 1.05rem; }
.pillar {
  display: grid; grid-template-columns: 64px 1fr 1.5fr; gap: 40px;
  padding-block: 40px; position: relative; align-items: start;
}
.pillar::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); transform: scaleX(0); transform-origin: left; }
.pillar .p-num { font-family: var(--f-display); font-weight: 600; font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--num-sec); }
.pillar h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; line-height: 1.25; }
.pillar p { font-size: var(--fs-small); color: var(--text-2); max-width: 50ch; }

/* ——— CONTATO ——— */
.cta-band {
  max-width: var(--maxw-cta); margin-inline: auto; padding-inline: var(--page);
  padding-block: var(--gap-xl); text-align: center; position: relative;
  display: flex; flex-direction: column; align-items: center;
}
.cta-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  /* largura travada na viewport: 760px fixos esticavam a página para 575px num
     celular de 390px, jogando a nav e o H1 para fora do corte. */
  width: min(760px, 100vw); height: 520px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse, rgba(0,200,240,0.07) 0%, transparent 65%);
  will-change: transform;
}
.cta-band .rail-id { justify-content: center; margin-bottom: 36px; }
.cta-band h2 { max-width: 18ch; }
.cta-p { margin-top: 26px; font-size: var(--fs-lede); color: var(--text-2); max-width: 46ch; }
.cta-band .cta-row { margin-top: 40px; }
.cta-note { margin-top: 28px; font-size: 0.85rem; color: var(--text-muted); max-width: 52ch; }

/* ——— RODAPÉ ——— */
footer { border-top: 1px solid var(--rule); padding-top: 80px; padding-bottom: 40px; }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand-col { will-change: transform; }
.foot-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.foot-wordmark { font-family: var(--f-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.08em; }
.foot-wordmark em { font-style: normal; color: var(--accent); }
.foot-tagline { font-size: var(--fs-small); color: var(--text-2); max-width: 34ch; }
.foot-col { display: flex; flex-direction: column; }
.foot-col-title {
  font-weight: 600; font-size: var(--fs-nano); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}
.foot-col a { font-size: var(--fs-small); color: var(--text-2); min-height: 44px; display: flex; align-items: center; width: fit-content; }
.foot-bottom {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.foot-copy, .foot-made { font-size: var(--fs-micro); color: var(--text-muted); }

/* ——— HAIRLINE ——— */
.hairline { height: 1px; background: var(--rule); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); margin-inline: var(--page); }
.hairline.in { transform: scaleX(1); }

/* ——— REVEAL (fallback do IntersectionObserver, para quem não tem view()) ——— */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--mola-suave); }
.js .reveal.in { opacity: 1; transform: translateY(0); }
.js .prod, .js .mech { opacity: 0; transition: opacity 0.7s var(--ease); }
.js .prod.in, .js .mech.in { opacity: 1; }
.js .pillar { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--mola-suave); }
.js .pillar.in { opacity: 1; transform: translateY(0); }

/* ——— MOTION DIRIGIDO PELA ROLAGEM ——— */
@keyframes surge   { from { opacity: 0; transform: translateY(30px) scale(0.992); } to { opacity: 1; transform: none; } }
/* .prod e .mech são OBSTÁCULOS do canvas: entram só por opacity, porque um obstáculo
   que se move faz as partículas perseguirem uma parede que anda (refreshCards roda todo frame). */
@keyframes rise-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes grow    { to { transform: scaleX(1); } }
@keyframes grow-y  { to { transform: scaleY(1); } }
@keyframes step-lit{ to { --step-c: #00C8F0; } }
@keyframes float-y { from { transform: translateY(-8%); } to { transform: translateY(8%); } }
@keyframes float-s { from { transform: translateY(-5%); } to { transform: translateY(0); } }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress { animation: grow linear both; animation-timeline: scroll(root); }
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* o fallback por IntersectionObserver sai de cena: view() assume */
    .js .reveal, .js .pillar { opacity: 1; transform: none; transition: none;
      animation: surge linear both; animation-timeline: view(); animation-range: entry 8% cover 34%; }
    .js .pillar { animation-range: entry 12% cover 38%; }
    .js .prod { opacity: 1; transition: none;
      animation: rise-in linear both; animation-timeline: view(); animation-range: entry 8% cover 28%; }

    /* o painel entra por opacity e para por aí: quem conta a história dentro do
       quadro agora é o clipe, que roda no seu próprio tempo e não na rolagem. */
    .js .mech { opacity: 1; transition: none;
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 28%; }

    /* filetes que se desenham: a página se diagrama conforme se rola */
    .rail-rule, .steps li::before, .pillar::before {
      animation: grow linear both; animation-timeline: view(); animation-range: entry 0% entry 45%;
    }
    .steps::before { animation: grow-y linear both; animation-timeline: view(); animation-range: entry 25% cover 65%; }
    /* escalonamento ESPACIAL: o atraso vem da posição real na tela, não de setTimeout */
    .steps li { animation: step-lit linear both; animation-timeline: view(); animation-range: entry 20% cover 50%; }
    .foot-top  { animation: surge linear both; animation-timeline: view(); animation-range: entry 5% entry 60%; }
  }
}

/* parallax: TETO DE DUAS CAMADAS na página inteira, nenhuma delas obstáculo do canvas */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .cta-glow { animation: float-y linear both; animation-timeline: view(); animation-range: cover; }
    .foot-brand-col { animation: float-s linear both; animation-timeline: view(); animation-range: cover; }
  }
}

/* sem animation-timeline (Firefox hoje): o painel entra pelo IntersectionObserver
   (classe .in) e o clipe toca pelo mesmo caminho de sempre, que é JS e não CSS. */
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rail-rule, .steps::before, .steps li::before, .pillar::before { transform: none; }
  }
}
@supports not (animation-timeline: view()) {
  .rail-rule, .steps li::before, .pillar::before { transform: scaleX(1); }
  .steps::before { transform: scaleY(1); }
}

/* ——— RESPONSIVO ——— */
@media (min-width: 1080px) {
  .sec-grid { grid-template-columns: minmax(260px, 340px) 1fr; gap: 64px; align-items: start; }
  .sec-rail { position: sticky; top: calc(var(--nav-h) + 44px); }
}
@media (min-width: 1120px) { .prod-main { margin-left: -40px; } }
@media (min-width: 1180px) {
  .prod-inner { display: grid; grid-template-columns: 1fr 0.85fr; gap: 44px; align-items: start; }
  .mech-fig { position: sticky; top: calc(var(--nav-h) + 64px); margin-top: 0; max-width: none; }
  /* teto de altura: em janela baixa o retrato cede alguns pixels em vez de empurrar
     a coluna para fora da tela. O object-fit: cover do vídeo absorve a diferença. */
  .mech { max-height: calc(100vh - var(--nav-h) - 108px); }
  .mech { max-height: calc(100svh - var(--nav-h) - 108px); }
}

@media (max-width: 900px) {
  .nav-links, .btn-ghost { display: none; }
  .hamburger { display: flex; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .pillar { grid-template-columns: 48px 1fr; gap: 12px 24px; }
  .pillar p { grid-column: 2; }
}

@media (max-width: 640px) {
  .cta-row { flex-direction: column; width: 100%; }
  .cta-row .btn-primary, .cta-row .btn-outline { width: 100%; }
  .steps { padding-left: 18px; }
  .steps li { grid-template-columns: 44px 1fr; }
  .facts { flex-direction: column; align-items: flex-start; gap: 8px; }
  .facts span + span { border-left: none; padding-left: 0; }
  .foot-top { grid-template-columns: 1fr; gap: 32px; }
  .foot-bottom { flex-direction: column; text-align: center; gap: 8px; }
}

/* telas BAIXAS: os dois blocos absolutos do hero voltam ao fluxo, empilhados */
@media (max-height: 800px) {
  .hero {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 36px;
    padding-top: 100px;
    padding-bottom: 110px;
  }
  .hero-center { position: static; transform: none; }
}

@media (hover: none) { #cursor { display: none; } }

/* ——— REDUCED MOTION ——— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    animation-timeline: none !important;
  }
  html { scroll-behavior: auto; }
  /* timeline nula deixa a animação em idle, ou seja, no estado INICIAL.
     Estas regras forçam o estado FINAL: quem pediu menos movimento vê a página pronta. */
  .reveal, .prod, .pillar, .mech, .foot-top, .hero-fade {
    opacity: 1 !important; transform: none !important;
  }
  .rail-rule, .steps li::before, .pillar::before, .hairline { transform: scaleX(1) !important; }
  .steps::before { transform: scaleY(1) !important; }
  /* painel: nada toca sozinho. Fica o pôster parado, com o botão de rever JÁ visível,
     porque em movimento reduzido ele é o único caminho para assistir. */
  .mech-replay { opacity: 1 !important; visibility: visible !important; }
  .step-num { color: var(--accent); }
  h1.lit .wi, .wi { transform: none !important; }
}