@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   Takeun — Site institucional
   ========================================================================== */

:root {
  /* Grotesca geométrica de traço aberto para títulos; Inter no corpo. */
  --font-heading: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fundo quase preto: as seções ganham cor pelos halos, não pela base. */
  --bg-0: #060709;
  --bg-1: #0b0d11;
  --ink-0: #ffffff;
  --ink-1: #b8bfcc;
  --ink-2: #6f7885;

  --accent: #5b8cff;
  --accent-2: #7ee0d0;

  --glass-fill: rgba(255, 255, 255, 0.04);
  --glass-fill-strong: rgba(255, 255, 255, 0.09);
  --glass-border: rgba(255, 255, 255, 0.22);
  --glass-blur: 7px;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Largura dinâmica e expansiva para monitores 16:9, Ultrawide e 4K */
  --container: min(1520px, 94vw);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--ink-0);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* textura sutil de ruído sobre o fundo sólido */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* Classes utilitárias para alternar textos exclusivos do Mobile / Desktop */
.mobile-only {
  display: none !important;
}

.desktop-only {
  display: inline !important;
}

p.desktop-only,
div.desktop-only,
h1.desktop-only,
h2.desktop-only,
h3.desktop-only {
  display: block !important;
}

@media (max-width: 768px) {
  .mobile-only {
    display: inline !important;
  }

  p.mobile-only,
  div.mobile-only,
  h1.mobile-only,
  h2.mobile-only,
  h3.mobile-only {
    display: block !important;
  }

  .desktop-only {
    display: none !important;
  }
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(24px, 3.5vw, 64px);
}

.container.narrow {
  max-width: min(1080px, 88vw);
}
h1,
h2,
h3,
h4,
.logo,
.btn,
.step-num,
.pillar-index,
.tech-section-title {
  font-family: var(--font-heading);
}

/* Títulos grandes e leves: peso baixo em corpo alto é o que dá o ar
   editorial das referências, em vez de negrito pesado. */
h1,
h2,
h3 {
  font-weight: 500;
  letter-spacing: -0.035em;
  margin: 0;
}

h1 {
  font-size: clamp(3rem, 7.5vw, 6.5rem);
  line-height: 0.98;
}

h2 {
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  line-height: 1.02;
}

h3 {
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

p {
  color: var(--ink-1);
  margin: 0;
  font-family: var(--font-body);
}

a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   HALOS DE SEÇÃO — cada bloco tem sua própria cor esmaecida ao fundo
   ========================================================================== */

/* Sem isolation:isolate: ele criaria um contexto de empilhamento por
   seção, prendendo cada halo (z-index:-1) dentro dos próprios limites.
   Os halos precisam extravasar para se sobreporem nas fronteiras. */
.section,
.tech-marquee-section {
  position: relative;
}

/* Halo de luz potente e vibrante — sem névoa, cortando a escuridão com nitidez */
.section::before {
  content: "";
  position: absolute;
  top: -80px;
  bottom: -80px;
  left: 50%;
  width: min(1100px, 95vw);
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 40% at 50% 50%,
      var(--hue, rgba(91, 140, 255, 0.16)) 0%,
      var(--hue, rgba(91, 140, 255, 0.05)) 25%,
      transparent 60%);
  filter: blur(28px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
}

/* Halo exclusivo da faixa de tecnologias */
.tech-marquee-section::before {
  content: "";
  position: absolute;
  top: -70px;
  bottom: -70px;
  left: 50%;
  width: min(1100px, 95vw);
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 40% at 50% 50%,
      rgba(91, 140, 255, 0.80) 0%,
      rgba(126, 224, 208, 0.40) 25%,
      transparent 60%);
  filter: blur(30px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
}

/* Desativado para manter o centro da Hero Section em preto profundo (#060709) e sem manchas */
.hero::before {
  display: none !important;
}

/* Uma cor por seção, esmaecida. Intensidades ORIGINAIS preservadas — o que
   escurece o fundo é o encurtamento da cauda do gradiente em .section::before,
   não a redução destes valores. */
.problem {
  --hue: rgba(91, 140, 255, 0.16);
}

.solutions {
  --hue: rgba(126, 224, 208, 0.14);
}

.offer {
  --hue: rgba(255, 138, 76, 0.14);
}

.method {
  --hue: rgba(150, 120, 255, 0.15);
}

.about {
  --hue: rgba(91, 140, 255, 0.12);
}

.differentiators {
  --hue: rgba(126, 224, 208, 0.13);
}

.final-cta {
  --hue: rgba(255, 138, 76, 0.16);
}

.contact {
  --hue: rgba(91, 140, 255, 0.15);
}

.related {
  --hue: rgba(150, 120, 255, 0.12);
}

/* ==========================================================================
   GLASSMORPHISM — vidro grosso esbranquiçado
   ========================================================================== */

.glass-card,
.glass-panel {
  position: relative;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.045) 0%,
      rgba(255, 255, 255, 0.015) 50%,
      rgba(255, 255, 255, 0.025) 100%);
  backdrop-filter: blur(9px) saturate(150%);
  -webkit-backdrop-filter: blur(9px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 12px 32px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease),
    background 0.4s var(--ease);
}

/* Borda luminosa: um gradiente recortado em anel contorna a peça e
   concentra luz no canto superior esquerdo, como vidro real sob luz. */
.glass-card::before,
.glass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0.18) 22%,
      rgba(255, 255, 255, 0.05) 45%,
      rgba(126, 224, 208, 0.22) 72%,
      rgba(255, 255, 255, 0.5) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.5s var(--ease);
}

/* PERFORMANCE — camada de reflexo REMOVIDA daqui.
   Existia um ::after em todos os .glass-card/.glass-panel (~20 elementos),
   cada um com dois gradientes radiais e mix-blend-mode:screen, que força um
   contexto de composição próprio por elemento. Só os pilares recebem --mx/--my
   do JS, então nos demais essa camada nunca era usada — e, mesmo nos pilares,
   ela era sobrescrita pelo .pillar-card::after definido mais adiante (o
   gradiente diagonal do vidro). O ponto de luz que segue o cursor é desenhado
   pelo elemento <span class="pillar-light">, que continua intacto. */

@media (hover: hover) and (pointer: fine) {
  /* A regra .pillar-card:hover::after { opacity } foi removida: o ::after do
     cartão de pilar agora é apenas o reflexo diagonal fixo do vidro (definido
     adiante), que deve ficar sempre visível — não é mais o ponto de luz do
     cursor. Esse ponto vive no elemento .pillar-light. */

  .glass-card:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      inset 1px 0 0 rgba(255, 255, 255, 0.22),
      inset 0 -18px 30px -22px rgba(0, 0, 0, 0.7),
      0 16px 40px rgba(0, 0, 0, 0.35);
  }
}

/* ==========================================================================
   EFEITOS DE TÓPICOS & CARDS
   ========================================================================== */

.glass-card {
  isolation: isolate;
}

/* Brilho sutil discreto atrás dos cards de tópicos */
.glass-card::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 25%;
  right: 25%;
  height: 35%;
  background: radial-gradient(ellipse at top,
      var(--card-portal-color, rgba(91, 140, 255, 0.25)) 0%,
      transparent 70%);
  filter: blur(18px);
  border-radius: 50%;
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.glass-card:hover::before {
  opacity: 0.65;
  transform: scale(1.08);
}

/* sem tilt, o card ainda sobe no hover */
.glass-card:not([data-tilt]):hover {
  transform: translateY(-4px);
}

.glass-panel {
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 64px);
}

/* ==========================================================================
   HEADER MINIMALISTA — só logo e CTA; a navegação vive na dotnav lateral
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 22px 0;
  /* A borda já existe no estado inicial, porém transparente: assim ela ganha
     opacidade progressivamente em vez de surgir do nada (era o que criava a
     linha dura e o aspecto de "corte" ao rolar). */
  border-bottom: 1px solid transparent;
  background-color: rgba(6, 7, 9, 0);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);

  /* O vidro (backdrop-filter) NÃO fica aqui: no topo da página ele
     desfocaria a luz do hero e criaria uma faixa de textura diferente
     atrás da barra, mesmo com o fundo transparente. Ele vive no ::before
     abaixo, cuja OPACIDADE é animada — assim o desfoque some por completo
     no topo e aparece ao rolar, sem precisar animar o próprio filtro
     (que é caro e causava o atraso do efeito). */
  transition:
    padding 0.32s var(--ease),
    background-color 0.32s var(--ease),
    border-color 0.32s var(--ease),
    box-shadow 0.32s var(--ease);
}

/* Camada de vidro da barra: existe sempre, mas invisível (opacity 0) no topo.
   Animar opacity é barato e não recalcula o desfoque a cada passo. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  /* No topo o filtro fica DESLIGADO (none), não apenas invisível: alguns
     navegadores ainda aplicam backdrop-filter em elementos com opacity 0,
     o que deixaria a faixa de textura sobre o hero. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0;
  transition: opacity 0.32s var(--ease);
  pointer-events: none;
  z-index: 0;
}

.site-header.scrolled::before {
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  opacity: 1;
}

/* conteúdo acima da camada de vidro */
.site-header .header-inner {
  position: relative;
  z-index: 1;
}

.site-header.scrolled {
  padding: 12px 0;
  /* o backdrop-filter fica na regra base (constante); aqui só a opacidade do
     fundo muda, e é ela que revela o efeito de vidro */
  background-color: rgba(6, 7, 9, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  /* sombra difusa dá profundidade: a barra passa a flutuar sobre o conteúdo */
  box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.7);
}

/* Degradê na base da barra: dissolve o limite inferior no conteúdo, para a
   transição não ser uma linha reta. Fica atrás do conteúdo do header. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 24px;
  background: linear-gradient(180deg, rgba(6, 7, 9, 0.5) 0%, transparent 100%);
  opacity: 0;
  /* MESMA duração da barra (0.32s). Antes eram 0.4s aqui e outro tempo na
     barra: os dois terminavam em momentos diferentes e o olho percebia
     "duas animações" desencontradas no mesmo elemento. */
  transition: opacity 0.32s var(--ease);
  pointer-events: none;
}

.site-header.scrolled::after {
  opacity: 1;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-family: var(--font-heading);
}

/* links centrais do cabeçalho */
.top-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 0.92rem;
  color: var(--ink-1);
}

.top-nav a {
  position: relative;
  padding: 6px 0;
  transition: color 0.25s var(--ease);
}

.top-nav a:hover {
  color: var(--ink-0);
}

/* sublinhado que cresce da esquerda no hover */
.top-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.top-nav a:hover::after {
  transform: scaleX(1);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-cta {
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-0);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* 'all' fazia o navegador vigiar TODAS as propriedades — inclusive o
     backdrop-filter, que é caríssimo de animar. Como este botão vive dentro
     do header (que muda de padding ao rolar), era mais uma animação
     disparando junto e somando à sensação de efeito duplicado. */
  transition: background 0.25s var(--ease),
              border-color 0.25s var(--ease),
              transform 0.25s var(--ease);
}

.nav-cta:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--ink-0);
  border-radius: 2px;
}

/* ==========================================================================
   DOTNAV — navegação vertical fixa à direita, em checkpoints
   ========================================================================== */

/* Eixo único: --axis é a distância da borda direita até o CENTRO dos
   pontos. Trilho, progresso e pontos são todos centrados nesse eixo,
   garantindo alinhamento perfeito. Os itens têm espaçamento fixo
   (--gap), então a linha liga o primeiro ao último ponto exatamente. */
.dotnav {
  --axis: 8px;
  /* centro dos pontos, a partir da direita */
  --gap: 30px;
  /* distância entre centros de pontos consecutivos */
  --dot: 10px;
  /* diâmetro do ponto */
  position: fixed;
  top: 50%;
  right: clamp(24px, 2.5vw, 48px);
  transform: translateY(-50%);
  z-index: 90;
}

/* trilho: vai do centro do 1º ponto ao centro do último.
   top/bottom = metade de um ponto, para começar e terminar no centro. */
.dotnav-line {
  position: absolute;
  right: calc(var(--axis) - 0.5px);
  top: calc(var(--dot) / 2);
  bottom: calc(var(--dot) / 2);
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.dotnav-progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--dot-progress, 0%);
  background: linear-gradient(to bottom, var(--accent), var(--accent-2));
  box-shadow: 0 0 8px rgba(126, 224, 208, 0.5);
  transition: height 0.15s linear;
}

.dotnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) - var(--dot));
  /* gap entre CENTROS = var(--gap) */
  position: relative;
}

/* cada item ocupa a linha inteira; o ponto fica ancorado no eixo */
.dotnav-item {
  position: relative;
  display: block;
  height: var(--dot);
  cursor: pointer;
}

