/* ==========================================================================
   Logos Tecnologias | Site Institucional
   Tipografia: Poppins | Paleta: laranja, branco e preto
   ========================================================================== */

:root{
  /* marca */
  --orange:        #F77C20;
  --orange-dark:   #D9600C;
  --orange-light:  #FF9A45;
  --orange-soft:   #FFF3E9;

  --black:         #0E0E10;
  --ink:           #16161B;
  --ink-2:         #1F1F27;
  --white:         #FFFFFF;

  --text:          #3A3A44;
  --text-mute:     #6B6B78;
  --line:          #ECECF1;
  --bg-alt:        #FAFAFB;

  --radius:        16px;
  --radius-lg:     22px;
  --shadow-sm:     0 2px 10px rgba(14,14,16,.06);
  --shadow:        0 14px 40px rgba(14,14,16,.09);
  --shadow-orange: 0 12px 28px rgba(247,124,32,.28);

  /* largura útil: o conteúdo acompanha a tela em vez de ficar preso
     numa coluna estreita no meio. A margem lateral é a --gutter. */
  --container:     1760px;
  --gutter:        clamp(20px, 3vw, 64px);
  --header-h:      84px;
  --ease:          cubic-bezier(.4,0,.2,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  font-size:15px;            /* escala base: tudo em rem acompanha */
}
body{
  margin:0;
  font-family:'Poppins', system-ui, 'Segoe UI', Arial, sans-serif;
  font-size:1rem;
  line-height:1.68;
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; color:var(--black); font-weight:700; line-height:1.22; letter-spacing:-.02em; }
p{ margin:0 0 1rem; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--orange); color:#fff; }

body{ overflow-x:hidden; }
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }

/* itens de grid não podem ser menores que o conteúdo por padrão;
   sem isso, imagens largas esticam a coluna e estouram o layout */
.hero__inner > *, .grid > *, .about > *,
.contact > *, .footer__grid > *, .stats__grid > *{ min-width:0; }
.text-accent{ color:var(--orange); }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.6rem;
  border:2px solid transparent; border-radius:999px;
  font-size:.94rem; font-weight:600; letter-spacing:.01em;
  transition:all .25s var(--ease);
  white-space:nowrap;
}
.btn--sm{ padding:.6rem 1.25rem; font-size:.85rem; }
.btn--primary{ background:var(--orange); color:#fff; box-shadow:var(--shadow-orange); }
.btn--primary:hover{ background:var(--orange-dark); transform:translateY(-2px); }
.btn--dark{ background:var(--black); color:#fff; }
.btn--dark:hover{ background:var(--ink-2); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--black); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--orange); color:var(--orange); }
.btn__play{
  display:grid; place-items:center;
  width:30px; height:30px; margin-left:-.5rem;
  border-radius:50%; background:var(--orange); color:#fff; font-size:.6rem;
}

/* ---------- header ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.header.is-stuck{ box-shadow:none; border-color:transparent; }
.header__inner{ height:var(--header-h); display:flex; align-items:center; gap:1.5rem; }

.brand{ display:flex; align-items:center; gap:.65rem; margin-right:auto; }
.brand__mark{ width:46px; height:46px; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__text strong{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; color:var(--black); }
.brand__text small{ font-size:.68rem; font-weight:500; letter-spacing:.34em; color:var(--orange); }
.brand--light .brand__text strong{ color:#fff; }

.nav{ display:flex; align-items:center; gap:2rem; }
.nav__list{ display:flex; align-items:center; gap:2rem; }
.nav__link{
  position:relative; font-size:.93rem; font-weight:500; color:var(--text);
  transition:color .2s var(--ease);
}
.nav__link::after{
  content:''; position:absolute; left:0; bottom:-6px;
  width:0; height:2px; background:var(--orange); border-radius:2px;
  transition:width .25s var(--ease);
}
.nav__link:hover, .nav__link.is-active{ color:var(--black); }
.nav__link:hover::after, .nav__link.is-active::after{ width:100%; }
.nav__cta{ display:none; }

.burger{
  display:none; width:44px; height:40px;
  background:none; border:0; padding:8px;
}
.burger span{
  display:block; height:2px; margin:5px 0; border-radius:2px;
  background:var(--black); transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* ---------- header sempre escuro ----------
   Sobre o hero ele fica transparente, deixando o fundo do hero passar.
   Ao sair do hero ganha fundo escuro solido, em vez de virar barra
   branca: assim a nav tem a mesma aparencia na pagina inteira. */
