/* ============================================================
   pIAzito — Design System
   Paleta extraída da referência (sunset): âmbar × violeta sobre preto
   ============================================================ */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../assets/fonts/bricolage-var.woff2") format("woff2");
  font-weight: 600 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* base / neutros */
  --bg:            #0A0A0C;
  --bg-2:          #0C0B10;
  --surface:       #14121A;
  --surface-2:     #1C1826;
  --text:          #FFFFFF;
  --text-muted:    #A9A2B8;
  --border:        rgba(93, 19, 238, 0.22);
  --border-soft:   rgba(169, 162, 184, 0.12);

  /* quentes — luz */
  --amber:         #FF7A01;
  --amber-soft:    #F5AA5B;
  --orange-burn:   #D16F42;

  /* ênfase de texto (strong/destaque) — trocada do âmbar p/ lilás em 2026-07-13
     (Lucas não curtiu o âmbar). Uma linha muda em TODO o site. */
  --emph:          #C7B8FF;

  /* frios — tech / IA */
  --violet:        #5D13EE;
  --magenta:       #D12DFD;
  --indigo:        #2505E4;

  /* gradientes */
  --grad-cta:      linear-gradient(135deg, #D12DFD 0%, #5D13EE 100%);
  --grad-cosmic:   linear-gradient(90deg, #2505E4 0%, #5D13EE 48%, #D12DFD 100%);
  --grad-ia:       linear-gradient(120deg, #FF7A01 0%, #D12DFD 55%, #5D13EE 100%);

  /* tipografia */
  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* medidas */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 18px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* sem scroll-behavior: smooth — briga com o Lenis (scroll "travado") */
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.05; margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; border-radius: 6px; }

/* ---------- fundo decorativo global (continuidade de paleta) ---------- */
.bg-fx { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
/* sem filter: blur — o radial-gradient já é suave e o blur pesava a composição a cada frame */
.orb { position: absolute; border-radius: 50%; opacity: 0.22; transform: translateZ(0); }
.orb--amber  { width: 52vw; height: 52vw; top: -12vw; right: -8vw; background: radial-gradient(circle, var(--amber) 0%, transparent 68%); opacity: 0.3; }
.orb--violet { width: 58vw; height: 58vw; bottom: -18vw; left: -12vw; background: radial-gradient(circle, var(--violet) 0%, transparent 68%); opacity: 0.36; }

/* grain de filme sutil (estático, compõe uma vez — sem custo por frame) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.05;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background .4s var(--ease), border-color .4s var(--ease);
  /* linha fina sob o nav, como na referência */
  border-bottom: 1px solid rgba(169, 162, 184, 0.10);
}
/* SCROLLED: a barra larga NÃO ganha fundo — quem vira vidro é a cápsula interna
   (ref tailark hero-section-3). A linha some pra a pill flutuar. */
.nav.is-scrolled {
  background: transparent;
  border-bottom-color: transparent;
}
.nav__inner {
  /* estrutura da ref 21st.dev (2026-07-11): logo à ESQUERDA, nav central, ação à direita.
     Header MAIS ESPAÇADO (pedido 2026-07-11): container mais largo + padding menor =
     logo cola na quina esquerda, CTA cola na quina direita */
  position: relative;
  max-width: 1720px; margin: 0 auto; padding: 12px clamp(16px, 2vw, 30px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  border: 1px solid transparent; border-radius: 0;
  /* transições pro estado "scrolled" (encolher + virar cápsula de vidro).
     2026-07-12: junção MAIS LENTA e FLUIDA (.5s → .9s) a pedido do Lucas. */
  transition: max-width .9s var(--ease), padding .9s var(--ease), margin-top .9s var(--ease),
              background .9s var(--ease), border-color .9s var(--ease),
              box-shadow .9s var(--ease), border-radius .9s var(--ease);
}
/* pedido 2026-07-12: depois da 1ª rolada o cabeçalho vira a cápsula de vidro central
   estreita da ref — max-w-6xl→4xl (logo+ação vêm pro meio) + fundo espelhado da flag */
.nav.is-scrolled .nav__inner {
  max-width: 1000px;              /* estreita: as informações do lado vêm pro meio */
  margin-top: 10px;              /* flutua abaixo do topo */
  padding: 8px clamp(12px, 1.2vw, 18px);
  border-radius: 20px;
  /* IGUAL à flag das estatísticas (.hero-card__float): MESMA cor/vidro/espelhamento.
     Só acrescento uma camada escura leve por baixo pra os links não sumirem sobre as
     partes claras do mesh (a flag vive sobre fundo escuro; o header, sobre o mesh). */
  /* 2026-07-12: fundo minimamente MAIS TRANSPARENTE a pedido do Lucas
     (véu escuro 0.42 → 0.30; brilho de vidro levemente reduzido). */
  background:
    linear-gradient(118deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.04) 28%, rgba(255,255,255,0.015) 46%, rgba(210,190,255,0.04) 72%, rgba(255,172,92,0.055) 100%),
    rgba(10, 10, 14, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.20);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -12px 26px rgba(93, 19, 238, 0.06);
}
/* conteúdo (logo/links/botão) acima dos pseudos de vidro/neon */
.nav.is-scrolled .nav__inner > * { position: relative; z-index: 3; }
/* faixa de reflexo tipo espelho IDÊNTICA à da flag (o "espelhado") */
.nav.is-scrolled .nav__inner::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(115deg, transparent 12%, rgba(255,255,255,0.09) 26%, rgba(255,255,255,0.02) 38%, transparent 52%);
}
/* borda NEON animada — MESMA técnica do GlowCard da flag (.hero-card__float::before):
   anel via máscara (padding-box XOR), neon base âmbar→magenta→violeta + spot no ponteiro
   (--lx/--ly/--hue setados no JS), pulsando via neon-pulse; acende mais no hover (.is-lit) */
.nav.is-scrolled .nav__inner::before {
  content: ""; position: absolute; inset: -2px; pointer-events: none; z-index: 2;
  border: 2px solid transparent; border-radius: 22px;
  background-image:
    radial-gradient(
      240px 240px at calc(var(--lx, -500) * 1px) calc(var(--ly, -500) * 1px),
      hsl(var(--hue, 30) 100% 66%), hsl(var(--hue, 30) 95% 60% / 0.5) 45%, transparent 100%
    ),
    linear-gradient(120deg, hsl(28 95% 60% / 0.42), hsl(340 90% 60% / 0.30) 55%, hsl(288 90% 62% / 0.45));
  background-origin: border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  filter: brightness(1.85) drop-shadow(0 0 9px hsl(var(--hue, 30) 92% 60% / 0.45));
  opacity: 0.55;
  /* pulso REMOVIDO (lia como "outline piscando" — Lucas 2026-07-13); borda estática, hover ainda acende */
  transition: opacity 0.45s var(--ease);
}
/* mouse sobre a cápsula = neon a plena força + glow externo (igual ao hero.is-lit da flag) */
.nav.is-scrolled .nav__inner.is-lit::before {
  animation: none; opacity: 1;
  filter: brightness(2.15) drop-shadow(0 0 16px hsl(var(--hue, 30) 95% 62% / 0.8)) drop-shadow(0 0 34px hsl(var(--hue, 30) 90% 58% / 0.35));
}
@media (prefers-reduced-motion: reduce) { .nav.is-scrolled .nav__inner::before { animation: none; } }
/* header mais compacto quando vira cápsula */
.nav.is-scrolled .brand__logo { height: 44px; }
@media (prefers-reduced-motion: reduce) { .nav__inner { transition: none; } }
.brand { display: inline-flex; align-items: center; justify-self: start; }
/* logo lockup completa, PNG puro — SEM sombra/outline nenhum */
.brand__logo {
  height: 58px; width: auto;
  transition: opacity .3s var(--ease);
}
.brand:hover .brand__logo { opacity: 0.9; }
/* nav central em pills (ref 21st.dev): links leves com hover de cápsula */
.nav__links {
  display: flex; gap: clamp(4px, 0.8vw, 10px); justify-self: center;
  font-family: "Montserrat", var(--font-body); font-size: 12.5px; font-weight: 400;
  letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.8);
}
.nav__links a {
  padding: 8px 15px; border-radius: 999px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav__links a:hover { color: #fff; background: rgba(255, 255, 255, 0.10); }
.nav__right { justify-self: end; display: flex; align-items: center; gap: clamp(8px, 1.2vw, 16px); }
.nav__link-solo {
  font-family: "Montserrat", var(--font-body); font-size: 12.5px; font-weight: 400;
  letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.8);
  padding: 8px 15px; border-radius: 999px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav__link-solo:hover { color: #fff; background: rgba(255, 255, 255, 0.10); }

/* CTA do nav de VIDRO (pedido 2026-07-11): pill translúcida como a flag central
   — o filtro gooey foi removido (o threshold de alpha do #goo apaga fundo translúcido).
   Base branca-vidro neutra + backdrop-blur; a seta dá um nudge diagonal no hover */
.nav-cta {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 21px; border-radius: 999px;
  font-family: "Montserrat", var(--font-body); font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 172, 92, 0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 24px rgba(0, 0, 0, 0.26);
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.nav-cta__arrow { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.nav-cta:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 168, 92, 0.48);
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.08) 55%, rgba(255, 172, 92, 0.11) 100%);
}
.nav-cta:hover .nav-cta__arrow { transform: translate(2px, -2px); }

/* ---------- botões ---------- */
/* dimensões/comportamento da ref 21st.dev: pill generosa (px-10 py-4), texto sm,
   hover com SCALE (não translateY) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
  padding: 16px 40px; border-radius: 999px; cursor: pointer; border: 1px solid transparent;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn:hover { transform: scale(1.05); }
.btn:active { transform: scale(0.97); }
.btn--sm { padding: 10px 20px; font-size: 15px; }
.btn__arrow { transition: transform .3s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
/* CTA primária de VIDRO ÂMBAR (pedido 2026-07-11): translúcida na paleta do fundo
   (âmbar → laranja → toque de magenta), como a flag central — não mais o gradiente
   sólido. backdrop-blur deixa o mesh vazar por trás */
.btn--primary {
  position: relative; color: #FFE9CF;
  background: linear-gradient(118deg, rgba(255, 138, 42, 0.24) 0%, rgba(255, 122, 1, 0.13) 42%, rgba(209, 45, 253, 0.10) 100%);
  border: 1px solid rgba(255, 168, 92, 0.42);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 34px rgba(255, 122, 1, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn--primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.22), transparent 45%); opacity: 0; transition: opacity .3s var(--ease);
}
.btn--primary:hover {
  border-color: rgba(255, 180, 110, 0.6);
  background: linear-gradient(118deg, rgba(255, 138, 42, 0.32) 0%, rgba(255, 122, 1, 0.18) 42%, rgba(209, 45, 253, 0.13) 100%);
  box-shadow: 0 16px 44px rgba(255, 122, 1, 0.26);
}
.btn--primary:hover::after { opacity: 1; }
/* outline de vidro (ref 21st.dev): borda branca translúcida grossa + blur; no
   hover a borda esquenta pro âmbar da marca (a ref usava cyan) */