/* o checkpoint: centrado exatamente sobre o eixo */
.dot {
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--dot);
  height: var(--dot);
  transform: translate(calc(0.5px), -50%);
  border-radius: 50%;
  background: var(--bg-0);
  border: 1px solid rgba(255, 255, 255, 0.32);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

/* o centro do ponto (5px) precisa cair sobre --axis (8px da direita).
   right:0 + metade do ponto = 5px; ajustamos com uma margem. */
.dotnav-item .dot {
  right: calc(var(--axis) - var(--dot) / 2);
}

.dotnav-item:hover .dot {
  border-color: var(--accent-2);
}

/* rótulo à esquerda do ponto, posicionado sem afetar o eixo */
.dotnav-label {
  position: absolute;
  top: 50%;
  right: calc(var(--axis) + var(--dot));
  transform: translateY(-50%) translateX(8px);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--ink-1);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), color 0.3s var(--ease);
  pointer-events: none;
}

.dotnav-item:hover .dotnav-label,
.dotnav-item.active .dotnav-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.dotnav-item.active .dotnav-label {
  color: var(--ink-0);
}

/* Cor do ponto interpolada ao longo do trilho: --dot-hue é definido por
   item no JS (azul no topo → ciano na base), casando com o gradiente. */
.dotnav-item {
  --dot-hue: var(--accent);
}

/* já percorrido: preenchido no tom do gradiente daquele ponto */
.dotnav-item.passed .dot,
.dotnav-item.active .dot {
  border-color: var(--dot-hue);
  background: var(--dot-hue);
}

/* ativo: mesmo preenchimento + halo suave e anel pulsante */
.dotnav-item.active .dot {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot-hue) 22%, transparent),
    0 0 10px color-mix(in srgb, var(--dot-hue) 60%, transparent);
}

.dotnav-item.active .dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--dot-hue);
  opacity: 0;
  animation: dotPulse 2s ease-out infinite;
}

@keyframes dotPulse {
  0% {
    opacity: 0.6;
    transform: scale(0.8);
  }

  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

/* --- menu completo (mobile) --- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(6, 7, 9, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu a {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--ink-1);
  transition: color 0.25s;
}

.mobile-menu a:hover {
  color: var(--ink-0);
}

/* ==========================================================================
   HERO — tipografia em escala máxima, texto mínimo
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* Padding reduzido: o anterior (até 180px + 130px) consumia 310px da altura
     útil e empurrava a descrição e os pilares para fora da primeira tela. */
  /* O padding superior desce o bloco de texto para que o rótulo
     ("Tecnologia aplicada a negócios") fique na MESMA altura do rótulo das
     páginas de pilar — medido: eyebrow da home a 100px e do pilar a 130px,
     daí os +30px. Isso também empurra o botão para baixo da dobra. */
  padding: clamp(130px, 15vh, 175px) 0 clamp(28px, 4vh, 48px);
  text-align: left;
  overflow: visible;
}

/* ==========================================================================
   ARTE DE LUZ DA HERO SECTION — COMPOSIÇÃO DE DESIGNER & PINTOR GRÁFICO
   ========================================================================== */

.hero-art-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -280px;
  pointer-events: none;
  z-index: -1;
  overflow: visible;
  mix-blend-mode: screen;
}

.pillar-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  padding-top: clamp(115px, 14vh, 135px);
  padding-bottom: clamp(60px, 8vh, 90px);
  overflow: visible;
}

.pillar-hero .hero-art-background {
  bottom: -240px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.95) 60%, rgba(0, 0, 0, 0.5) 88%, rgba(0, 0, 0, 0.2) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.95) 60%, rgba(0, 0, 0, 0.5) 88%, rgba(0, 0, 0, 0.2) 100%);
}

/* PERFORMANCE — não altera nada visualmente.
   will-change foi REMOVIDO: ele fazia sentido quando os blobs eram animados,
   mas hoje estão congelados (transform fixo). Mantê-lo reserva memória de GPU
   para uma animação que não existe mais, em 5 elementos grandes e desfocados.
   backface-visibility permanece: ajuda o navegador a rasterizar o blur uma
   única vez, sem custo de camada dedicada. */
.hero-art-background .hero-glow-blob {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Blob 1: Superior Esquerdo — Trazido mais para o meio com alta intensidade */
.hero-art-background .blob-1 {
  position: absolute;
  top: -10px;
  left: 2%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
      rgba(99, 102, 241, 1) 0%,
      rgba(124, 58, 237, 0.78) 30%,
      rgba(0, 242, 254, 0.40) 52%,
      transparent 72%);
  /* PERFORMANCE: blur reduzido (34px→24px). O gradiente já desbota para
     transparent, então boa parte do desfoque era redundante — a aparência
     se mantém e o custo por quadro cai bastante. */
  filter: blur(24px);
  animation: blobFloat1 14s ease-in-out infinite alternate;
}

/* Blob 2: Superior Direito — Trazido mais para o meio com cor quente vibrante */
.hero-art-background .blob-2 {
  position: absolute;
  top: -20px;
  right: 2%;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
      rgba(255, 94, 58, 1) 0%,
      rgba(255, 42, 109, 0.78) 32%,
      rgba(255, 185, 0, 0.38) 55%,
      transparent 72%);
  filter: blur(24px);
  animation: blobFloat2 16s ease-in-out infinite alternate;
}

/* Blob 3: Inferior Esquerdo — Turquesa Neociano Posicionado Mais para Cima no Hero */
.hero-art-background .blob-3 {
  position: absolute;
  bottom: 160px;
  left: 3%;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
      rgba(0, 245, 212, 0.98) 0%,
      rgba(126, 224, 208, 0.68) 35%,
      transparent 70%);
  filter: blur(22px);
  animation: blobFloat3 12s ease-in-out infinite alternate;
}

/* Blob 4: Inferior Direito — Violeta & Índigo Posicionado Mais para Cima no Hero */
.hero-art-background .blob-4 {
  position: absolute;
  bottom: 170px;
  right: 3%;
  width: 470px;
  height: 470px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
      rgba(147, 51, 234, 0.98) 0%,
      rgba(59, 130, 246, 0.70) 34%,
      transparent 70%);
  filter: blur(22px);
  animation: blobFloat4 15s ease-in-out infinite alternate;
}

/* Blob Center (NOVO): Esfera de Luz Sofisticada Posicionada Diretamente Atrás do Texto Principal */
.hero-art-background .blob-center {
  position: absolute;
  top: 36%;
  left: 38%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
      rgba(91, 140, 255, 0.95) 0%,
      rgba(126, 224, 208, 0.60) 28%,
      rgba(150, 120, 255, 0.30) 55%,
      transparent 75%);
  filter: blur(26px);
  animation: blobCenterPulse 11s ease-in-out infinite alternate;
}

@keyframes blobFloat1 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(30px, 35px) scale(1.1);
  }
}

@keyframes blobFloat2 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(-30px, 35px) scale(1.1);
  }
}

@keyframes blobFloat3 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(25px, -30px) scale(1.08);
  }
}

@keyframes blobFloat4 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(-25px, -30px) scale(1.08);
  }
}

@keyframes blobCenterPulse {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.92;
  }

  100% {
    transform: translate(20px, -20px) scale(1.12);
    opacity: 1;
  }
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  position: relative;
  z-index: 2;
  width: 100%;
}

/* etiqueta de contexto */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-1);
  font-weight: 500;
  margin-bottom: 40px;
}

.hero-badge .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 10px var(--accent-2);
  animation: badgePulse 2.4s ease-in-out infinite;
}

@keyframes badgePulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.35;
    transform: scale(0.7);
  }
}

/* Bloco tipográfico com altura de linha adequada para letras descendentes (g, j, q, y) */
.hero-title {
  display: flex;
  flex-direction: column;
  /* Em telas largas o teto de 10rem preserva o desenho atual (título alinhado
     à esquerda, sem esticar). Conforme a janela estreita, o fator de vw faz o
     texto acompanhar a largura e preencher o espaço que antes ficava vazio à
     direita.
     O min() com 20.5vh é o freio que garante o SUBTÍTULO na primeira tela —
     requisito explícito. O botão e os quatro pilares ficam abaixo da dobra,
     que é o efeito desejado. Valores calibrados por medição no navegador. */
  font-size: clamp(2.6rem, min(18vw, 24vh), 11rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 500;
  color: var(--ink-0);
  /* margem enxuta: cada pixel aqui decide se o subtitulo cabe na dobra */
  margin: 0 0 10px;
}

.hero-title .line {
  display: inline-block;
  padding-bottom: 0.18em;
}

/* a última linha recebe a cor da marca sem cortar a perna do 'g' de 'negócio' */
.hero-title .accent {
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 0.25em;
  margin-bottom: -0.18em;
}

.hero-lead {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  color: var(--ink-1);
  max-width: 56ch;
  font-weight: 300;
  line-height: 1.6;
  /* margem proporcional à altura: encolhe em telas baixas e devolve espaço
     para o título crescer sem empurrar os pilares para fora da tela */
  margin-bottom: clamp(18px, 3vh, 36px);
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* era clamp(60px, 9vh, 100px): o espaço até a faixa dos pilares era o
     segundo maior consumidor de altura do hero, depois do título. */
  /* respiro maior entre o botão e a faixa dos pilares, para ocupar o vazio
     que sobrava na base do hero */
  margin-bottom: clamp(40px, 7vh, 90px);
}

/* --- os quatro pilares, em linha --- */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.hero-stat {
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  /* linhas dos pilares mais altas: preenchem melhor a base do hero */
  padding: clamp(26px, 3.4vh, 40px) clamp(18px, 2vw, 28px);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.35s var(--ease);
  color: var(--ink-1);
}

.hero-stat:last-child {
  border-right: none;
}

.hero-stat:hover {
  color: var(--ink-0);
}

.hero-stat .stat-num {
  font-family: var(--font-heading);
  font-size: 0.76rem;
  color: var(--accent-2);
  letter-spacing: 0.1em;
  align-self: center;
  line-height: 1;
}

.hero-stat .stat-label {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  min-width: 0;
  line-height: 1.2;
}

.eyebrow {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-2);
  font-weight: 600;
}

.scroll-cue {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0.6;
}

.scroll-cue span {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--ink-0), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

.scroll-cue small {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

@keyframes scrollPulse {

  0%,
  100% {
    opacity: 0.3;
    transform: scaleY(0.6);
  }

  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* ==========================================================================
   BOTÕES
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.25s var(--ease);
  user-select: none;
  text-decoration: none;
}

/* BOTÃO PRIMÁRIO: BRANCO PURO DE ALTO CONTRASTE (ESTILO VERCEL / APPLE / LINEAR) */
.btn-primary {
  background: #ffffff;
  color: #060709;
  border-color: #ffffff;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15);
}

.btn-primary:hover {
  background: #e6e9f0;
  border-color: #e6e9f0;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.25);
}

.btn-primary:active {
  transform: translateY(0);
}

/* BOTÃO GLASS / TRANSPARENTE */
.btn-glass {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--ink-0);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}

.btn-block {
  width: 100%;
}

/* ==========================================================================
   FAIXA DE TECNOLOGIAS
   ========================================================================== */

.tech-marquee-section {
  padding: 70px 0 50px;
  position: relative;
  /* o recorte fica a cargo de .marquee: aqui ele cortaria o halo no
     topo e criaria uma linha contra o hero */
  overflow: visible;
}

.tech-marquee-section::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  /* extrapola a seção para cima: o halo emenda com o do hero em vez de
     começar exatamente na fronteira, o que marcaria a divisão */
  height: 150%;
  background: radial-gradient(ellipse, rgba(91, 140, 255, 0.08) 0%, rgba(126, 224, 208, 0.03) 45%, transparent 75%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.tech-header-container {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.tech-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 999px;
  background: rgba(91, 140, 255, 0.08);
  border: 1px solid rgba(91, 140, 255, 0.22);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 16px;
  box-shadow: 0 0 24px rgba(126, 224, 208, 0.12);
}

.tech-badge-pill .badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 10px var(--accent-2);
  animation: pulseTechDot 2s infinite ease-in-out;
}

@keyframes pulseTechDot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.3;
    transform: scale(0.75);
  }
}

