/* ==========================================================================
   BASTION - Landing page
   Peça de portfólio | Aurora Studio
   Narrativa: mundo escuro (tecnologia) -> mundo claro (negócio), uma única
   troca de tema. Um acento (ciano). Um raio (3px). Uma família display
   (Archivo, eixo de largura) sobre corpo IBM Plex Sans e dados em IBM Plex
   Mono, escolhida por carregar identidade de infraestrutura corporativa —
   a IBM criou a família original para comunicação técnica da própria empresa.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* mundo escuro */
  --void:      #060D1C;
  --deep:      #0A1A38;
  --mid:       #12305F;
  --on-dark:   #EAF1FA;
  --on-dark-2: #93A6C4;
  --line-dark: rgba(255,255,255,.10);

  /* mundo claro */
  --paper:     #F5F8FC;
  --paper-2:   #E9EFF7;
  --on-light:  #0A1A38;
  --on-light-2:#4A5C7A;
  --line-light:rgba(10,26,56,.12);

  /* acento único */
  --cyan:      #46CFE6;
  --cyan-deep: #0F7A8C;

  /* sistema de superfície: um vidro, uma borda, duas sombras
     O corpo do card central fica sobre o PAPEL, não sobre o escuro. Com 58%
     de opacidade o vidro clareava para rgb(109,119,138) e o texto secundário
     caía para 1.82:1. A 84% ele compõe rgb(45,54,72) e sobe para 4.9:1. */
  --glass:        rgba(7,17,38,.84);
  --glass-border: rgba(255,255,255,.13);
  --shadow-dark:  0 28px 64px -28px rgba(4,9,20,.72);
  --shadow-light: 0 24px 56px -30px rgba(10,26,56,.32);

  /* forma e movimento */
  --r: 3px;
  --ease: cubic-bezier(.23,1,.32,1);

  /* ritmo */
  --shell: 1240px;
  --gut: 24px;
  --nav-h: 68px;
  --sect: clamp(88px, 11vw, 148px);

  --z-nav: 50;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--on-light);
  font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,canvas{ display:block; max-width:100%; }
img{ height:auto; }

h1,h2,h3{ margin:0; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
figure{ margin:0; }

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

::selection{ background:var(--cyan); color:var(--void); }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:var(--r);
}

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* Camada de partículas: presente em toda seção escura.
   Sem z-index: a ordem no DOM resolve o empilhamento. */
.particles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA
   Display: Archivo com eixo de largura expandido. Institucional, técnico.
   Quanto maior o corpo, mais apertado o tracking.
   -------------------------------------------------------------------------- */
.eyebrow{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:22px;
}

.h2{
  font-family:'Archivo','IBM Plex Sans',sans-serif;
  font-stretch:118%;
  font-weight:640;
  font-size:clamp(1.75rem,2.7vw,2.4rem);
  letter-spacing:-.014em;
  line-height:1.1;
  color:var(--on-light);
}
.h2--light{ color:var(--on-dark); }

.lede{
  font-size:clamp(1rem,1.2vw,1.125rem);
  color:var(--on-light-2);
  max-width:56ch;
  margin-top:20px;
}
.lede--light{ color:var(--on-dark-2); }

/* --------------------------------------------------------------------------
   4. BOTÕES
   Primário sempre ciano + texto escuro (contraste 10:1).
   Feedback físico no clique: escala, não deslocamento.
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  padding:14px 26px;
  border-radius:var(--r);
  border:1px solid transparent;
  font-size:15px;
  font-weight:500;
  letter-spacing:-.01em;
  cursor:pointer;
  transition:transform 160ms var(--ease),
             background-color 180ms ease,
             border-color 180ms ease;
}
.btn:active{ transform:scale(.98); }

.btn--primary{
  background:var(--cyan);
  color:#06121F;
}

@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{ background:#63DAED; }
}

.btn--sm{ padding:10px 18px; font-size:14px; }
.btn--lg{ padding:17px 34px; font-size:16px; }

/* --------------------------------------------------------------------------
   5. NAV
   -------------------------------------------------------------------------- */