.btn--ghost {
  color: var(--text); background: transparent; font-weight: 500;
  border: 2px solid rgba(255, 255, 255, 0.30);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  border-color: rgba(245, 170, 91, 0.55); background: rgba(255, 255, 255, 0.10);
  color: #FFE9CF;
}
/* botão outline fino do nav (estilo "Contact" da referência) — depois da base .btn pra vencer a cascata */
.btn--outline {
  font-family: "Montserrat", var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  color: #fff; background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 6px;
  padding: 10px 26px;
}
.btn--outline:hover {
  border-color: var(--magenta); background: rgba(209, 45, 253, 0.10);
  transform: translateY(-1px);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; padding-top: clamp(120px, 16vh, 200px); min-height: 100svh;
  display: flex; flex-direction: column;
  /* atmosfera da referência: lavagem quente no alto-direita.
     A lavagem violeta embaixo-esquerda saiu daqui: o radial era cortado na borda
     inferior do hero antes de terminar o fade (degrau visível na esquerda, sobre a
     aurora) — quem faz esse papel é o .orb--violet fixo do fundo global, sem emenda. */
  background:
    radial-gradient(58% 46% at 80% 8%, rgba(255, 122, 1, 0.13) 0%, transparent 64%);
}
/* mesh gradient fluido GLOBAL (WebGL, fixed): o mesmo fundo vivo da primeira
   dobra segue até o fim da página — substitui os orbs estáticos */
.page-mesh {
  position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%;
  pointer-events: none;
}
/* céu estrelado sutil (tile SVG estático) */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cg%3E%3Ccircle cx='34' cy='80' r='1.4' fill='%23fff' opacity='.75'/%3E%3Ccircle cx='150' cy='40' r='1' fill='%23F5AA5B' opacity='.6'/%3E%3Ccircle cx='260' cy='120' r='1.8' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='420' cy='60' r='1.2' fill='%23D12DFD' opacity='.55'/%3E%3Ccircle cx='560' cy='150' r='1' fill='%23fff' opacity='.65'/%3E%3Ccircle cx='640' cy='90' r='1.5' fill='%23F5AA5B' opacity='.5'/%3E%3Ccircle cx='90' cy='260' r='1.1' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='300' cy='300' r='1.5' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='500' cy='340' r='1' fill='%23D12DFD' opacity='.5'/%3E%3Ccircle cx='200' cy='420' r='1.3' fill='%23F5AA5B' opacity='.55'/%3E%3Ccircle cx='620' cy='480' r='1.6' fill='%23fff' opacity='.45'/%3E%3Ccircle cx='400' cy='520' r='1' fill='%23fff' opacity='.6'/%3E%3Ccircle cx='80' cy='560' r='1.5' fill='%23D12DFD' opacity='.4'/%3E%3Ccircle cx='280' cy='640' r='1.1' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='540' cy='600' r='1.3' fill='%23F5AA5B' opacity='.5'/%3E%3Ccircle cx='660' cy='660' r='1' fill='%23fff' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.55;
}
.hero__grid {
  /* mais largo que o --maxw padrão: ancora o texto mais à ESQUERDA da tela
     (2026-07-11: "tudo muito junto/poluído" — grid mais largo + padding esquerdo menor
     empurram a headline pra borda e abrem o vão central pro card respirar) */
  flex: 1; max-width: 1500px; width: 100%; margin: 0 auto; padding: 0 clamp(20px, 3vw, 40px) 40px clamp(12px, 1.4vw, 22px);
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 40px;
  position: relative; z-index: 1; /* acima do céu estrelado */
}
.hero__content { max-width: 680px; margin-top: -17vh; min-width: 0; /* bloco no meio da "área verde" do wireframe do Lucas (2026-07-11); min-width 0 = filho nunca estoura a trilha do grid */
  /* headline a ~70px da borda esquerda em telas grandes (meio da área verde) —
     consome a margem morta que o max-width do grid devolve
     (x = margem_morta + padding 22 + margin ⇒ margin = 50px − margem_morta) */
  margin-left: clamp(-320px, calc(50px - (100vw - 1500px) / 2), 0px);
}

.eyebrow {
  /* label PURA, sem pill/borda/fundo — preferência explícita do Lucas (2026-07-09,
     reafirmada 2026-07-11: "não pedi borda nela"); a ref não manda aqui */
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: #F0A63C;
  margin-bottom: 26px;
}
.eyebrow__spark { color: var(--amber); }