.tech-section-title {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 30%, #b8c4d6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}

.tech-section-lead {
  font-size: 1.05rem;
  color: var(--ink-1);
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.6;
}

/* MARQUEE WRAPPER & FILTROS (OTIMIZADO GPU) */
.marquee-wrapper {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 1;
  transform: translateZ(0);
  contain: content;
}

.marquee {
  overflow: hidden;
  padding: 12px 0;
  transform: translateZ(0);
  position: relative;
  /* PERFORMANCE: a mask-image daqui foi removida. A faixa se move sem parar,
     e mascarar conteúdo em movimento obriga o navegador a rasterizar fora de
     tela e recompor a cada quadro, sem aceleração de GPU. O esmaecimento das
     pontas passou para os pseudo-elementos abaixo — gradientes estáticos
     sobrepostos, que a GPU compõe sem custo relevante. */
}

/* pontas esmaecidas da faixa: substituem a máscara */
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9%;
  pointer-events: none;
  z-index: 2;
}

.marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-0) 0%, rgba(6, 7, 9, 0) 100%);
}

.marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-0) 0%, rgba(6, 7, 9, 0) 100%);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* CARDS DE TECNOLOGIA (GLASS CHIPS) */
.tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 14px;
  border-radius: 16px;
  /* PERFORMANCE: o backdrop-filter foi removido daqui. Eram 31 chips com
     desfoque de fundo dentro de um carrossel em movimento contínuo — o
     navegador recapturava e desfocava o fundo 31 vezes por quadro, sem
     parar. Era a maior fonte de engasgo da página. Como o fundo atrás da
     faixa é escuro e uniforme, o gradiente translúcido + borda + sombra
     sustentam o aspecto de vidro sem custo de recomposição. */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  cursor: pointer;
  /* 'all' obrigava o navegador a vigiar todas as propriedades; listar só as
     que mudam no hover evita trabalho desnecessário. */
  transition: background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  user-select: none;
}

.tech-chip:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
  border-color: var(--brand-color, rgba(91, 140, 255, 0.6));
  box-shadow: 0 8px 30px var(--brand-shadow, rgba(91, 140, 255, 0.28)), inset 0 0 18px var(--brand-shadow, rgba(91, 140, 255, 0.15));
  transform: translateY(-4px) scale(1.03);
}

.tech-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-color, #ffffff);
  transition: all 0.35s var(--ease);
}

.tech-icon-box svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  transition: transform 0.35s var(--ease);
}

.tech-icon-box .tech-logo {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
  transition: transform 0.35s var(--ease), filter 0.35s var(--ease);
  filter: drop-shadow(0 0 6px var(--brand-shadow, rgba(255, 255, 255, 0.18)));
}

.tech-chip:hover .tech-icon-box {
  background: rgba(255, 255, 255, 0.085);
  color: var(--brand-color, #ffffff);
  border-color: var(--brand-color, rgba(255, 255, 255, 0.45));
  box-shadow: 0 0 16px var(--brand-glow, var(--accent));
  transform: scale(1.08) rotate(-3deg);
}

.tech-chip:hover .tech-icon-box svg {
  transform: scale(1.1);
}

.tech-chip:hover .tech-icon-box .tech-logo {
  transform: scale(1.1);
  filter: drop-shadow(0 0 9px var(--brand-glow, rgba(255, 255, 255, 0.3)));
}

.tech-info-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.tech-title-text {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink-0);
  letter-spacing: -0.01em;
}

.tech-sub-text {
  font-size: 0.72rem;
  color: var(--ink-2);
  font-weight: 400;
  transition: color 0.3s ease;
}

.tech-chip:hover .tech-sub-text {
  color: var(--ink-1);
}

.tech-cat-tag {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink-2);
  margin-left: 4px;
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
}

.tech-chip:hover .tech-cat-tag {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
}

/* ==========================================================================
   FORMATO EDITORIAL — leitura de artigo, mantendo o acabamento premium
   ========================================================================== */

/* --- cabeçalho do artigo --- */
.article-head {
  max-width: 1140px;
  margin-bottom: 56px;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

.article-kicker {
  font-family: var(--font-heading);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
  white-space: nowrap !important;
}

.article-sep {
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.article-tag {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Seção de diagnóstico — Piso Espelhado refletindo a iluminação especular da parede */
/* Seção de diagnóstico: permite a entrada contínua das luzes do Hero com camada de escurecimento atenuadora */
.problem,
.section.problem {
  position: relative;
  background: transparent !important;
}

.section.problem::before {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0;
  /* Camada de escurecimento que suaviza as luzes do ambiente sem bloqueá-las.
     Nasce e termina TRANSPARENTE para não criar degrau nas fronteiras com as
     seções vizinhas; o pico fica no miolo. */
  background: linear-gradient(180deg,
      rgba(6, 7, 9, 0) 0%,
      rgba(6, 7, 9, 0.35) 14%,
      rgba(6, 7, 9, 0.72) 34%,
      rgba(6, 7, 9, 0.94) 55%,
      rgba(6, 7, 9, 0.94) 72%,
      rgba(6, 7, 9, 0.55) 88%,
      rgba(6, 7, 9, 0) 100%);
  pointer-events: none;
  z-index: 0;

  /* Esta regra reaproveita o ::before do .section (o halo de luz), que traz
     filter:blur, mix-blend-mode:screen, largura fixa e left/transform. Sem
     anulá-los, o gradiente ESCURO acima era composto em modo "screen" — que
     clareia em vez de escurecer — e desfocado em 28px, produzindo a mancha
     clara na borda esquerda. Aqui queremos uma camada chapada e opaca,
     então zeramos tudo que veio do halo. */
  mix-blend-mode: normal;
  filter: none;
  width: auto;
  max-width: none;
  left: 0;
  right: 0;
  /* extravasa nas DUAS fronteiras: assim os trechos transparentes do
     gradiente caem dentro das seções vizinhas, onde não há limite visível,
     e nenhuma das duas emendas aparece */
  top: -160px;
  bottom: -160px;
  transform: none;
}

/* O conteúdo fica acima da camada de escurecimento, que extravasa 160px para
   cima e para baixo. A seção seguinte também é elevada, para que a camada
   nunca se sobreponha ao conteúdo dela. */
.section.problem>.container,
.section.solutions>.container {
  position: relative;
  z-index: 1;
}

.problem::after,
.section.problem::after {
  display: none !important;
  content: none !important;
}

/* Título de artigo: fonte expandida e maior espaçamento */
.article-title {
  font-size: clamp(2.2rem, 3.8vw, 3.3rem);
  line-height: 1.18;
  letter-spacing: -0.035em;
  font-weight: 500;
  color: var(--ink-0);
  margin-bottom: 8px;
}

/* --- corpo em duas colunas --- */
.article-body {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.article-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.article-desc {
  font-size: 1.08rem !important;
  line-height: 1.85 !important;
  color: var(--ink-1) !important;
  font-weight: 300 !important;
}

/* Citação na coluna direita (entre aspas) com espaçamento expandido */
.article-col-quote {
  justify-content: center;
  height: 100%;
}

.article-main-quote {
  margin: 0;
  padding: 8px 0 8px 24px;
  border-left: 3px solid var(--accent-2);
  font-family: var(--font-heading);
  font-size: clamp(1.22rem, 2.1vw, 1.55rem);
  font-weight: 400;
  line-height: 1.8 !important;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.article-body-single .article-lead {
  font-size: 1.06rem !important;
  line-height: 1.72 !important;
  color: var(--ink-1) !important;
  font-weight: 300 !important;
  margin: 0 !important;
}

/* --- pontos de atenção (tabela unificada original) --- */
.article-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 72px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.article-point {
  background: rgba(255, 255, 255, 0.02);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background 0.4s var(--ease);
}

.article-point:hover {
  background: rgba(255, 255, 255, 0.05);
}

.article-point .point-num {
  font-family: var(--font-heading);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  color: var(--accent-2);
}

.article-point h3 {
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--ink-0);
}

.article-point p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink-2);
  font-weight: 300;
}

@media (max-width: 860px) {

  .article-body,
  .article-body-fluid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .article-points {
    grid-template-columns: 1fr;
  }

  .article-title {
    max-width: none;
  }
}

/* ==========================================================================
   SEÇÕES GERAIS
   ========================================================================== */

.section {
  padding: clamp(70px, 10vw, 140px) 0;
  position: relative;
}

/* Cabeçalho editorial: título grande à esquerda, texto de apoio menor
   à direita — o contraste de escala das referências. */
.section-head {
  margin: 0 0 72px;
  max-width: none;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px clamp(40px, 5vw, 84px);
  align-items: end;
  text-align: left;
}

.section-head h2 {
  grid-column: 1;
  margin: 0;
}

.section-head p {
  grid-column: 2;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-1);
  padding-bottom: 0.6rem;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  padding-left: 26px;
}

/* A seção .problem usa o layout editorial (.article-*) e fica fora
   destas regras, que valem para blocos de texto corrido. */
.problem,
.about,
.final-cta {
  text-align: left;
}

.about h2,
.final-cta h2 {
  max-width: 16ch;
  margin-bottom: 20px;
}

.about p,
.final-cta p {
  max-width: 62ch;
  font-size: 1.05rem;
  margin-bottom: 12px;
}

/* ==========================================================================
   PILARES / SOLUÇÕES
   ========================================================================== */

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 1.8vw, 32px);
}

.pillar-grid .glass-card {
  padding: 0 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  aspect-ratio: 9 / 16;
  min-height: 460px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.045) 0%,
      rgba(255, 255, 255, 0.015) 45%,
      rgba(6, 7, 10, 0.94) 100%);
  backdrop-filter: blur(9px) saturate(150%);
  -webkit-backdrop-filter: blur(9px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.35),
    0 12px 36px rgba(0, 0, 0, 0.28);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}

/* --- canvas temático de cada pilar ---
   Sem fundo próprio nem borda: o canvas-wrap é transparente e compartilha
   exatamente o mesmo vidro do card. Qualquer fundo/borda aqui cria uma
   descontinuidade visível (a "linha" reclamada) na fronteira com o corpo.
   A cor de cada pilar vem só da aura difusa (::before), sem limite reto. */
.pillar-canvas-wrap {
  position: relative;
  z-index: 1;
  margin: 0 -28px;
  height: 230px;
  background: transparent;
  /* PERFORMANCE — a mask-image que existia aqui era a MAIOR causa de queda de
     fps da página. Máscara sobre conteúdo que repinta a cada quadro obriga o
     navegador a rasterizar fora de tela e recompor a camada continuamente,
     sem aceleração de GPU. Como são 4 canvas animados lado a lado, o custo se
     multiplicava por quatro a cada quadro.
     O desvanecimento da base agora é feito pelo ::after abaixo — um gradiente
     estático sobreposto, que a GPU compõe praticamente de graça. O resultado
     visual é o mesmo: a animação se dissolve no corpo do cartão, sem aresta. */
}

/* Desvanecimento da base do canvas: substitui a máscara por uma sobreposição
   na cor do cartão. Não recompõe nada — é apenas um gradiente parado. */
.pillar-canvas-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  pointer-events: none;
  background: linear-gradient(to bottom,
      rgba(10, 12, 15, 0) 0%,
      rgba(10, 12, 15, 0.55) 55%,
      rgba(10, 12, 15, 0.9) 100%);
  z-index: 2;
}

/* divisória entre a animação e o texto: filete que desvanece nas pontas,
   com o centro na cor do pilar. Fica no CARD (não no wrap, que é mascarado)
   e ancorada na altura onde a animação termina. */
.pillar-card>.pillar-divider {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 230px;
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      var(--c1, rgba(126, 224, 208, 0.55)) 50%,
      transparent);
  z-index: 2;
  pointer-events: none;
}

/* divisória elegante entre a animação e o texto: uma linha que desvanece
   nas pontas, com um leve brilho central — não um traço reto de ponta a
   ponta. Fica ancorada na base da área de animação. */
.pillar-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   ILUMINAÇÃO DE VIDRO DOS CARDS — CROWN AMBIENTE ULTRA-SUAVE
   ========================================================================== */

/* Aura no topo com TRÊS manchas de cor:
   --c1  cor PRINCIPAL do pilar, ampla e dominante (define a cor do card);
   --c2  segunda cor, mancha menor em posição própria de cada card;
   --c3  terceira cor, mancha ainda menor, mais deslocada.
   As posições (--p2x/y, --p3x/y) variam por card, dando o aspecto
   "aleatório próximo à principal". Cada cor só aparece na SUA mancha —
   nada de cor de um card escapar para outro. */
.pillar-card>.pillar-aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    /* terceira cor — mancha pequena e deslocada */
    radial-gradient(ellipse 34% 26% at var(--p3x, 74%) var(--p3y, 20%),
      var(--c3, transparent) 0%,
      transparent 62%),
    /* segunda cor — mancha média */
    radial-gradient(ellipse 42% 30% at var(--p2x, 28%) var(--p2y, 14%),
      var(--c2, transparent) 0%,
      transparent 64%),
    /* cor principal — dominante, cobre o topo inteiro e se sobrepõe */
    radial-gradient(ellipse 82% 44% at 50% 4%,
      var(--c1) 0%,
      var(--c1) 14%,
      transparent 66%);
  opacity: 0.8;
  pointer-events: none;
  animation: none !important;
  transition: opacity 0.5s var(--ease);
}