.header{ background:transparent; backdrop-filter:none; }
.header.is-stuck, .header.is-nav-open{
  background:#0C0C0E;
  backdrop-filter:saturate(180%) blur(12px);
}
.header .brand__text strong{ color:#fff; }
.header .nav__link{ color:rgba(255,255,255,.78); }
.header .nav__link:hover, .header .nav__link.is-active{ color:#fff; }
.header .burger span{ background:#fff; }

/* Linha de luz no pe do header. Sobre o hero quem faz esse brilho e o
   proprio facho passando por tras; quando o header vira barra solida
   o facho some, entao a linha assume o papel e a leitura continua. */
.header.is-stuck::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,
    transparent 0%, rgba(247,124,32,.12) 14%, rgba(255,154,69,.85) 38%,
    #FFD9B0 50%, rgba(255,154,69,.85) 62%, rgba(247,124,32,.12) 86%, transparent 100%);
  box-shadow:0 0 14px 1px rgba(247,124,32,.5);
}


/* ---------- hero: tela cheia, escuro, texto centralizado ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--header-h) + 48px) 0 0;
  background:#07070A;
  color:#fff;
}

/* --- camadas de fundo --- */
.hero__bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }

/* halo laranja atras do titulo */
.hero__bg::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(247,124,32,.19), transparent 68%),
    radial-gradient(45% 40% at 78% 82%, rgba(247,124,32,.11), transparent 70%);
}
/* o simbolo inteiro cabendo na tela, sem corte.
   max-width:none anula o cap do reset (img,svg{max-width:100%}), que
   senao encolhe o SVG na largura da tela. O min() de tres termos deixa
   a tela mandar: altura no desktop, largura no celular. */
.hero__beam{
  position:absolute; top:50%; left:50%;
  width:min(116vh, 120vw, 1240px); height:min(116vh, 120vw, 1240px);
  max-width:none;
  transform:translate(-50%,-54%);
  opacity:1;
  animation:beamPulse 9s ease-in-out infinite;
}
@keyframes beamPulse{
  0%,100%{ transform:translate(-50%,-54%) scale(1);    opacity:.95; }
  50%    { transform:translate(-50%,-54%) scale(1.04); opacity:1;   }
}

/* grid tecnico bem discreto */
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(75% 65% at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(75% 65% at 50% 45%, #000 20%, transparent 78%);
}

/* brasas subindo (os elementos sao criados no main.js) */
.hero__embers{ position:absolute; inset:0; overflow:hidden; }
.ember{
  position:absolute; bottom:-10px;
  width:3px; height:3px; border-radius:50%;
  background:var(--orange-light);
  box-shadow:0 0 8px 1px rgba(247,124,32,.65);
  opacity:0;
  animation:emberRise linear infinite;
}
@keyframes emberRise{
  0%  { opacity:0;  transform:translateY(0) translateX(0) scale(.6); }
  12% { opacity:.9; }
  70% { opacity:.55; }
  100%{ opacity:0;  transform:translateY(-92vh) translateX(var(--drift,14px)) scale(1); }
}

/* escurece as bordas para o texto ficar legivel em qualquer tela */
.hero__vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(125% 95% at 50% 48%, transparent 46%, rgba(7,7,10,.6) 100%),
    linear-gradient(180deg, rgba(7,7,10,.85) 0%, transparent 26%, transparent 74%, rgba(7,7,10,.55) 100%);
}

/* --- conteudo --- */
.hero__inner{
  position:relative;
  flex:1 1 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.hero__kicker{
  margin:0 0 1.1rem;
  font-size:clamp(.82rem, 1.5vw, 1.26rem);
  font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--orange-light);
}
.hero__title{
  margin:0;
  font-size:clamp(2.6rem, 8vw, 7.2rem);
  font-weight:800; line-height:1.02; letter-spacing:-.03em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 18px 60px rgba(0,0,0,.55);
}
.hero__lead{
  max-width:36rem;
  margin:1.6rem 0 0;
  font-size:clamp(1rem, 1.15vw, 1.18rem);
  color:rgba(255,255,255,.66);
}

/* animação de escrita do sobretítulo e do título (as letras são
   montadas no main.js). Cada letra já ocupa o lugar final e só fica
   visível na sua vez, então o texto não pula nem quebra a linha em
   outro ponto durante a digitação.
   Se o JS não montar em 2,5s, a animação twFallback mostra o texto. */
