/* ==========================================================================
   DATA SOLUTIONS — Design System
   Branco + Preto como base. Vermelho como sinal de interação/destaque.
   Tipografia geométrica, muito espaço negativo, poucos elementos.
   ========================================================================== */

:root{
  --white:      #FFFFFF;
  --black:      #111111;
  --red:        #E31B23;
  --gray:       #6B6B6B;
  --gray-light: #EDEDED;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* type scale — mobile-first, fluid via clamp() */
  --fs-hero:    clamp(2.75rem, min(8.2vw, 13.5vh), 7.5rem);
  --fs-section: clamp(2rem, min(5.5vw + 0.5rem, 11vh), 4.75rem);
  --fs-card:    clamp(1.25rem, 1.2vw + 1rem, 1.65rem);
  --fs-body:    clamp(1rem, 0.3vw + 0.9rem, 1.125rem);
  --fs-label:   0.75rem;

  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --container-max: 1280px;
  --pad: clamp(1.25rem, 4vw, 4rem);

  --nav-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body, h1, h2, h3, p, ul, figure{ margin: 0; }
ul{ list-style: none; padding: 0; }
a{ color: inherit; text-decoration: none; }
img, svg{ display: block; max-width: 100%; }
button{ font: inherit; background: none; border: none; cursor: pointer; color: inherit; padding: 0; }

body{
  font-family: var(--font);
  background: var(--white);
  color: var(--black);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.container--narrow{ max-width: 780px; }

.label{
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.25rem;
}

.dot{ color: var(--red); }

.arrow{ display: inline-block; transition: transform .35s var(--ease-out); }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  transition: transform .3s var(--ease-out), background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
  white-space: nowrap;
}
.btn--primary{ background: var(--black); color: var(--white); }
.btn--primary:hover{ background: var(--red); transform: translateY(-2px); }
.btn--primary:hover .arrow{ transform: translateX(4px); }

.btn--ghost{ background: transparent; color: var(--black); border: 1px solid var(--gray-light); }
.btn--ghost:hover{ border-color: var(--black); transform: translateY(-2px); }
.btn--ghost:hover .arrow{ transform: translateX(4px); }

.btn--lg{ padding: 1.15rem 2.1rem; font-size: 1.05rem; }

/* ---------- Custom cursor (desktop, fine pointer only) ---------- */
.cursor-dot, .cursor-ring{
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  border-radius: 50%;
  z-index: 9999;
  transform: translate(-50%,-50%);
  will-change: transform;
  opacity: 0;
  transition: opacity .3s ease;
}
.cursor-dot{ width: 6px; height: 6px; background: var(--black); }
.cursor-ring{
  width: 32px; height: 32px;
  border: 1px solid var(--gray);
  transition: width .25s var(--ease-out), height .25s var(--ease-out), border-color .25s var(--ease-out), opacity .3s ease, background .25s var(--ease-out);
}
body.cursor-ready .cursor-dot,
body.cursor-ready .cursor-ring{ opacity: 1; }
body.cursor-hover .cursor-ring{
  width: 54px; height: 54px;
  background: rgba(227,27,35,0.08);
  border-color: var(--red);
}
body.cursor-hover .cursor-dot{ background: var(--red); }

@media (hover: none), (pointer: coarse){
  .cursor-dot, .cursor-ring{ display: none; }
}

/* ---------- Scroll reveal ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(46px) scale(.97);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 110ms);
}
[data-reveal].is-visible{ opacity: 1; transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
  html{ scroll-behavior: auto; }
}

/* ---------- Scroll accents — small node clusters spread through the
   page, in the site palette, that draw in as each section is reached
   and then keep a slow idle float. A quiet "new era of AI" motif that
   echoes the Hero's particle network without turning into clutter. ---------- */
.accent-nodes{
  position: absolute;
  width: clamp(84px, 9vw, 140px);
  height: clamp(84px, 9vw, 140px);
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  transition: opacity .3s ease;
}
.accent-nodes.is-visible{ opacity: 1; }
.accent-nodes svg{ width: 100%; height: 100%; overflow: visible; }
.accent-nodes .accent__group{ transform-origin: 60px 60px; }
.accent-nodes.is-floating .accent__group{ animation: accentFloat 7s ease-in-out infinite; }
@keyframes accentFloat{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-10px) rotate(2deg); }
}
.accent__line{
  fill: none;
  stroke: var(--gray-light);
  stroke-width: 1.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.accent__dot{
  fill: var(--black);
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
}
.accent__dot--red{ fill: var(--red); }
.accent-nodes.is-light .accent__line{ stroke: rgba(255,255,255,.28); }
.accent-nodes.is-light .accent__dot{ fill: rgba(255,255,255,.75); }
.accent-nodes.is-light .accent__dot--red{ fill: var(--red); }

.accent--tr{ top: 2rem; right: 2rem; }
.accent--tl{ top: 2rem; left: 2rem; }
.accent--br{ bottom: 2rem; right: 2rem; }
.accent--bl{ bottom: 2rem; left: 2rem; }

@media (max-width: 900px){
  .accent-nodes{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .accent-nodes.is-floating .accent__group{ animation: none; }
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background .4s var(--ease-out), border-color .4s var(--ease-out), backdrop-filter .4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled{
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  border-color: var(--gray-light);
}
.nav__inner{
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* ---------- Brand mark — traçado fiel ao símbolo de "logo vet.png"
   (viewBox 0 0 592 366: o D, as três barras e os três chips) ---------- */
.brand-mark__d,
.brand-mark__bar,
.brand-mark__chip{ fill: var(--red); }

.nav__logo{
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.nav__logo strong{ font-weight: 800; margin-left: .25em; }
.nav__logo-mark{ width: 34px; height: 21px; overflow: visible; flex-shrink: 0; }

.nav__links{
  display: none;
  align-items: center;
  gap: 2.25rem;
  font-size: .9rem;
  font-weight: 500;
}
.nav__links a{ position: relative; padding: .25rem 0; }
.nav__links a::after{
  content: '';
  position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 1px; background: var(--black);
  transition: right .35s var(--ease-out);
}
.nav__links a:hover::after{ right: 0; }
/* seção sendo lida — sinal discreto, no vermelho da marca */
.nav__links a.is-current::after{ right: 0; background: var(--red); }

.nav__burger{
  width: 32px; height: 22px;
  position: relative;
}
.nav__burger span{
  position: absolute; left: 0; right: 0; height: 1.5px; background: var(--black);
  transition: transform .35s var(--ease-out), opacity .2s ease, top .35s var(--ease-out);
}
.nav__burger span:nth-child(1){ top: 0; }
.nav__burger span:nth-child(2){ top: 100%; transform: translateY(-100%); }
.nav__burger[aria-expanded="true"] span:nth-child(1){ top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ top: 50%; transform: translateY(-50%) rotate(-45deg); }

.nav__mobile{
  position: fixed;
  top: var(--nav-h); left: 0; right: 0; bottom: 0;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 1rem var(--pad) 2rem;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility .35s;
}
.nav__mobile.is-open{
  opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto;
}
.nav__mobile a{
  font-size: 1.5rem;
  font-weight: 600;
  padding: 1rem 0;
  border-bottom: 1px solid var(--gray-light);
}

@media (min-width: 900px){
  .nav__links{ display: flex; }
  .nav__burger{ display: none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  overflow: hidden;
}
/* ---------- Hero visual — "Data Constellation"
   O símbolo da marca (segundo ponto focal) dentro de uma rede de dados.
   Poucos elementos SVG, animados por transform/opacity/dashoffset — a
   entrada e a sincronia com o scroll ficam em js/hero-mark.js. ---------- */
.hero__visual{
  position: absolute;
  width: clamp(280px, 32vw, 480px);
  aspect-ratio: 1;
  right: 5vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}
.hero__visual-float{
  width: 100%; height: 100%;
  animation: hvFloat 9s ease-in-out infinite;
}
.hv{ width: 100%; height: 100%; overflow: visible; }

/* O logo 3D (js/hero-3d.js) ocupa a mesma caixa do simbolo SVG.
   O SVG so sai de cena depois que o 3D renderiza o primeiro frame:
   sem WebGL/Three.js/JS, a marca continua visivel. */
.hv__3d{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;                      /* vazio até o primeiro frame: não pode
                                      cobrir o símbolo SVG antes disso */
  transition: opacity .35s ease;
}
.hero__visual.is-3d .hv__3d{ opacity: 1; }
.hero__visual.is-3d .hv__mark{ display: none; }

@keyframes hvFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-9px); }
}

/* órbitas */
.hv__orbit{ fill: none; stroke: var(--gray-light); stroke-width: 1.5; }
.hv__orbit--inner{ stroke-dasharray: 2 9; opacity: .75; }
.hv__arc{
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: .06 .94;   /* pathLength="1" */
  opacity: .9;
}

/* linhas da rede */
/* Estado de repouso VISÍVEL: se o JS não rodar, a rede aparece desenhada.
   Quem anima é que esconde, e só na hora de animar (js/hero-mark.js). */
.hv__line, .hv__link{
  stroke: var(--gray);
  stroke-width: 1;
  opacity: .45;
  stroke-dasharray: 1;         /* pathLength="1" */
  stroke-dashoffset: 0;
}
/* exceção: a linha de saída só faz sentido depois que o scroll começa */
.hv__link{ opacity: .3; stroke-dashoffset: 1; }

/* nós */
.hv__node-in{
  fill: var(--gray);
  transform-box: fill-box;
  transform-origin: center;
}
.hv__node-in--dark{ fill: var(--black); }
.hv__node-in--red{ fill: var(--red); }

/* símbolo */
.hv__mark,
.hv__mark-in{
  transform-box: fill-box;
  transform-origin: center;
}
/* O símbolo nunca começa invisível: sem JS, sem anime.js, sem WebGL ou com
   movimento reduzido, ele simplesmente está lá. */

/* Tablet — símbolo menor e rede mais enxuta */
@media (max-width: 1100px){
  .hero__visual{ width: clamp(240px, 30vw, 360px); }
  .hv__node:nth-child(n+7){ display: none; }
  .hv__line[data-line="scroll"]:nth-child(n+4){ display: none; }
}

/* Mobile — o símbolo sai do canto direito, sem empurrar o texto */
@media (max-width: 899px){
  .hero{ flex-direction: column; justify-content: center; }
  .hero__visual{
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    align-self: flex-end;
    width: min(50vw, 196px);
    margin: 0 -8vw -2.25rem 0;
  }
  .hv__link{ display: none; }
  .hv__orbit--inner{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .hero__visual-float{ animation: none; }
}

.hero__content{
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--pad);
  width: 100%;
}
.eyebrow{
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--gray);
  margin-bottom: 1.75rem;
}
.hero__title{
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.hero__title span{ display: block; }
.hero__title em{ color: var(--red); font-style: normal; }
/* no desktop o título divide a largura com o símbolo — a quebra passa a
   acontecer antes da constelação, sem reduzir o tamanho da tipografia */
@media (min-width: 900px){
  .hero__title{ max-width: min(16ch, 56vw); }
  .hero__text{ max-width: min(42ch, 46vw); }
}

.hero__text{
  margin-top: 1.75rem;
  max-width: 42ch;
  font-size: clamp(1rem, 1vw + .8rem, 1.25rem);
  color: var(--gray);
}
.hero__actions{
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Notebooks com pouca altura: aperta os respiros do hero para os
   botoes nao cairem abaixo da dobra. */
@media (min-width: 900px) and (max-height: 760px){
  .hero{ padding-top: 2rem; }
  .hero__title{ line-height: 1; }
  .eyebrow{ margin-bottom: .9rem; }
  .hero__text{ margin-top: 1rem; }
  .hero__actions{ margin-top: 1.5rem; }
  .hero__scroll{ display: none; }
}

.hero__scroll{
  position: absolute;
  bottom: 2.25rem; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 46px;
  background: var(--gray-light);
  z-index: 2;
  overflow: hidden;
}
.hero__scroll span{
  position: absolute; top: 0; left: 0; right: 0; height: 100%;
  background: var(--red);
  transform: translateY(-100%);
  animation: scrollLine 2.2s var(--ease-out) infinite;
}
/* transform em vez de top: não provoca layout a cada frame */
@keyframes scrollLine{
  0%{ transform: translateY(-100%); }
  60%{ transform: translateY(100%); }
  100%{ transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce){
  .hero__scroll span{ animation: none; transform: translateY(0); }
}

/* ==========================================================================
   SECTION GENERIC
   ========================================================================== */
.section{
  padding: clamp(5rem, 10vw, 10rem) 0;
  position: relative;
}
/* A faixa "do produto à decisão" é que fecha o intervalo entre estas duas
   seções — sem ela sobravam 273px de branco. Os respiros de cima e de baixo
   encolhem para a faixa ocupar o vão em vez de boiar dentro dele. */
.section--what{ padding-bottom: clamp(1.5rem, 3vw, 3rem); }
.section--services{ padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.section__title{
  text-wrap: balance;
  font-size: var(--fs-section);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.08;
  max-width: 18ch;
}
.section__lede{
  margin-top: 1.5rem;
  max-width: 52ch;
  font-size: clamp(1rem, .6vw + .85rem, 1.2rem);
  color: var(--gray);
}

/* ==========================================================================
   O QUE FAZEMOS — blocos
   ========================================================================== */
.what-grid{
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--gray-light);
}
.what-block{
  position: relative;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--gray-light);
  cursor: pointer;
}
.what-block::before{
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s var(--ease-out);
}
.what-block.is-active::before{ transform: scaleX(1); }
.what-block:focus-visible{ outline: 2px solid var(--red); outline-offset: -2px; }
.what-block__head{
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
}
.what-block__index{
  font-size: .8rem;
  color: var(--gray);
  font-weight: 600;
  letter-spacing: .08em;
  transition: color .3s ease;
}
/* o nó que precede o número liga o bloco ao sistema de pontos da página */
.what-block__index::before{
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gray-light);
  margin-right: .55rem;
  vertical-align: middle;
  transition: background .3s ease, transform .35s var(--ease-spring);
}
.what-block.is-active .what-block__index{ color: var(--red); }
.what-block.is-active .what-block__index::before{ background: var(--red); transform: scale(1.2); }
.what-block__head h3{
  font-size: clamp(1.4rem, 2vw + .8rem, 2.25rem);
  font-weight: 700;
  transition: color .3s ease;
}
.what-block__list{
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .5s var(--ease-out), opacity .4s ease, margin-top .5s var(--ease-out);
}
.what-block__list li{
  overflow: hidden;
  color: var(--gray);
  font-size: .95rem;
  padding-left: calc(1.25rem + 2.4rem);
}
.what-block__list > li{ min-height: 0; }
.what-block.is-active .what-block__list{
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 1rem;
}
.what-block.is-active .what-block__list li{ padding-bottom: .5rem; }
.what-block.is-active .what-block__head h3{ color: var(--red); }

.what-block__list{ display: grid; }
.what-block__list li{ display: block; overflow: hidden; }

@media (min-width: 900px){
  .what-grid{ flex-direction: row; border-top: none; }
  .what-block{
    flex: 1;
    border-bottom: none;
    border-right: 1px solid var(--gray-light);
    padding: 2.5rem 2rem;
    transition: flex .55s var(--ease-out), background .4s ease;
  }
  .what-block:last-child{ border-right: none; }
  .what-block:hover, .what-block.is-active{ flex: 2.2; background: var(--gray-light); }
  .what-block:hover::before{ transform: scaleX(1); }
  .what-block:hover .what-block__head h3,
  .what-block:hover .what-block__index{ color: var(--red); }
  .what-block:hover .what-block__index::before{ background: var(--red); transform: scale(1.2); }
  .what-block__head{ flex-direction: column; align-items: flex-start; gap: .75rem; }
}

/* ==========================================================================
   SERVIÇOS — CARDS
   ========================================================================== */
/* A régua de 1px vem de um contorno em cada card, não do fundo do grid:
   com 10 cards em 3 colunas a última fileira fica incompleta, e um fundo
   cinza deixaria um bloco vazio à direita do card 10. */
.cards-grid{
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
}
@media (min-width: 700px){
  .cards-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px){
  .cards-grid{ grid-template-columns: repeat(3, 1fr); }
}

.card{
  position: relative;
  background: var(--white);
  padding: 2.25rem 1.75rem;
  box-shadow: 0 0 0 1px var(--gray-light);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), opacity .45s var(--ease-out), z-index 0s;
  z-index: 1;
}
/* linha vermelha de estado — mesma gramática do "O que fazemos" */
.card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease-out);
}
.card.is-active::before{ transform: scaleX(1); }
.card.is-active{
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px var(--gray-light), 0 22px 44px -26px rgba(17,17,17,0.22);
  z-index: 2;
}
.card.is-dimmed{ opacity: .6; }