/* Painel: a barra é dividida em células por hairline vertical, como um
   instrumento. A aba ativa acende em ciano e acompanha a rolagem. */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:var(--z-nav);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.nav.is-stuck{
  background:rgba(6,13,28,.9);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line-dark);
}

/* Altura fixada na variável: o padding do hero depende dela, e deixar a
   altura ser derivada do conteúdo já me custou 17px de folga fantasma. */
/* 1fr auto 1fr, não auto 1fr auto: com a logo (~150px) e o CTA (~130px) em
   larguras diferentes, space-between sozinho não centraliza a nav de
   verdade, o meio visual desliza para o lado mais largo. Com as duas
   bordas em fração igual, a coluna do meio fica no centro geométrico da
   barra, não apenas espremida entre os dois lados. */
.nav__inner{
  max-width:var(--shell);
  margin-inline:auto;
  min-height:var(--nav-h);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:stretch;
  padding:0;
}

.brand{
  display:flex;
  align-items:center;
  justify-self:start;
  padding:0 26px 0 var(--gut);
  flex-shrink:0;
}
/* Lockup sem a assinatura: em 40px de altura ela viraria borrão.
   O lockup completo fica no rodapé, onde há espaço. */
.brand img{ width:auto; height:40px; }

/* Grupo autônomo no meio do grid: bordas nos dois lados, não só à
   esquerda, porque agora flutua entre brand e CTA em vez de ficar colado
   na brand. */
.nav__links{
  display:flex;
  align-items:stretch;
  border-inline:1px solid var(--line-dark);
}
.nav__links a{
  position:relative;
  display:flex;
  align-items:center;
  padding:22px 22px;
  font-family:'Archivo','IBM Plex Sans',sans-serif;
  font-stretch:78%;
  font-weight:500;
  font-size:12.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--on-dark-2);
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.nav__links a.is-ativo{
  color:var(--on-dark);
  border-bottom-color:var(--cyan);
}

/* Cantos de mira: quatro tiques em L, desenhados com gradientes em vez de
   pseudo-elementos extras. Aparecem só no hover, nunca na aba ativa —
   o sublinhado ciano já marca "onde estou", os cantos marcam "o que estou
   apontando". Misturar os dois no mesmo elemento ficaria carregado. */
.nav__links a::before{
  content:'';
  position:absolute;
  inset:5px;
  pointer-events:none;
  opacity:0;
  transform:scale(.9);
  transition:opacity 220ms ease, transform 220ms var(--ease);
  background:
    linear-gradient(to right, var(--cyan) 1.5px, transparent 0) top left / 7px 1.5px no-repeat,
    linear-gradient(to bottom, var(--cyan) 1.5px, transparent 0) top left / 1.5px 7px no-repeat,
    linear-gradient(to left, var(--cyan) 1.5px, transparent 0) top right / 7px 1.5px no-repeat,
    linear-gradient(to bottom, var(--cyan) 1.5px, transparent 0) top right / 1.5px 7px no-repeat,
    linear-gradient(to right, var(--cyan) 1.5px, transparent 0) bottom left / 7px 1.5px no-repeat,
    linear-gradient(to top, var(--cyan) 1.5px, transparent 0) bottom left / 1.5px 7px no-repeat,
    linear-gradient(to left, var(--cyan) 1.5px, transparent 0) bottom right / 7px 1.5px no-repeat,
    linear-gradient(to top, var(--cyan) 1.5px, transparent 0) bottom right / 1.5px 7px no-repeat;
}
@media (hover:hover) and (pointer:fine){
  .nav__links a:hover{ color:var(--on-dark); }
  .nav__links a:hover::before{ opacity:1; transform:scale(1); }
}