.js .hero__kicker:not(.tw-ready),
.js .hero__title:not(.tw-ready){ visibility:hidden; animation:twFallback 0s 2.5s forwards; }
@keyframes twFallback{ to{ visibility:visible; } }
.tw-word{ white-space:nowrap; }
.tw-char{ visibility:hidden; }
.tw-char.is-on{ visibility:visible; }
/* largura zero: o cursor anda junto com as letras sem empurrar nada */
.tw-caret{ position:relative; display:inline-block; width:0; height:.86em; vertical-align:-.04em; }
.tw-caret::after{
  content:''; position:absolute; top:0; bottom:0; left:.05em;
  width:.07em; min-width:3px; border-radius:2px;
  background:var(--orange);
  box-shadow:0 0 14px 1px rgba(247,124,32,.75);
  animation:caretBlink 1s steps(1) infinite;
}
/* enquanto digita o cursor fica aceso; pisca só nas pausas e no fim */
.tw-caret.is-typing::after{ animation:none; }
@keyframes caretBlink{ 50%{ opacity:0; } }

/* indicador de scroll: contorno de mouse com o ponto descendo.
   O padding gera area de clique confortavel sem afastar o icone. */
.hero__scroll{
  display:grid; place-items:center;
  margin-top:44px; padding:16px 12px;
  color:rgba(255,255,255,.5);
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.hero__scroll:hover, .hero__scroll:focus-visible{ color:#fff; transform:translateY(3px); }
.hero__scroll-mouse{
  position:relative;
  width:26px; height:42px;
  border:2px solid currentColor; border-radius:999px;
}
.hero__scroll-mouse span{
  position:absolute; left:50%; top:8px;
  width:4px; height:8px; margin-left:-2px;
  border-radius:2px; background:currentColor;
  animation:scrollDot 1.9s var(--ease) infinite;
}
@keyframes scrollDot{
  0%  { opacity:0; transform:translateY(0); }
  22% { opacity:1; }
  70% { opacity:1; transform:translateY(14px); }
  100%{ opacity:0; transform:translateY(17px); }
}


/* ---------- seções ---------- */
.section{ padding:clamp(64px, 6vw, 100px) 0; }
.section--alt{ background:var(--bg-alt); }
.section__head{ max-width:760px; margin:0 auto clamp(40px, 3.5vw, 60px); text-align:center; }
.section__title{ font-size:clamp(1.6rem, 2.3vw, 2.5rem); }
.section__title--sm{ font-size:clamp(1.45rem, 1.9vw, 1.75rem); margin-bottom:1.6rem; }
.section__sub{ margin-top:.8rem; color:var(--text-mute); }
.section__foot{ margin-top:42px; text-align:center; }

/* ---------- dúvidas frequentes ---------- */
.faq{ max-width:880px; margin:0 auto; display:grid; gap:14px; }
.faq__item{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--white); box-shadow:var(--shadow-sm);
  transition:border-color .25s var(--ease);
}
.faq__item[open]{ border-color:rgba(247,124,32,.45); }
.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:1.15rem 1.4rem; cursor:pointer; list-style:none;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q h3{ font-size:1.02rem; font-weight:600; letter-spacing:-.01em; }
.faq__q::after{
  content:"+"; flex:0 0 auto; display:grid; place-items:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--orange-soft); color:var(--orange-dark);
  font-size:1.2rem; font-weight:600; line-height:1;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.faq__item[open] .faq__q::after{ transform:rotate(45deg); background:var(--orange); color:var(--white); }
.faq__q:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:var(--radius); }
.faq__a{ padding:0 1.4rem 1.25rem; }
.faq__a p{ margin:0; color:var(--text); font-size:.95rem; }