.card__num{
  position: absolute;
  top: 1.5rem; right: 1.75rem;
  font-size: .75rem;
  color: var(--gray);
  font-weight: 600;
  letter-spacing: .08em;
  transition: color .3s ease;
}
.card.is-active .card__num{ color: var(--red); }
.card__icon{
  width: 48px; height: 48px;
  margin-bottom: 1.75rem;
  position: relative;
}
.card__title{
  font-size: var(--fs-card);
  font-weight: 700;
  margin-bottom: .6rem;
}
.card__text{
  color: var(--gray);
  font-size: .95rem;
  max-width: 34ch;
}
.card__link{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1.5rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--black);
}
.card.is-active .card__link{ color: var(--red); }
.card.is-active .card__link .arrow{ transform: translateX(5px); }

/* ==========================================================================
   Ícones dos serviços — arte de linha animada
   REGRA: o estado de repouso é o desenho COMPLETO e parado. As animações só
   entram com .card.is-inview (js/card-icons.js), que também as desliga
   quando o card sai da tela. Assim nada depende de script para ser legível
   e nenhum ícone gasta frames fora de vista.
   ========================================================================== */
.ci{ width: 100%; height: 100%; overflow: visible; }
.ci .s{
  fill: none;
  stroke: var(--black);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ci .l{ fill: none; stroke: var(--gray-light); stroke-width: 2; stroke-linecap: round; }
.ci .r{ stroke: var(--red); }
.ci .rf{ fill: var(--red); }
.ci .gf{ fill: var(--gray-light); }
.ci .bf{ fill: var(--black); }

/* traços que se desenham: repouso = desenhado (dashoffset 0) */
.ci .dr{ stroke-dasharray: 1; stroke-dashoffset: 0; }

.ci circle, .ci rect, .ci polygon{ transform-box: fill-box; transform-origin: center; }

/* ---------- keyframes compartilhados ---------- */
@keyframes ciDraw{
  0%{ stroke-dashoffset: 1; }
  30%, 72%{ stroke-dashoffset: 0; }
  92%, 100%{ stroke-dashoffset: 1; }
}
@keyframes ciPop{
  0%, 8%{ transform: scale(0); opacity: 0; }
  26%, 74%{ transform: scale(1); opacity: 1; }
  94%, 100%{ transform: scale(0); opacity: 0; }
}
@keyframes ciBlink{
  0%, 100%{ opacity: .25; }
  50%{ opacity: 1; }
}
@keyframes ciPulse{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.18); }
}
@keyframes ciRise{
  0%, 10%{ transform: scaleY(0); }
  45%, 80%{ transform: scaleY(1); }
  96%, 100%{ transform: scaleY(0); }
}