.pillar-card:hover>.pillar-aura {
  opacity: 1;
}

/* Véu escuro sobre a metade inferior: puxa o corpo do card para o preto
   profundo, criando o contraste e a profundidade que faltavam. */
.pillar-card>.pillar-aura::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
      transparent 0%,
      transparent 30%,
      rgba(6, 7, 10, 0.55) 62%,
      rgba(6, 7, 10, 0.85) 100%);
}

/* Cada pilar: cor principal (--c1) + duas cores de apoio (--c2, --c3),
   com posições próprias (--p2/--p3) para as manchas caírem em pontos
   diferentes perto do topo. As cores de apoio combinam com a principal,
   sem verde onde não deve haver verde. */

/* 1 — Apps: verde-esmeralda dominante, apoio ciano e azul */
.pillar-card:nth-child(1) {
  --c1: rgba(0, 230, 168, 0.50);
  --c2: rgba(0, 242, 254, 0.34);
  --p2x: 24%;
  --p2y: 16%;
  --c3: rgba(56, 189, 248, 0.26);
  --p3x: 78%;
  --p3y: 22%;
}

/* 2 — Digital: laranja âmbar dominante, apoio coral e rosa */
.pillar-card:nth-child(2) {
  --c1: rgba(255, 140, 56, 0.50);
  --c2: rgba(255, 92, 92, 0.34);
  --p2x: 72%;
  --p2y: 14%;
  --c3: rgba(255, 196, 84, 0.28);
  --p3x: 26%;
  --p3y: 24%;
}

/* 3 — Automação: violeta dominante, apoio índigo e magenta */
.pillar-card:nth-child(3) {
  --c1: rgba(157, 78, 221, 0.52);
  --c2: rgba(99, 102, 241, 0.34);
  --p2x: 30%;
  --p2y: 20%;
  --c3: rgba(214, 108, 255, 0.26);
  --p3x: 76%;
  --p3y: 14%;
}

/* 4 — IA: azul dominante, apoio ciano e violeta */
.pillar-card:nth-child(4) {
  --c1: rgba(59, 114, 255, 0.50);
  --c2: rgba(0, 210, 255, 0.32);
  --p2x: 74%;
  --p2y: 22%;
  --c3: rgba(139, 111, 255, 0.26);
  --p3x: 24%;
  --p3y: 15%;
}

/* Borda de vidro SEM pseudo-elemento próprio.
   Diagnóstico (testes A–E): a linha fantasma era o ::before. Num card com
   overflow:hidden + tilt 3D (preserve-3d), a caixa do ::before em inset:0
   ganhava uma aresta interna visível na fronteira — some ao remover o
   ::before. Solução: a borda de vidro passa a viver no próprio border do
   card + arestas do box-shadow (definidos em .pillar-grid .glass-card),
   que nunca criam caixa separada nem aresta no miolo. Aqui só neutraliza
   qualquer ::before residual. */
.pillar-card::before {
  content: none;
}

/* Reflexo diagonal especular que simula tampo de vidro cristalino sobre a peça */
.pillar-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.03) 22%,
      transparent 42%,
      rgba(255, 255, 255, 0.05) 75%,
      transparent 100%);
  pointer-events: none;
  z-index: 3;
}

/* Ponto de luz interativo no cursor: sutil, suave e focado */
/* O ponto de luz que seguia o cursor foi REMOVIDO a pedido. Ele exigia
   escrita de custom properties a cada quadro (repintura do gradiente) e
   mantinha uma camada com mix-blend-mode em cada cartão. O elemento
   .pillar-light fica oculto para não deixar resíduo visual. */
.pillar-card .pillar-light {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .pillar-card:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 1px 0 0 rgba(255, 255, 255, 0.12),
      inset 0 -1px 0 rgba(0, 0, 0, 0.55),
      0 22px 55px rgba(0, 0, 0, 0.5),
      0 0 50px -8px var(--c1, rgba(91, 140, 255, 0.4));
  }
}

/* No mobile/touch: Desativa brilho de cursor e deixa apenas a animação de toque (botão pressionado) */
@media (hover: none), (pointer: coarse) {
  .pillar-card .pillar-light,
  .pillar-card:hover .pillar-light,
  .glass-card::after,
  .glass-card:hover::after {
    opacity: 0 !important;
    display: none !important;
  }
}

/* Animação tátil de toque/clique de botão (Press Animation) no mobile e desktop ao tocar */
.pillar-card:active,
.btn:active,
.glass-card:active {
  transform: scale(0.97) !important;
  transition: transform 0.1s var(--ease) !important;
}

.pillar-card:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 5px;
}

.pillar-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.pillar-heading h3 {
  margin: 0;
  line-height: 1.15;
}

.pillar-heading .pillar-index {
  flex: 0 0 auto;
  margin-top: 0;
}

.pillar-index {
  font-size: 0.85rem;
  color: var(--accent-2);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.pillar-grid p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-1);
  flex-grow: 1;
}

.card-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-0);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.card-link i {
  font-style: normal;
  transition: transform 180ms cubic-bezier(.165, .84, .44, 1);
}

.pillar-card .card-link {
  width: 100%;
  justify-content: space-between;
  margin-top: auto;
}

.pillar-card:hover .card-link i,
.pillar-card:focus-visible .card-link i {
  transform: translateX(6px);
}

/* ==========================================================================
   OFERTA PRINCIPAL
   ========================================================================== */

.offer-text h2 {
  margin-bottom: 18px;
}

.offer-text p {
  margin-bottom: 14px;
}

.offer-how strong {
  color: var(--ink-0);
}

.offer-steps {
  display: flex;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 28px 0 32px;
  flex-wrap: wrap;
}

.offer-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--ink-0);
}

.offer-steps span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

/* ==========================================================================
   MÉTODO
   ========================================================================== */

.method-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.method-step {
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step-num {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent-2);
  opacity: 0.8;
}

.method-step p {
  font-size: 0.95rem;
}

/* ==========================================================================
   SOBRE A TAKEUN — SEÇÃO INSTITUCIONAL REFORMULADA ULTRA PREMIUM
   ========================================================================== */

.section.about {
  position: relative;
  padding: clamp(90px, 12vw, 160px) 0;
  overflow: hidden;
}

/* Fundo com Efeitos de Luz Exclusivos da Seção Sobre */
.about-glow-background {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  /* PERFORMANCE: mix-blend-mode removido. Ele obrigava o navegador a criar um
     contexto de composição e mesclar esta camada inteira com tudo abaixo a
     cada quadro. As cores dos gradientes abaixo foram calibradas para o fundo
     escuro, então o resultado visual se mantém sem o custo do blend. */
}

/* PERFORMANCE — as três esferas continuam existindo (o design é o mesmo),
   mas SEM filter:blur(). O desfoque de 48px sobre elementos de 540-620px era
   o item mais caro da página: o custo cresce com a ÁREA, e havia ainda 13
   cartões com backdrop-filter por cima, ou seja, desfoque sobre desfoque
   recalculado a cada quadro.
   A suavidade agora vem do próprio gradiente, cujas paradas foram ajustadas
   para reproduzir a mesma dissolução que o blur produzia. Visualmente
   equivalente, com uma fração do custo. */
.about-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: blur(28px);
  will-change: transform;
}

.about-blob.blob-left {
  top: 8%;
  left: -8%;
  width: 580px;
  height: 580px;
  background: radial-gradient(circle at center,
      rgba(124, 58, 237, 0.42) 0%,
      rgba(110, 90, 240, 0.24) 26%,
      rgba(91, 140, 255, 0.10) 48%,
      transparent 70%);
  animation: floatAboutBlob1 18s ease-in-out infinite alternate;
}

.about-blob.blob-right {
  bottom: 5%;
  right: -6%;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle at center,
      rgba(0, 245, 212, 0.40) 0%,
      rgba(60, 235, 210, 0.22) 26%,
      rgba(126, 224, 208, 0.09) 48%,
      transparent 70%);
  filter: blur(28px);
  animation: floatAboutBlob2 20s ease-in-out infinite alternate;
}

.about-blob.blob-center {
  top: 40%;
  left: 35%;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle at center,
      rgba(91, 140, 255, 0.36) 0%,
      rgba(105, 120, 250, 0.20) 24%,
      rgba(124, 58, 237, 0.08) 48%,
      transparent 70%);
  filter: blur(28px);
  animation: floatAboutBlob3 16s ease-in-out infinite alternate;
}

@keyframes floatAboutBlob1 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(50px, 40px) scale(1.12);
  }
}

@keyframes floatAboutBlob2 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(-40px, -50px) scale(1.1);
  }
}

@keyframes floatAboutBlob3 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(30px, -30px) scale(1.15);
  }
}

/* Painel Hero da Seção Sobre */
.about-hero-panel {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  padding: clamp(36px, 5vw, 64px);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  /* 28px → 10px: era o desfoque de fundo mais caro do site. O custo cresce
     com o raio, e o fundo atrás deste painel é um gradiente suave — há pouco
     a borrar, então a diferença visual é mínima. */
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.about-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.3);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a78bfa;
  margin-bottom: 20px;
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.2);
}

.about-badge .badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a78bfa;
  box-shadow: 0 0 10px #a78bfa;
  animation: pulseAboutDot 2s infinite ease-in-out;
}

@keyframes pulseAboutDot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.35;
    transform: scale(0.75);
  }
}

.about-title {
  font-size: clamp(2.1rem, 3.8vw, 3.2rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #ffffff 30%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
}

.about-lead {
  font-size: 1.06rem;
  line-height: 1.72;
  color: var(--ink-1);
  font-weight: 300;
}

.about-lead strong {
  color: #ffffff;
  font-weight: 500;
}

/* Badges/Métricas Laterais */
.about-highlights-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-highlight-card {
  display: flex;
  flex-direction: column;
  padding: 18px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* 'all' obriga o navegador a vigiar todas as propriedades em busca de
     mudança; listar só as que animam no hover elimina esse trabalho. */
  transition: background 0.35s var(--ease),
              border-color 0.35s var(--ease),
              transform 0.35s var(--ease);
}

.about-highlight-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(126, 224, 208, 0.4);
  box-shadow: 0 8px 24px rgba(126, 224, 208, 0.15);
  transform: translateX(6px);
}

.highlight-num {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}

.highlight-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-0);
  margin-top: 2px;
}

.about-highlight-card small {
  font-size: 0.78rem;
  color: var(--ink-2);
  margin-top: 2px;
}

/* Grid de Diferenciais Institucionais */
.about-differentiators-wrap {
  position: relative;
  margin-top: 40px;
}

.about-diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
}

.about-diff-card {
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.015) 100%);
  /* 14px → 8px: são 5 cartões lado a lado, o custo soma. */
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 30px rgba(0, 0, 0, 0.25);
  /* 'all' incluía o backdrop-filter deste cartão na animação — caríssimo de
     interpolar. Listadas apenas as propriedades que mudam no hover. */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-diff-card.wide {
  grid-column: span 1.5;
}

@media (min-width: 981px) {
  .about-diff-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .about-diff-card {
    grid-column: span 2;
  }

  .about-diff-card.wide {
    grid-column: span 3;
  }
}

.about-diff-card:hover {
  /* havia duas declarações de transform aqui; a primeira
     (translateY(-50%)) era sobrescrita pela segunda e nunca teve efeito */
  transform: translateY(-4px) scale(1.02);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.025) 100%);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), 0 16px 40px rgba(0, 0, 0, 0.35);
}

.diff-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.35s var(--ease);
}

.diff-icon-box.blue {
  color: #5b8cff;
  border-color: rgba(91, 140, 255, 0.3);
}

.diff-icon-box.cyan {
  color: #00f5d4;
  border-color: rgba(0, 245, 212, 0.3);
}

.diff-icon-box.purple {
  color: #a78bfa;
  border-color: rgba(167, 139, 250, 0.3);
}

.diff-icon-box.green {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

.diff-icon-box.orange {
  color: #fb923c;
  border-color: rgba(251, 146, 60, 0.3);
}

.about-diff-card:hover .diff-icon-box.blue {
  background: #5b8cff;
  color: #fff;
  box-shadow: 0 0 20px rgba(91, 140, 255, 0.5);
}

.about-diff-card:hover .diff-icon-box.cyan {
  background: #00f5d4;
  color: #060709;
  box-shadow: 0 0 20px rgba(0, 245, 212, 0.5);
}

.about-diff-card:hover .diff-icon-box.purple {
  background: #a78bfa;
  color: #fff;
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.5);
}