.hero__title {
  /* tipografia da ref 21st.dev (2026-07-11): pesos contrastantes — linha 1 light
     com gradiente animado, linha 2 black pesada */
  font-size: clamp(2.4rem, 5.6vw, 4.5rem); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.06; margin-bottom: 20px; max-width: 15ch;
}
.hero__title-l1 {
  display: block;
  font-weight: 300; font-size: 0.62em; letter-spacing: 0.05em; line-height: 1.15;
  margin-bottom: 0.18em;
  background: linear-gradient(135deg, #ffffff 0%, #F5AA5B 30%, #D12DFD 70%, #ffffff 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: title-grad 8s linear infinite;
}
@keyframes title-grad {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.hero__title-l2 {
  display: block;
  font-weight: 800; letter-spacing: -0.025em;
  text-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
}
@media (prefers-reduced-motion: reduce) { .hero__title-l1 { animation: none; } }
.hero__sub { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--text-muted); max-width: 34ch; margin-bottom: 34px; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- herói visual (PNG alpha, busto olhando pra esquerda) ---------- */
.hero__visual { position: relative; justify-self: center; align-self: end; display: flex; align-items: flex-end; justify-content: center; min-height: 60vh; min-width: 0; max-width: 100%;
  /* wireframe 2026-07-11 ("área vermelha"): robô mais pra DIREITA, totalmente fora
     do card — o translateX negativo anterior foi substituído por deslocamento positivo */
  transform: translateX(clamp(10px, 1.2vw, 26px));
}
.hero__glow {
  position: absolute; inset: 0; z-index: 0;
  /* espelhado junto com o robô; stops encerram bem antes das bordas da caixa (sem retângulo) */
  background:
    radial-gradient(36% 42% at 46% 40%, rgba(255, 122, 1, 0.40) 0%, transparent 64%),
    radial-gradient(42% 52% at 56% 56%, rgba(93, 19, 238, 0.32) 0%, transparent 66%);
}
.hero__orbits {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  overflow: visible;
}
.tw { animation: twinkle 3.4s ease-in-out infinite; }
.tw--2 { animation-duration: 4.6s; animation-delay: 1.2s; }
.tw--3 { animation-duration: 5.4s; animation-delay: 2.1s; }
@keyframes twinkle {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
/* robô celestial ESPELHADO (olha pra esquerda, na direção da headline) +
   gráfico-holograma ancorado na palma (agora à esquerda).
   Desktop usa o asset v3 (2320px: corpo 1800 + 520 de capa, capa à DIREITA);
   a margin-right negativa desconta a capa do fluxo — o corpo fica exatamente
   onde estava e a capa transborda pra fora da tela (overflow-x hidden cobre). */
.robo-rig {
  position: relative; z-index: 1; display: flex; align-items: flex-end;
  --robo-h: min(82vh, 780px);
  margin-right: calc(var(--robo-h) * -0.2833); /* 520/1836 da altura = largura da capa */
}
.robo-rig picture { display: flex; align-items: flex-end; }
.hero__robo {
  /* sem drop-shadow: filtro caro numa PNG grande; o glow + fade já dão a profundidade.
     max-width none no desktop: a capa pode transbordar a trilha (decoração) */
  height: var(--robo-h); width: auto; max-width: none; object-fit: contain;
}
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* camada da capa animada, sobreposta 1:1 sobre o robô (mesma dimensão natural →
   mesmo left/bottom/height = alinhamento pixel-perfect). Só o tecido tem alpha;
   o resto é transparente e mostra o robô estático embaixo. */
.hero__cape {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  pointer-events: none; line-height: 0;
}
.hero__cape-img {
  height: var(--robo-h); width: auto; max-width: none; display: block;
  filter: url(#capeWave); /* feTurbulence + feDisplacementMap animados */
  will-change: transform;
  /* SÓ AS PONTAS SE MOVEM (2026-07-12): rampa direcional ao longo do fluxo do tecido
     (ancoragem no ombro, canto sup-esq → pontas soltas, canto inf-dir). Transparente na
     ancoragem = parada; sólida nas pontas = balança. O corpo do tecido, parado, é mostrado
     pelo robô estático embaixo (1:1 idêntico), sem emenda. */
  /* máscara JUSTA (2026-07-13): corpo do tecido 100% parado; movimento entra só no
     último trecho das fitas (pontas). Rampa curta = transição invisível. */
  -webkit-mask-image: linear-gradient(122deg, transparent 64%, rgba(0,0,0,0.3) 78%, #000 90%);
  mask-image: linear-gradient(122deg, transparent 64%, rgba(0,0,0,0.3) 78%, #000 90%);
}
/* respeita quem pediu menos movimento: capa estática = idêntica ao robô, custo zero */
@media (prefers-reduced-motion: reduce) { .hero__cape-img { filter: none; } }

/* ---------- LED emissivo: brilho neon suave + corrente elétrica fluindo pelas linhas ----------
   Só desktop (o asset robo-led.webp é derivado do v3 2320×1836; alinha 1:1 com .hero__robo e
   .hero__cape). Mobile serve outra composição (m2), então as camadas ficam ocultas lá. */
.hero__led {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  height: var(--robo-h); width: auto; max-width: none; display: block;
  pointer-events: none;
  mix-blend-mode: plus-lighter;   /* soma ao neon já assado = brilho vivo, sem lavar */
  opacity: 0.4;
  /* pulso de CORRENTE (pedido 2026-07-13, "mais chamativo"): batida dupla — sobe rápido,
     cai, eco menor — como pulso elétrico, não respiração uniforme */
  animation: led-pulse 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes led-pulse {
  0%   { opacity: 0.24; }
  12%  { opacity: 0.72; }  /* surto principal */
  26%  { opacity: 0.34; }
  38%  { opacity: 0.58; }  /* eco */
  54%  { opacity: 0.26; }
  100% { opacity: 0.24; }
}
/* a "corrente": faixas claras diagonais viajam pelas linhas (máscara confina ao LED).
   translate no ::before/::after (GPU) em vez de background-position = zero jank no scroll. */
.hero__led-flow {
  position: absolute; left: 0; bottom: 0; z-index: 4;
  height: var(--robo-h); aspect-ratio: 2320 / 1836;
  pointer-events: none; overflow: hidden;
  mix-blend-mode: plus-lighter;
  -webkit-mask: url("../assets/robo-led.webp") left bottom / 100% 100% no-repeat;
  mask: url("../assets/robo-led.webp") left bottom / 100% 100% no-repeat;
}
.hero__led-flow::before {
  content: ""; position: absolute; inset: -60%;
  background: linear-gradient(118deg, transparent 42%, rgba(255,206,130,0.42) 48.4%, rgba(255,243,220,0.92) 50%, rgba(255,206,130,0.42) 51.6%, transparent 58%);
  animation: led-flow 3.8s linear infinite;
  will-change: transform;
}
/* 2ª faixa (eco): mais fina e discreta, meia-fase atrás — leitura de corrente contínua */
.hero__led-flow::after {
  content: ""; position: absolute; inset: -60%;
  background: linear-gradient(118deg, transparent 46.5%, rgba(255,214,150,0.28) 49.4%, rgba(255,236,205,0.55) 50%, rgba(255,214,150,0.28) 50.6%, transparent 53.5%);
  animation: led-flow 3.8s linear infinite;
  animation-delay: -1.9s;
  will-change: transform;
}
@keyframes led-flow { from { transform: translate(38%, 30%); } to { transform: translate(-38%, -30%); } }
@media (prefers-reduced-motion: reduce) {
  .hero__led { animation: none; opacity: 0.3; }
  .hero__led-flow::before, .hero__led-flow::after { animation: none; opacity: 0; }
}
/* fade do corte da cintura: ASSADO no alpha do próprio PNG (rampa nos últimos 20%).
   Não usar overlay CSS de cor sólida aqui — ele mascara os orbs de fundo e cria um retângulo visível. */

/* holograma do gráfico ascendente — flutua sobre a palma aberta;
   filho do rig = herda tilt/parallax de graça (lê como ancorado à mão) */
.hero-chart {
  /* wireframe 2026-07-11 ("área branca"): o gráfico foi mais pra ESQUERDA,
     desacoplado da palma (o robô foi pra direita e o gráfico na contramão) —
     a linha ainda "nasce" da direção da mão, mas vive no vão superior */
  position: absolute; left: -15%; top: -1%; width: 28.7%;
  pointer-events: none; will-change: transform;
}
.hero-chart__svg { width: 100%; height: auto; display: block; overflow: visible; }
/* glow contido no traço (elegância: gradiente no traço, nunca bloom estourado) */
.hero-chart__line { filter: drop-shadow(0 0 7px rgba(255, 122, 1, 0.30)); }
.hero-chart__dot, .hero-chart__tip, .hero-chart__pulse { transform-box: fill-box; transform-origin: center; }
/* o pulso só liga via classe (senão a animation CSS ignora o scale 0 do GSAP na entrada) */
.hero-chart__pulse { opacity: 0; }
.hero-chart.is-on .hero-chart__pulse { animation: chart-pulse 2.6s ease-out infinite; }
@keyframes chart-pulse {
  0%   { transform: scale(1);   opacity: 0.9; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-chart__pulse { animation: none; opacity: 0; }
}

/* ---------- card de vidro com dados (ref editorial-espacial, 2026-07-11) ----------
   Preenche o vão entre o texto e o robô, embaixo da mão. Entrada via GSAP no
   .hero-card (data-hero=5); float idle SÓ no filho .hero-card__float (sem conflito
   de transform). Some abaixo de 1280px — o vão deixa de existir. */
.hero-card {
  /* calibrado no viewport real: termina ANTES do antebraço do robô (x~860 @1536) —
     só a quina desliza atrás do braço; os dados ficam 100% legíveis */
  position: absolute; left: 35%; top: 56%; z-index: 0;
  width: min(330px, 23vw);
  /* escondido via gsap.set no main.js (nunca por CSS — sem JS o conteúdo tem que aparecer) */
}
.hero-card__float {
  position: relative;
  padding: 20px 22px 16px;
  border-radius: 20px;
  /* vidro "espelhado" da referência: base translúcida CLARA + sheen diagonal de reflexo */
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 28%, rgba(255, 255, 255, 0.02) 46%, rgba(210, 190, 255, 0.05) 72%, rgba(255, 172, 92, 0.07) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -14px 30px rgba(93, 19, 238, 0.07);
  animation: card-float 7.5s ease-in-out infinite alternate;
}
/* faixa de reflexo tipo espelho cruzando o vidro (a "luz comprida" da referência) */
.hero-card__float::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 12%, rgba(255, 255, 255, 0.09) 26%, rgba(255, 255, 255, 0.02) 38%, transparent 52%);
}
/* ---- efeito GlowCard (spotlight-card do 21st.dev) reimplementado em vanilla ----
   borda acende num raio ao redor do PONTEIRO (coords fixas na viewport via JS em
   --mx/--my), com matiz viajando do âmbar (esq.) ao magenta/violeta (dir.): --hue.
   Mesma técnica de mask do original: só o ANEL da borda pinta (padding-box × border-box). */
.hero-card__float::before {
  content: ""; position: absolute; inset: -2px; pointer-events: none;
  border: 2px solid transparent; border-radius: 22px;
  /* coords LOCAIS (--lx/--ly setadas no card via JS com getBoundingClientRect) —
     background-attachment: fixed NÃO funciona aqui: o float anima transform no
     ancestral e o fixed degrada pra local, jogando o spot pra fora do anel.
     Camada 1: spot forte no ponteiro. Camada 2: neon base âmbar→magenta SEMPRE
     visível (destaque pedido 2026-07-11), pulsando quando o mouse está fora. */
  background-image:
    radial-gradient(
      360px 360px at calc(var(--lx, -500) * 1px) calc(var(--ly, -500) * 1px),
      hsl(var(--hue, 30) 100% 66%), hsl(var(--hue, 30) 95% 60% / 0.5) 45%, transparent 100%
    ),
    linear-gradient(120deg, hsl(28 95% 60% / 0.42), hsl(340 90% 60% / 0.30) 55%, hsl(288 90% 62% / 0.45));
  background-origin: border-box;
  /* máscara canônica de ANEL (padrão já usado no site): camada branca no padding-box
     XOR camada branca cheia = só a borda pinta */
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  filter: brightness(1.85) drop-shadow(0 0 9px hsl(var(--hue, 30) 92% 60% / 0.45));
  opacity: 0.55;
  /* pulso REMOVIDO (lia como "outline piscando" — Lucas 2026-07-13); borda estática, hover ainda acende */
  transition: opacity 0.45s var(--ease);
}
@keyframes neon-pulse {
  from { opacity: 0.42; }
  to   { opacity: 0.75; }
}
/* mouse no hero = neon a plena força e o pulso dá lugar ao spot interativo,
   com glow externo forte — "reluzente" de verdade (pedido 2026-07-11) */
.hero.is-lit .hero-card__float::before {
  animation: none; opacity: 1;
  filter: brightness(2.15) drop-shadow(0 0 16px hsl(var(--hue, 30) 95% 62% / 0.8)) drop-shadow(0 0 34px hsl(var(--hue, 30) 90% 58% / 0.35));
}
/* e o vidro acende por DENTRO perto do cursor (camada extra sobre o vidro base) */
.hero.is-lit .hero-card__float {
  background:
    radial-gradient(
      240px 240px at calc(var(--lx, -500) * 1px) calc(var(--ly, -500) * 1px),
      hsl(var(--hue, 30) 90% 62% / 0.12), transparent 100%
    ),
    linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 28%, rgba(255, 255, 255, 0.02) 46%, rgba(210, 190, 255, 0.05) 72%, rgba(255, 172, 92, 0.07) 100%);
}
@media (prefers-reduced-motion: reduce) { .hero-card__float::before { animation: none; } }
@keyframes card-float {
  from { transform: translateY(-4px); }
  to   { transform: translateY(5px); }
}
.hero-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.hero-card__tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(245, 170, 91, 0.85);
}
.hero-card__spark { width: 15px; height: 15px; opacity: 0.9; }
/* 2 métricas: grandes e centralizadas (pedido 2026-07-11) */
.hero-card__stats { display: flex; gap: 22px; margin-bottom: 14px; justify-content: center; text-align: center; }
.hero-card__stat { flex: 1; min-width: 0; }
.hero-card__stat strong {
  display: block; font-family: var(--font-display, inherit);
  font-size: clamp(2rem, 2.2vw, 2.6rem); font-weight: 700; line-height: 1;
  letter-spacing: -0.01em; margin-bottom: 7px;
}
.hero-card__stat--hot strong {
  background: linear-gradient(120deg, #FF7A01, #D12DFD);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-card__stat span { display: block; font-size: 11.5px; line-height: 1.35; color: var(--text-muted); }
.hero-card__note { font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.72); margin-bottom: 10px; }
.hero-card__src { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(169, 162, 184, 0.55); }
@media (max-width: 1279px) { .hero-card { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-card__float { animation: none; } }

/* ---------- spotlight que segue o mouse (efeito 21st.dev em vanilla) ---------- */
.hero__spotlight {
  position: absolute; top: 0; left: 0; z-index: 2;
  width: 170px; height: 170px; border-radius: 50%;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle at center, rgba(226, 199, 255, 0.16) 0%, rgba(147, 90, 255, 0.08) 42%, transparent 72%);
  mix-blend-mode: screen;
  transition: opacity .5s var(--ease);
  will-change: transform;
}
.hero.is-lit .hero__spotlight { opacity: 1; }

/* ============================================================
   DIVISOR GALÁXIA / AURORA BOREAL
   Fitas de luz em blur profundo, deriva por transform (composited,
   custo ~zero por frame). Mask nas bordas — nunca cria retângulo.
   ============================================================ */
.aurora {
  position: relative; height: clamp(240px, 36vh, 400px); overflow: hidden;
  /* sobe a fumaça pra DENTRO da primeira dobra, perto do robô (pedido 2026-07-11) —
     a máscara do topo suaviza a entrada e o robô (z-index 1) fica na frente */
  margin-top: clamp(-340px, -26vh, -160px);
  /* esmaece as fitas nas bordas do bloco sem pintar cor por cima do fundo */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
/* estrelas dentro da galáxia */
.aurora::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cg%3E%3Ccircle cx='34' cy='80' r='1.4' fill='%23fff' opacity='.75'/%3E%3Ccircle cx='150' cy='40' r='1' fill='%23F5AA5B' opacity='.6'/%3E%3Ccircle cx='260' cy='120' r='1.8' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='420' cy='60' r='1.2' fill='%23D12DFD' opacity='.55'/%3E%3Ccircle cx='560' cy='150' r='1' fill='%23fff' opacity='.65'/%3E%3Ccircle cx='640' cy='90' r='1.5' fill='%23F5AA5B' opacity='.5'/%3E%3Ccircle cx='90' cy='260' r='1.1' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='300' cy='300' r='1.5' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='500' cy='340' r='1' fill='%23D12DFD' opacity='.5'/%3E%3Ccircle cx='200' cy='420' r='1.3' fill='%23F5AA5B' opacity='.55'/%3E%3Ccircle cx='620' cy='480' r='1.6' fill='%23fff' opacity='.45'/%3E%3Ccircle cx='400' cy='520' r='1' fill='%23fff' opacity='.6'/%3E%3Ccircle cx='80' cy='560' r='1.5' fill='%23D12DFD' opacity='.4'/%3E%3Ccircle cx='280' cy='640' r='1.1' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='540' cy='600' r='1.3' fill='%23F5AA5B' opacity='.5'/%3E%3Ccircle cx='660' cy='660' r='1' fill='%23fff' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.7;
}
/* ondas em S (SVG com gradiente), blur via CSS no elemento inteiro —
   uniforme, sem emendas de filtro SVG, e a camada fica compositada */
.aurora__wave {
  position: absolute; top: 0; left: -6%; width: 112%; height: 100%;
  mix-blend-mode: screen;
  will-change: transform;
  animation: aurora-drift var(--dur, 30s) ease-in-out infinite alternate;
}
.aurora__wave--1 { --dur: 30s; filter: blur(20px); }
.aurora__wave--2 { --dur: 44s; animation-delay: -18s; filter: blur(28px); }
@keyframes aurora-drift {
  /* deriva lateral + respiração de opacidade — junto com o morph do path (SMIL no SVG), lê como fumaça */
  from { transform: translateX(-2.2%); opacity: 0.88; }
  50%  { opacity: 1; }
  to   { transform: translateX(2.2%); opacity: 0.9; }
}

/* ============================================================
   SERVIÇOS
   ============================================================ */
/* mais LARGO que o --maxw padrão + gutter menor: as faixas espalham pra borda da tela
   (pedido 2026-07-12: "muito agrupado no meio, quero mais espaçado") */
.services { position: relative; max-width: 1560px; margin: 0 auto; padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 46px); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(48px, 7vh, 72px); }
/* fonte principal no MESMO design da headline do hero (.hero__title-l2): Bricolage black,
   letter-spacing apertado, text-shadow — e a palavra-marca no gradiente animado do hero */
.section-head h2 {
  font-size: clamp(2.2rem, 4.8vw, 3.5rem); font-weight: 800; letter-spacing: -0.025em;
  margin-bottom: 16px; text-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
}
.section-head__sub { color: var(--text-muted); font-size: 1.15rem; }
/* palavra em gradiente animado, reutilizável (mesmo tratamento da .hero__title-l1) */
.grad-word {
  background: linear-gradient(135deg, #ffffff 0%, #F5AA5B 30%, #D12DFD 70%, #ffffff 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: title-grad 8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .grad-word { animation: none; } }

/* sem hairline na emenda: a aurora funde direto no fundo, sem contorno de "caixa" */

/* faixas editoriais alternadas: 01 texto|arte · 02 arte|texto (wireframe do Lucas) */
.service-rows { display: flex; flex-direction: column; gap: clamp(72px, 11vh, 130px); }

.service-row { display: grid; gap: clamp(40px, 6vw, 100px); align-items: center; }
@media (min-width: 880px) {
  .service-row { grid-template-columns: 1fr 1.08fr; }
  /* galeria 3D do marketing MAIOR: mais área = os posts cortam menos (pedido 2026-07-12) */
  #marketing { grid-template-columns: 1.4fr 0.92fr; }
  .service-row--flip .service-row__text { order: 2; }
  .service-row--flip .service-row__art  { order: 1; }
}

/* mais DESTAQUE (pedido 2026-07-12): gradiente âmbar→magenta no texto, maior e opaco */
.service-row__eyebrow {
  display: inline-block; font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 16px;
  background: var(--grad-ia); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* título do serviço no design do hero (black + letter-spacing apertado) */
.service-row__title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; letter-spacing: -0.025em; margin-bottom: 14px; }
.service-row__desc { color: var(--text-muted); font-size: 1.08rem; max-width: 46ch; margin: 0 0 20px; }
.service-row__points { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.service-row__points li { position: relative; padding-left: 22px; color: var(--text-muted); font-size: 0.99rem; }
.service-row__points li::before {
  content: ""; position: absolute; left: 0; top: 0.52em; width: 10px; height: 2px;
  border-radius: 2px; background: var(--grad-ia);
}
.service-row__cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); transition: color .35s var(--ease); }
.service-row__cta span { transition: transform .35s var(--ease); }
.service-row__cta:hover, .service-row__cta:focus-visible { color: var(--magenta); }
.service-row__cta:hover span, .service-row__cta:focus-visible span { transform: translateX(5px); }

/* painel da arte — moldura escura com glow de canto (sem filter: pesa a composição) */
.service-row__art {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border-soft);
  padding: clamp(16px, 2vw, 26px);
}
.service-row__art::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 82% 12%, rgba(93, 19, 238, 0.16), transparent 70%);
}
.service-row--flip .service-row__art::before {
  background: radial-gradient(60% 55% at 18% 88%, rgba(255, 122, 1, 0.12), transparent 70%);
}
.service-row__art svg { width: 100%; height: auto; display: block; position: relative; }

/* arte 01 — pipeline de automação em CASCATA sobre painel de VIDRO igual à flag das
   estatísticas (pedido 2026-07-12): mesmo vidro/sheen/borda-neon interativa da .hero-card__float. */
.service-row__art--flow {
  overflow: visible; /* deixa o glow da borda neon extravasar, como a flag */
  background:
    linear-gradient(118deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.035) 30%, rgba(255,255,255,0.015) 50%, rgba(210,190,255,0.04) 74%, rgba(255,172,92,0.055) 100%),
    rgba(12, 12, 18, 0.62); /* base escura translúcida pro circuito ter contraste */
  border: 1px solid rgba(255, 255, 255, 0.20);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -14px 30px rgba(93, 19, 238, 0.06);
}
.service-row__art--flow svg { position: relative; z-index: 1; }
/* faixa de reflexo espelho (por baixo do diagrama pra não lavá-lo) */
.service-row__art--flow::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 12%, rgba(255,255,255,0.08) 26%, rgba(255,255,255,0.02) 38%, transparent 52%);
}
/* borda NEON interativa — mesma GlowCard da flag (mask ring + pulse + spot no ponteiro) */
.service-row__art--flow::after {
  content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none;
  border: 1.5px solid transparent; border-radius: inherit;
  background-image:
    radial-gradient(300px 300px at calc(var(--lx, -600) * 1px) calc(var(--ly, -600) * 1px),
      hsl(var(--hue, 30) 100% 66%), hsl(var(--hue, 30) 95% 60% / 0.5) 45%, transparent 100%),
    linear-gradient(120deg, hsl(28 95% 60% / 0.42), hsl(340 90% 60% / 0.30) 55%, hsl(288 90% 62% / 0.45));
  background-origin: border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  filter: brightness(1.85) drop-shadow(0 0 9px hsl(var(--hue, 30) 92% 60% / 0.45));
  opacity: 0.6; /* pulso REMOVIDO (lia como "outline piscando" — Lucas 2026-07-13); borda estática, hover ainda acende */
  transition: opacity 0.45s var(--ease);
}
.service-row__art--flow.is-lit::after {
  animation: none; opacity: 1;
  filter: brightness(2.15) drop-shadow(0 0 16px hsl(var(--hue, 30) 95% 62% / 0.8)) drop-shadow(0 0 34px hsl(var(--hue, 30) 90% 58% / 0.35));
}
@media (prefers-reduced-motion: reduce) { .service-row__art--flow::after { animation: none; } }