/* Antes: esticado à altura inteira da barra, sem raio, colado na borda.
   Lia como célula do painel, não como botão. Agora usa a mesma linguagem
   de .btn do resto do site: raio próprio, altura contida, margem lateral. */
.nav__cta{
  justify-self:end;
  align-self:center;
  margin-right:var(--gut);
  padding:11px 24px;
  border-radius:var(--r);
  background:var(--cyan);
  color:#06121F;
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
  transition:background-color .2s ease, transform 160ms var(--ease);
}
.nav__cta:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){
  .nav__cta:hover{ background:#63DAED; }
}

.nav__toggle{
  display:none;
  justify-self:end;
  align-self:center;
  margin-right:var(--gut);
  width:42px; height:42px;
  background:none;
  border:1px solid var(--line-dark);
  border-radius:var(--r);
  cursor:pointer;
  padding:0;
  place-content:center;
}
.nav__toggle span{
  display:block;
  width:18px; height:1.5px;
  background:var(--on-dark);
  margin:3px auto;
}

.nav__drawer{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:16px var(--gut) 26px;
  background:rgba(6,13,28,.97);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-dark);
}
.nav__drawer a{ color:var(--on-dark); padding:12px 0; font-size:16px; }
.nav__drawer .btn{ margin-top:10px; }
.nav__drawer[hidden]{ display:none; }

/* --------------------------------------------------------------------------
   6. HERO  (mundo escuro)
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100dvh;
  display:flex;
  align-items:center;
  background:var(--void);
  overflow:hidden;
}

.hero__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 40%;
}

.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(6,13,28,.95) 0%, rgba(6,13,28,.78) 42%, rgba(10,26,56,.42) 100%),
    radial-gradient(120% 90% at 78% 30%, rgba(70,207,230,.16), transparent 60%),
    linear-gradient(to bottom, transparent 55%, var(--void) 100%);
}

.hero__inner{
  position:relative;
  padding-top:calc(var(--nav-h) + 40px);
  padding-bottom:64px;
}

.hero__title{
  font-family:'Archivo','IBM Plex Sans',sans-serif;
  font-stretch:112%;
  font-weight:700;
  font-size:clamp(2.3rem,4.2vw,3.5rem);
  letter-spacing:-.02em;
  line-height:1.06;
  color:var(--on-dark);
}

.hero__sub{
  margin-top:24px;
  max-width:50ch;
  font-size:clamp(1rem,1.25vw,1.15rem);
  color:var(--on-dark-2);
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:38px;
}

/* --------------------------------------------------------------------------
   7. CAMADAS  (mundo escuro)
   Cabeçalho à esquerda, estratos horizontais à direita: camadas de verdade,
   não um grid de quatro quadrados.
   -------------------------------------------------------------------------- */
/* Inchaço tonal: sai do quase-preto que fecha o hero, sobe para marinho no
   miolo e volta ao escuro antes da ponte. Sem isto a seção media 23/255 de
   brilho contra 42 do hero, e as duas liam como a mesma massa escura sem
   nenhum meio-tom. Continua na mesma família de tema, só muda de plano. */
.layers{
  position:relative;
  padding-block:var(--sect);
  background:linear-gradient(to bottom,
    var(--void) 0%,
    #10305F 34%,
    #113264 62%,
    var(--void) 100%);
  overflow:hidden;
}
.layers::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(90% 60% at 8% 0%, rgba(70,207,230,.07), transparent 55%);
}
/* screen, não opacidade simples: a rede é linha clara sobre quase preto.
   Em opacidade normal o preto dela abafava o azul do fundo e anulava o
   inchaço tonal. Em screen o preto não contribui e só as linhas somam luz. */