.grid{ display:grid; gap:clamp(20px, 1.7vw, 30px); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

/* ---------- cards de serviço ---------- */
.card{
  padding:clamp(26px, 2.2vw, 38px) clamp(24px, 2vw, 34px);
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card--service{ position:relative; overflow:hidden; }
.card--service::before{
  content:''; position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg,var(--orange),var(--orange-light));
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.card--service:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.card--service:hover::before{ transform:scaleX(1); }
.card__icon{
  display:grid; place-items:center; width:56px; height:56px; margin-bottom:18px;
  border-radius:16px; background:var(--orange-soft); color:var(--orange);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.card__icon svg{ width:26px; height:26px; }
.card--service:hover .card__icon{ background:var(--orange); color:#fff; }
.card__title{ font-size:1.14rem; margin-bottom:.65rem; }
.card__text{ font-size:.95rem; color:var(--text-mute); margin:0; max-width:30rem; }
.services__detail{ display:none; }
.services__label{
  margin:clamp(40px, 3.5vw, 56px) 0 18px; text-align:center;
  font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute);
}
/* complementares: card mais baixo, ícone ao lado do título e fundo neutro */
.services--extra .card--service{
  display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:start;
  padding:clamp(20px, 1.6vw, 26px); background:var(--bg-alt);
}
.services--extra .card__icon{ grid-row:span 2; width:44px; height:44px; margin:0; border-radius:12px; }
.services--extra .card__icon svg{ width:22px; height:22px; }
.services--extra .card__title{ font-size:1rem; margin-bottom:.3rem; }
.services--extra .card__text{ font-size:.88rem; }
.services--extra .card--service:hover{ transform:translateY(-3px); }

/* link do card para a página do serviço */
.card__link{
  display:inline-flex; align-items:center; gap:.35rem; margin-top:1rem;
  font-size:.88rem; font-weight:600; color:var(--orange);
}
.card__link:hover{ color:var(--orange-dark); }
.services--extra .card__link{ grid-column:2; margin-top:.6rem; font-size:.84rem; }

/* ---------- páginas de serviço ---------- */
/* hero escuro e baixo: o header transparente precisa de fundo escuro embaixo */
.page-hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:calc(var(--header-h) + clamp(48px, 6vw, 96px)) 0 clamp(56px, 6vw, 96px);
  background:#07070A; color:#fff;
}
.page-hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 70% at 15% 30%, rgba(247,124,32,.18), transparent 70%),
    linear-gradient(to right,  rgba(255,255,255,.04) 1px, transparent 1px) 0 0/76px 76px,
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/76px 76px;
}
/* alinhado à esquerda com o resto da página; só o texto tem largura limitada */
.page-hero__inner > *{ max-width:920px; }
.crumbs{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1.4rem; font-size:.82rem; color:rgba(255,255,255,.55); }
.crumbs a:hover{ color:#fff; }
.crumbs li + li::before{ content:'/'; margin-right:.4rem; opacity:.5; }
.page-hero__kicker{
  margin:0 0 1rem; font-size:.82rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--orange-light);
}
.page-hero h1{ color:#fff; font-size:clamp(2rem, 4.2vw, 3.6rem); line-height:1.08; letter-spacing:-.03em; }
.page-hero__lead{ max-width:42rem; margin:1.3rem 0 0; font-size:clamp(1rem, 1.2vw, 1.15rem); color:rgba(255,255,255,.72); }
.page-hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:2rem; }
.page-hero__actions .btn--dark{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); }
.page-hero__actions .btn--dark:hover{ background:#fff; color:var(--black); }

/* resposta direta logo no começo: é o trecho que Google e IAs citam */
.answer{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 4vw, 72px); align-items:start;
}
.answer h2{ font-size:clamp(1.5rem, 2.1vw, 2.2rem); margin-bottom:1rem; }
.answer p{ color:var(--text); }
.answer__box{
  padding:clamp(24px, 2.2vw, 34px); border-radius:var(--radius);
  background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.answer__box h3{ font-size:1.05rem; margin-bottom:1rem; }
.answer__box .checklist{ grid-template-columns:1fr; margin:0; }

.case{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(28px, 4vw, 64px); align-items:center;
}
.case__media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); background:var(--ink); }
.case__media img{ width:100%; height:auto; }
.case__tag{ margin:0 0 .6rem; font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); }
.case h2{ font-size:clamp(1.5rem, 2.1vw, 2.2rem); margin-bottom:1rem; }