/* ---------- 01 Sites & Aplicativos: a página se escreve ---------- */
.card.is-inview [data-icon="browser"] .dr{ animation: ciDraw 4s var(--ease-out) infinite; }
.card.is-inview [data-icon="browser"] .a2{ animation-delay: .18s; }
.card.is-inview [data-icon="browser"] .a3{ animation-delay: .36s; }

/* ---------- 02 Dados & Infraestrutura: servidores vivos ---------- */
.card.is-inview [data-icon="infra"] .blink{ animation: ciBlink 1.9s ease-in-out infinite; }
.card.is-inview [data-icon="infra"] .b2{ animation-delay: .32s; }
.card.is-inview [data-icon="infra"] .b3{ animation-delay: .64s; }

/* ---------- 03 Sistemas de RPM: o ponteiro varre a escala ---------- */
.ci .needle{ transform-box: view-box; transform-origin: 24px 34px; }
.card.is-inview [data-icon="rpm"] .needle{ animation: ciNeedle 3.2s ease-in-out infinite; }
.card.is-inview [data-icon="rpm"] .gauge{ animation: ciDraw 3.2s ease-in-out infinite; }
@keyframes ciNeedle{
  0%, 100%{ transform: rotate(-52deg); }
  50%{ transform: rotate(52deg); }
}