/* arte 03 — painel de VIDRO "central de evolução" (educação + updates, pedido 2026-07-12):
   mesmo vidro/sheen/borda-neon interativa da flag e do painel de fluxo */
.service-row__art--learn {
  overflow: visible;
  display: flex; align-items: center;
  background:
    linear-gradient(118deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.035) 30%, rgba(255,255,255,0.015) 50%, rgba(210,190,255,0.04) 74%, rgba(255,172,92,0.055) 100%),
    rgba(12, 12, 18, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.20);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 22px 60px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -14px 30px rgba(93,19,238,0.06);
  padding: clamp(18px, 2.2vw, 28px);
}
.service-row__art--learn::before { /* sheen espelho */
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 12%, rgba(255,255,255,0.08) 26%, rgba(255,255,255,0.02) 38%, transparent 52%);
}
.service-row__art--learn::after { /* borda neon interativa (mask ring + pulse + spot no ponteiro) */
  content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none;
  border: 1.5px solid transparent; border-radius: inherit;
  background-image:
    radial-gradient(300px 300px at calc(var(--lx, -600) * 1px) calc(var(--ly, -600) * 1px),
      hsl(var(--hue, 30) 100% 66%), hsl(var(--hue, 30) 95% 60% / 0.5) 45%, transparent 100%),
    linear-gradient(120deg, hsl(28 95% 60% / 0.42), hsl(340 90% 60% / 0.30) 55%, hsl(288 90% 62% / 0.45));
  background-origin: border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  filter: brightness(1.85) drop-shadow(0 0 9px hsl(var(--hue, 30) 92% 60% / 0.45));
  opacity: 0.6; /* pulso REMOVIDO (lia como "outline piscando" — Lucas 2026-07-13); borda estática, hover ainda acende */
  transition: opacity 0.45s var(--ease);
}
.service-row__art--learn.is-lit::after {
  animation: none; opacity: 1;
  filter: brightness(2.15) drop-shadow(0 0 16px hsl(var(--hue, 30) 95% 62% / 0.8)) drop-shadow(0 0 34px hsl(var(--hue, 30) 90% 58% / 0.35));
}
@media (prefers-reduced-motion: reduce) { .service-row__art--learn::after { animation: none; } }
/* conteúdo do painel de evolução */
.edu-panel { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.edu-panel__head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.edu-panel__ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #FFB870; background: rgba(255, 122, 1, 0.12); border: 1px solid rgba(255, 172, 92, 0.32); flex-shrink: 0; }
.edu-panel__ic svg { width: 22px; height: 22px; }
.edu-panel__title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.edu-panel__sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.edu-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--border-soft); transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); }
.edu-item:hover { border-color: rgba(255, 172, 92, 0.45); background: rgba(255, 255, 255, 0.06); transform: translateX(3px); }
.edu-item__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; color: #fff; background: linear-gradient(135deg, rgba(255, 122, 1, 0.92), rgba(209, 45, 253, 0.85)); }
.edu-item__ic svg { width: 18px; height: 18px; }
.edu-item__body { flex: 1; min-width: 0; }
.edu-item__top { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; flex-wrap: wrap; }
.edu-item__name { font-weight: 600; font-size: 0.98rem; }
.edu-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-soft); color: var(--emph); }
.edu-item__desc { font-size: 0.86rem; color: var(--text-muted); line-height: 1.45; }
.edu-panel__foot { font-size: 12.5px; color: rgba(255, 255, 255, 0.72); text-align: center; margin-top: 4px; }
.edu-panel__foot strong { color: var(--emph); font-weight: 600; }