.layers__tex{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  /* .28, não .6: em screen os nós do plexus viram pontos claros, e a 60%
     eles chegavam a 1.55:1 atrás do corpo de texto. O brilho da seção vem
     do gradiente, que é uniforme e não cria ponto quente. A textura só
     precisa dar granulação. */
  opacity:.16;
  mix-blend-mode:screen;
  /* Sem máscara a textura entra com força total na borda superior e cria um
     degrau duro contra o quase-preto que fecha o hero. */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.layers__inner{ position:relative; }

.layers__head{ max-width:60ch; margin-bottom:clamp(48px,6vw,72px); }

/* stretch, não start: a figura passa a ter exatamente a altura da lista.
   Equilíbrio automático, em vez de eu caçar um aspect-ratio que só serve
   para uma largura de tela. */
.layers__grid{
  display:grid;
  grid-template-columns:.82fr 1.35fr;
  gap:clamp(40px,5vw,72px);
  align-items:stretch;
}

/* A coluna do cabeçalho tem cerca de 150px de texto contra 380px de lista
   ao lado. A figura equilibra as duas e ocupa o vazio. */
/* Aqui a foto É o assunto, não textura. Ela é o único ponto claro da metade
   escura, e é ela que separa esta seção do hero. Véu leve só para amarrar o
   azul na paleta: enterrá-la sob gradiente foi o erro da versão anterior. */
.layers__fig{
  position:relative;
  min-height:420px;
  border-radius:var(--r);
  border:1px solid var(--glass-border);
  overflow:hidden;
  box-shadow:var(--shadow-dark);
}
.layers__fig img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.layers__fig::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(165deg, rgba(6,13,28,.12), rgba(6,13,28,.42));
}

.layers__list{
  border-top:1px solid var(--line-dark);
}

.stratum{
  display:grid;
  grid-template-columns:44px 200px 1fr;
  gap:28px;
  align-items:start;
  padding-block:30px;
  border-bottom:1px solid var(--line-dark);
}
.stratum i{
  font-size:24px;
  color:var(--cyan);
  margin-top:2px;
}
.stratum__title{
  font-family:'Archivo','IBM Plex Sans',sans-serif;
  font-stretch:115%;
  font-weight:600;
  font-size:1.12rem;
  letter-spacing:-.008em;
  line-height:1.25;
  color:var(--on-dark);
}
.stratum__body{
  color:var(--on-dark-2);
  font-size:15.5px;
  max-width:46ch;
}

/* --------------------------------------------------------------------------
   8. A PONTE  (a troca de tema)
   Faixa escura com textura e partículas em cima, papel embaixo.
   Os cards compartilham UMA moldura: mesma borda, mesmo raio, mesma família
   de sombra. O material muda com o mundo a que o card pertence:
   A = imagem (a operação), B = vidro (o produto), C = papel (o negócio).
   -------------------------------------------------------------------------- */
.bridge{
  --split:50%;
  position:relative;
  background:var(--paper);
}

.bridge__darkband{
  position:absolute;
  left:0; right:0; top:0;
  height:var(--split);
  background:var(--void);
  overflow:hidden;
}
.bridge__tex{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.55;
}
/* Funde o topo da faixa com o void da seção anterior. */
.bridge__darkband::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to bottom, var(--void), transparent 34%);
}

/* 2px, não 1px: a fronteira cai em posição subpixel e um fio de 1px se
   dissolve entre duas linhas de pixel. O brilho abaixo ancora a linha. */
.bridge__split{
  position:absolute;
  left:0; right:0;
  top:var(--split);
  height:2px;
  transform:translateY(-1px);
  background:linear-gradient(to right,
    transparent 0%,
    var(--cyan) 6%,
    var(--cyan) 94%,
    transparent 100%);
  box-shadow:0 0 18px rgba(70,207,230,.45);
}

.bridge__grid{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr 1.35fr .92fr;
  gap:20px;
  align-items:center;
  padding-block:128px;
}

/* A moldura comum */
.bcard{
  --mx:50%; --my:50%;
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:var(--r);
  border:1px solid var(--glass-border);
  overflow:hidden;
  box-shadow:var(--shadow-dark), inset 0 1px 0 rgba(255,255,255,.07);
  transition:border-color 280ms ease;
}