/* ---------- 04 Dashboards: o painel varia o tempo todo ---------- */
.ci .bar{ transform-box: view-box; transform-origin: center 35.5px; }
.card.is-inview [data-icon="dashboard"] .v1{ animation: ciBar1 2.6s ease-in-out infinite; }
.card.is-inview [data-icon="dashboard"] .v2{ animation: ciBar2 3.1s ease-in-out infinite; }
.card.is-inview [data-icon="dashboard"] .v3{ animation: ciBar3 2.2s ease-in-out infinite; }
.card.is-inview [data-icon="dashboard"] .v4{ animation: ciBar1 3.6s ease-in-out infinite reverse; }
@keyframes ciBar1{ 0%,100%{ transform: scaleY(.45); } 50%{ transform: scaleY(1); } }
@keyframes ciBar2{ 0%,100%{ transform: scaleY(1); } 50%{ transform: scaleY(.35); } }
@keyframes ciBar3{ 0%,100%{ transform: scaleY(.7); } 35%{ transform: scaleY(.3); } 70%{ transform: scaleY(1); } }

/* ---------- 05 Análise de Dados: os pontos aparecem, o gráfico se forma ---------- */
.card.is-inview [data-icon="analysis"] .pt{ animation: ciPop 4.2s var(--ease-out) infinite; }
.card.is-inview [data-icon="analysis"] .p2{ animation-delay: .16s; }
.card.is-inview [data-icon="analysis"] .p3{ animation-delay: .32s; }
.card.is-inview [data-icon="analysis"] .p4{ animation-delay: .48s; }
.card.is-inview [data-icon="analysis"] .trend{ animation: ciDraw 4.2s var(--ease-out) .6s infinite; }