.about-diff-card:hover .diff-icon-box.green {
  background: #34d399;
  color: #060709;
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.5);
}

.about-diff-card:hover .diff-icon-box.orange {
  background: #fb923c;
  color: #fff;
  box-shadow: 0 0 20px rgba(251, 146, 60, 0.5);
}

.about-diff-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink-0);
  letter-spacing: -0.01em;
  margin: 0;
}

.about-diff-card p {
  font-size: 0.94rem;
  color: var(--ink-1);
  line-height: 1.6;
  margin: 0;
  font-weight: 300;
}

@media (max-width: 900px) {
  .about-hero-panel {
    grid-template-columns: 1fr;
  }

  .about-diff-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   TÍTULO DE ALTO IMPACTO CENTRALIZADO (FINAL CTA)
   ========================================================================== */

.section.final-cta {
  position: relative;
  padding: clamp(100px, 14vw, 180px) 0;
  text-align: center;
  overflow: hidden;
}

.final-cta-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1200px, 95vw);
  height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 60% 50% at 50% 50%,
      rgba(91, 140, 255, 0.495) 0%,
      rgba(255, 94, 58, 0.385) 38%,
      rgba(124, 58, 237, 0.22) 65%,
      transparent 80%);
  filter: blur(56px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
}

.final-cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.final-cta-title {
  font-size: clamp(2.2rem, 5.2vw, 4.2rem) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
  max-width: 32ch !important;
  margin: 0 auto 20px !important;
  background: linear-gradient(135deg, #ffffff 40%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.final-cta-lead {
  font-size: clamp(1rem, 1.5vw, 1.2rem) !important;
  line-height: 1.6 !important;
  color: var(--ink-1) !important;
  max-width: 48ch !important;
  font-weight: 400 !important;
  margin: 0 auto 36px !important;
}

.btn-large {
  padding: 18px 46px !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  box-shadow: 0 0 36px rgba(255, 255, 255, 0.32) !important;
}

@media (max-width: 768px) {
  .final-cta-title {
    font-size: clamp(1.8rem, 6.5vw, 2.6rem) !important;
    max-width: 100% !important;
    line-height: 1.18 !important;
    margin-bottom: 16px !important;
  }

  .final-cta-lead {
    font-size: 0.98rem !important;
    max-width: 100% !important;
    line-height: 1.55 !important;
    margin-bottom: 28px !important;
  }
}


/* ==========================================================================
   DIFERENCIAIS
   ========================================================================== */

.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 1.8vw, 28px);
}

.diff-card {
  padding: 26px 24px;
}

.diff-card p {
  color: var(--ink-0);
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}

/* ==========================================================================
   CONTATO
   ========================================================================== */

.contact-panel {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 48px;
  align-items: start;
  /* will-change removido: o painel é estático (não anima), então a reserva de
     camada de GPU só consumia memória. translateZ(0) e contain permanecem —
     isolam o layout sem exigir camada dedicada permanente. */
  transform: translateZ(0);
  contain: layout style;
}

.contact-panel::before {
  -webkit-mask: none !important;
  mask: none !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: transparent !important;
}

.contact-text h2 {
  margin-bottom: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  position: relative;
}

.field label {
  font-size: 0.85rem;
  color: var(--ink-1);
}

.field input,
.field select,
.field textarea {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--ink-0);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.25s, background 0.25s;
  color-scheme: dark;
}

.field select option {
  background-color: #0b0f17;
  color: #ffffff;
  padding: 12px 16px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.1);
}

.field textarea {
  resize: vertical;
}

.native-select-proxy {
  display: none !important;
}

/* ==========================================================================
   INTERNATIONAL DDI PHONE INPUT COMPONENT (COM BANDEIRAS & DDI DINÂMICO)
   ========================================================================== */

.phone-input-group {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
  position: relative;
}

.country-select-wrapper {
  position: relative;
  flex-shrink: 0;
  user-select: none;
}

.country-select-trigger {
  height: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  color: var(--ink-0);
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}

.country-select-trigger:hover,
.country-select-wrapper.open .country-select-trigger {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent);
}

.country-flag {
  font-size: 1.15rem;
  line-height: 1;
}

.country-ddi {
  font-weight: 600;
  color: var(--ink-0);
  letter-spacing: -0.01em;
  font-size: 0.9rem;
}

.country-select-trigger .chevron {
  color: var(--ink-2);
  transition: transform 0.3s var(--ease);
}

.country-select-wrapper.open .chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

/* Menu Dropdown de Países */
.country-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 290px;
  max-height: 320px;
  background: rgba(11, 15, 23, 0.96);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
  z-index: 250;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  overflow: hidden;
}

.country-select-wrapper.open .country-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.country-search-box {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.country-search-box input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--ink-0);
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
}

.country-search-box input:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
}

.country-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  flex: 1;
  max-height: 240px;
}

.country-list::-webkit-scrollbar {
  width: 5px;
}

.country-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

.country-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--ink-1);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.country-option:hover,
.country-option.selected {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ink-0);
}

.country-option-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.country-option-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 145px;
}

.country-option-code {
  font-weight: 600;
  color: var(--accent-2);
  font-size: 0.85rem;
}

.country-no-results {
  padding: 16px 12px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-2);
}

.phone-input-group input[type="tel"] {
  flex: 1;
  min-width: 0;
}

/* ==========================================================================
   CUSTOM GLASS SELECT DROPDOWN — visual premium e condizente com a Takeun
   ========================================================================== */

.custom-select-wrapper {
  position: relative;
  width: 100%;
  user-select: none;
}

.custom-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--ink-0);
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: all 0.3s var(--ease);
}

.custom-select-trigger:hover,
.custom-select-wrapper.open .custom-select-trigger {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent-2);
  box-shadow: 0 0 20px rgba(126, 224, 208, 0.2);
}

.custom-select-wrapper.invalid .custom-select-trigger {
  border-color: #ff7a7a;
  box-shadow: 0 0 0 3px rgba(255, 122, 122, 0.12);
}

.custom-select-trigger .chevron {
  color: var(--ink-2);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
  margin-left: 12px;
  flex-shrink: 0;
}

.custom-select-wrapper.open .custom-select-trigger .chevron {
  transform: rotate(180deg);
  color: var(--accent-2);
}

.custom-select-options {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(11, 15, 23, 0.95);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.65), 0 0 30px rgba(91, 140, 255, 0.15);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s var(--ease);
  max-height: var(--select-menu-max-height, min(510px, 55vh));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(126, 224, 208, 0.4) transparent;
}

.custom-select-wrapper.open .custom-select-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.custom-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 0.93rem;
  color: var(--ink-1);
  cursor: pointer;
  transition: all 0.22s var(--ease);
}

.custom-select-option:hover {
  background: rgba(91, 140, 255, 0.18);
  color: var(--ink-0);
  padding-left: 20px;
}

.custom-select-option.selected {
  background: linear-gradient(90deg, rgba(91, 140, 255, 0.25), rgba(126, 224, 208, 0.15));
  color: var(--accent-2);
  font-weight: 600;
  border: 1px solid rgba(126, 224, 208, 0.3);
}

.custom-select-option .check-icon {
  font-style: normal;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.custom-select-option.selected .check-icon {
  opacity: 1;
  color: var(--accent-2);
}

.conditional-field {
  max-height: 0;
  margin-bottom: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    max-height 0.3s var(--ease),
    margin-bottom 0.3s var(--ease),
    opacity 0.22s var(--ease),
    transform 0.3s var(--ease),
    visibility 0.3s;
}

.conditional-field.visible {
  max-height: 110px;
  margin-bottom: 16px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.form-note {
  margin-top: 16px;
  font-size: 0.85rem;
  text-align: center;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s var(--ease), max-height 0.4s var(--ease), margin 0.4s var(--ease);
}

.form-note.visible {
  opacity: 1;
  max-height: 140px;
  margin-top: 16px;
}

/* estados distintos: o usuário precisa saber se deu certo OU se falhou */
.form-note.ok {
  color: var(--accent-2);
}

.form-note.err {
  color: #ff8a6b;
}

/* --------------------------------------------------------------------------
   Honeypot anti-spam — fora da tela, mas sem display:none nem
   visibility:hidden, que muitos robôs detectam e ignoram.
   -------------------------------------------------------------------------- */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Aviso de privacidade abaixo do botão de envio
   -------------------------------------------------------------------------- */
.form-privacy-hint {
  margin-top: 14px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 300;
  text-align: center;
}

.form-privacy-hint a {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

/* ==========================================================================
   FOOTER (REESTRUTURADO EM 4 COLUNAS ULTRA PREMIUM)
   ========================================================================== */

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 80px 0 36px;
  position: relative;
  background: linear-gradient(180deg, rgba(6, 7, 9, 0.4) 0%, rgba(11, 15, 23, 0.8) 100%);
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1400px, 90vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91, 140, 255, 0.35) 40%, rgba(126, 224, 208, 0.35) 60%, transparent);
}

.footer-grid-wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: clamp(32px, 4vw, 64px);
  margin-bottom: 60px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.footer-brand-col {
  max-width: 420px;
}

.footer-brand-col .logo {
  font-size: 1.6rem;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #ffffff 40%, var(--ink-1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.footer-desc {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-1);
  font-weight: 300;
}

.footer-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-0);
  margin-bottom: 4px;
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-list a {
  font-size: 0.92rem;
  color: var(--ink-1);
  transition: all 0.25s var(--ease);
  display: inline-block;
}

.footer-list a:hover {
  color: var(--ink-0);
  transform: translateX(4px);
}

.footer-social-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.88rem;
  color: var(--ink-1);
  transition: all 0.3s var(--ease);
}

.social-link svg {
  transition: transform 0.3s var(--ease);
  flex-shrink: 0;
}

.social-link:hover {
  transform: translateY(-2px);
  color: #ffffff;
}

.social-link.email-link:hover {
  background: rgba(126, 224, 208, 0.12);
  border-color: rgba(126, 224, 208, 0.4);
  color: var(--accent-2);
  box-shadow: 0 0 20px rgba(126, 224, 208, 0.18);
}

.social-link.whatsapp:hover {
  background: rgba(37, 211, 102, 0.12);
  border-color: rgba(37, 211, 102, 0.4);
  color: #25d366;
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.18);
}

.social-link.instagram:hover {
  background: rgba(225, 48, 108, 0.12);
  border-color: rgba(225, 48, 108, 0.4);
  color: #e1306c;
  box-shadow: 0 0 20px rgba(225, 48, 108, 0.18);
}

.social-link.youtube:hover {
  background: rgba(255, 0, 0, 0.12);
  border-color: rgba(255, 0, 0, 0.4);
  color: #ff0000;
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.18);
}

.social-link.linkedin:hover {
  background: rgba(10, 102, 194, 0.12);
  border-color: rgba(10, 102, 194, 0.4);
  color: #0a66c2;
  box-shadow: 0 0 20px rgba(10, 102, 194, 0.18);
}

.social-link:hover svg {
  transform: scale(1.15);
}

.footer-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 28px;
  font-size: 0.84rem;
  color: var(--ink-2);
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-legal-links a {
  color: var(--ink-2);
  transition: color 0.25s ease;
}

.footer-legal-links a:hover {
  color: var(--ink-0);
}

@media (max-width: 980px) {
  .footer-grid-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .footer-grid-wrap {
    grid-template-columns: 1fr;
  }

  .footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

.social-icons {
  display: flex;
  align-items: center;
  gap: 10px;
  order: 2;
}

.social-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-1);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   PÁGINAS DE PILAR
   ========================================================================== */

.pillar-hero {
  padding-top: clamp(130px, 14.75vh, 154px);
  min-height: 88vh;
  text-align: left;
  position: relative;
  overflow: visible;
}

.pillar-hero .hero-art-background {
  position: absolute;
  top: -220px;
  left: 0;
  right: 0;
  bottom: -280px;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.95) 70%, rgba(0, 0, 0, 0.4) 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.95) 70%, rgba(0, 0, 0, 0.4) 88%, transparent 100%);
}

/* ==========================================================================
   ILUMINAÇÃO DE ILUSTRAÇÃO DE FUNDO ESPECÍFICA POR PILAR
   Fórmula Estrita: Fundo com cor de alto contraste com a palavra em destaque do título!
   ========================================================================== */