/* Hover: luz percorrendo a superfície, sem elevar e sem escalar.
   Os cards não são links. Levantar no hover prometeria um clique que a
   página não cumpre, então a resposta é de material, não de affordance. */
.bcard::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 300ms ease;
  background:radial-gradient(300px circle at var(--mx) var(--my),
    rgba(70,207,230,.16), transparent 66%);
}

@media (hover:hover) and (pointer:fine){
  .bcard:hover{ border-color:rgba(70,207,230,.48); }
  .bcard:hover::after{ opacity:1; }
  /* No papel branco o ciano puro some. A borda escurece em vez de acender. */
  .bcard--c:hover{ border-color:rgba(15,122,140,.45); }
}
.bcard__body{
  position:relative;
  padding:32px 30px;
  display:flex;
  flex-direction:column;
  width:100%;
}
.bcard__title{
  font-family:'Archivo','IBM Plex Sans',sans-serif;
  font-stretch:115%;
  font-weight:620;
  font-size:1.24rem;
  letter-spacing:-.01em;
  line-height:1.2;
  margin-bottom:14px;
}

/* A: a operação. Fotografia em primeiro plano, texto sobre scrim. */
.bcard--a{
  min-height:400px;
  justify-content:flex-end;
  transform:translateY(-28px);
  color:var(--on-dark);
}
.bcard__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* Medido por amostragem de pixel nas colunas sem glifo: o fundo atrás do
   parágrafo fica em 7.40:1 no pior ponto. Não escurecer mais que isto, ou
   a foto do NOC (que é o conteúdo do card) some sem ganho de legibilidade. */
.bcard__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(6,13,28,.94) 0%,
    rgba(6,13,28,.55) 42%,
    rgba(6,13,28,.12) 75%);
}
.bcard--a p{ color:var(--on-dark-2); font-size:15.5px; }

/* B: o produto. Vidro sobre as partículas, dashboard como prova. */
.bcard--b{
  transform:translateY(-60px);
  color:var(--on-dark);
  box-shadow:0 36px 80px -32px rgba(4,9,20,.8), inset 0 1px 0 rgba(255,255,255,.07);
}
/* Fio ciano no topo do card focal: eco do fio da fronteira. */
.bcard--b::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  z-index:1;
  background:linear-gradient(90deg, transparent, var(--cyan) 35%, var(--cyan) 65%, transparent);
}
.bcard__shot{
  overflow:hidden;
  border-bottom:1px solid var(--glass-border);
  background:#0B1D3E;
  aspect-ratio:1.72;
}
/* Corta a moldura escura que veio gravada na imagem do painel. */
.bcard__shot img{
  width:106%;
  max-width:none;
  margin:-3% 0 0 -3%;
}
.bcard--b .bcard__body{
  flex:1;
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}

.minigrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-top:6px;
}
.minigrid li{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:15px;
  color:var(--on-dark);
}
.minigrid i{ font-size:19px; color:var(--cyan); flex-shrink:0; }

.bcard__foot{
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid var(--line-dark);
  font-size:14px;
  color:var(--on-dark-2);
}

/* C: o negócio. Papel sólido, já do outro lado da fronteira. */
.bcard--c{
  min-height:264px;
  justify-content:center;
  transform:translateY(26px);
  background:#fff;
  border-color:var(--line-light);
  color:var(--on-light);
  box-shadow:var(--shadow-light);
}
.stat__label{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--on-light-2);
}
.stat__num{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:clamp(3.2rem,5vw,4.2rem);
  font-weight:500;
  line-height:1;
  letter-spacing:-.04em;
  margin:14px 0 12px;
  color:var(--on-light);
}
.stat__unit{
  font-size:.34em;
  margin-left:8px;
  letter-spacing:0;
  color:var(--cyan-deep);
}
.stat__note{ font-size:14.5px; color:var(--on-light-2); }