.related{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
/* nomes de serviço são longos: no celular o botão quebra a linha em vez de vazar */
.related .btn{ white-space:normal; text-align:center; justify-content:center; }

/* ---------- como trabalhamos ---------- */
/* duas seções claras seguidas (processo + sobre): a linha separa */
.section--alt + .section--alt{ border-top:1px solid var(--line); }
.steps{
  position:relative; display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(18px, 1.6vw, 28px); margin:0; padding:0; list-style:none;
}
/* linha laranja que liga os números */
.steps::before{
  content:''; position:absolute; top:24px; left:24px; right:24px; height:2px;
  background:linear-gradient(90deg,var(--orange),var(--orange-light));
  opacity:.35;
}
.step{ position:relative; min-width:0; }
.step__num{
  position:relative; display:grid; place-items:center; width:48px; height:48px; margin-bottom:18px;
  border-radius:50%; background:var(--orange); color:#fff;
  font-size:1.1rem; font-weight:700; box-shadow:var(--shadow-orange);
}
.step--optional .step__num{ background:var(--white); color:var(--orange); border:2px dashed var(--orange); box-shadow:none; }
.step__title{ font-size:1.08rem; margin-bottom:.5rem; }
.step__tag{
  display:inline-block; margin-left:.3rem; padding:.1rem .55rem; vertical-align:middle;
  border-radius:999px; background:var(--orange-soft); color:var(--orange-dark);
  font-size:.7rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
}
.step__text{ font-size:.92rem; color:var(--text-mute); margin-bottom:.7rem; }
.step__out{ margin:0; font-size:.88rem; color:var(--text); }
.step__out strong{ color:var(--black); }

.assurances{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px, 1.5vw, 24px);
  margin-top:clamp(40px, 3.5vw, 60px);
}
.assurance{
  display:flex; gap:14px; align-items:flex-start; padding:22px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
}
.assurance__ico{
  flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px;
  border-radius:12px; background:var(--orange-soft); color:var(--orange);
}
.assurance__ico svg{ width:22px; height:22px; }
.assurance strong{ display:block; color:var(--black); font-size:.98rem; margin-bottom:.2rem; }
.assurance span{ display:block; font-size:.88rem; color:var(--text-mute); }