/* 1. Takeun Apps (3 Cores Exatas: Verde Esmeralda, Ciano Elétrico & Azul Safira Deep) */
.pillar-hero-apps .hero-art-background .blob-1 {
  background: radial-gradient(circle at center, rgba(0, 230, 168, 0.95) 0%, rgba(0, 242, 254, 0.60) 45%, transparent 72%);
}
.pillar-hero-apps .hero-art-background .blob-2 {
  background: radial-gradient(circle at center, rgba(37, 99, 235, 0.95) 0%, rgba(0, 242, 254, 0.60) 45%, transparent 74%);
}
.pillar-hero-apps .hero-art-background .blob-3 {
  background: radial-gradient(circle at center, rgba(0, 242, 254, 0.90) 0%, rgba(0, 230, 168, 0.60) 45%, transparent 70%);
}
.pillar-hero-apps .hero-art-background .blob-4 {
  background: radial-gradient(circle at center, rgba(37, 99, 235, 0.90) 0%, rgba(0, 230, 168, 0.60) 45%, transparent 70%);
}
.pillar-hero-apps .hero-art-background .blob-center {
  background: radial-gradient(circle at center, rgba(37, 99, 235, 0.98) 0%, rgba(0, 230, 168, 0.50) 48%, transparent 75%);
}

/* 2. Takeun Digital (Paleta de Luxo: Laranja Âmbar no Topo, Azul Safira Deep no Centro & Ciano Oceânico na Base) */
.pillar-hero-digital .hero-art-background .blob-1 {
  /* Topo Esquerdo: Laranja Âmbar Dourado + Ciano */
  background: radial-gradient(circle at center, rgba(255, 140, 56, 0.95) 0%, rgba(0, 229, 255, 0.55) 45%, transparent 72%);
}
.pillar-hero-digital .hero-art-background .blob-2 {
  /* Topo Direito: Laranja Âmbar Dourado + Safira */
  background: radial-gradient(circle at center, rgba(255, 140, 56, 0.92) 0%, rgba(30, 58, 138, 0.60) 45%, transparent 74%);
}
.pillar-hero-digital .hero-art-background .blob-3 {
  /* Base Esquerda: Ciano Oceânico + Laranja */
  background: radial-gradient(circle at center, rgba(0, 229, 255, 0.90) 0%, rgba(255, 140, 56, 0.55) 45%, transparent 70%);
}
.pillar-hero-digital .hero-art-background .blob-4 {
  /* Base Direita: Ciano Oceânico + Safira */
  background: radial-gradient(circle at center, rgba(0, 229, 255, 0.90) 0%, rgba(30, 58, 138, 0.60) 45%, transparent 70%);
}
.pillar-hero-digital .hero-art-background .blob-center {
  /* Centro atrás de 'oportunidade': Azul Safira Deep Nobre */
  background: radial-gradient(circle at center, rgba(30, 58, 138, 0.98) 0%, rgba(0, 229, 255, 0.50) 48%, transparent 75%);
}

/* 3. Takeun Automação (3 Cores Exatas: Verde Esmeralda, Violeta Orquídea & Ciano Elétrico) */
.pillar-hero-automacao .hero-art-background .blob-1 {
  background: radial-gradient(circle at center, rgba(16, 185, 129, 0.95) 0%, rgba(52, 211, 153, 0.60) 45%, transparent 72%);
}
.pillar-hero-automacao .hero-art-background .blob-2 {
  background: radial-gradient(circle at center, rgba(157, 78, 221, 0.90) 0%, rgba(16, 185, 129, 0.60) 45%, transparent 74%);
}
.pillar-hero-automacao .hero-art-background .blob-3 {
  background: radial-gradient(circle at center, rgba(0, 242, 254, 0.90) 0%, rgba(157, 78, 221, 0.60) 45%, transparent 70%);
}
.pillar-hero-automacao .hero-art-background .blob-4 {
  background: radial-gradient(circle at center, rgba(16, 185, 129, 0.90) 0%, rgba(0, 242, 254, 0.60) 45%, transparent 70%);
}
.pillar-hero-automacao .hero-art-background .blob-center {
  background: radial-gradient(circle at center, rgba(16, 185, 129, 0.98) 0%, rgba(157, 78, 221, 0.50) 48%, transparent 75%);
}

/* 4. Takeun IA Aplicada (3 Cores Ultra-Premium: Azul Elétrico Quantum, Ciano Neociano & Violeta Ultravioleta Deep) */
.pillar-hero-ia .hero-art-background .blob-1 {
  background: radial-gradient(circle at center, rgba(59, 114, 255, 0.95) 0%, rgba(0, 242, 254, 0.60) 45%, transparent 72%);
}
.pillar-hero-ia .hero-art-background .blob-2 {
  background: radial-gradient(circle at center, rgba(124, 58, 237, 0.92) 0%, rgba(59, 114, 255, 0.60) 45%, transparent 74%);
}
.pillar-hero-ia .hero-art-background .blob-3 {
  background: radial-gradient(circle at center, rgba(0, 242, 254, 0.90) 0%, rgba(124, 58, 237, 0.60) 45%, transparent 70%);
}
.pillar-hero-ia .hero-art-background .blob-4 {
  background: radial-gradient(circle at center, rgba(124, 58, 237, 0.90) 0%, rgba(0, 242, 254, 0.60) 45%, transparent 70%);
}
.pillar-hero-ia .hero-art-background .blob-center {
  background: radial-gradient(circle at center, rgba(59, 114, 255, 0.98) 0%, rgba(124, 58, 237, 0.50) 48%, transparent 75%);
}

/* ==========================================================================
   GRADIENT ACCENT TEXT DE CADA PILAR
   ========================================================================== */

.split-inner.accent-apps,
.split-inner.accent-digital,
.split-inner.accent-automacao,
.split-inner.accent-ia,
.accent-apps,
.accent-digital,
.accent-automacao,
.accent-ia {
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block;
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}