/* ---------- 06 IA na Operação: o dado percorre a operação ---------- */
.card.is-inview [data-icon="ops"] .packet{ animation: ciOps 3.4s ease-in-out infinite; }
@keyframes ciOps{
  0%{ transform: translate(0, 0); }
  30%{ transform: translate(10px, -14px); }
  62%{ transform: translate(22px, -6px); }
  88%, 100%{ transform: translate(32px, -22px); }
}

/* ---------- 07 Núcleo de Tecnologia: o núcleo ramifica ---------- */
.card.is-inview [data-icon="core"] .br{ animation: ciDraw 4.4s var(--ease-out) infinite; }
.card.is-inview [data-icon="core"] .b2{ animation-delay: .14s; }
.card.is-inview [data-icon="core"] .b3{ animation-delay: .28s; }
.card.is-inview [data-icon="core"] .b4{ animation-delay: .42s; }
.card.is-inview [data-icon="core"] .nd{ animation: ciPop 4.4s var(--ease-out) .3s infinite; }
.card.is-inview [data-icon="core"] .core{ animation: ciPulse 2.4s ease-in-out infinite; }

/* ---------- 08 IA Personalizada: a rede dispara ---------- */
.card.is-inview [data-icon="ai"] .sy{ animation: ciFire 3s ease-in-out infinite; }
.card.is-inview [data-icon="ai"] .s2{ animation-delay: .12s; }
.card.is-inview [data-icon="ai"] .s3{ animation-delay: .24s; }
.card.is-inview [data-icon="ai"] .s4{ animation-delay: .36s; }
.card.is-inview [data-icon="ai"] .s5{ animation-delay: .48s; }
.card.is-inview [data-icon="ai"] .s6{ animation-delay: .6s; }
.card.is-inview [data-icon="ai"] .s7{ animation-delay: .72s; }
@keyframes ciFire{
  0%, 100%{ stroke: var(--gray-light); }
  40%, 60%{ stroke: var(--red); }
}