/* ---------- sobre ---------- */
.about{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(40px, 4.5vw, 84px); align-items:center; }
.about__media{ position:relative; }
.about__photo{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.about__illu{ width:100%; height:auto; display:block; }
.about__badge{
  position:absolute; right:-18px; bottom:-18px;
  display:grid; place-items:center; gap:.1rem;
  width:132px; height:132px; padding:10px;
  border:6px solid var(--white); border-radius:50%;
  background:var(--orange); color:#fff; text-align:center;
  box-shadow:var(--shadow-orange);
}
.about__badge strong{ font-size:1.9rem; font-weight:800; color:#fff; line-height:1; }
.about__badge span{ font-size:.66rem; font-weight:500; line-height:1.3; }
.about__content .section__title{ margin-bottom:1.3rem; }
.about__text{ color:var(--text-mute); max-width:44rem; }
.about__text strong{ color:var(--black); }
.checklist{ display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem 1.5rem; margin:1.8rem 0 2.2rem; }
.checklist li{ position:relative; padding-left:1.9rem; font-size:.92rem; font-weight:500; color:var(--black); }
.checklist li::before{
  content:'✓'; position:absolute; left:0; top:.15rem;
  display:grid; place-items:center; width:20px; height:20px;
  border-radius:50%; background:var(--orange); color:#fff; font-size:.65rem;
}

/* ---------- números ---------- */
.stats{ padding:48px 0; background:var(--black); color:#fff; }
.stats__grid{ gap:20px; }
.stat{ display:flex; align-items:center; gap:16px; }
.stat + .stat{ border-left:1px solid rgba(255,255,255,.1); padding-left:20px; }
.stat__ico{
  display:grid; place-items:center; flex:0 0 auto;
  width:52px; height:52px; border-radius:14px;
  background:rgba(247,124,32,.16); color:var(--orange);
}
.stat__ico svg{ width:26px; height:26px; }
.stat__body strong{ display:block; font-size:clamp(1.9rem, 2vw, 2.4rem); font-weight:800; color:#fff; line-height:1.1; }
.stat__label{ margin:0; font-size:.84rem; color:rgba(255,255,255,.62); }

/* ---------- portfólio ---------- */
.portfolio__more{ text-align:center; }

/* slider portfólio: 4 cards por vez no desktop, 2 no tablet, 1 no celular */
.slider{ position:relative; margin-bottom:36px; }
.slider__viewport{ overflow:hidden; padding:6px; margin:-6px; }
.slider__track{ display:flex; gap:20px; transition:transform .45s var(--ease); }
.work{
  flex:0 0 calc((100% - 3 * 20px)/4);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 14px 20px; transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.work:hover{ box-shadow:var(--shadow); transform:translateY(-4px); }
.work__thumb{
  display:block; width:100%; height:auto; aspect-ratio:16/10; border-radius:12px; margin-bottom:14px;
  object-fit:cover; object-position:top; border:1px solid var(--line);
}
/* logos: inteira e centralizada, em vez de cortada como os prints */
.work__thumb--logo{ object-fit:contain; object-position:center; padding:18px 24px; background:#F6F6F8; }
.work__title{ font-size:1rem; padding-inline:6px; }
.work__tag{ margin:.2rem 0 0; padding-inline:6px; font-size:.8rem; color:var(--orange); font-weight:500; }

.slider__btn{
  position:absolute; top:44%; transform:translateY(-50%); z-index:2;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; border:1px solid var(--line); color:var(--black);
  font-size:1.4rem; line-height:1; box-shadow:var(--shadow-sm);
  transition:all .25s var(--ease);
}
.slider__btn:hover{ background:var(--orange); border-color:var(--orange); color:#fff; }
.slider__btn--prev{ left:-20px; }
.slider__btn--next{ right:-20px; }
.slider__btn[hidden]{ display:none; }

/* ---------- clientes ---------- */
.marquee{
  position:relative; overflow:hidden; margin-bottom:44px;
  -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:64px; width:max-content; animation:marquee 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item img{ height:46px; width:auto; opacity:.75; filter:grayscale(1); transition:all .3s var(--ease); }
.marquee__item img:hover{ opacity:1; filter:none; }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* Flex, e não grid, para a última linha ficar centralizada quando o número
   de clientes não fecha a linha cheia. A largura dos cards é a mesma de
   antes: 4 por linha aqui, 3 e 2 nas telas menores (media queries no fim). */
.logos-grid{
  --logos-gap:clamp(18px, 1.6vw, 28px);
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--logos-gap);
}
.logos-grid__item{
  flex:0 1 calc((100% - 3 * var(--logos-gap)) / 4);
  display:grid; place-items:center; min-height:clamp(112px, 9vw, 148px); padding:24px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  transition:all .3s var(--ease);
}
.logos-grid__item img{ max-height:clamp(48px, 4vw, 62px); width:auto; opacity:.78; filter:grayscale(1); transition:all .3s var(--ease); }
.logos-grid__item:hover{ border-color:rgba(247,124,32,.45); box-shadow:var(--shadow-sm); transform:translateY(-3px); }
.logos-grid__item:hover img{ opacity:1; filter:none; }

/* ---------- CTA ---------- */
.cta{ padding-inline:var(--gutter); }
.cta__inner{
  max-width:calc(var(--container) - (2 * var(--gutter)));
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px;
  padding:clamp(32px, 3vw, 48px) clamp(28px, 3.5vw, 60px); border-radius:var(--radius-lg);
  background:linear-gradient(120deg,var(--black) 0%, var(--ink-2) 62%, #2A1C12 100%);
  color:#fff; box-shadow:var(--shadow);
}
.cta__text{ display:flex; align-items:center; gap:18px; }
.cta__ico{
  display:grid; place-items:center; flex:0 0 auto;
  width:56px; height:56px; border-radius:16px;
  background:var(--orange); color:#fff;
}
.cta__ico svg{ width:26px; height:26px; }
.cta__text h2{ color:#fff; font-size:1.4rem; }
.cta__text p{ margin:.2rem 0 0; color:rgba(255,255,255,.62); font-size:.92rem; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:12px; }
.cta__actions .btn--dark{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); }
.cta__actions .btn--dark:hover{ background:#fff; color:var(--black); }

/* ---------- contato ---------- */
.contact{ display:grid; grid-template-columns:1.35fr .8fr; gap:clamp(24px, 2.4vw, 40px); }
.contact__form{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  padding:clamp(28px, 2.6vw, 44px); background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field--full{ grid-column:1 / -1; }
.field--full .btn{ align-self:flex-start; }
.field label{ font-size:.82rem; font-weight:600; color:var(--black); }
.field input, .field select, .field textarea{
  font-family:inherit; font-size:.92rem; color:var(--black);
  padding:.8rem 1rem; border:1px solid var(--line); border-radius:12px;
  background:var(--bg-alt); transition:all .2s var(--ease); resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--orange); background:#fff;
  box-shadow:0 0 0 4px rgba(247,124,32,.12);
}
.field input.is-invalid, .field textarea.is-invalid{ border-color:#E23D3D; background:#FFF6F6; }
.form__status{ margin:.8rem 0 0; font-size:.86rem; font-weight:500; color:var(--orange); }

.contact__info{
  padding:clamp(28px, 2.6vw, 44px); border-radius:var(--radius-lg);
  background:var(--black); color:rgba(255,255,255,.72);
}
.contact__info h3{ color:#fff; font-size:1.12rem; margin-bottom:1.5rem; }
.contact__list li{ display:flex; gap:14px; padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.08); }
.contact__list li:last-child{ border-bottom:0; }
.contact__ico{
  display:grid; place-items:center; flex:0 0 auto;
  width:38px; height:38px; border-radius:11px;
  background:rgba(247,124,32,.16); color:var(--orange);
}
.contact__ico svg{ width:18px; height:18px; }
.contact__list strong{ display:block; font-size:.78rem; color:#fff; font-weight:600; }
.contact__list a, .contact__list span{ font-size:.88rem; color:rgba(255,255,255,.66); }
.contact__list a:hover{ color:var(--orange); }
.contact__social{ display:flex; gap:10px; margin-top:1.6rem; }
.contact__social a, .footer__social a{
  display:grid; place-items:center; width:38px; height:38px;
  border-radius:50%; background:rgba(255,255,255,.08);
  font-size:.72rem; font-weight:600; color:#fff; transition:all .25s var(--ease);
}
.contact__social svg, .footer__social svg{ width:18px; height:18px; }
.contact__social a:hover, .footer__social a:hover{ background:var(--orange); }

/* ---------- footer ---------- */
.footer{ background:var(--black); color:rgba(255,255,255,.6); padding-top:64px; margin-top:82px; }
.cta + .section + .footer, .section + .footer{ margin-top:0; }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(32px, 4vw, 72px); padding-bottom:56px; }
.footer__col h4{ color:#fff; font-size:.98rem; margin-bottom:1.2rem; }
.footer__col ul li{ margin-bottom:.6rem; font-size:.89rem; }
.footer__col a{ transition:color .2s var(--ease); }
.footer__col a:hover{ color:var(--orange); }
.footer__text{ font-size:.89rem; margin-top:1.1rem; max-width:24rem; }
.footer .brand__mark{ width:34px; height:34px; }
.footer__social{ display:flex; gap:10px; margin-top:1.2rem; }
.footer__bar{ border-top:1px solid rgba(255,255,255,.08); padding:22px 0; }
.footer__bar-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:.83rem; }
.footer__bar p{ margin:0; }
.footer__bar a:hover{ color:var(--orange); }

/* ---------- flutuantes ---------- */
.whatsapp{
  position:fixed; right:22px; bottom:22px; z-index:90;
  display:grid; place-items:center; width:54px; height:54px;
  border-radius:50%; background:#25D366; color:#fff;
  box-shadow:0 10px 26px rgba(37,211,102,.4);
  transition:transform .25s var(--ease);
}
.whatsapp svg{ width:28px; height:28px; }
.whatsapp:hover{ transform:scale(1.08); }

.to-top{
  position:fixed; right:22px; bottom:86px; z-index:90;
  width:44px; height:44px; border-radius:50%; border:0;
  background:var(--black); color:#fff; font-size:1.1rem;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all .3s var(--ease);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--orange); }

/* ---------- animação de entrada ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width:1040px){
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  /* serviços vêm em grupos de três: em duas colunas sobraria um card sozinho */
  .services{ grid-template-columns:repeat(3,1fr); }
  .services .card--service{ padding:24px 20px; }
  .work{ flex:0 0 calc((100% - 20px)/2); }
  .about{ grid-template-columns:1fr; gap:72px; }
  .about__badge{ right:24px; bottom:-26px; }
  .contact{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .slider__btn--prev{ left:-8px; }
  .slider__btn--next{ right:-8px; }
  /* processo: vira linha do tempo vertical, com a linha descendo pela esquerda */
  .steps{ grid-template-columns:1fr; gap:28px; max-width:640px; margin-inline:auto; }
  .steps::before{ top:24px; bottom:24px; left:23px; right:auto; width:2px; height:auto;
    background:linear-gradient(180deg,var(--orange),var(--orange-light)); }
  .step{ padding-left:68px; }
  .step__num{ position:absolute; left:0; top:0; margin:0; }
  .assurances{ grid-template-columns:1fr; max-width:640px; margin-inline:auto; margin-top:40px; }
  .answer, .case{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .header__cta{ display:none; }
  .burger{ display:block; }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:20px 24px 28px;
    background:rgba(12,12,14,.98); border-bottom:1px solid rgba(255,255,255,.12);
    backdrop-filter:saturate(180%) blur(12px);
    box-shadow:var(--shadow);
    transform:translateY(-12px); opacity:0; visibility:hidden;
    transition:all .28s var(--ease);
  }
  .nav.is-open{ transform:none; opacity:1; visibility:visible; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__list li{ border-bottom:1px solid rgba(255,255,255,.1); }
  .nav__link{ display:block; padding:.9rem 0; font-size:1rem; }
  .nav__link::after{ display:none; }
  .nav__cta{ display:inline-flex; justify-content:center; margin-top:20px; }

  .hero{ padding:calc(var(--header-h) + 36px) 0 0; }
  .section{ padding:64px 0; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); gap:28px 20px; }
  .stat:nth-child(odd) + .stat{ border-left:1px solid rgba(255,255,255,.1); }
  .stat:nth-child(3){ border-left:0; padding-left:0; }
  .logos-grid__item{ flex-basis:calc((100% - 2 * var(--logos-gap)) / 3); }
  .cta__inner{ padding:32px 28px; }
}

@media (max-width:640px){
  .grid--3{ grid-template-columns:1fr; }
  /* serviços: só os ícones; o toque mostra título e descrição no painel abaixo */
  .services{ grid-template-columns:repeat(3,1fr); gap:12px; }
  .services--extra .card--service{ grid-template-columns:none; }
  .services__label{ margin:24px 0 12px; }
  .services .card--service{
    display:grid; place-items:center; padding:18px 8px; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .services .card--service:hover{ transform:none; box-shadow:none; border-color:var(--line); }
  .services .card--service:hover::before{ transform:scaleX(0); }
  .services .card--service:hover .card__icon{ background:var(--orange-soft); color:var(--orange); }
  .services .card__icon{ margin:0; }
  .services .card__link{ display:none; }
  .services__detail .card__link{ display:inline-flex; }
  .services .card__title,
  .services .card__text{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }
  .services .card--service.is-selected{ border-color:var(--orange); box-shadow:var(--shadow); }
  .services .card--service.is-selected::before{ transform:scaleX(1); }
  .services .card--service.is-selected .card__icon{ background:var(--orange); color:#fff; }
  .services .card--service:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
  .services__detail{
    display:block; margin-top:16px; padding:22px;
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  }
  .services__detail .card__title{ margin-bottom:.5rem; }
  .services__hint{ margin:0; text-align:center; font-size:.92rem; color:var(--text-mute); }
  .checklist{ grid-template-columns:1fr; }
  .work{ flex:0 0 100%; }
  .contact__form{ grid-template-columns:1fr; padding:26px; }
  .footer__grid{ grid-template-columns:1fr; }
  .logos-grid__item{ flex-basis:calc((100% - var(--logos-gap)) / 2); }
  .about__badge{ width:110px; height:110px; right:16px; }
  .hero{ min-height:100svh; padding-top:calc(var(--header-h) + 24px); }
  /* na tela estreita o L fica largo e a perna cruza a altura do icone;
     o top relativo desce so o icone, sem empurrar o texto */
  .hero__scroll{ position:relative; top:clamp(80px, 16vh, 150px); }
  .hero__title{ letter-spacing:-.02em; }
  .cta__text{ flex-direction:column; align-items:flex-start; }
  .stats__grid{ grid-template-columns:1fr; }
  .stats__grid .stat + .stat{ border-left:0; padding-left:0; }
}

/* celular bem estreito: com o sobretítulo maior, "Desenvolvemos
   tecnologias para" quebrava em duas linhas; menos espaço entre as
   letras faz caber em uma */
@media (max-width:359px){
  .hero__kicker{ letter-spacing:.12em; }
}

/* ---------- telas baixas: celular deitado ----------
   Com 390px de altura o hero de tela cheia nao cabe: o titulo de 8vw
   passa de 60px e o bloco fica mais alto que a janela. Aqui o hero
   deixa de ser 100svh e a escala cai. */
@media (max-height:540px) and (orientation:landscape){
  .hero{ min-height:auto; padding:calc(var(--header-h) + 18px) 0 30px; }
  .hero__kicker{ font-size:.68rem; letter-spacing:.18em; margin-bottom:.6rem; }
  .hero__title{ font-size:clamp(1.7rem, 4.6vw, 2.6rem); }
  .hero__lead{ margin-top:.9rem; font-size:.95rem; }
  /* sem hero de tela cheia a seta perde a funcao e nao tem espaco */
  .hero__scroll{ display:none; }
  .hero__beam{ width:min(96vh, 62vw); height:min(96vh, 62vw); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}