/* 1 — Takeun Apps (Verde Esmeralda #00E6A8 -> Ciano #00F2FE) */
.split-inner.accent-apps,
span.accent-apps {
  background-image: linear-gradient(100deg, #00E6A8 0%, #00F2FE 100%) !important;
}

/* 2 — Takeun Digital (Laranja Âmbar #FF8C38 -> Coral #FF5C5C) */
.split-inner.accent-digital,
span.accent-digital {
  background-image: linear-gradient(100deg, #FF8C38 0%, #FF5C5C 100%) !important;
}

/* 3 — Takeun Automação (Violeta Luminoso #B565F8 -> Magenta #E08CFF) */
.split-inner.accent-automacao,
span.accent-automacao {
  background-image: linear-gradient(100deg, #b565f8 0%, #e08cff 100%) !important;
}

/* 4 — Takeun IA Aplicada (Azul Cobalto #3B72FF -> Ciano #00D2FF) */
.split-inner.accent-ia,
span.accent-ia {
  background-image: linear-gradient(100deg, #3B72FF 0%, #00D2FF 100%) !important;
}

/* Hero de pilar em GRID de 2 colunas: texto à esquerda, animação à direita.
   O grid garante que as duas nunca se sobreponham — cada uma tem sua coluna,
   e a coluna da animação encolhe junto com a tela até sumir no breakpoint. */
/* Arquitetura determinística: o texto empilha normalmente (flex column, como
   no hero base) e a animação é posicionada em absoluto dentro do .pillar-hero,
   ancorada à direita e centrada verticalmente. Não depende de linhas de grid
   — é o que faltava: grid-row 1/-1 estava sendo ignorado e jogava a animação
   para o topo. Reservamos espaço à direita com padding para o texto não invadir. */
.pillar-hero .container.hero-inner,
.pillar-hero .hero-inner {
  /* largura da animação (usada também pelo .pillar-visual). O padding-right
     reserva essa largura + uma folga, garantindo que o texto pare antes. */
  --pillar-anim-w: clamp(300px, 30vw, 430px);
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  max-width: var(--container);
  min-height: auto;
  padding-top: 0;
  padding-right: calc(var(--pillar-anim-w) + clamp(32px, 5vw, 72px));
  position: relative;
  z-index: 2;
}

/* o conteúdo de texto */
.pillar-hero .hero-inner>.back-link,
.pillar-hero .hero-inner>.eyebrow,
.pillar-hero .hero-inner>h1,
.pillar-hero .hero-inner>.hero-lead,
.pillar-hero .hero-inner>.hero-actions {
  max-width: 62ch;
}

/* Respiro entre o rótulo do pilar ("Takeun Digital") e o título.
   A home aplica margin-bottom: 24px no eyebrow por estilo inline; as páginas
   de pilar não tinham nada, e a regra base .eyebrow não define margem — por
   isso o texto ficava colado no título. Aqui o mesmo espaçamento da home. */
.pillar-hero .hero-inner>.eyebrow {
  margin-bottom: 24px;
}

.pillar-hero h1 {
  margin-bottom: 24px !important;
}

.pillar-hero .hero-lead {
  margin-top: 0;
  margin-bottom: 38px;
}

.pillar-hero .hero-actions {
  justify-content: flex-start;
}

/* Transição contínua e suave para a seção Onde Atuamos nas páginas dos pilares */
.section.differentiators {
  position: relative;
  background: transparent !important;
}

.section.differentiators::before {
  content: "";
  position: absolute;
  inset: 0;
  /* nasce e termina transparente: sem degrau em nenhuma das duas fronteiras */
  background: linear-gradient(180deg,
      rgba(6, 7, 9, 0) 0%,
      rgba(6, 7, 9, 0.30) 14%,
      rgba(6, 7, 9, 0.70) 34%,
      rgba(6, 7, 9, 0.92) 55%,
      rgba(6, 7, 9, 0.92) 72%,
      rgba(6, 7, 9, 0.52) 88%,
      rgba(6, 7, 9, 0) 100%);
  pointer-events: none;
  z-index: 0;
  /* Mesmo caso de .section.problem::before: sem anular o que vem do halo
     (.section::before), este gradiente escuro seria composto em modo screen
     e desfocado, virando mancha clara. Vale para as páginas de pilar. */
  mix-blend-mode: normal;
  filter: none;
  width: auto;
  max-width: none;
  left: 0;
  right: 0;
  top: -160px;
  bottom: -160px;
  transform: none;
}

.section.differentiators>.container {
  position: relative;
  z-index: 1;
}

.back-link {
  font-size: 0.9rem;
  color: var(--ink-2);
  transition: color 0.25s;
}

.back-link:hover {
  color: var(--ink-0);
}

.method-step .muted {
  color: var(--ink-2);
  font-size: 0.9rem;
}

/* Animação ancorada em absoluto ao PRÓPRIO .hero-inner (position:relative),
   na borda direita do container. Como o padding-right do container reserva
   exatamente a largura da animação, ambos compartilham a MESMA referência
   (o container), então texto e animação nunca se tocam — independentemente
   da largura da viewport. Centrada verticalmente. */
.pillar-visual {
  position: absolute !important;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: var(--pillar-anim-w, 440px);
  aspect-ratio: 11 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: pillarVisualFade 0.9s var(--ease) 0.3s forwards;
}

.pillar-visual canvas {
  width: 100%;
  aspect-ratio: 11 / 10;
  max-width: 440px;
}

@keyframes pillarVisualFade {
  to {
    opacity: 0.9;
  }
}

.pillar-visual canvas {
  display: block;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Iluminação temática dos cards das Outras Frentes de Atuação (páginas dos pilares) */
.related-card {
  position: relative;
  overflow: hidden;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.45),
    0 0 20px -3px var(--c1, rgba(91, 140, 255, 0.35)),
    0 12px 36px rgba(0, 0, 0, 0.38) !important;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.related-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 34% 26% at var(--p3x, 74%) var(--p3y, 20%), var(--c3, transparent) 0%, transparent 62%),
    radial-gradient(ellipse 42% 30% at var(--p2x, 28%) var(--p2y, 14%), var(--c2, transparent) 0%, transparent 64%),
    radial-gradient(ellipse 82% 44% at 50% 4%, var(--c1) 0%, var(--c1) 14%, transparent 66%);
  opacity: 0.8;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}

.related-card:hover::before {
  opacity: 1;
}

.related-card > * {
  position: relative;
  z-index: 1;
}

/* Cores específicas de cada pilar nos cards relacionados */
.related-card[href*="takeun-apps"] {
  --c1: rgba(0, 230, 168, 0.50);
  --c2: rgba(0, 242, 254, 0.34);
  --p2x: 24%; --p2y: 16%;
  --c3: rgba(56, 189, 248, 0.26);
  --p3x: 78%; --p3y: 22%;
}

.related-card[href*="takeun-digital"] {
  --c1: rgba(255, 140, 56, 0.50);
  --c2: rgba(255, 92, 92, 0.34);
  --p2x: 72%; --p2y: 14%;
  --c3: rgba(255, 196, 84, 0.28);
  --p3x: 26%; --p3y: 24%;
}

.related-card[href*="takeun-automacao"] {
  --c1: rgba(157, 78, 221, 0.52);
  --c2: rgba(99, 102, 241, 0.34);
  --p2x: 30%; --p2y: 20%;
  --c3: rgba(214, 108, 255, 0.26);
  --p3x: 76%; --p3y: 14%;
}

.related-card[href*="takeun-ia"] {
  --c1: rgba(59, 114, 255, 0.50);
  --c2: rgba(0, 210, 255, 0.32);
  --p2x: 74%; --p2y: 22%;
  --c3: rgba(139, 111, 255, 0.26);
  --p3x: 24%; --p3y: 15%;
}

.related-card .pillar-index {
  font-size: 1.05rem;
  color: var(--ink-0);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Cabeçalho da seção "Conheça também": coluna única e largura total.
   Esta regra estava truncada no arquivo — o seletor e o início da propriedade
   haviam sido cortados por uma edição anterior, o que deixava o CSS
   desbalanceado a partir daqui. Reconstruída. */
.related .section-head {
  grid-template-columns: 1fr;
  max-width: 100%;
  margin-bottom: 36px;
}

@media (min-width: 769px) {
  .related .section-head h2 {
    white-space: nowrap;
  }
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.related-card {
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.related-card .pillar-index {
  font-size: 1.05rem;
  color: var(--ink-0);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.related-card p {
  font-size: 0.94rem;
  flex-grow: 1;
}

/* ==========================================================================
   CAMADA DE MOVIMENTO 3D
   ========================================================================== */

/* --- revelações com profundidade --- */
[data-motion] {
  opacity: 0;
  /* 0.9s → 0.55s. Combinada com a curva --ease (ease-out acentuado, que
     desacelera bastante no fim) e com os data-delay em cascata (até 700ms),
     a duração anterior fazia um bloco levar ~1,6s para se completar — daí a
     sensação de animação lenta, que não era queda de taxa de quadros. */
  transition:
    opacity 0.55s var(--ease),
    transform 0.55s var(--ease),
    filter 0.55s var(--ease);
  will-change: transform, opacity;
}

[data-motion].in-view {
  opacity: 1;
  transform: none;
  /* 'none' em vez de blur(0): blur(0) mantém o elemento na pilha de filtros e
     preserva uma camada de composição desnecessária após a revelação. */
  filter: none;
  /* Libera a camada de GPU depois que a revelação terminou: o elemento não
     anima mais, e manter will-change em dezenas de elementos simultaneamente
     esgota memória de vídeo e degrada a rolagem no desktop. */
  will-change: auto;
}

/* sobe girando, como se saísse de trás do plano */
[data-motion="rise"] {
  transform: perspective(1000px) translateY(46px) rotateX(12deg);
}

/* entra deslizando pela lateral com leve rotação */
[data-motion="slide-left"] {
  transform: perspective(1000px) translateX(-60px) rotateY(-14deg);
}

[data-motion="slide-right"] {
  transform: perspective(1000px) translateX(60px) rotateY(14deg);
}

/* cresce a partir do fundo, desfocado */
[data-motion="zoom"] {
  transform: perspective(1000px) scale(0.9) translateZ(-60px);
  filter: blur(6px);
}

/* vira como uma carta */
[data-motion="flip"] {
  transform: perspective(1200px) rotateX(-42deg);
  transform-origin: center bottom;
}

/* --- tilt 3D --- */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
}

/* Conteúdo interno flutua acima da superfície do vidro no tilt 3D.
   IMPORTANTE: o canvas-wrap precisa ficar no MESMO plano Z do resto.
   Quando ele ficava em Z=0 e o resto em Z=22px, a diferença de
   profundidade desenhava uma aresta clara na fronteira do wrap — a
   "linha entre a animação e a divisória" que só ficava reta no hover.
   Igualando o Z, a linha desaparece. */
[data-tilt]>*:not(.sheen-sweep) {
  transform: translateZ(22px);
}

/* --- profundidade por scroll --- */
[data-depth] {
  transform: translateY(var(--depth-y, 0));
  will-change: transform;
}

/* --- texto que monta palavra por palavra --- */
.split-root {
  perspective: 800px;
  /* as máscaras das palavras ocupam mais altura que o texto puro;
     sem folga na entrelinha, linhas consecutivas se tocariam */
  line-height: 1.24;
}

h1.split-root {
  line-height: 1.14;
}

/* A máscara precisa de altura de linha explícita e padding lateral:
   sem isso o inline-block colapsa e as palavras se sobrepõem. O padding
   evita que letras com descida (g, p, ç) sejam cortadas pelo overflow. */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.12;
  padding: 0.14em 0.04em 0.16em;
  margin: -0.14em -0.04em -0.16em;
}

.split-inner {
  display: inline-block;
  transform: translateY(105%) rotateX(-65deg);
  opacity: 0;
  transform-origin: center bottom;
  will-change: transform, opacity;
  /* 0.85s → 0.5s: num título de 8 palavras, a duração anterior somada à
     defasagem entre elas levava ~1,3s até o título ficar completo. */
  transition:
    transform 0.5s var(--ease),
    opacity 0.4s var(--ease);
}

.split-root.in-view .split-inner {
  transform: translateY(0) rotateX(0);
  opacity: 1;
  /* libera a camada de GPU depois que a palavra assentou — um título longo
     gera dezenas de spans, cada um com camada própria se mantido */
  will-change: auto;
}

/* Estado final seguro: se animações não forem suportadas, o conteúdo essencial
   da hero permanece legível. Os keyframes abaixo assumem o controle visual
   durante a entrada automática. */
.hero [data-motion],
.hero .split-inner {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

/* Revelação real da esquerda para a direita: a máscara começa fechada,
   enquanto o bloco cresce a partir da borda esquerda.
   O clip-path é RETANGULAR e cortava os cantos arredondados do botão — daí o
   halo quadrado em volta dele e o topo aparentemente cortado. A correção é
   liberar o recorte no fim (clip-path: none): durante a revelação a máscara
   atua, e ao terminar o elemento volta a respeitar o próprio border-radius.
   Vale para o botão (arredondado) e para a faixa de pilares (retangular). */
@keyframes heroRevealLeft {
  0% {
    opacity: 0;
    /* -40px nas bordas superior/inferior/direita: dá folga para a SOMBRA do
       botão (que é branca e extravasa a caixa) não ser cortada em ângulo
       reto pelo recorte. Era isso que aparecia como um halo retangular em
       volta do botão e como o topo dele "cortado". */
    clip-path: inset(-40px 100% -40px -40px);
    transform: translateX(-28px) scale(0.92);
  }

  99% {
    clip-path: inset(-40px);
  }

  100% {
    opacity: 1;
    clip-path: none;   /* libera o recorte: o elemento volta ao normal */
    transform: none;
  }
}

/* Cada letra nasce abaixo da linha enquanto o bloco completo continua sendo
   revelado horizontalmente. A curva forte no início dá presença sem bounce. */
@keyframes heroLetterRise {
  0% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(1.05em) scaleY(0.78);
  }

  100% {
    opacity: 1;
    clip-path: inset(0);
    transform: none;
  }
}

.hero-char {
  display: inline-block;
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
  transform-origin: center bottom;
  animation: heroLetterRise 560ms cubic-bezier(.19, 1, .22, 1) both;
  vertical-align: baseline;
}

.hero-word {
  display: inline-block;
  white-space: nowrap;
}

.hero-accent-rise {
  display: inline-block;
  transform-origin: center bottom;
  animation: heroLetterRise 560ms cubic-bezier(.19, 1, .22, 1) both;
  vertical-align: baseline;
}

.hero .eyebrow,
.hero .hero-title .line,
.pillar-hero h1,
.hero .hero-lead,
.hero .hero-actions,
.hero .hero-stats {
  transform-origin: left center;
  animation: heroRevealLeft 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero .eyebrow {
  animation-delay: 0ms;
}

.hero .hero-title .line:nth-child(1) {
  animation-delay: 70ms;
}

.pillar-hero h1 {
  animation-delay: 70ms;
}

.hero .hero-title .line:nth-child(2) {
  animation-delay: 140ms;
}

.hero .hero-title .line:nth-child(3) {
  animation-delay: 210ms;
}

.hero .hero-lead {
  animation-delay: 320ms;
}

.hero .hero-actions {
  animation-delay: 430ms;
}

.hero .hero-stats {
  animation-delay: 520ms;
}


/* --- brilho de varredura ao entrar em tela ---
   Usa um elemento próprio em vez de ::before, que nos blocos de vidro
   já é ocupado pela borda luminosa. */
.sheen {
  position: relative;
  overflow: hidden;
}

.sheen>.sheen-sweep {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg,
      transparent,
      rgba(255, 255, 255, 0.26),
      transparent);
  transform: skewX(-18deg) translateZ(0);
  pointer-events: none;
  z-index: 3;
}

.sheen.in-view>.sheen-sweep {
  animation: sheenSweep 1.5s var(--ease) 0.35s 1;
}

@keyframes sheenSweep {
  to {
    left: 170%;
  }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */


/* Telas baixas em modo paisagem (ex.: 1280x720, notebooks antigos): a altura,
   não a largura, é o limite. Sem isto a descrição e os pilares caem abaixo da
   dobra. Só afeta desktop baixo — o mobile tem seu próprio bloco adiante. */
/* limite ampliado de 800 para 880px de altura: janelas de ~800-870px (comuns
   em notebooks com barra de tarefas e barra do navegador) ficavam de fora por
   poucos pixels e o hero estourava nelas */
@media (min-width: 769px) and (max-height: 880px) {
  .hero-title {
    /* O teto anterior (4.6rem) era fixo e ignorava a largura: em telas largas
       porém baixas o título encolhia demais e ocupava só ~29% da linha.
       Seguindo a decisão de priorizar a largura, aqui também é o vw que
       comanda — apenas com um teto um pouco menor, para que em janelas
       bastante baixas o título não domine a tela inteira sozinho. */
    /* freio por altura também aqui: sem ele esta regra sobrescrevia a base e
       o subtítulo saía da primeira tela em janelas de ~800px */
    font-size: clamp(2.2rem, min(16vw, 16vh), 9rem);
  }

  .hero-lead {
    margin-bottom: 18px;
  }

  .hero-actions {
    margin-bottom: 20px;
  }
}

/* --- responsivo do hero --- */
@media (max-width: 768px) {
  .hero-title {
    letter-spacing: -0.04em;
  }

  /* 1. Controle da Iluminação do Hero e Pilar no Mobile: Prevenção de estiramento e vazamento */
  .hero-art-background,
  .pillar-hero .hero-art-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden !important;
    contain: layout paint;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  .hero-glow-blob,
  .hero-art-background .hero-glow-blob {
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
  }

  .hero-art-background .blob-1,
  .pillar-hero .hero-art-background .blob-1 {
    width: clamp(160px, 45vw, 220px) !important;
    height: clamp(160px, 45vw, 220px) !important;
    top: -10px !important;
    left: -20px !important;
    filter: blur(24px) !important;
  }

  .hero-art-background .blob-2,
  .pillar-hero .hero-art-background .blob-2 {
    width: clamp(150px, 42vw, 200px) !important;
    height: clamp(150px, 42vw, 200px) !important;
    top: 0px !important;
    right: -20px !important;
    filter: blur(24px) !important;
  }

  .hero-art-background .blob-3,
  .pillar-hero .hero-art-background .blob-3 {
    width: clamp(140px, 38vw, 180px) !important;
    height: clamp(140px, 38vw, 180px) !important;
    bottom: 20px !important;
    left: -10px !important;
    filter: blur(22px) !important;
  }

  .hero-art-background .blob-4,
  .pillar-hero .hero-art-background .blob-4 {
    width: clamp(140px, 38vw, 180px) !important;
    height: clamp(140px, 38vw, 180px) !important;
    bottom: 20px !important;
    right: -10px !important;
    filter: blur(22px) !important;
  }

  .hero-art-background .blob-center,
  .pillar-hero .hero-art-background .blob-center {
    width: clamp(180px, 48vw, 220px) !important;
    height: clamp(180px, 48vw, 220px) !important;
    top: 25% !important;
    left: 25% !important;
    filter: blur(28px) !important;
    opacity: 0.35 !important;
  }

  /* 2. Iluminação da Seção Sobre no Mobile
     filter:blur removido aqui também — a suavidade vem do gradiente. No
     celular a GPU é mais fraca, então o desfoque pesava proporcionalmente
     ainda mais. */
  .about-blob.blob-left {
    width: 240px;
    height: 240px;
    left: -40px;
  }

  .about-blob.blob-right {
    width: 220px;
    height: 220px;
    right: -40px;
  }

  .about-blob.blob-center {
    width: 250px;
    height: 250px;
    left: 15%;
    opacity: 0.35;
  }

  /* 3. Iluminação da Seção Final CTA no Mobile */
  .final-cta-glow {
    width: 100%;
    height: 280px;
    filter: blur(38px);
  }

  /* 4. Controle dos Halos das Seções para evitar sangramento */
  .section::before,
  .tech-marquee-section::before {
    top: -20px;
    bottom: -20px;
    filter: blur(20px);
  }

  /* 5. Ações do Hero empilhadas no mobile */
  .pillar-hero h1,
  .final-cta-title,
  .final-cta h2 {
    font-size: clamp(2.5rem, 9.5vw, 3.8rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
    font-weight: 500 !important;
    margin-bottom: 20px !important;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* 6. Espaçamento desobstruído dos Pilares no Mobile (sem elementos grudados) */
  .pillar-hero {
    padding-top: 100px !important;
    padding-bottom: 50px !important;
    min-height: auto !important;
  }

  /* Devolve a faixa que a animação ocupava no desktop, MAS preserva a margem
     lateral do .container. Zerar para 0 tirava também o respiro do container
     e o texto/botões encostavam na borda direita da tela — desalinhados do
     resto da página. O valor repete o padding do .container. */
  .pillar-hero .hero-inner {
    padding-right: clamp(24px, 3.5vw, 64px) !important;
    gap: 16px !important;
  }

  .pillar-hero .eyebrow {
    margin-bottom: 12px !important;
  }

  .pillar-hero h1 {
    font-size: clamp(2.5rem, 9.5vw, 3.8rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
    font-weight: 500 !important;
    margin-bottom: 20px !important;
  }

  .pillar-hero .hero-lead {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    margin-bottom: 28px !important;
  }

  .pillar-hero .hero-actions {
    margin-bottom: 28px !important;
  }

  .pillar-visual {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 320px !important;
    height: 220px !important;
    margin: 20px auto 0 !important;
    transform: none !important;
  }

  /* Desativação da transição 3D do card Sobre no celular (mobile) */
  [data-scroll-reveal] {
    transform: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 700px) {

  /* os pilares passam a duas colunas com padding responsivo */
  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-stat {
    min-height: auto;
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 14px 10px;
    min-width: 0;
  }

  .hero-stat-num {
    font-size: 0.88rem;
  }

  .hero-stat-name {
    font-size: 0.84rem;
    line-height: 1.25;
  }

  .hero-stat:nth-child(2n) {
    border-right: none;
  }

  .hero-stat:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* Abaixo de 860px a animação some e o hero vira uma coluna só de texto.
   Some a animação e devolve toda a largura ao texto (zera a faixa reservada). */
@media (max-width: 860px) {

  /* Mesma correção do bloco mobile: devolve a faixa da animação sem perder
     a margem lateral do .container. */
  .pillar-hero .container.hero-inner,
  .pillar-hero .hero-inner {
    padding-right: clamp(24px, 3.5vw, 64px) !important;
  }

  .pillar-visual {
    display: none !important;
  }

  .pillar-hero {
    padding-top: 122px;
    min-height: auto;
    padding-bottom: 80px;
  }
}

@media (max-width: 900px) {

  /* o cabeçalho editorial empilha: título e depois o apoio */
  .section-head {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 48px;
  }

  .section-head h2,
  .section-head p {
    grid-column: 1;
  }

  .section-head p {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 18px;
  }

  .about h2,
  .final-cta h2 {
    max-width: none;
  }
}

@media (max-width: 980px) {
  .pillar-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .method-steps {
    grid-template-columns: 1fr;
  }

  .diff-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Esconder navegação lateral .dotnav estritamente em telas médias, tablets e celulares --- */
@media (max-width: 1080px), (max-height: 640px) {
  .dotnav,
  #dotNav,
  .dotnav-line,
  .dotnav-progress,
  .dotnav ul,
  .dotnav-item {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* --- Cabeçalho minimalista no mobile: apenas Logo + Botão Hambúrguer --- */
@media (max-width: 900px) {
  .top-nav {
    display: none !important;
  }

  .nav-cta {
    display: none !important;
  }

  .nav-toggle {
    display: flex !important;
  }

  /* Cards de Outras Frentes de Atuação empilhados em 1 coluna vertical */
  .related-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  /* Seção Onde Atuamos nas páginas dos pilares (.diff-grid): empilhada em 1 coluna vertical no celular */
  .diff-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Remoção total do subtítulo da seção Método de Trabalho no mobile */
  .method .section-head p {
    display: none !important;
  }

  /* Prevenção total de rolagem horizontal */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative !important;
  }

  img, video, canvas, svg {
    max-width: 100% !important;
  }

  /* Painel do formulário responsivo */
  /* Harmonização e Uniformização dos Espaçamentos do Formulário no Mobile */
  .contact-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    padding: clamp(24px, 5vw, 36px) clamp(16px, 4vw, 26px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .contact-text h2 {
    margin-bottom: 12px !important;
  }

  .contact-text p {
    margin-bottom: 0 !important;
    line-height: 1.55 !important;
  }

  .contact-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .field {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .field label {
    margin: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 0.86rem !important;
    line-height: 1.35 !important;
    color: var(--ink-1) !important;
  }

  .field input,
  .field select,
  .field textarea,
  .custom-select-trigger {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .field textarea {
    height: auto !important;
    min-height: 96px !important;
    padding: 12px 14px !important;
    line-height: 1.5 !important;
  }

  .phone-input-group {
    display: flex !important;
    gap: 8px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .phone-input-group input[type="tel"] {
    flex: 1 !important;
    height: 48px !important;
    min-height: 48px !important;
    min-width: 0 !important;
  }

  .country-select-trigger {
    height: 48px !important;
    min-height: 48px !important;
  }

  .related .section-head h2 {
    white-space: normal !important;
    word-break: break-word !important;
    font-size: clamp(1.8rem, 6.5vw, 2.5rem) !important;
    line-height: 1.2 !important;
  }

  /* Empilhamento vertical absoluto dos cards dos pilares no mobile (1 card embaixo do outro) */
  .pillar-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    width: 100% !important;
  }

  .pillar-grid .glass-card,
  .pillar-card {
    width: 100% !important;
    min-height: auto !important;
    aspect-ratio: auto !important;
    padding-bottom: 32px !important;
  }

  /* Borda de luz cristalina e aura ambiente luminosa nos cards dos pilares no mobile */
  .pillar-grid .glass-card,
  .pillar-card,
  .related-card {
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.65),
      inset 1px 0 0 rgba(255, 255, 255, 0.15),
      0 0 24px -4px var(--c1, rgba(91, 140, 255, 0.45)),
      0 12px 32px rgba(0, 0, 0, 0.45) !important;
  }

  .pillar-card > .pillar-aura {
    opacity: 0.95 !important;
  }
}

/* O menu mobile em tela cheia só existe quando aberto (acima de 900px some) */
@media (min-width: 901px) {
  .mobile-menu {
    display: none !important;
  }
}

/* ==========================================================================
   COESÃO ENTRE SEÇÕES — costura visual
   ========================================================================== */

/* o conteúdo da seção fica acima da spine e do glow */
.section>.container {
  position: relative;
  z-index: 1;
}

/* faixa fina de transição, com um ponto de luz central, entre blocos maiores */
.section-divider {
  position: relative;
  height: 1px;
  /* respiro vertical próprio, para não colar nas seções, e largura
     alinhada ao container com o mesmo padding lateral das seções */
  margin: 8px auto;
  width: calc(100% - 2 * clamp(24px, 3.5vw, 64px));
  max-width: var(--container);
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.14) 30%,
      rgba(255, 255, 255, 0.14) 70%,
      transparent);
}

.section-divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 14px var(--accent-2);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero .eyebrow,
  .hero .hero-title .line,
  .pillar-hero h1,
  .hero .hero-lead,
  .hero .hero-actions,
  .hero .hero-stats {
    animation: none !important;
    opacity: 1;
    clip-path: inset(0);
    transform: none;
  }

  .hero-char,
  .hero-accent-rise {
    animation: none !important;
    opacity: 1;
    clip-path: inset(0);
    transform: none;
  }
}

/* ==========================================================================
   DESEMPENHO EM ALTA TAXA DE ATUALIZAÇÃO (120 / 144 / 240 Hz)

   A 60 Hz o navegador tem 16,7 ms para montar cada quadro; a 144 Hz, apenas
   6,9 ms. Nesse orçamento, backdrop-filter é inviável em vários elementos ao
   mesmo tempo — ele recaptura e desfoca todo o fundo de cada elemento, e o
   fundo muda a cada quadro enquanto a página rola.

   A classe .is-scrolling é aplicada pelo js/scroll-perf.js somente enquanto
   há movimento, e removida 140 ms após parar. O vidro some durante a rolagem
   (quando ninguém consegue percebê-lo) e volta assim que a página assenta.
   ========================================================================== */

.is-scrolling .glass-card,
.is-scrolling .glass-panel,
.is-scrolling .pillar-grid .glass-card,
.is-scrolling .about-diff-card,
.is-scrolling .about-highlight-card,
.is-scrolling .about-hero-panel,
.is-scrolling .contact-panel,
.is-scrolling .btn-glass,
.is-scrolling .hero-badge {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* O HEADER e o botão do header ficam de FORA desta regra de propósito.
   Eles estavam incluídos, e o resultado era o bug relatado: durante a
   rolagem o desfoque era desligado, e só voltava 140 ms depois de a página
   parar — dando a impressão de que o fosco "demorava" a aparecer atrás da
   barra. Como o header é pequeno e está sempre visível, o custo do seu
   desfoque é irrelevante perto do incômodo visual de vê-lo piscar. */

/* O tilt 3D também não é perceptível em movimento e mantém camadas de
   composição ativas — suspenso pelo mesmo motivo. */
.is-scrolling [data-tilt] {
  transform-style: flat;
}

/* ==========================================================================
   SEÇÃO SOBRE — pausa das luzes durante a rolagem

   Medição objetiva (Chrome headless, 1600x900): a seção ficava em 125 fps,
   contra 165-210 das demais. A causa é a combinação de 9 cartões com
   backdrop-filter sobre 3 blobs que animam sem parar — cada movimento dos
   blobs invalida o desfoque dos 9 cartões, forçando recálculo por quadro.

   Testes comparativos:
     - remover o backdrop-filter dos cartões: 152 fps, mas perde o vidro
     - congelar os blobs de vez:              133 fps, e perde o movimento
     - PAUSAR os blobs só durante a rolagem:  140 fps, sem perder nada

   A última é a adotada: em movimento o deslocamento dos blobs é
   imperceptível, e assim que a página para eles voltam a animar. Vidro,
   cores e movimento preservados.
   ========================================================================== */
.is-scrolling .about-blob {
  animation-play-state: paused;
}

/* ==========================================================================
   POP-UP DE CONFIRMAÇÃO DE ENVIO
   Aparece após o servidor confirmar o recebimento do formulário.
   ========================================================================== */

.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 5, 7, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.26s var(--ease);
}

.popup-overlay.aberto {
  opacity: 1;
}

.popup-caixa {
  position: relative;
  width: min(460px, 100%);
  padding: clamp(30px, 4vw, 42px) clamp(26px, 3.4vw, 38px);
  border-radius: var(--radius-md, 20px);
  text-align: center;
  background: linear-gradient(160deg, rgba(22, 26, 33, 0.96) 0%, rgba(12, 14, 18, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  transform: translateY(14px) scale(0.97);
  transition: transform 0.3s var(--ease);
}

.popup-overlay.aberto .popup-caixa {
  transform: none;
}

.popup-icone {
  width: 54px;
  height: 54px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #06181a;
  background: var(--accent-2);
  box-shadow: 0 0 34px -6px var(--accent-2);
}

.popup-icone svg {
  width: 26px;
  height: 26px;
}

.popup-titulo {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink-0);
  margin-bottom: 12px;
}

.popup-texto {
  color: var(--ink-2);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.62;
  margin-bottom: 26px;
}

.popup-acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.popup-acoes .btn {
  flex: 1 1 auto;
  min-width: 150px;
  justify-content: center;
}

@media (max-width: 480px) {
  .popup-acoes {
    flex-direction: column;
  }

  .popup-acoes .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .popup-overlay,
  .popup-caixa {
    transition: none;
  }
}