/* ---------- 09 Impressão 3D: a cabeça imprime camada por camada ---------- */
.ci .head{ transform-box: view-box; transform-origin: center; }
.card.is-inview [data-icon="printer"] .head{ animation: ciHead 2.1s ease-in-out infinite; }
.ci .ly{ transform-box: fill-box; transform-origin: center bottom; }
.card.is-inview [data-icon="printer"] .ly{ animation: ciRise 4.2s var(--ease-out) infinite; }
.card.is-inview [data-icon="printer"] .y2{ animation-delay: .22s; }
.card.is-inview [data-icon="printer"] .y3{ animation-delay: .44s; }
.card.is-inview [data-icon="printer"] .y4{ animation-delay: .66s; }
@keyframes ciHead{
  0%, 100%{ transform: translateX(-9px); }
  50%{ transform: translateX(9px); }
}

/* ---------- 10 Produtos para E-commerce: o produto é desenhado e depois
     impresso em 3D logo abaixo ---------- */
.card.is-inview [data-icon="ecommerce"] .wr{ animation: ciDraw 4.6s var(--ease-out) infinite; }
.card.is-inview [data-icon="ecommerce"] .w2{ animation-delay: .2s; }
.card.is-inview [data-icon="ecommerce"] .w3{ animation-delay: .4s; }
.ci .printed{ transform-box: view-box; transform-origin: 24px 43px; }
.card.is-inview [data-icon="ecommerce"] .printed{ animation: ciRise 4.6s var(--ease-out) 1s infinite; }
.ci .prtop{ opacity: .65; }

@media (prefers-reduced-motion: reduce){
  .ci *{ animation: none !important; }
}

/* ==========================================================================
   FAIXA "DO PRODUTO À DECISÃO" — preenche o intervalo entre "O que fazemos"
   e "Serviços". Os estágios aparecem da esquerda para a direita no scroll.
   ========================================================================== */