/* ---- fluxo em LEQUE (ref Meta AI developer, 2026-07-13) ----
   Curvas hairline se desenham quando o painel entra na tela (.fan-go via IO),
   pulsos percorrem os ramos em sequência e o destino acende na chegada.
   Sem filtro de glow — gradiente no traço (elegância contida).
   Timing: ciclo 6.4s; ramo i: pulso parte em 1.2s + i*1.6s, chega ~26% do ciclo. */
.fan-trace {
  fill: none; stroke: url(#flowGrad); stroke-width: 1.7; opacity: 0.85;
  stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100;
}
.fan-go .fan-trace {
  animation: fan-draw 1.1s cubic-bezier(0.55, 0.1, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * 0.18s);
}
@keyframes fan-draw { to { stroke-dashoffset: 0; } }

.fan-spark {
  fill: none; stroke: #FFEBD4; stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 14 98; stroke-dashoffset: 14; opacity: 0;
}
.fan-go .fan-spark {
  animation: fan-run 6.4s linear infinite;
  animation-delay: calc(1.2s + var(--i) * 1.6s);
}
@keyframes fan-run {
  0%   { stroke-dashoffset: 14;   opacity: 0; }
  3%   { opacity: 0.95; }
  22%  { opacity: 0.95; }
  26%  { stroke-dashoffset: -102; opacity: 0; }
  100% { stroke-dashoffset: -102; opacity: 0; }
}

/* destino: quadradinho + label — aparecem depois do desenho, acendem na chegada do pulso */
.fan-end { opacity: 0; }
.fan-go .fan-end {
  animation: fan-in 0.6s var(--ease) forwards;
  animation-delay: calc(0.85s + var(--i) * 0.18s);
}
@keyframes fan-in { to { opacity: 1; } }

.fan-sq {
  fill: rgba(20, 16, 34, 0.7); stroke: url(#flowGrad); stroke-width: 1.5;
  transform-box: fill-box; transform-origin: center;
}
.fan-go .fan-sq {
  animation: fan-hit 6.4s var(--ease) infinite;
  animation-delay: calc(1.2s + var(--i) * 1.6s);
}
@keyframes fan-hit {
  0%, 23% { fill: rgba(20, 16, 34, 0.7); transform: scale(1); }
  26%     { fill: rgba(255, 184, 107, 0.9); transform: scale(1.45); }
  36%     { fill: rgba(20, 16, 34, 0.7); transform: scale(1); }
  100%    { fill: rgba(20, 16, 34, 0.7); transform: scale(1); }
}
.fan-label {
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600;
  letter-spacing: 0.13em; fill: #a29bc0;
}
.fan-go .fan-label {
  animation: fan-lbl 6.4s var(--ease) infinite;
  animation-delay: calc(1.2s + var(--i) * 1.6s);
}
@keyframes fan-lbl {
  0%, 23% { fill: #a29bc0; }
  26%, 31% { fill: #ffffff; }
  40%     { fill: #a29bc0; }
  100%    { fill: #a29bc0; }
}

/* nó de ENTRADA: o cliente (pedido 2026-07-13) — vidro neutro (cliente ≠ marca),
   pulso curto repetindo = mensagem chegando antes de cada distribuição */
.fan-client { opacity: 0; }
.fan-go .fan-client { animation: fan-in 0.6s var(--ease) forwards; animation-delay: 0.2s; }
.fan-client rect { fill: rgba(22, 17, 38, 0.72); stroke: rgba(255, 255, 255, 0.30); stroke-width: 1.3; }
.fan-client text {
  fill: #cfc9e4; font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.03em; text-anchor: middle;
}
.fan-entry-trace {
  fill: none; stroke: rgba(255, 255, 255, 0.30); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 100 100; stroke-dashoffset: 100;
}
.fan-go .fan-entry-trace { animation: fan-draw 0.5s var(--ease) 0.35s forwards; }
.fan-entry-spark {
  fill: none; stroke: #FFEBD4; stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 22 90; stroke-dashoffset: 22; opacity: 0;
}
.fan-go .fan-entry-spark { animation: fan-entry-run 1.6s linear infinite; animation-delay: 0.9s; }
@keyframes fan-entry-run {
  0%   { stroke-dashoffset: 22;   opacity: 0; }
  8%   { opacity: 0.95; }
  30%  { opacity: 0.95; }
  38%  { stroke-dashoffset: -100; opacity: 0; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}

/* nó central: pílula de vidro com respiração sutil */
.fan-pill { opacity: 0; transform-box: fill-box; transform-origin: center; }
.fan-go .fan-pill {
  animation: fan-in 0.6s var(--ease) forwards, fan-breath 4.5s ease-in-out 1s infinite;
}
@keyframes fan-breath { 50% { transform: scale(1.012); } }
.fan-pill rect { fill: rgba(22, 17, 38, 0.88); stroke: url(#flowGrad); stroke-width: 1.6; }
.fan-pill text {
  fill: #fff; font-family: var(--font-body); font-size: 17px; font-weight: 700;
  letter-spacing: 0.02em; text-anchor: middle;
}

@media (prefers-reduced-motion: reduce) {
  .fan-trace { stroke-dashoffset: 0; animation: none !important; }
  .fan-spark { display: none; }
  .fan-end, .fan-pill { opacity: 1; animation: none !important; }
  .fan-sq, .fan-label { animation: none !important; }
}

/* ---- faixa de Automação: layout EDITORIAL (pedido 2026-07-12) ---- */
.service-row--auto { display: block; } /* sai do grid 2-col do .service-row */
.auto-head { max-width: 760px; margin: 0 0 clamp(20px, 3vh, 32px); }
.auto-lead { /* gancho — abre a coluna de texto, colado no resto (pedido 2026-07-12) */
  font-size: clamp(1.14rem, 1.55vw, 1.42rem); line-height: 1.5; color: var(--text);
  margin: 0 0 12px; font-weight: 400;
}
.auto-sub { /* sublinha do gancho: a proposta em uma frase (pedido 2026-07-12) */
  font-size: clamp(1.02rem, 1.25vw, 1.18rem); line-height: 1.55; color: var(--text-muted);
  margin: 0 0 24px;
}
.auto-sub strong { color: var(--emph); font-weight: 600; }
.auto-body { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 60px); align-items: center; margin-bottom: clamp(32px, 5vh, 60px); }
@media (min-width: 900px) { .auto-body { grid-template-columns: 0.92fr 1.2fr; } }
.auto-p { color: var(--text-muted); font-size: 1.06rem; line-height: 1.6; margin: 0 0 20px; max-width: 46ch; }
.auto-p strong { color: var(--text); font-weight: 700; }
.auto-p em { /* verbos de ação — ênfase lilás (unificado com o resto, 2026-07-13) */
  font-style: normal; font-weight: 600; color: var(--emph);
}
/* os 4 "superpoderes" do funcionário digital */
.auto-traits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 26px; max-width: 460px; }
.auto-traits li {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--border-soft);
  font-size: 0.98rem; font-weight: 600; color: var(--text);
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.auto-traits li:hover { border-color: rgba(255, 172, 92, 0.45); background: rgba(255, 255, 255, 0.06); transform: translateY(-2px); }
.auto-traits svg { width: 21px; height: 21px; flex-shrink: 0; color: #FFB870; }
/* chips das ferramentas conectadas */
.auto-tools { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 26px; }
.auto-tools span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft);
  font-size: 0.9rem; color: var(--text-muted); font-weight: 500;
}
.auto-tools span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad-ia); flex-shrink: 0; }
/* kicker do card de controle — discreto, não lê como título (pedido 2026-07-12) */
.auto-punch {
  font-size: 1.02rem; font-weight: 600; line-height: 1.55; color: var(--text);
  margin: 0 0 14px; max-width: 46ch;
}
.auto-punch strong { color: var(--emph); font-weight: 600; }
/* card de controle / transparência — vidro IDÊNTICO à flag das estatísticas do hero
   (.hero-card__float: mesmo gradiente/sheen/borda-neon; pedido 2026-07-12), com base
   escura leve por baixo (como o header cápsula) pra legibilidade sobre o mesh */
.auto-control {
  position: relative;
  display: flex; gap: 14px; align-items: flex-start;
  max-width: 520px; margin: 0; padding: 20px 22px 16px;
  border-radius: 20px;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 28%, rgba(255, 255, 255, 0.02) 46%, rgba(210, 190, 255, 0.05) 72%, rgba(255, 172, 92, 0.07) 100%),
    rgba(12, 12, 18, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -14px 30px rgba(93, 19, 238, 0.07);
}
.auto-control > * { position: relative; z-index: 1; } /* conteúdo acima do sheen */
/* faixa de reflexo tipo espelho (mesma da flag) */
.auto-control::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 12%, rgba(255, 255, 255, 0.09) 26%, rgba(255, 255, 255, 0.02) 38%, transparent 52%);
}
/* borda NEON interativa — mesma GlowCard da flag (mask ring + pulse + spot no ponteiro) */
.auto-control::after {
  content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none;
  border: 1.5px solid transparent; border-radius: inherit;
  background-image:
    radial-gradient(300px 300px at calc(var(--lx, -600) * 1px) calc(var(--ly, -600) * 1px),
      hsl(var(--hue, 30) 100% 66%), hsl(var(--hue, 30) 95% 60% / 0.5) 45%, transparent 100%),
    linear-gradient(120deg, hsl(28 95% 60% / 0.42), hsl(340 90% 60% / 0.30) 55%, hsl(288 90% 62% / 0.45));
  background-origin: border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  filter: brightness(1.85) drop-shadow(0 0 9px hsl(var(--hue, 30) 92% 60% / 0.45));
  opacity: 0.6; /* pulso REMOVIDO (lia como "outline piscando" — Lucas 2026-07-13); borda estática, hover ainda acende */
  transition: opacity 0.45s var(--ease);
}
.auto-control.is-lit::after {
  animation: none; opacity: 1;
  filter: brightness(2.15) drop-shadow(0 0 16px hsl(var(--hue, 30) 95% 62% / 0.8)) drop-shadow(0 0 34px hsl(var(--hue, 30) 90% 58% / 0.35));
}
@media (prefers-reduced-motion: reduce) { .auto-control::after { animation: none; } }
.auto-control__ic {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; color: #FFB870;
  background: rgba(255, 122, 1, 0.12); border: 1px solid rgba(255, 172, 92, 0.32);
}
.auto-control__ic svg { width: 22px; height: 22px; }
.auto-control__body h4 { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; margin: 1px 0 6px; }
.auto-control__body p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; }
.auto-control__body strong { color: var(--emph); font-weight: 600; }
/* fecho: CTA central */
.auto-close { text-align: center; max-width: 780px; margin: 0 auto; }
.auto-cta { justify-content: center; font-size: 1.08rem; }

/* arte 02 — crescimento de marketing (linha que se desenha + chips flutuantes) */
.chart-grid { stroke: rgba(169, 162, 184, 0.09); stroke-width: 1; }
.chart-area { fill: url(#areaGrad); }
.chart-line { fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round; }
.chart-dot { fill: var(--amber); }

/* ---- galeria 3D dos posts flutuando no espaço (marketing, pedido 2026-07-12) ---- */
.mkt-gallery-wrap {
  position: relative; aspect-ratio: 1 / 1;
  background: none; border: none; padding: 0; overflow: visible; box-shadow: none;
}
.mkt-gallery-wrap::before { display: none; } /* mata o radial glow do .service-row__art base */
.mkt-gallery { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; touch-action: pan-y; }
.mkt-gallery__hint {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 2;
  font-size: 11.5px; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42);
  pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
}
.mkt-gallery-wrap.gl-on:hover .mkt-gallery__hint { opacity: 1; }
/* fallback: grid 2×2 dos posts (mobile / sem WebGL) */
.mkt-gallery__fallback {
  position: absolute; inset: 0; z-index: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; place-content: center;
  transition: opacity .4s var(--ease);
}
.mkt-gallery__fallback img,
.mkt-gallery__fallback .mkt-gallery__vid {
  width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border-soft);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.mkt-gallery__fallback .mkt-gallery__vid { display: block; aspect-ratio: 4 / 5; object-fit: cover; background: #0d0d13; }
.mkt-gallery__fallback .mkt-gallery__vid--sq { aspect-ratio: 1 / 1; }
/* display:none (perf 2026-07-13): com opacity:0 as 6 imagens lazy carregavam à toa e os
   2 vídeos tocavam invisíveis pra sempre — duplicando os que o gallery3d cria como textura */
.mkt-gallery-wrap.gl-on .mkt-gallery__fallback { display: none; }
.mkt-gallery-wrap:not(.gl-on) .mkt-gallery { display: none; } /* sem 3D → aparece o grid */
@media (max-width: 900px) {
  .mkt-gallery { display: none; }
  .mkt-gallery-wrap { aspect-ratio: auto; }
  .mkt-gallery__fallback { position: static; }
}
.chart-dot-halo {
  fill: none; stroke: var(--amber); stroke-width: 1.5; opacity: 0.35;
  transform-box: fill-box; transform-origin: center;
  animation: halo-pulse 2.6s var(--ease) infinite;
}
.chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(20, 18, 26, 0.88); border: 1px solid var(--border-soft);
  font-size: 12.5px; font-weight: 500; color: var(--text); white-space: nowrap;
  animation: chip-float 5.4s ease-in-out infinite alternate;
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.chip--1 { top: 13%; left: 7%; }
.chip--2 { top: 38%; right: 6%; animation-duration: 6.2s; animation-delay: 0.8s; }
.chip--2::before { background: var(--magenta); }
.chip--3 { bottom: 12%; left: 10%; animation-duration: 4.8s; animation-delay: 1.6s; }
@keyframes chip-float { from { transform: translateY(4px); } to { transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .flow-pulse, .flow-halo, .chart-dot-halo, .chip { animation: none; }
}

/* ============================================================
   SOBRE
   ============================================================ */
/* padding-bottom curto (2026-07-13): o gap grande até a lâmpada era daqui + do bloco alto da lâmpada */
.about { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(60px, 9vh, 110px) var(--gutter) clamp(10px, 1.6vh, 24px); }
/* ---- container-scroll 3D (ref aceternity container-scroll-animation, pedido 2026-07-12):
   perspective no wrapper; o JS (GSAP scrub) endireita o card rotateX 20°→0° e sobe o título ---- */
.cscroll { position: relative; }
.cscroll__persp { perspective: 1100px; }
.cscroll__head { text-align: center; margin-bottom: clamp(26px, 4vh, 46px); will-change: transform; }
.cscroll__kicker { font-size: clamp(0.98rem, 1.3vw, 1.2rem); color: var(--text-muted); font-weight: 400; margin: 0 0 2px; }
.cscroll__brand { font-size: clamp(2.3rem, 4.4vw, 3.5rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; margin: 0; text-shadow: 0 8px 40px rgba(0, 0, 0, 0.55); }
/* card-tablet quase em tela cheia (pedido 2026-07-12): moldura no VIDRO padrão do site + inner escuro */
.cscroll__card {
  position: relative; max-width: min(1320px, 94vw); margin: 0 auto;
  /* min-height (não altura fixa) — cresce com o conteúdo p/ NÃO cortar a bio (2026-07-13) */
  min-height: clamp(460px, 56vh, 600px);
  border-radius: 30px; padding: clamp(12px, 1.8vw, 24px);
  background:
    linear-gradient(118deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.035) 30%, rgba(255,255,255,0.015) 50%, rgba(210,190,255,0.04) 74%, rgba(255,172,92,0.055) 100%),
    rgba(12, 12, 18, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.20);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -14px 30px rgba(93, 19, 238, 0.06);
  will-change: transform;
}
.cscroll__card::before { /* sheen espelho, sob o conteúdo */
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 12%, rgba(255,255,255,0.08) 26%, rgba(255,255,255,0.02) 38%, transparent 52%);
}
.cscroll__card::after {
  /* borda ESPELHADA na paleta da borda dos posts (âmbar→realce→magenta→violeta),
     mais espelhada + transparente + discreta (pedido Lucas 2026-07-13): sem neon/pulse,
     só um reflexo de vidro que segue o ponteiro de leve. */
  content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none;
  border: 1.5px solid transparent; border-radius: inherit;
  background-image:
    /* realce espelhado (reflexo) que segue o mouse — branco quente, translúcido */
    radial-gradient(360px 360px at calc(var(--lx, -600) * 1px) calc(var(--ly, -600) * 1px),
      rgba(255, 244, 224, 0.85), rgba(255, 226, 180, 0.28) 44%, transparent 100%),
    /* gradiente da paleta dos posts, translúcido, com pico de realce claro (espelho) */
    linear-gradient(122deg,
      rgba(255, 138, 30, 0.22) 0%,
      rgba(255, 234, 205, 0.55) 22%,
      rgba(209, 45, 253, 0.24) 52%,
      rgba(122, 43, 255, 0.26) 78%,
      rgba(61, 30, 158, 0.22) 100%);
  background-origin: border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  filter: brightness(1.15);
  opacity: 0.5; transition: opacity 0.45s var(--ease);
}
.cscroll__card.is-lit::after { opacity: 0.82; } /* acende discreto no hover, sem explodir */
@media (prefers-reduced-motion: reduce) { .cscroll__card::after { animation: none; } }
.cscroll__inner {
  position: relative; z-index: 1; min-height: 100%; border-radius: 18px; overflow: hidden;
  background: rgba(10, 10, 16, 0.45); border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid; place-items: start center; padding: clamp(28px, 5vw, 80px);
}
/* fundo AZUL profundo (pedido 2026-07-13, substitui o paper-shade): noite azul com
   duas auroras discretas + horizonte de luz ciano — CSS puro, zero JS/canvas */
.cscroll__inner--blue {
  background:
    radial-gradient(56% 66% at 16% 18%, rgba(56, 140, 255, 0.30) 0%, transparent 62%),
    radial-gradient(46% 58% at 88% 86%, rgba(0, 191, 255, 0.14) 0%, transparent 65%),
    radial-gradient(80% 100% at 50% 118%, rgba(22, 62, 158, 0.32) 0%, transparent 68%),
    linear-gradient(152deg, #0C1D40 0%, #0A1226 48%, #070B18 100%);
}
/* linha de horizonte: hairline ciano sutil no terço inferior (profundidade, sem bloom) */
.cscroll__inner--blue::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 68%; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(120, 190, 255, 0.35) 30%, rgba(160, 215, 255, 0.5) 50%, rgba(120, 190, 255, 0.35) 70%, transparent);
  pointer-events: none;
}
/* vinheta leve pra sentar o texto (bem mais suave que o scrim do shader) */
.cscroll__inner::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(92% 92% at 50% 50%, transparent 58%, rgba(4, 7, 16, 0.38) 100%);
}
/* apresentação do fundador — layout em GRADE (wireframe Lucas 2026-07-13):
   header no topo (centralizado) · identidade | foto | descrição embaixo */
.founder { position: relative; z-index: 2; max-width: 820px; text-align: center; }
/* layout 2 COLUNAS (wireframe Lucas 2026-07-13): header no topo · esquerda empilhada
   (nome → FOTO → facts) | direita descrição + citação em destaque */
.founder--about {
  max-width: 1180px; width: 100%; min-height: 100%; text-align: left;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  grid-template-areas:
    "header header"
    "left   desc";
  column-gap: clamp(30px, 4vw, 66px);
  row-gap: clamp(22px, 3.5vh, 38px);
  align-items: start;
}
.founder__header { grid-area: header; text-align: center; }
.founder__left {
  grid-area: left; display: flex; flex-direction: column; gap: clamp(16px, 2.4vh, 24px);
}
.founder__desc { grid-area: desc; align-self: start; }
/* foto real do fundador (retrato, fundo azul editorial — casa com o card) */
.founder__img {
  width: 100%; display: block; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 20px; border: 1px solid rgba(150, 185, 255, 0.22);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}
/* citação em destaque — pequena, itálico, aspa decorativa (sem barra lateral, 2026-07-13) */
.founder__quote {
  position: relative; margin: clamp(20px, 3vh, 30px) 0 0; padding: 18px 22px 16px;
  background: rgba(140, 180, 255, 0.05); border: 1px solid rgba(140, 180, 255, 0.14);
  border-radius: 14px;
}
.founder__quote::before {
  content: "\201C"; position: absolute; top: -6px; left: 12px;
  font-family: Georgia, serif; font-size: 3rem; line-height: 1;
  color: var(--emph); opacity: 0.35;
}
.founder__quote p {
  margin: 0 0 10px; font-size: 0.9rem; font-style: italic; line-height: 1.6;
  color: rgba(212, 222, 244, 0.72);
}
.founder__quote-by { display: block; font-style: normal; font-weight: 600; color: var(--emph); font-size: 0.85rem; margin-top: 4px; }
/* BIO como subcard principal (2026-07-13): mesmo design, fonte um pouco maior (conteúdo principal) */
.founder__quote--bio { margin-top: 0; padding: 24px 26px 20px; }
.founder__quote--bio p { font-size: 0.98rem; color: rgba(216, 226, 246, 0.85); margin-bottom: 12px; }
.founder__quote--bio p:last-child { margin-bottom: 0; }
.founder__quote--bio strong { font-style: normal; color: var(--emph); font-weight: 600; }
/* chips ABAIXO do subcard da bio */
.founder__desc .founder__facts { margin: clamp(18px, 2.6vh, 26px) 0; }
/* card do Steve Jobs — frase curta, centrado */
.founder__quote--jobs { margin-top: 0; text-align: center; padding: 22px 24px 16px; }
.founder__quote--jobs::before { left: 50%; transform: translateX(-50%); }
.founder__quote--jobs p { font-size: 1.02rem; color: rgba(220, 228, 246, 0.86); margin-bottom: 8px; }
.founder__kicker {
  font-size: clamp(0.98rem, 1.2vw, 1.14rem); color: rgba(190, 205, 235, 0.78);
  font-weight: 400; margin: 0 0 2px;
}
.founder__brand {
  font-size: clamp(2.6rem, 4.6vw, 3.9rem); font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.02; margin: 0 0 clamp(18px, 3vh, 30px);
  text-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.founder__id { margin-bottom: clamp(22px, 3.4vh, 34px); }
.founder__name { font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; }
.founder__role {
  font-size: 13.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin: 0;
  background: var(--grad-ia); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.founder__bio { color: rgba(212, 222, 244, 0.86); font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.7; margin: 0 0 18px; }
.founder__bio strong { color: var(--emph); font-weight: 600; }
.founder__facts { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; margin-top: clamp(18px, 2.6vh, 26px); }
.founder__facts li {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 17px; border-radius: 999px;
  background: rgba(140, 180, 255, 0.06); border: 1px solid rgba(140, 180, 255, 0.2);
  font-size: 0.95rem; color: rgba(200, 214, 240, 0.85); font-weight: 500;
}
.founder__facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad-ia); flex-shrink: 0; }
@media (max-width: 860px) {
  .cscroll__card { min-height: 0; }
  .founder--about {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "left" "desc";
    row-gap: 26px;
  }
  .founder__header { text-align: center; }
  .founder__left { align-items: center; text-align: center; }
  .founder__facts { justify-content: center; }
  .founder__desc { text-align: left; }
  .founder__img { max-width: 300px; }
}
/* ============================================================
   CONTATO / CTA FINAL
   ============================================================ */
.contact {
  position: relative; padding: clamp(80px, 13vh, 150px) var(--gutter);
  background:
    radial-gradient(46% 60% at 50% 100%, rgba(93, 19, 238, 0.16) 0%, transparent 66%),
    radial-gradient(30% 40% at 78% 20%, rgba(255, 122, 1, 0.07) 0%, transparent 60%);
}
.contact__inner { max-width: 720px; margin: 0 auto; text-align: center; }
/* mesmo tratamento tipográfico do hero (2026-07-13): display pesado, tracking apertado, sombra */
.contact h2 {
  font-size: clamp(2.4rem, 5.2vw, 4.2rem); font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.06; text-shadow: 0 8px 40px rgba(0, 0, 0, 0.55); margin-bottom: 20px;
}
.contact__sub { color: var(--text-muted); font-size: 1.12rem; max-width: 46ch; margin: 0 auto 36px; }
.contact__actions { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.btn--lg { padding: 17px 34px; font-size: 17px; }
/* wrapper do botão magnético (ref 21st.dev, 2026-07-13): recebe o translate do spring;
   o .btn interno mantém o scale de hover. inline-block pra não esticar na coluna flex. */
.magnetic { display: inline-block; will-change: transform; }
.contact__email {
  color: var(--text-muted); font-size: 0.98rem;
  border-bottom: 1px solid var(--border); padding-bottom: 2px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.contact__email:hover { color: var(--text); border-color: var(--magenta); }

/* ---- LÂMPADA (ref Aceternity lamp, 2026-07-13) — vanilla, paleta da marca ----
   Camadas ancoradas na BARRA (bottom do bloco .lamp): brilho acima, núcleo e cone
   volumétrico abaixo, tudo em blend screen sobre o mesh bg. Acende via .lamp-go. */
.contact--lamp { padding-top: 0; overflow: hidden; }
/* bloco da lâmpada mais BAIXO (2026-07-13): sobe a barra + o texto, mata o vazio acima */
.lamp {
  position: relative; height: clamp(120px, 16vh, 172px);
  margin-bottom: clamp(22px, 3.6vh, 40px);
  pointer-events: none;
}
/* a linha de luz */
.lamp__bar {
  position: absolute; left: 50%; bottom: 0; z-index: 3;
  width: min(520px, 72vw); height: 2px; border-radius: 999px;
  transform: translateX(-50%) scaleX(0.42);
  background: linear-gradient(90deg, transparent, #F5AA5B 12%, #E36BFF 50%, #8B4DFF 88%, transparent);
  opacity: 0.4;
  transition: transform 1.05s cubic-bezier(0.3, 0.7, 0.2, 1) 0.15s, opacity 0.9s var(--ease) 0.15s;
}
/* brilho que sobe da linha (a "fonte" da lâmpada) */
.lamp__up {
  position: absolute; left: 50%; bottom: -34px; z-index: 1;
  width: min(420px, 60vw); height: 150px; border-radius: 50%;
  transform: translateX(-50%) scaleX(0.5);
  background: radial-gradient(closest-side, rgba(179, 92, 255, 0.4), transparent 72%);
  filter: blur(34px); mix-blend-mode: screen;
  opacity: 0.35;
  transition: transform 1.05s cubic-bezier(0.3, 0.7, 0.2, 1) 0.15s, opacity 0.9s var(--ease) 0.15s;
}
/* núcleo claro colado na linha */
.lamp__halo {
  position: absolute; left: 50%; bottom: -46px; z-index: 2;
  width: min(260px, 40vw); height: 96px; border-radius: 50%;
  transform: translateX(-50%) scaleX(0.5);
  background: radial-gradient(closest-side, rgba(240, 170, 255, 0.55), transparent 70%);
  filter: blur(24px); mix-blend-mode: screen;
  opacity: 0.4;
  transition: transform 1.05s cubic-bezier(0.3, 0.7, 0.2, 1) 0.2s, opacity 0.9s var(--ease) 0.2s;
}
/* cone volumétrico descendo sobre o título */
.lamp__cone {
  position: absolute; top: 100%; left: 50%; z-index: 1;
  width: min(780px, 94vw); height: min(300px, 40vh);
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(205, 125, 255, 0.30), rgba(150, 80, 255, 0.10) 52%, transparent 84%);
  clip-path: polygon(46% 0, 54% 0, 66% 100%, 34% 100%);
  filter: blur(14px); mix-blend-mode: screen;
  opacity: 0.3;
  transition: clip-path 1.1s cubic-bezier(0.3, 0.7, 0.2, 1) 0.2s, opacity 1s var(--ease) 0.2s;
}
/* aceso */
.lamp-go .lamp__bar  { transform: translateX(-50%) scaleX(1); opacity: 1; }
.lamp-go .lamp__up   { transform: translateX(-50%) scaleX(1); opacity: 0.85; }
.lamp-go .lamp__halo { transform: translateX(-50%) scaleX(1); opacity: 0.8; }
.lamp-go .lamp__cone { clip-path: polygon(33% 0, 67% 0, 96% 100%, 4% 100%); opacity: 0.72; }
@media (prefers-reduced-motion: reduce) {
  .lamp__bar, .lamp__up, .lamp__halo { transform: translateX(-50%) scaleX(1); opacity: 1; transition: none; }
  .lamp__cone { clip-path: polygon(33% 0, 67% 0, 96% 100%, 4% 100%); opacity: 0.72; transition: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--border-soft); padding: clamp(44px, 7vh, 70px) var(--gutter) 36px; }
.footer__inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.footer__logo { height: 88px; width: auto; }
.footer__tagline { color: var(--text-muted); font-size: 0.98rem; margin: 0; }
.footer__nav { display: flex; gap: 28px; font-family: "Montserrat", var(--font-body); font-size: 13px; color: #E9E6F2; }
.footer__nav a { opacity: 0.85; transition: opacity .25s var(--ease); }
.footer__nav a:hover { opacity: 1; }
.footer__copy { color: var(--text-muted); font-size: 0.85rem; margin: 10px 0 0; opacity: 0.75; }

/* ============================================================
   REVEAL (estados iniciais aplicados só via JS -> nunca esconde sem JS)
   will-change fica por conta do GSAP — declarar em tudo pressiona a GPU
   ============================================================ */

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; gap: 8px; }
  .hero__content { max-width: 100%; margin: 0 auto; } /* anula o -7vh do desktop */
  .hero__sub { max-width: 42ch; margin-left: auto; margin-right: auto; }
  .hero__cta { justify-content: center; }
  .eyebrow { margin-top: 8px; max-width: 92vw; text-align: center; line-height: 1.5; }
  .hero__visual { order: 2; min-height: auto; margin-top: 20px; transform: none; }
  /* no empilhado mobile a aurora volta a invadir só de leve (o robô é menor) */
  .aurora { margin-top: clamp(-120px, -10vh, -70px); }
  /* mobile serve o asset corpo-só espelhado (1800w, sem capa): zera a margem.
     width 100% + height auto = box do img SEM letterbox (igual ao desenho) —
     com height fixa o contain deixava faixas vazias e o chart em % do box
     caía longe da palma */
  .robo-rig { margin-right: 0; }
  .hero__robo { max-width: 100%; width: 100%; height: auto; }
  .hero__cape { display: none; } /* composição mobile (m2) é outra; capa é só desktop */
  .hero__led, .hero__led-flow { display: none; } /* LED emissivo alinha só com o v3 desktop */
  /* palma espelhada: left = 100% - 67% - 37% */
  .hero-chart { left: -4%; width: 37%; }
  .nav__links { display: none; }
  .nav__inner { grid-template-columns: auto 1fr; }
  .brand { justify-self: start; }
  .nav__right { justify-self: end; }
  .brand__logo { height: 54px; }
  .chip { font-size: 11.5px; padding: 7px 12px; }
}
@media (max-width: 900px) and (min-width: 0px) {
  .hero__title { max-width: none; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .hero__title { font-size: clamp(1.9rem, 7.6vw, 2.5rem); }
}

/* ---- PRELOADER (pedido Lucas 2026-07-13): logo respirando → FLIP até o nav ---- */
.loader {
  position: fixed; inset: 0; z-index: 200;
  background:
    radial-gradient(46% 38% at 50% 52%, rgba(93, 19, 238, 0.16) 0%, transparent 70%),
    #0A0A0C;
  display: flex; align-items: center; justify-content: center;
}
.loader__logo {
  width: clamp(150px, 22vw, 230px); height: auto;
  animation: loader-breathe 1.7s ease-in-out infinite;
  will-change: transform, opacity;
  transform-origin: center;
}
@keyframes loader-breathe {
  0%, 100% { opacity: 0.5; transform: scale(0.985); }
  50%      { opacity: 1;   transform: scale(1); }
}
.loader.is-flying .loader__logo { animation: none; opacity: 1; }
.loader.is-done { opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease); }
@media (prefers-reduced-motion: reduce) { .loader__logo { animation: none; opacity: 1; } }

/* acessibilidade — respeita quem não quer motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   AJUSTES SÓ SMARTPHONE (pedido Lucas 2026-07-13) — bloco no FIM p/ vencer
   os media queries anteriores. NÃO afeta desktop (≥768px).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* 0) mata o overflow horizontal do mobile (html rolava até ~704px → celular dava zoom-out
     e jogava a logo centralizada pra fora da tela). body já tinha overflow-x hidden; faltava o html. */
  html { overflow-x: clip; }
  .cscroll, .cscroll__persp { max-width: 100%; overflow-x: clip; }

  /* 1) LOGO do topo centralizada (o "Falar" continua à direita) */
  .nav__inner { grid-template-columns: 1fr auto 1fr; }
  .brand { grid-column: 2; justify-self: center; }
  .nav__right { grid-column: 3; justify-self: end; }

  /* 2) HEADLINE = maior destaque; EYEBROW (raio + "Vantagem injusta") mais discreto */
  .hero__title { font-size: clamp(2.4rem, 11.5vw, 3.4rem); line-height: 1.03; }
  .hero__title-l1 { font-size: 0.44em; opacity: 0.9; margin-bottom: 0.1em; }
  .eyebrow { font-size: 10px; letter-spacing: 0.16em; opacity: 0.5; margin-bottom: 12px; }
  .eyebrow__spark { opacity: 0.55; }

  /* 3) GALERIA DE MARKETING = ÓRBITA 3D (ref 21st.dev @shadway 3d-orbit-gallery, 2026-07-13).
     Desktop mantém a galeria Three.js; no celular ela vira o grid — que aqui vira um ANEL 3D
     CSS auto-girando (leve, sem WebGL). Os 8 posts/vídeos orbitam; o verso some (backface). */
  .mkt-gallery-wrap { position: relative; aspect-ratio: auto; height: 300px; overflow: visible; perspective: 1000px; margin: 6px 0 2px; }
  .mkt-gallery__hint { display: none; }
  .mkt-gallery__fallback {
    position: absolute; inset: 0; display: block; margin: 0; padding: 0;
    transform-style: preserve-3d;
    animation: mkt-orbit 30s linear infinite;
  }
  /* especificidade alta (0,2,1) p/ vencer a regra base .mkt-gallery__fallback img/.vid */
  .mkt-gallery-wrap .mkt-gallery__fallback > img,
  .mkt-gallery-wrap .mkt-gallery__fallback > .mkt-gallery__vid {
    position: absolute; top: 50%; left: 50%;
    width: 104px; height: 130px; margin: -65px 0 0 -52px; max-width: none;
    border-radius: 13px; object-fit: cover; aspect-ratio: auto;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
    backface-visibility: hidden;
  }
  .mkt-gallery__fallback > *:nth-child(1) { transform: rotateY(0deg)   translateZ(185px); }
  .mkt-gallery__fallback > *:nth-child(2) { transform: rotateY(45deg)  translateZ(185px); }
  .mkt-gallery__fallback > *:nth-child(3) { transform: rotateY(90deg)  translateZ(185px); }
  .mkt-gallery__fallback > *:nth-child(4) { transform: rotateY(135deg) translateZ(185px); }
  .mkt-gallery__fallback > *:nth-child(5) { transform: rotateY(180deg) translateZ(185px); }
  .mkt-gallery__fallback > *:nth-child(6) { transform: rotateY(225deg) translateZ(185px); }
  .mkt-gallery__fallback > *:nth-child(7) { transform: rotateY(270deg) translateZ(185px); }
  .mkt-gallery__fallback > *:nth-child(8) { transform: rotateY(315deg) translateZ(185px); }
  @keyframes mkt-orbit { from { transform: rotateY(0); } to { transform: rotateY(-360deg); } }
  @media (prefers-reduced-motion: reduce) { .mkt-gallery__fallback { animation: none; } }

  /* ---- PERFORMANCE MOBILE (2026-07-13): celular travava. 3 medidas ---- */

  /* 4) mesh WebGL DESLIGADO no mobile (JS retorna) → gradiente CSS FIXO no lugar.
     Leve, sempre renderiza (mata a "faixa preta que não carregava" do WebGL falhando). */
  .page-mesh {
    background:
      radial-gradient(62% 40% at 20% 10%, rgba(93, 19, 238, 0.32), transparent 62%),
      radial-gradient(56% 42% at 88% 24%, rgba(209, 45, 253, 0.22), transparent 62%),
      radial-gradient(64% 46% at 58% 70%, rgba(122, 43, 255, 0.20), transparent 64%),
      radial-gradient(74% 44% at 46% 102%, rgba(255, 122, 1, 0.11), transparent 66%),
      #0A0A0C;
  }

  /* 5) backdrop-filter (frosted glass) é CARÍSSIMO no mobile — desligar em tudo.
     Recompunha a cada frame sobre o fundo; era o maior vilão do travamento. */
  .nav-cta, .btn, .hero-card__float, .auto-control,
  .service-row__art--flow, .service-row__art--learn, .cscroll__card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* cards que dependiam do frosted ganham fundo sólido p/ seguir legíveis, sem o blur */
  .hero-card__float { background: rgba(17, 15, 27, 0.92) !important; }
  .auto-control,
  .service-row__art--flow, .service-row__art--learn { background: rgba(15, 14, 24, 0.85) !important; }

  /* 6) NAV cápsula: backdrop off também (é fixo → repintava a cada frame de scroll) */
  .nav.is-scrolled .nav__inner {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background: rgba(12, 11, 17, 0.9) !important;
  }

  /* 7) animações CONTÍNUAS decorativas do topo DESLIGADAS no mobile — eram o que travava
     o "carregamento dos elementos" no hero/automação (gradiente de texto, estrelas, aurora,
     pulsos). Design fica estático porém FLUIDO. A entrada (rise) e a galeria seguem animando. */
  .hero__title-l1, .grad-word { animation: none !important; }
  .tw { animation: none !important; }
  .aurora__wave { animation: none !important; }
  .hero-chart.is-on .hero-chart__pulse { animation: none !important; }
  .hero-card__float { animation: none !important; }
  .fan-spark, .fan-sq, .fan-label, .fan-entry-spark { animation: none !important; }

  /* 8) content-visibility: o browser PULA layout/paint das seções abaixo da dobra até
     chegar perto no scroll → corta o custo de render inicial da página longa (o jank do
     "carregamento"). contain-intrinsic-size reserva o espaço (sem salto de scroll). */
  .services, .contact, .footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 1400px;
  }
}