/* --------------------------------------------------------------------------
   9. FATOR HUMANO + NÚMEROS  (mundo claro)
   -------------------------------------------------------------------------- */
.human{
  background:var(--paper);
  padding-block:var(--sect);
}

.human__grid{
  display:grid;
  grid-template-columns:1.08fr 1fr;
  gap:clamp(40px,5vw,72px);
  align-items:center;
}

.human__copy .h2{ font-size:clamp(1.5rem,2.1vw,1.85rem); }

.ticks{
  margin-top:34px;
  display:grid;
  gap:14px;
}
.ticks li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:15.5px;
  color:var(--on-light);
}
.ticks i{
  font-size:18px;
  color:var(--cyan-deep);
  margin-top:2px;
  flex-shrink:0;
}

/* Pedestal pontilhado: a assinatura gráfica do mundo claro.
   Eco discreto das partículas do mundo escuro, agora em ordem. */
.human__media{ position:relative; }
/* Sem z-index negativo: ele desapareceria atrás do fundo da seção assim que
   o reveal removesse o transform que criava o contexto de empilhamento.
   Os pontos ficam em z 0 e a foto sobe para z 1. */
.human__media::after{
  content:'';
  position:absolute;
  right:-18px; bottom:-18px;
  width:52%; height:46%;
  background-image:radial-gradient(rgba(15,122,140,.4) 1px, transparent 1.5px);
  background-size:13px 13px;
}
.human__media img{
  position:relative;
  z-index:1;
  width:100%;
  border-radius:var(--r);
  border:1px solid var(--line-light);
  aspect-ratio:16/10;
  object-fit:cover;
}

.stats{
  margin-top:clamp(64px,8vw,104px);
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  border-top:1px solid var(--line-light);
}
.stats__item{ padding:38px 32px 0 0; }
.stats__item + .stats__item{
  padding-left:32px;
  border-left:1px solid var(--line-light);
}
.stats__num{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:clamp(2.4rem,4vw,3.3rem);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1;
}
.stats__label{
  margin-top:12px;
  font-size:14.5px;
  color:var(--on-light-2);
  max-width:24ch;
}

/* --------------------------------------------------------------------------
   10. PROVA  (mundo claro)
   -------------------------------------------------------------------------- */
.proof{
  background:var(--paper);
  padding-bottom:var(--sect);
}
.proof__head{
  font-size:clamp(1.3rem,1.9vw,1.55rem);
  font-weight:600;
  color:var(--on-light-2);
}

/* Faixa de logos.
   Fundo explícito em --paper porque a máscara cria contexto de empilhamento
   próprio: sem ele o mix-blend-mode não encontra o fundo da seção e o
   branco dos arquivos volta a aparecer como caixa. */