.buildflow{
  --bf-size: clamp(52px, 6vw, 76px);
  position: relative;
  max-width: 940px;
  margin: clamp(1.25rem, 3vw, 2.25rem) auto 0;
  padding-top: .5rem;
}
.buildflow__track{
  position: absolute;
  top: calc(.5rem + var(--bf-size) / 2 - 1px);
  left: 5%;
  right: 5%;
  height: 2px;
  background: var(--gray-light);
}
.buildflow__fill{
  display: block;
  height: 100%;
  background: var(--red);
  transform-origin: left center;
}
.buildflow__steps{
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.buildflow__step{
  width: var(--bf-size);
  height: var(--bf-size);
  flex-shrink: 0;
  background: var(--white);
  padding: 7px;
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
/* repouso: faixa inteira visível. A animação só existe quando o JS assume. */
.buildflow.is-anim .buildflow__fill{ transform: scaleX(0); }
.buildflow.is-anim .buildflow__step{ opacity: 0; transform: translateX(-20px); }
.buildflow.is-anim .buildflow__step.is-on{ opacity: 1; transform: translateX(0); }

/* o desenho interno de cada estágio entra junto com o estágio */
.buildflow.is-anim .buildflow__step .dr{ stroke-dashoffset: 1; }
.buildflow.is-anim .buildflow__step.is-on .dr{
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .9s var(--ease-out) .15s;
}

@media (max-width: 560px){
  .buildflow__steps{ gap: .5rem; }
}
@media (prefers-reduced-motion: reduce){
  .buildflow__step{ transition: none; }
}

/* ==========================================================================
   O QUE FAZEMOS — abre no hover (antes exigia clique)
   ========================================================================== */
@media (hover: hover) and (min-width: 900px){
  .what-block:hover .what-block__list{
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 1rem;
  }
  .what-block:hover .what-block__list li{ padding-bottom: .5rem; }
}

/* ==========================================================================
   FILOSOFIA — fundo preto
   ========================================================================== */
.section--philosophy{
  background: var(--black);
  color: var(--white);
  padding: clamp(6rem, 14vw, 11rem) 0;
  overflow: hidden;
}
/* símbolo gigante quase imperceptível ao fundo + rede ao redor */
.philosophy__ghost{
  position: absolute;
  width: min(55vw, 760px);
  right: -8vw;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}
.philosophy__ghost-svg{ width: 100%; height: auto; overflow: visible; }
.philosophy__ghost-mark .brand-mark__d,
.philosophy__ghost-mark .brand-mark__bar,
.philosophy__ghost-mark .brand-mark__chip{ opacity: .05; }
.philosophy__ghost-net line{ stroke: rgba(255,255,255,.10); stroke-width: 2; }
.philosophy__ghost-net circle{ fill: rgba(255,255,255,.16); }
.philosophy__ghost-net circle.is-red{ fill: rgba(227,27,35,.45); }
.section--philosophy .container{ position: relative; z-index: 1; }

@media (max-width: 899px){
  .philosophy__ghost{ width: 92vw; right: -30vw; }
}
.philosophy__title{
  font-size: var(--fs-section);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.philosophy__title .line{ display: block; }
.line--red{ color: var(--red); }
.line--red .word{
  display: inline-block;
  opacity: .12;
  transition: opacity .5s var(--ease-out);
}
.line--red.is-visible .word{ opacity: 1; }
.line--red.is-visible .word:nth-child(2){ transition-delay: .18s; }

/* ---------- Pin/sticky scroll storytelling (desktop only) ---------- */
.pin-wrap{ position: relative; }
.pin-sticky{ width: 100%; }

@media (min-width: 900px){
  .pin-wrap{ height: 230vh; }
  .pin-sticky{
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .pin-sticky .container{ width: 100%; }
}

/* ==========================================================================
   COMO TRABALHAMOS — processo
   ========================================================================== */
.process{ margin-top: 4rem; }
.process__line{
  position: relative;
  height: 2px;
  background: var(--gray-light);
  margin-bottom: 3rem;
}
.process__line-fill{
  position: absolute; top:0; left:0; bottom:0;
  width: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
/* um nó por etapa, no mesmo sistema visual de pontos/linhas da página */
.process__node{
  position: absolute;
  top: 50%;
  left: calc(var(--i) * 20%);
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--gray-light);
  transition: background .3s ease, border-color .3s ease, transform .35s var(--ease-spring);
}
.process__node.is-active{
  background: var(--red);
  border-color: var(--red);
  transform: scale(1.15);
}
.process__steps{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
.process__step{
  opacity: .35;
  transition: opacity .4s ease;
}
.process__step.is-active{ opacity: .62; }
.process__step.is-current{ opacity: 1; }
.process__num{
  display: block;
  font-size: .8rem;
  color: var(--gray);
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: .6rem;
  transition: color .3s ease;
}
.process__step.is-current .process__num{ color: var(--red); }
.process__step h3{ font-size: 1.3rem; font-weight: 700; margin-bottom: .5rem; }
.process__step p{ color: var(--gray); font-size: .92rem; max-width: 32ch; }

@media (min-width: 900px){
  .process__steps{ grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
}
/* no mobile as etapas empilham: os nós não teriam correspondência na linha */
@media (max-width: 899px){
  .process__node{ display: none; }
}

/* ==========================================================================
   DEMONSTRAÇÃO — pipeline
   ========================================================================== */
.pipeline{
  margin-top: 4rem;
  position: relative;
  min-height: 260px;
}
.pipeline__svg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.pipeline__svg path{ fill: none; }
.pipeline__base{ stroke: var(--gray-light); stroke-width: 1.5; }
/* o fluxo vermelho avança com o scroll (js/pipeline.js), não em loop */
.pipeline__progress{
  stroke: var(--red);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .9;
}
/* o dado que percorre o caminho — único movimento contínuo, bem discreto */
.pipeline__packet{
  fill: var(--red);
  opacity: 0;
  transition: opacity .3s ease;
  transform-box: fill-box;
  transform-origin: center;
  animation: packetPulse 1.8s ease-in-out infinite;
}
@keyframes packetPulse{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.35); }
}

.pipeline__nodes{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  padding: 1rem 0;
}
.pipeline__node{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: fit-content;
  padding: .85rem 1.4rem;
  border: 1.5px solid var(--black);
  border-radius: 999px;
  background: var(--white);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  transition: border-color .4s ease, color .4s ease, transform .4s var(--ease-spring);
}
.pipeline__node.is-active{ border-color: var(--red); color: var(--red); transform: scale(1.08); }

@media (min-width: 900px){
  .pipeline__nodes{ flex-direction: row; justify-content: space-between; }
  .pipeline__node{ margin: 0; }
}
@media (prefers-reduced-motion: reduce){
  .pipeline__packet{ animation: none; }
}

/* ==========================================================================
   STACK TECNOLÓGICA — marquee
   ========================================================================== */
.section--marquee{ padding-bottom: clamp(3rem, 6vw, 5rem); }
.marquee{
  margin-top: 3.5rem;
  overflow: hidden;
  padding: 2rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{
  display: flex;
  align-items: center;
  gap: 1.75rem;
  width: max-content;
  white-space: nowrap;
  animation: marqueeScroll 22s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{ animation-play-state: paused; }
.marquee__track span{
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 700;
  color: var(--gray);
  letter-spacing: -0.01em;
  transition: color .3s ease;
}
.marquee__track span.dot{
  color: var(--red);
  font-weight: 400;
  font-size: 1.1rem;
}
@keyframes marqueeScroll{
  to{ transform: translateX(-50%); }
}
/* A linear ticker is low vestibular-risk (no parallax/zoom), so it keeps
   moving even under prefers-reduced-motion — this is what makes it read
   as a carousel rather than a static, overflowing list. */

/* ==========================================================================
   SOBRE
   ========================================================================== */
.about__text{
  margin-top: 1.75rem;
  font-size: clamp(1.1rem, 1vw + .9rem, 1.4rem);
  color: var(--gray);
  line-height: 1.6;
}

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.section--cta{ text-align: center; }
.cta{ display: flex; flex-direction: column; align-items: center; }
.cta__dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--red);
  margin-bottom: 2rem;
}
/* pulsa só ao chegar, e só três vezes: o CTA é a conclusão da jornada,
   não o lugar para mais uma animação permanente */
.cta__dot.is-visible{ animation: pulseDot 2.4s ease-in-out .9s 3; }
@keyframes pulseDot{
  0%,100%{ box-shadow: 0 0 0 0 rgba(227,27,35,.25); }
  50%{ box-shadow: 0 0 0 12px rgba(227,27,35,0); }
}
.cta__title{
  font-size: var(--fs-section);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.cta__line{ display: block; }
.cta__line--1{ color: var(--gray); font-size: 0.5em; font-weight: 600; margin-bottom: .5rem; }
.cta__line--2 em{ color: var(--red); font-style: normal; }
.cta__actions{
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
@media (prefers-reduced-motion: reduce){
  .cta__dot{ animation: none; }
}

/* ==========================================================================
   PÁGINAS DE SERVIÇO ("Explorar")
   ========================================================================== */
.service-hero{ padding-top: calc(var(--nav-h) + 3rem); padding-bottom: 1rem; }
.service-hero__back{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--gray);
  margin-bottom: 2.5rem;
  transition: color .3s ease;
}
.service-hero__back .arrow{ transform: rotate(180deg); }
.service-hero__back:hover{ color: var(--black); }
.service-hero__back:hover .arrow{ transform: rotate(180deg) translateX(4px); }

.service-hero__icon.card{
  padding: 0;
  background: none;
  box-shadow: none !important;
  transform: none !important;
  border: none;
  display: inline-block;
  margin-bottom: 2.25rem;
}
/* aqui o ícone é ilustração, não um card interativo */
.service-hero__icon.card::before{ display: none; }
.service-hero__icon .card__icon{ width: 96px; height: 96px; margin-bottom: 0; }

.service-hero__title{
  font-size: var(--fs-section);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.08;
  max-width: 16ch;
}
.service-hero__lede{
  margin-top: 1.5rem;
  max-width: 58ch;
  font-size: clamp(1.05rem, 1vw + .85rem, 1.3rem);
  color: var(--gray);
}

.service-list{ margin-top: 1rem; border-top: 1px solid var(--gray-light); }
.service-list li{
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--gray-light);
}
.service-list .num{
  font-weight: 700;
  color: var(--red);
  font-size: .85rem;
  flex-shrink: 0;
  padding-top: .25rem;
  letter-spacing: .04em;
}
.service-list p{ font-size: 1.05rem; max-width: 56ch; }

.service-note{
  margin-top: 3.5rem;
  padding: 2rem;
  background: var(--gray-light);
  border-radius: 14px;
  font-size: 1.05rem;
  max-width: 62ch;
}
.service-note strong{ color: var(--red); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  border-top: 1px solid var(--gray-light);
  padding: 4rem 0 1.5rem;
}
.footer__inner{
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.footer__logo{
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.footer__tagline{
  display: block;
  margin-top: .75rem;
  font-size: .85rem;
  color: var(--gray);
}
.footer__links, .footer__social{
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: .9rem;
}
.footer__links a:hover, .footer__social a:hover{ color: var(--red); }
.footer__bottom{
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-light);
  font-size: .78rem;
  color: var(--gray);
}

@media (min-width: 900px){
  .footer__inner{ flex-direction: row; justify-content: space-between; align-items: flex-start; }
}