.logowall{
  position:relative;
  margin-top:38px;
  padding-block:30px;
  background:var(--paper);
  border-block:1px solid var(--line-light);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.logowall__track{
  display:flex;
  align-items:center;
  gap:clamp(46px,5.5vw,86px);
  width:max-content;
  animation:logoslide 48s linear infinite;
}
/* Sem pausa no hover: a faixa não para em nenhuma circunstância. */

/* Os arquivos vieram em JPEG e PNG opacos, com fundo branco. multiply faz
   o branco desaparecer contra o papel e preserva o cinza da marca. */
.logowall img{
  width:auto;
  height:auto;
  max-height:52px;
  max-width:148px;
  object-fit:contain;
  mix-blend-mode:multiply;
  /* Sem filtro de contraste aqui: ele escureceria também o branco do
     arquivo, e o multiply devolveria uma caixa cinza em volta de cada
     logo. O traço foi aprofundado na própria imagem, onde dá para
     preservar o 255 exato. */
  opacity:.72;
  transition:opacity 300ms ease;
}
@media (hover:hover) and (pointer:fine){
  .logowall li:hover img{ opacity:1; }
}

@keyframes logoslide{ to{ transform:translateX(calc(-50% - clamp(23px,2.75vw,43px))); } }

/* 1.6fr/.6fr, não 1.35fr/.8fr: com a foto reduzida de 380px quadrada para
   260px em retrato, a proporção antiga sobrava vazio no lado da imagem.
   Ver assets/img/retrato.jpg — corte deixa de ser 1:1. */
.quote{
  margin-top:clamp(56px,7vw,88px);
  display:grid;
  grid-template-columns:1.6fr .6fr;
  gap:clamp(32px,5vw,64px);
  align-items:center;
}
.quote blockquote{ margin:0; }
.quote blockquote p{
  font-family:'Archivo','IBM Plex Sans',sans-serif;
  font-stretch:112%;
  font-weight:520;
  font-size:clamp(1.25rem,2.2vw,1.65rem);
  line-height:1.32;
  letter-spacing:-.018em;
  color:var(--on-light);
  max-width:36ch;
}
.quote figcaption{
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--line-light);
  display:flex;
  flex-direction:column;
  gap:3px;
  font-size:14.5px;
}
.quote figcaption strong{ font-weight:600; }
.quote figcaption span{ color:var(--on-light-2); }

/* Era 380px em 1:1: uma frase curta ao lado de uma foto quase quadrada de
   380px sobrava vazio. Retrato menor equilibra o peso visual contra o
   texto, que agora tem duas frases em vez de uma. */
.quote__img{
  width:100%;
  max-width:260px;
  justify-self:end;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--r);
  border:1px solid var(--line-light);
}

/* --------------------------------------------------------------------------
   11. CTA FINAL + FOOTER
   -------------------------------------------------------------------------- */
/* O mundo escuro volta como PAINEL CONTIDO, não como seção.
   Com margem nos quatro lados ele lê como card, e a página mantém a sua
   única troca de tema. É o fim citando a abertura. */
.cta{
  background:var(--paper-2);
  padding-block:var(--sect);
  border-top:1px solid var(--line-light);
}

.cta__panel{
  position:relative;
  overflow:hidden;
  border-radius:var(--r);
  background:var(--void);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-dark), inset 0 1px 0 rgba(255,255,255,.07);
}
/* Fio ciano no topo: eco da fronteira e do card central. */
.cta__panel::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  z-index:1;
  background:linear-gradient(90deg, transparent, var(--cyan) 28%, var(--cyan) 72%, transparent);
}
.cta__tex{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.4;
}

.cta__body{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  gap:clamp(32px,5vw,72px);
  align-items:center;
  padding:clamp(44px,5vw,68px) clamp(30px,4vw,58px);
}
.cta__lede{ max-width:52ch; }
.cta__body .btn{ flex-shrink:0; }

.foot{
  background:var(--paper-2);
  padding-block:36px 44px;
  border-top:1px solid var(--line-light);
}
.foot__inner{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
}
/* Rodapé é claro: aqui entra o lockup original, escuro e com a assinatura,
   que tem espaço para ser lida. */
.brand--foot{ padding:0; }
.brand--foot img{ height:52px; width:auto; }

.foot__links{
  display:flex;
  gap:24px;
  margin-left:auto;
  font-size:14.5px;
  color:var(--on-light-2);
}
@media (hover:hover) and (pointer:fine){
  .foot__links a:hover{ color:var(--on-light); }
}

.foot__legal{
  width:100%;
  font-size:13px;
  color:var(--on-light-2);
  padding-top:24px;
  border-top:1px solid var(--line-light);
}

/* --------------------------------------------------------------------------
   12. REVEAL
   -------------------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }

.layers__list .reveal:nth-child(2){ transition-delay:.06s; }
.layers__list .reveal:nth-child(3){ transition-delay:.12s; }
.layers__list .reveal:nth-child(4){ transition-delay:.18s; }

.bcard--b{ transition-delay:.08s; }
.bcard--c{ transition-delay:.16s; }

/* --------------------------------------------------------------------------
   13. RESPONSIVO
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  /* Em coluna única a foto vertical viraria um bloco de mais de 900px de
     altura. Vira faixa larga e some do caminho entre o texto e a lista. */
  .layers__grid{ grid-template-columns:1fr; gap:40px; }
  .layers__fig{ min-height:0; aspect-ratio:16/9; }

  .bridge__grid{
    grid-template-columns:1fr 1fr;
    padding-block:110px;
  }
  .bcard--a{ transform:translateY(-18px); }
  .bcard--b{ transform:translateY(-42px); }
  .bcard--c{ grid-column:1 / -1; transform:none; min-height:200px; }

  .human__grid{ grid-template-columns:1fr; }
  .quote{ grid-template-columns:1fr; }
  .quote__img{ justify-self:start; order:-1; }
}

@media (max-width:820px){
  /* No mobile o painel vira barra simples: logo à esquerda, botão à direita. */
  .nav__links,.nav__cta{ display:none; }
  .nav__inner{ grid-template-columns:1fr auto; min-height:var(--nav-h); }
  .brand img{ height:34px; }
  .nav__toggle{ display:grid; }
  .nav.is-open{ background:rgba(6,13,28,.97); }
}

@media (max-width:640px){
  body{ font-size:16px; }
  :root{ --gut:20px; }

  .hero{ min-height:auto; }
  .hero__inner{ padding-top:calc(var(--nav-h) + 96px); padding-bottom:96px; }
  .hero__actions .btn{ flex:1 1 auto; }

  .stratum{
    grid-template-columns:34px 1fr;
    gap:10px 18px;
    padding-block:24px;
  }
  .stratum i{ font-size:21px; grid-row:1; }
  .stratum__title{ grid-column:2; }
  .stratum__body{ grid-column:2; max-width:none; }

  /* Fronteira mais alta: o primeiro card a cruza mesmo empilhado. */
  .bridge{ --split:22%; }
  .bridge__grid{
    grid-template-columns:1fr;
    padding-block:70px 90px;
    gap:16px;
  }
  .bcard{ transform:none !important; }
  .bcard--a{ min-height:340px; }
  .bcard--c{ min-height:0; }
  .bcard__body{ padding:26px 22px; }
  .minigrid{ grid-template-columns:1fr; gap:14px; }

  .stats{ grid-template-columns:1fr; }
  .stats__item{ padding:26px 0 0; }
  .stats__item + .stats__item{
    padding-left:0;
    border-left:0;
    border-top:1px solid var(--line-light);
  }
  .stats__label{ max-width:none; }

  /* Faixa mais curta e mais rápida: com tela estreita, a mesma duração
     faria os logos parecerem parados. */
  .logowall{ padding-block:22px; }
  .logowall img{ max-height:40px; max-width:112px; }
  .logowall__track{ animation-duration:32s; }

  .quote__img{ max-width:none; }

  .cta__body{
    grid-template-columns:1fr;
    gap:32px;
    align-items:start;
  }
  .cta__body .btn{ width:100%; }

  .human__media::after{ right:-8px; bottom:-8px; }

  .foot__links{ margin-left:0; flex-wrap:wrap; gap:16px 20px; }
}

/* --------------------------------------------------------------------------
   14. PREFERÊNCIAS DO USUÁRIO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-transparency:reduce){
  .bcard--b .bcard__body{
    background:#0B1D3E;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .nav.is-stuck{ background:rgba(6,13,28,.98); backdrop-filter:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .particles{ display:none; }
  /* Faixa parada e sem máscara: mostra os primeiros logos inteiros em vez
     de deixá-los cortados no ponto onde a animação foi congelada. */
  .logowall__track{ animation:none; }
  .logowall{ -webkit-mask-image:none; mask-image:none; }
}