/* ═══════════════════════════════════════════════════════════════
   NR LABS — sistema visual
   branco · creme · azul da marca · grafite (bloco-evento)
   claro · premium · tecnológico · estratégico · editorial
   ═══════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* pigmentos fixos — não invertem em nenhum contexto */
  --paper:#FFFFFF;
  --cream:#F7F3EA;
  --cream-2:#EFEADD;
  --ink:#0B0D0C;
  --ink-2:#14181B;
  /* superfície escura única — nav, painel e blocos-evento partem daqui */
  --ink-surface:linear-gradient(158deg,#0F1417 0%,#0B0D0C 58%,#0A1220 100%);
  --blue:#0041B3;      /* hsl(218,100%,35%) — o azul do símbolo */
  --blue-2:#003185;    /* hsl(218,100%,26%) */
  --blue-3:#0A285C;    /* hsl(218,80%,20%) */
  --blue-lt:#70A5FF;   /* hsl(218,100%,72%) — o mesmo azul, sobre grafite */
  --blue-soft:rgba(0,65,179,.07);

  /* base clara — 70/80% da página */
  --gr:var(--paper);
  --gr-2:var(--cream);
  --gr-3:var(--cream-2);

  /* azul profundo — estrutura, 15/20% */
  --deep:var(--blue);
  --deep-2:var(--blue-2);
  --deep-3:var(--blue-3);
  --deep-wash:rgba(0,65,179,.10);

  /* tinta — texto e traço, o escuro que a marca já tinha */
  --cr:var(--ink);
  --cr-2:rgba(11,13,12,.72);
  --cr-3:rgba(11,13,12,.52);
  --cr-4:rgba(11,13,12,.36);

  /* azul de destaque — o mesmo azul da marca, nada de tom paralelo */
  --el:var(--blue);
  --el-dim:rgba(0,65,179,.09);

  /* módulos translúcidos */
  --mod:rgba(255,255,255,.66);
  --mod-2:#FFFFFF;
  --line:rgba(11,13,12,.11);
  --line-2:rgba(11,13,12,.19);
  --sh-1:0 1px 2px rgba(11,13,12,.04);
  --sh-2:0 10px 30px rgba(11,13,12,.07);

  --ff-d:'Space Grotesk',system-ui,sans-serif;
  --ff-b:'Inter',system-ui,sans-serif;
  --ff-m:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --shell:1280px;
  --pad:clamp(1.25rem,4vw,3.5rem);
}

/* ── SUPERFÍCIE ESCURA ─────────────────────────────────────────
   Os blocos-evento (creme, manifesto, painel azul, chips) rodam a
   MESMA folha de estilo com os tokens invertidos. Nada de duplicar
   regra por regra: só o mapeamento das variáveis muda. */
.cream,.mani,.prod,.deep-panel,.mod-chip,.sysfig,.on-dark,.band.dark,footer{
  --gr:var(--ink);
  --gr-2:var(--ink-2);
  --gr-3:#1B2024;
  --cr:var(--cream);
  --cr-2:rgba(247,243,234,.74);
  --cr-3:rgba(247,243,234,.50);
  --cr-4:rgba(247,243,234,.34);
  --deep:var(--blue-lt);
  --el:var(--blue-lt);
  --el-dim:rgba(112,165,255,.15);
  --mod:rgba(255,255,255,.05);
  --mod-2:rgba(255,255,255,.085);
  --line:rgba(247,243,234,.13);
  --line-2:rgba(247,243,234,.24);
  color:var(--cr);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--gr);color:var(--cr);
  font-family:var(--ff-b);font-size:16px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;
}
img{max-width:100%;display:block}

/* ── RESPONSIVO: rede de seguranca ─────────────────────────────
   Nao muda layout nenhum: sao as travas que impedem qualquer conteudo
   de furar a viewport em tela estreita. Sem elas, uma palavra longa
   (e-mail, URL, nome de sistema) ou um filho de grid que se recusa a
   encolher empurram a pagina e criam a barra horizontal. */
svg,video,canvas,iframe{max-width:100%}
body{overflow-wrap:break-word}
/* filhos de grid/flex tem min-width:auto por padrao e nao encolhem abaixo
   do proprio conteudo: e a causa classica do "estourou pra direita". */
.steps > *,.team > *,.posts > *,.builds > *,.kpis > *,.cases > *,
.hero-inner > *,.build-inner > *,.prob-inner > *,.f-grid > *{min-width:0}
/* tabelas e blocos de codigo rolam dentro da propria caixa, nunca na pagina */
.shell table,.shell pre{display:block;max-width:100%;overflow-x:auto}
a{color:inherit}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--pad);width:100%}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;z-index:999;font-size:13px}
.skip:focus{left:0}

/* ── TIPOGRAFIA ────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--ff-d);font-weight:600;letter-spacing:-.032em;line-height:1.05;color:var(--cr)}
.display{font-size:clamp(2.55rem,6.6vw,5.2rem);letter-spacing:-.045em;line-height:1}
.sec-title{font-size:clamp(1.85rem,4vw,3rem)}
em{font-style:normal;color:var(--cr)}

/* rótulo técnico — a assinatura da linguagem NR Labs */
.tlab{
  font-family:var(--ff-m);font-size:10px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cr-3);display:inline-flex;align-items:center;gap:.5rem;
}
.tlab i{width:4px;height:4px;border-radius:50%;background:var(--el);flex-shrink:0;display:block}
.tlab i.live{animation:blip 2.8s ease-in-out infinite;box-shadow:0 0 0 3px var(--el-dim)}
.tlab .sl{color:var(--cr-4)}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.3}}

/* ── MÓDULO TRANSLÚCIDO — elemento recorrente ──────────────── */
.mod{
  background:var(--mod);border:1px solid var(--line);border-radius:6px;box-shadow:var(--sh-1);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.mod:not(.cream):hover{background:var(--mod-2);border-color:var(--line-2);box-shadow:var(--sh-2)}
.mod.cream:hover{background:var(--ink-2);border-color:transparent;box-shadow:0 14px 34px rgba(11,13,12,.18)}
/* módulo sobreposto — o pequeno quadrado que invade o bloco */
.mod-chip{
  position:absolute;z-index:3;padding:.6rem .8rem;background:rgba(11,13,12,.92);
  border:1px solid var(--line-2);border-radius:5px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-family:var(--ff-m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cr-2);line-height:1.5;white-space:nowrap;
}
.mod-chip b{display:block;color:var(--cr);font-weight:500}
.mod-chip em{color:var(--el)}
/* bloco-evento — grafite sólido sobre o papel */
.cream{background:var(--ink);border-color:transparent;box-shadow:0 10px 30px rgba(11,13,12,.14)}

/* ── SEÇÕES ────────────────────────────────────────────────── */
section{position:relative}
.band{padding:clamp(4.5rem,9vw,8rem) 0;position:relative}
.band.alt{background:var(--gr-2)}
/* a passagem branco -> creme vira um degrade de 110px: sem risco duro */
.band.alt::before,.band.alt::after{content:'';position:absolute;left:0;right:0;height:110px;pointer-events:none;z-index:0}
.band.alt::before{top:0;background:linear-gradient(var(--paper),transparent)}
.band.alt::after{bottom:0;background:linear-gradient(transparent,var(--paper))}
.band.alt > .shell{position:relative;z-index:1}
.sec-head{max-width:740px;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-meta{display:flex;align-items:center;gap:.9rem;margin-bottom:1.4rem}
.sec-meta .bar{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent);max-width:120px}
.sec-lede{margin-top:1.3rem;font-size:clamp(1rem,1.4vw,1.1rem);line-height:1.72;color:var(--cr-2);font-weight:300;max-width:600px}

/* blocos internos — dois assuntos dentro de uma seção só */
.sub-block{position:relative;margin-top:clamp(3.25rem,6.5vw,5.5rem);padding-top:clamp(2.75rem,5.5vw,4.5rem);border-top:1px solid var(--line)}
.sub-block::before{content:'';position:absolute;top:-1px;left:0;width:56px;height:1px;background:var(--el);opacity:.55}
.sub-title{font-size:clamp(1.5rem,3.2vw,2.25rem)}
.sub-block .sec-meta{margin-bottom:1.15rem}

/* ── LINHAS DE SISTEMA ─────────────────────────────────────── */
.wire{position:absolute;pointer-events:none;overflow:visible}
.wire path,.wire line{stroke:var(--line-2);stroke-width:1;fill:none}
.wire .hot{stroke:var(--el);opacity:.55}
.wire .node{fill:var(--gr);stroke:var(--line-2);stroke-width:1}
.wire .node.on{fill:var(--el);stroke:none}
.draw{stroke-dasharray:var(--l,300);stroke-dashoffset:var(--l,300);animation:draw 1.6s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pulse{stroke:var(--el);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:4 130;animation:pulse 3.6s linear infinite;opacity:.75}
@keyframes pulse{to{stroke-dashoffset:-134}}

/* ── BOTÕES ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.6rem;
  font-family:var(--ff-b);font-size:14px;font-weight:500;text-decoration:none;
  border-radius:4px;border:1px solid transparent;cursor:pointer;
  transition:background .3s var(--ease),border-color .3s,color .3s,transform .22s var(--ease);
}
.btn svg{transition:transform .28s var(--ease);flex-shrink:0}
.btn:hover svg{transform:translateX(4px)}
/* primário — grafite sólido sobre papel, azul da marca no hover */
.btn-c{background:var(--ink);color:var(--paper);font-weight:600}
.btn-c:hover{background:var(--blue);color:#fff;transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,65,179,.28)}
.btn-g{border-color:var(--line-2);color:var(--cr)}
.btn-g:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.btn-d{background:var(--blue);color:#fff}
.btn-d:hover{background:var(--blue-2);transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,65,179,.28)}
.cream .btn-c,.prod .btn-c{background:var(--cr);color:var(--ink)}
.cream .btn-c:hover,.prod .btn-c:hover{background:#6FA6FF;color:var(--ink);box-shadow:0 8px 22px rgba(111,166,255,.24)}
.cream .btn-g:hover,.prod .btn-g:hover{border-color:var(--el);color:var(--el);background:var(--mod)}
.btn-sm{padding:.65rem 1.05rem;font-size:13px}

/* ── NAV ───────────────────────────────────────────────────── */
nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  width:calc(100% - 2rem);max-width:1340px;z-index:100;
  display:flex;align-items:center;gap:1rem;padding:.5rem .55rem .5rem 1.15rem;
  border:1px solid rgba(11,13,12,.09);border-radius:999px;background:rgba(240,234,222,.58);
  backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%);
  box-shadow:0 10px 30px rgba(11,13,12,.07),inset 0 1px 0 rgba(255,255,255,.55);
  transition:background .35s var(--ease),border-color .35s,box-shadow .35s,top .35s var(--ease);
}
/* ao rolar sobe a opacidade: o texto precisa aguentar qualquer secao
   passando por tras, inclusive o painel escuro e os blocos-evento */
nav.scrolled,nav.nav-solid{top:10px;background:rgba(240,234,222,.88);border-color:rgba(11,13,12,.12);box-shadow:0 12px 34px rgba(11,13,12,.1),inset 0 1px 0 rgba(255,255,255,.6)}
.nav-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto}
.brand-logo{width:34px;height:34px;border-radius:50%;flex:none}
.brand-lockup{height:40px;width:auto;flex:none;display:block}
.nav-desc{
  font-family:var(--ff-m);font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:var(--cr-3);
  border-left:1px solid var(--line-2);padding-left:.6rem;line-height:1.4;max-width:104px;
}
.nav-links{
  display:flex;align-items:center;gap:.2rem;list-style:none;
  position:absolute;left:50%;transform:translateX(-50%);
}
.nav-links > li > a{
  display:inline-flex;align-items:center;gap:.32rem;padding:.5rem .95rem;border-radius:999px;
  text-decoration:none;font-size:13.5px;font-weight:450;color:var(--cr-2);
  border:1px solid transparent;
  transition:color .2s,background .2s var(--ease),border-color .2s;
white-space:nowrap;}
.nav-links > li > a:hover{color:var(--cr);background:var(--mod)}
.nav-links > li > a:hover{color:var(--blue);background:var(--blue-soft)}
.nav-links a.nav-active,.nav-drop:hover > a{
  color:var(--cr);background:rgba(255,255,255,.8);border-color:rgba(11,13,12,.09);
  box-shadow:0 1px 2px rgba(11,13,12,.06);
}
.nav-drop:hover > a{color:var(--el)}
.nav-links a.nav-active{font-weight:550}
.nav-drop{position:relative}
.nav-arr{opacity:.5;transition:transform .25s var(--ease)}
.nav-drop:hover .nav-arr{transform:rotate(180deg)}
.nav-drop-menu{
  position:absolute;top:calc(100% + 13px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:rgba(250,247,240,.94);border:1px solid rgba(11,13,12,.1);border-radius:8px;
  backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%);
  box-shadow:0 24px 60px rgba(11,13,12,.14);min-width:278px;padding:.35rem;
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:200;
}
.nav-drop-menu::before{content:'';position:absolute;top:-13px;left:0;right:0;height:13px}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)}
.nav-drop-menu a{
  display:flex!important;flex-direction:column;gap:.12rem;padding:.62rem .8rem;border-radius:5px;
  color:var(--cr)!important;font-size:13.5px!important;font-weight:550!important;text-decoration:none;
  background:none!important;transition:background .15s,color .15s;
}
.nav-drop-menu a:hover{background:var(--blue-soft);color:var(--blue)!important}
.nav-drop-menu small{font-family:var(--ff-b);font-size:11.5px;font-weight:400;color:var(--cr-3);letter-spacing:0}
.lang{position:relative}
.lang-btn{
  display:flex;align-items:center;gap:.4rem;background:none;border:none;
  border-radius:999px;padding:.45rem .6rem;cursor:pointer;font-family:var(--ff-m);font-size:10px;
  font-weight:500;letter-spacing:.12em;color:var(--cr-3);
  transition:color .2s var(--ease),background .2s var(--ease);
}
.lang-btn:hover,.lang.open .lang-btn{color:var(--blue);background:var(--blue-soft)}
.lang-globe{flex-shrink:0;opacity:.8;transition:opacity .2s var(--ease),transform .5s var(--ease)}
.lang-btn:hover .lang-globe,.lang.open .lang-globe{opacity:1;transform:rotate(20deg)}
.lang-chev{opacity:.5;transition:transform .25s var(--ease)}
.lang.open .lang-chev{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;background:rgba(250,247,240,.94);
  border:1px solid rgba(11,13,12,.1);border-radius:7px;backdrop-filter:blur(26px) saturate(170%);
  box-shadow:0 20px 48px rgba(11,13,12,.13);padding:.25rem;min-width:152px;
  opacity:0;pointer-events:none;transform:translateY(-5px);transition:opacity .18s,transform .18s;z-index:210;
}
.lang.open .lang-menu{opacity:1;pointer-events:all;transform:translateY(0)}
.lang-menu button{
  display:flex;align-items:center;gap:.5rem;width:100%;background:none;border:none;cursor:pointer;
  padding:.5rem .65rem;border-radius:4px;font-family:var(--ff-b);font-size:13px;color:var(--cr-2);
  text-align:left;transition:background .15s,color .15s;
}
.lang-menu button:hover{background:var(--blue-soft);color:var(--blue)}
.lang-menu button.active{color:var(--el);font-weight:600}

/* CTA na ponta do nav, com flecha animada */
.nav-cta{
  display:inline-flex;align-items:center;gap:.42rem;flex-shrink:0;white-space:nowrap;
  padding:.55rem 1.15rem;border-radius:999px;text-decoration:none;
  background:var(--paper);color:var(--ink);font-size:13px;font-weight:600;
  border:1px solid rgba(11,13,12,.08);box-shadow:0 2px 8px rgba(11,13,12,.07);
  transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.nav-cta:hover{background:var(--blue);color:#fff;border-color:transparent;transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,65,179,.34)}
.nav-cta:focus-visible{background:var(--blue);color:#fff}
.nav-cta:active{transform:translateY(0)}
.nav-cta-arr{flex-shrink:0;transform:translateX(-1px);transition:transform .28s var(--ease)}
.nav-cta:hover .nav-cta-arr{transform:translateX(3px)}
@media(hover:hover){
  .nav-cta-arr{animation:nav-cta-nudge 3s var(--ease) infinite}
  .nav-cta:hover .nav-cta-arr{animation:none}
}
@keyframes nav-cta-nudge{
  0%,66%,100%{transform:translateX(-1px)}
  78%{transform:translateX(3px)}
  90%{transform:translateX(-1px)}
}
@media(prefers-reduced-motion:reduce){
  .nav-cta-arr{animation:none!important;transition:none}
  .nav-cta:hover{transform:none}
  .nav-cta:hover .nav-cta-arr{transform:translateX(-1px)}
}
.burger{display:none;flex-direction:column;gap:4.5px;background:none;border:none;cursor:pointer;padding:.5rem;z-index:200}
.burger span{display:block;width:20px;height:1.5px;background:var(--cr);transition:transform .3s var(--ease),opacity .2s}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.m-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0);z-index:140;transition:background .3s}
.m-overlay.open{display:block;background:rgba(11,13,12,.5)}
.m-menu{
  position:fixed;top:0;right:-100%;width:min(88%,370px);height:100dvh;background:var(--gr-2);
  border-left:1px solid var(--line);z-index:150;padding:5rem 1.75rem 2.5rem;overflow-y:auto;
  transition:right .38s var(--ease);
}
.m-menu.open{right:0}
.m-close{
  position:absolute;top:1.5rem;right:1.5rem;width:34px;height:34px;border-radius:5px;
  border:1px solid var(--line-2);background:none;color:var(--cr-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s;
}
.m-close:hover{border-color:var(--blue);color:var(--blue)}
.m-group{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cr-4);margin:1.75rem 0 .5rem}
.m-group:first-of-type{margin-top:0}
.mnl{display:block;padding:.72rem 0;border-bottom:1px solid var(--line);color:var(--cr);text-decoration:none;font-size:15.5px;font-weight:500;transition:color .2s,padding-left .2s}
.mnl:hover{color:var(--blue);padding-left:.3rem}
.mnl.sub{font-size:14px;font-weight:400;color:var(--cr-2)}
.mnl.m-cta{margin-top:1.75rem;background:var(--ink);color:var(--paper);text-align:center;border:none;border-radius:4px;padding:.9rem;font-weight:600;transition:background .22s var(--ease),color .22s var(--ease)}
.mnl.m-cta:hover{padding-left:.9rem;background:var(--blue);color:#fff}

/* ── HERO — composição assimétrica ─────────────────────────── */
.hero{position:relative;padding:clamp(8.5rem,16vh,12rem) 0 clamp(4rem,7vw,6.5rem);overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none}
/* ── FUNDO TECNICO DO HERO ─────────────────────────────────────
   Circuito no lugar do papel quadriculado: os tracos entram pelas
   bordas, dobram em 45 graus e convergem para o painel do sistema.
   Tres deles carregam um pulso — a mesma linguagem do diagrama. */
.hero-circuit{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  mask-image:radial-gradient(ellipse 88% 82% at 70% 38%,#000 4%,rgba(0,0,0,.5) 42%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 88% 82% at 70% 38%,#000 4%,rgba(0,0,0,.5) 42%,transparent 76%);
}
.hc-trace path{fill:none;stroke:rgba(0,65,179,.2);stroke-width:1.25}
.hc-pad circle{fill:none;stroke:rgba(0,65,179,.4);stroke-width:1.25}
.hc-flow path{
  fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;opacity:.5;
  stroke-dasharray:52 var(--pl);stroke-dashoffset:0;
  animation:hc-flow 9s linear infinite;
}
@keyframes hc-flow{to{stroke-dashoffset:var(--pd)}}
@media(prefers-reduced-motion:reduce){.hc-flow{display:none}}
/* Em tela estreita o "slice" amplia o circuito a ponto de ele competir com
   o texto. Abaixo de 900px o hero usa a mesma matriz de pontos das
   paginas internas. */
@media(max-width:900px){
  .hero-circuit{display:none}
  .hero-bg::before{
    content:'';position:absolute;inset:0;
    background-image:radial-gradient(circle at center,rgba(0,65,179,.2) 0 1.4px,transparent 1.5px);
    background-size:32px 32px;
    mask-image:radial-gradient(ellipse 78% 34% at 80% 13%,#000 4%,transparent 76%);
    -webkit-mask-image:radial-gradient(ellipse 78% 34% at 80% 13%,#000 4%,transparent 76%);
  }
}

/* matriz de pontos — textura de fundo das paginas internas */
.hero-grid{
  position:absolute;inset:0;
  background-image:radial-gradient(circle at center,rgba(0,65,179,.22) 0 1.4px,transparent 1.5px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse 95% 74% at 66% 26%,#000 10%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 95% 74% at 66% 26%,#000 10%,transparent 78%);
}
.hero-halo{
  position:absolute;top:-24%;right:-12%;width:min(820px,92vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(0,65,179,.13) 0%,rgba(0,65,179,.04) 45%,transparent 70%);
  filter:blur(30px);
}
.hero-inner{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.hero-l{position:relative;z-index:2}
.hero .tlab{margin-bottom:1.9rem}
.hero h1{margin-bottom:1.7rem}
/* a palavra creme — o evento da headline */
.hl-cr{color:var(--cr);position:relative;display:inline-block}
.hl-mut{color:var(--deep)}
.hero-sub{font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.72;color:var(--cr-2);font-weight:300;max-width:510px;margin-bottom:2.25rem}
.hero-sub strong{color:var(--cr);font-weight:500}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:2.75rem}
.axioms{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);max-width:560px}
.axiom{flex:1;min-width:132px;padding:1.15rem 1.15rem 0 0}
.axiom + .axiom{padding-left:1.15rem;border-left:1px solid var(--line)}
.axiom b{display:block;font-family:var(--ff-m);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--el);font-weight:500;margin-bottom:.45rem}
.axiom span{font-size:12.5px;color:var(--cr-2);font-weight:300;line-height:1.55}

/* figura do sistema */
.hero-r{position:relative}
/* O diagrama e um instrumento, nao um texto: o pulso azul dos fios e os
   nos so acendem contra fundo escuro. Painel proprio, pagina segue clara.
   A moldura de terminal diz "sistema rodando" sem virar ilustracao de
   computador — sem bezel, sem base, sem pe. */
.sysfig{
  position:relative;z-index:1;width:100%;max-width:520px;margin-left:auto;aspect-ratio:1/.98;
  display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  background:var(--ink-surface);
  border:1px solid rgba(247,243,234,.10);
  box-shadow:0 26px 60px rgba(11,13,12,.22),0 0 0 18px rgba(0,65,179,.035),inset 0 1px 0 rgba(247,243,234,.07);
}
/* reflexo de tela — uma diagonal quase imperceptivel */
.sysfig::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(122deg,rgba(247,243,234,.05) 0%,transparent 32%,transparent 100%);
}
.sf-chrome{
  flex:none;display:flex;align-items:center;gap:.34rem;padding:.62rem .85rem;
  border-bottom:1px solid rgba(247,243,234,.09);background:rgba(247,243,234,.035);
}
.sf-dot{width:8px;height:8px;border-radius:50%;flex:none}
.sf-dot:nth-child(1){background:#FF5F57}
.sf-dot:nth-child(2){background:#FEBC2E}
.sf-dot:nth-child(3){background:#28C840}
.sf-url{
  margin-left:.6rem;font-family:var(--ff-m);font-size:9px;letter-spacing:.13em;
  color:var(--cr-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sf-live{
  margin-left:auto;display:inline-flex;align-items:center;gap:.34rem;flex:none;
  font-family:var(--ff-m);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cr-3);
}
.sf-live i{width:5px;height:5px;border-radius:50%;background:var(--el);display:block;animation:blip 2.8s ease-in-out infinite}
.sf-screen{position:relative;flex:1;min-height:0;padding:clamp(.5rem,1.2vw,.95rem)}
/* textura interna: matriz de pontos, nao papel quadriculado */
.sf-screen::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at center,rgba(247,243,234,.12) 0 1.2px,transparent 1.3px);
  background-size:32px 32px;
}
/* brilho azul no canto — contido, so para dar profundidade */
.sf-screen::after{
  content:'';position:absolute;top:-32%;right:-22%;width:82%;aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(0,65,179,.32) 0%,rgba(0,65,179,.09) 48%,transparent 72%);
  filter:blur(26px);
}
.sysfig svg{position:relative;z-index:1;width:100%;height:100%;overflow:visible;display:block}
.sf-node{fill:var(--mod);stroke:var(--line-2);stroke-width:1;transition:fill .3s,stroke .3s}
.sf-g{cursor:default}
.sf-g:hover .sf-node{fill:var(--el-dim);stroke:var(--el)}
.sf-lb{font-family:var(--ff-m);font-size:9px;letter-spacing:.16em;fill:var(--cr-3);text-transform:uppercase}
.sf-g:hover .sf-lb{fill:var(--el)}
.sf-vl{font-family:var(--ff-d);font-size:14px;font-weight:600;fill:var(--cr);letter-spacing:-.02em}
.sf-core{fill:var(--cr);stroke:none}
.sf-core-t{font-family:var(--ff-d);font-size:13px;font-weight:700;fill:var(--ink);letter-spacing:-.02em}
.sf-core-s{font-family:var(--ff-m);font-size:7.5px;letter-spacing:.16em;fill:rgba(11,13,12,.6)}
.sf-ring{fill:none;stroke:var(--el);stroke-width:1;opacity:0;transform-origin:center;animation:ring 3.4s ease-out infinite}
@keyframes ring{0%{opacity:.45;transform:scale(.86)}70%{opacity:0;transform:scale(1.26)}100%{opacity:0;transform:scale(1.26)}}
.sf-out{font-family:var(--ff-m);font-size:8.5px;letter-spacing:.18em;fill:var(--cr-4);text-transform:uppercase}
/* fios e nós do diagrama — CSS vence o atributo inline do SVG */
.sysfig .wire-p{stroke:var(--line-2)}
.sysfig .wire-n{fill:var(--el)}
.sysfig .sf-out-r{stroke:var(--el)}
.sysfig .sf-out-d{fill:var(--el)}
.sysfig .pulse{stroke:var(--el);opacity:.85}
/* chip flutuante — tangencia a borda do painel, sem cobrir a moldura */
.mod-chip{box-shadow:0 8px 22px rgba(11,13,12,.3)}
.hero-chip{top:-34px;right:-12px}
.hero-chip-2{bottom:calc(5% - 10px);right:-18px}

/* ── PROBLEMA ──────────────────────────────────────────────── */
.prob-inner{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2.5rem,5vw,5rem);align-items:start}
.prob-stmt{font-family:var(--ff-d);font-size:clamp(1.65rem,3.2vw,2.5rem);font-weight:600;letter-spacing:-.034em;line-height:1.16}
.prob-stmt s{text-decoration:none;color:var(--cr-4)}
.prob-note{margin-top:1.5rem;font-size:14.5px;line-height:1.78;color:var(--cr-2);font-weight:300;max-width:420px}
.prob-box{position:relative;padding:clamp(1.5rem,3vw,2.1rem)}
.sym{display:flex;align-items:flex-start;gap:.9rem;padding:.85rem 0;border-bottom:1px solid var(--line);transition:padding-left .3s var(--ease)}
.sym:last-child{border-bottom:none;padding-bottom:0}
.sym:hover{padding-left:.4rem}
.sym-n{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.1em;color:var(--cr-4);flex-shrink:0;padding-top:3px;width:20px}
.sym span{font-size:14px;color:var(--cr-2);line-height:1.55;font-weight:300}
.sym:hover span{color:var(--cr)}
.sym:hover .sym-n{color:var(--el)}

/* ── SISTEMA: MARKETING → PROCESSOS → SYSTEMS ──────────────── */
.sys{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.85rem,1.6vw,1.15rem)}
.sys-m{position:relative;padding:clamp(1.6rem,2.8vw,2.2rem);display:flex;flex-direction:column;min-height:100%}
.sys-m .fl-n{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cr-4);margin-bottom:2.5rem;display:flex;align-items:center;justify-content:space-between}
.fl-ic{width:32px;height:32px;color:var(--el);margin-bottom:1.15rem}
.fl-t{line-height:1.65;font-family:var(--ff-d);font-size:1.32rem;font-weight:600;letter-spacing:-.028em;margin-bottom:.35rem}
.fl-verb{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--el);margin-bottom:.9rem;display:block}
.fl-d{font-size:13.5px;line-height:1.72;color:var(--cr-2);font-weight:300;flex:1}
.fl-list{margin-top:1.4rem;padding-top:1.15rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.45rem}
.fl-list span{font-size:12.5px;color:var(--cr-2);display:flex;gap:.55rem;align-items:baseline}
.fl-list span::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--el);flex-shrink:0;transform:translateY(-2px)}
/* conectores entre os módulos — vivem sobre o papel, nao dentro do bloco */
.sys-link{--el:#0B4FD1;--gr:var(--paper);--line-2:rgba(11,13,12,.19);
  position:absolute;top:50%;width:clamp(.85rem,1.6vw,1.15rem);height:1px;background:var(--line-2);z-index:2}
.sys-link::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:5px;height:5px;border-radius:50%;background:var(--el);box-shadow:0 0 0 3px var(--gr)}
.sys-eq{
  margin-top:clamp(.85rem,1.6vw,1.15rem);padding:1.15rem 1.5rem;display:flex;align-items:center;
  justify-content:center;gap:.85rem;flex-wrap:wrap;font-family:var(--ff-m);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cr-3);text-align:center;
}
.sys-eq b{color:var(--cr);font-weight:500}
.sys-eq i{color:var(--el);font-style:normal}
.sys-eq-note{
  margin-top:.9rem;text-align:center;font-size:12.5px;line-height:1.7;
  color:var(--cr-2);font-weight:300;max-width:52ch;margin-left:auto;margin-right:auto;
}
/* CTA por frente — cada módulo pode ser contratado sozinho */
.fl-cta{
  margin-top:1.25rem;display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  font-family:var(--ff-m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--el);text-decoration:none;transition:gap .3s var(--ease)
}
.fl-cta:hover{gap:.85rem}
.fl-cta svg{flex-shrink:0}
/* no bloco creme (superfície escura) o --el já vira --blue-lt sozinho */

/* ── MÉTODO — composição arquitetônica ─────────────────────── */
.method{position:relative}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.85rem,1.6vw,1.1rem);position:relative;z-index:2}
.step{position:relative;padding:clamp(1.45rem,2.6vw,2rem)}
/* escalonamento editorial — não é uma grade simétrica */
.step:nth-child(2){transform:translateY(clamp(1rem,2.4vw,2.2rem))}
.step:nth-child(3){transform:translateY(clamp(2rem,4.8vw,4.4rem))}
.step:nth-child(4){transform:translateY(clamp(3rem,7.2vw,6.6rem))}
.step-n{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.18em;color:var(--cr-4);margin-bottom:2.75rem;display:flex;align-items:center;gap:.55rem}
.step-n i{width:5px;height:5px;border-radius:50%;background:var(--line-2);transition:background .3s,box-shadow .3s;display:block;flex-shrink:0}
.step:hover .step-n i{background:var(--el);box-shadow:0 0 0 4px var(--el-dim)}
.step-t{line-height:1.65;font-family:var(--ff-d);font-size:1.16rem;font-weight:600;letter-spacing:-.026em;margin-bottom:.6rem}
.step-d{font-size:13px;line-height:1.7;color:var(--cr-2);font-weight:300}
.step-out{margin-top:1.25rem;padding-top:.95rem;border-top:1px solid var(--line);font-family:var(--ff-m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--cr-4)}
.step-out b{color:var(--el);font-weight:500}
.method-wire{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.method-foot{margin-top:clamp(4rem,9vw,8rem);display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}

/* ── RESULTADOS ────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.85rem,1.6vw,1.1rem);margin-bottom:clamp(.85rem,1.6vw,1.1rem)}
.kpi{padding:clamp(1.45rem,2.6vw,2rem);position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:170px}
.k-v{font-family:var(--ff-d);font-size:clamp(2.1rem,4vw,3.1rem);font-weight:600;letter-spacing:-.05em;line-height:1;margin-bottom:.55rem}
.k-v.tbd{color:var(--cr-4)}
.k-l{font-size:13px;color:var(--cr-2);line-height:1.55}
.k-s{margin-top:.85rem;font-family:var(--ff-m);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--cr-4)}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.85rem,1.6vw,1.1rem)}
.case{padding:1.6rem;display:flex;flex-direction:column;gap:.85rem;position:relative}
.case-h{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.case-chip{font-family:var(--ff-m);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;padding:.24rem .48rem;border-radius:3px;background:var(--el-dim);color:var(--el);font-weight:500}
.case-t{font-family:var(--ff-d);font-size:1.02rem;font-weight:600;letter-spacing:-.022em;line-height:1.35}
.case-d{font-size:13px;color:var(--cr-2);line-height:1.68;font-weight:300;flex:1}
.case-m{display:flex;gap:1.5rem;padding-top:.9rem;border-top:1px solid var(--line)}
.case-m b{display:block;font-family:var(--ff-d);font-size:1.1rem;font-weight:600;color:var(--cr-4);letter-spacing:-.035em}
.case-m span{font-family:var(--ff-m);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cr-4)}
.fill-note{
  margin-top:1.35rem;display:flex;gap:.75rem;align-items:flex-start;padding:.95rem 1.15rem;
  border:1px dashed var(--line-2);border-radius:6px;background:var(--blue-soft);
}
.fill-note svg{flex-shrink:0;color:var(--el);margin-top:2px}
.fill-note p{font-size:12.5px;color:var(--cr-2);line-height:1.68}
.fill-note b{color:var(--cr);font-weight:600}

/* ── TECNOLOGIA ────────────────────────────────────────────── */
.build-inner{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
.builds{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.7rem,1.3vw,.9rem)}
.build{padding:1.45rem 1.35rem;position:relative}
.build-ic{width:24px;height:24px;color:var(--el);margin-bottom:.95rem}
.build-t{line-height:1.65;font-family:var(--ff-d);font-size:.96rem;font-weight:600;letter-spacing:-.022em;margin-bottom:.3rem}
.build-d{font-size:12.5px;color:var(--cr-2);line-height:1.62;font-weight:300}
.stack{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.4rem}
.stack span{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.13em;padding:.35rem .58rem;border:1px solid var(--line);border-radius:3px;color:var(--cr-3);text-transform:uppercase}
.deep-panel{background:var(--blue-3);border:1px solid rgba(112,165,255,.22);border-radius:6px;padding:clamp(1.5rem,3vw,2.1rem);margin-top:1.75rem;box-shadow:0 10px 30px rgba(10,40,92,.18)}
.deep-panel .tlab{margin-bottom:1rem}
.deep-panel p{font-size:13.5px;color:var(--cr-2);line-height:1.72;font-weight:300}

/* ── ENTREGÁVEIS POR FRENTE — o mesmo peso para marketing, processos e sistemas */
.dl-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.8vw,1.6rem)}
.dl-col{display:flex;flex-direction:column}
.dl-head{padding-bottom:1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--line)}
.dl-head .tlab{display:flex;margin-bottom:1.1rem}
.dl-ic{display:block;width:26px;height:26px;color:var(--el);margin-bottom:.9rem}
.dl-t{font-family:var(--ff-d);font-size:1.14rem;font-weight:600;letter-spacing:-.026em;line-height:1.35;margin-bottom:.4rem}
.dl-s{font-size:12.5px;color:var(--cr-2);font-weight:300;line-height:1.66}
.dl-col .builds{grid-template-columns:1fr;flex:1;align-content:start}
.dl-col .stack{margin-top:1.1rem}
.dl-note{margin-top:clamp(1.75rem,3.5vw,2.5rem);position:relative;overflow:hidden}
.dl-note > .tlab,.dl-note > p{position:relative;z-index:2}
.dl-note p{max-width:min(760px,calc(100% - 240px))}

/* ── ASSINATURA: frasco com DNA + traçado de circuito ────────
   o mesmo par de elementos da marca (frasco do lockup, hélice do
   manifesto) reduzido a marca d'água de painel. */
.sig-fig{position:absolute;inset:0;z-index:1;pointer-events:none}
.sig-circuit{position:absolute;top:0;right:clamp(96px,13%,190px);height:100%;width:clamp(200px,40%,460px);overflow:visible}
.sig-trace path{fill:none;stroke:currentColor;stroke-width:1;opacity:.22}
.sig-pad circle{fill:none;stroke:var(--el);stroke-width:1.2;opacity:.55}
.sig-flow .pulse{stroke:var(--el);opacity:.7}
.sig-dna{
  position:absolute;top:50%;right:clamp(4px,3%,52px);transform:translateY(-50%);
  height:clamp(140px,152%,240px);aspect-ratio:420/560;
  color:var(--el);opacity:.34;
  filter:drop-shadow(0 0 22px rgba(112,165,255,.3));
  overflow:visible;
}
/* a hélice desliza exatamente um período: a translação lê como rotação */
.sig-helix{animation:sig-spin 9s linear infinite}
@keyframes sig-spin{from{transform:translateY(0)}to{transform:translateY(112px)}}
@media(prefers-reduced-motion:reduce){.sig-helix{animation:none}}
@media(max-width:900px){
  .dl-note p{max-width:100%}
  .sig-circuit{display:none}
  .sig-dna{right:-42px;height:clamp(130px,150%,210px);opacity:.16}
}

/* faixa do produto na home: existe, mas não compete com as três frentes */
.prod-strip{
  margin-top:clamp(.85rem,1.6vw,1.15rem);display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem);
  flex-wrap:wrap;padding:clamp(1.15rem,2.2vw,1.6rem) clamp(1.3rem,2.6vw,2rem);
  text-decoration:none;color:inherit;
}
.prod-strip:hover{transform:translateY(-2px)}
.prod-strip-b{flex:1;min-width:min(100%,260px);display:block}
.prod-strip-t{display:block;font-family:var(--ff-d);font-size:1.06rem;font-weight:600;letter-spacing:-.024em;margin-bottom:.2rem}
.prod-strip-d{display:block;font-size:12.5px;color:var(--cr-2);font-weight:300;line-height:1.62}
.prod-strip-go{
  display:inline-flex;align-items:center;gap:.55rem;flex-shrink:0;
  font-family:var(--ff-m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--el);transition:gap .28s var(--ease);
}
.prod-strip:hover .prod-strip-go{gap:.9rem}
.prod-strip:hover .prod-strip-t{color:var(--blue)}

/* ── PRODUTO EM CONSTRUÇÃO ─────────────────────────────────── */
.prod{background:var(--ink);border-radius:8px;padding:clamp(2.1rem,4.5vw,3.75rem) clamp(1.6rem,4vw,3.25rem);position:relative;overflow:hidden;box-shadow:0 18px 46px rgba(11,13,12,.18)}
.prod::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(247,243,234,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(247,243,234,.05) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse 70% 70% at 88% 6%,#000 5%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse 70% 70% at 88% 6%,#000 5%,transparent 72%);pointer-events:none}
.prod > *{position:relative;z-index:2}
.prod-t{font-family:var(--ff-d);font-size:clamp(1.35rem,2.6vw,1.9rem);font-weight:600;letter-spacing:-.032em;line-height:1.22;margin-bottom:.95rem}
.prod-d{font-size:13.5px;color:var(--cr-2);line-height:1.75;font-weight:300}
.prod-cta{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.7rem}

/* ── PÁGINAS DE FRENTE ─────────────────────────────────────── */
.shell-narrow{max-width:880px}
.builds-3{grid-template-columns:repeat(3,1fr)}
/* três etapas em vez de quatro: sem o escalonamento da quarta coluna */
.steps-3{grid-template-columns:repeat(3,1fr)}
.steps-3 .step:nth-child(3){transform:translateY(clamp(2rem,4.8vw,4.4rem))}
.steps-3 .step.r.on:nth-child(3){transform:translateY(clamp(2rem,4.8vw,4.4rem))}
.phero .deep-panel p{font-size:13.5px}
.phero .sec-meta{margin-bottom:1.1rem}
.phero .hero-cta{margin-bottom:0}
.phero h1 .hl-mut{display:inline-block}
/* rodapé de página: para onde ir se esta frente não era o gargalo */
.pcta .shell.xfronts{
  display:block;margin-top:clamp(2rem,4vw,2.75rem);
  padding-top:clamp(1.5rem,3vw,2rem);border-top:1px solid var(--line);
}
.xfront-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.xfront{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  padding:.7rem 1.05rem;border:1px solid var(--line-2);border-radius:4px;
  font-size:13px;font-weight:500;color:var(--cr-2);background:var(--mod);
  transition:border-color .22s var(--ease),color .22s var(--ease),background .22s var(--ease),transform .22s var(--ease);
}
.xfront svg{flex-shrink:0;opacity:.6;transition:opacity .22s var(--ease),transform .22s var(--ease)}
.xfront:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft);transform:translateY(-1px)}
.xfront:hover svg{opacity:1;transform:translateX(3px)}
@media(max-width:900px){.builds-3,.steps-3{grid-template-columns:1fr 1fr}
  .steps-3 .step:nth-child(3),.steps-3 .step.r.on:nth-child(3){transform:none}}
@media(max-width:680px){.builds-3,.steps-3{grid-template-columns:1fr}}

/* ── PROVA SOCIAL: FAIXA DE LOGOS ──────────────────────────────
   Encostada no rodapé do hero, não como seção própria: a intenção é
   reforçar o hero, não abrir mais um capítulo antes de "onde dói".
   Escala de cinza em repouso para as cores das marcas não brigarem
   com a paleta; a cor volta no hover. */
.trust{border-top:1px solid var(--line);background:var(--paper);padding:clamp(1.4rem,2.8vw,2.1rem) 0}
.trust > .shell{display:flex;align-items:center;gap:clamp(1.25rem,3.5vw,3rem);flex-wrap:wrap}
.trust .tlab{flex-shrink:0}
.trust-logos{
  list-style:none;flex:1;display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(1.5rem,3.5vw,3.25rem);
}
.trust-logos img{
  height:clamp(20px,2.3vw,28px);width:auto;display:block;
  filter:grayscale(1);opacity:.5;
  transition:filter .3s var(--ease),opacity .3s var(--ease);
}
.trust-logos li:hover img{filter:none;opacity:1}
@media(max-width:680px){
  .trust > .shell{gap:1rem}
  .trust-logos{gap:1.4rem}
}

/* ── FAIXA ESCURA ──────────────────────────────────────────────
   O ritmo branco/creme/branco/creme vira listra depois de três seções.
   Uma faixa grafite no meio do funil corta o padrão e dá peso ao método. */
/* O metodo nao e uma faixa pintada de preto: e uma PECA encaixada na
   pagina. Painel solido com cantos, chrome de terminal (a mesma lingua
   do hero) e leads curtos que plugam a peca no branco de cima e de baixo. */
.dark-rig{position:relative;padding:clamp(2.2rem,5vw,3.6rem) 0}
.band.dark{
  position:relative;isolation:isolate;overflow:hidden;
  margin:0 clamp(1rem,3.2vw,2.5rem);
  border-radius:clamp(10px,1.1vw,14px);
  background:var(--ink-surface);
  border:1px solid rgba(112,165,255,.15);
  box-shadow:0 26px 64px rgba(8,17,31,.20);
  padding:calc(clamp(3.5rem,7vw,6rem) + 2.4rem) 0 clamp(3.5rem,7vw,6rem);
}
/* o degrau do 4o card (translateY) precisa caber DENTRO do painel: sem esta
   folga o overflow:hidden corta o "Escalar" na borda de baixo. So acima de
   900px, que e onde o degrau existe. */
@media(min-width:901px){
  .band.dark{padding-bottom:calc(clamp(3.5rem,7vw,6rem) + clamp(3rem,7.2vw,6.6rem))}
}
.band.dark > .shell{position:relative;z-index:1}
.band.dark .sec-lede,.band.dark .step-d{color:var(--cr-2)}
.band.dark .bar{background:linear-gradient(90deg,var(--line-2),transparent)}

/* chrome do painel — identico ao do terminal do hero */
.dark-chrome{
  position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;align-items:center;gap:.34rem;padding:.62rem clamp(.9rem,2vw,1.4rem);
  border-bottom:1px solid rgba(247,243,234,.09);background:rgba(247,243,234,.035);
}

/* cantos: quatro colchetes finos, so o suficiente pra ler como peca */
.band.dark::before,.band.dark::after{
  content:'';position:absolute;width:26px;height:26px;z-index:2;pointer-events:none;
  border:1px solid rgba(112,165,255,.34);
}
.band.dark::before{left:14px;bottom:14px;border-top:0;border-right:0}
.band.dark::after{right:14px;bottom:14px;border-top:0;border-left:0}

/* leads — a peca plugada no branco de cima e de baixo */
.rig-lead{
  position:absolute;left:0;right:0;height:clamp(2.2rem,5vw,3.6rem);z-index:0;pointer-events:none;
}
.rig-lead.t{top:0}
.rig-lead.b{bottom:0}
.rig-lead i{
  position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(11,13,12,.20));
}
.rig-lead.b i{background:linear-gradient(0deg,transparent,rgba(11,13,12,.20))}
.rig-lead i:nth-child(1){left:22%}
.rig-lead i:nth-child(2){left:50%}
.rig-lead i:nth-child(3){left:78%}
.rig-lead i::after{
  content:'';position:absolute;left:50%;width:6px;height:6px;border-radius:50%;
  background:var(--blue);transform:translate(-50%,-50%);
}
.rig-lead.t i::after{bottom:-3px}
.rig-lead.b i::after{top:-3px;transform:translate(-50%,50%)}
@media(max-width:680px){
  .rig-lead i:nth-child(1),.rig-lead i:nth-child(3){display:none}
  .band.dark::before,.band.dark::after{display:none}
}

/* ── MANIFESTO — o grande evento creme ─────────────────────── */
.mani-wrap{position:relative}
.mani{background:var(--ink);border-radius:8px;padding:clamp(2.5rem,6vw,5rem) clamp(1.75rem,5vw,4rem);position:relative;overflow:hidden;box-shadow:0 18px 46px rgba(11,13,12,.18)}
.mani::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at center,rgba(112,165,255,.3) 0 1.3px,transparent 1.4px);
  background-size:30px 30px;
  mask-image:radial-gradient(ellipse 80% 80% at 82% 12%,#000 5%,transparent 68%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 82% 12%,#000 5%,transparent 68%);
}
.mani > *{position:relative;z-index:2}
/* o manifesto e uma tensao e a resolucao dela: o de cima expoe o problema,
   a seta desce com um pulso e o de baixo responde. Corpo menor que o antigo
   paragrafo unico — le como argumento, nao como banner. */
.mani-q,.mani-a{
  font-family:var(--ff-d);font-weight:500;font-size:clamp(1.15rem,2.3vw,1.8rem);
  letter-spacing:-.03em;line-height:1.32;max-width:640px;color:var(--cr);
}
.mani-q{margin:1.75rem 0 0}
.mani-a{margin:0}
.mani-q b,.mani-a b{font-weight:600;color:var(--el)}
.mani-arrow{
  display:flex;flex-direction:column;align-items:center;
  width:26px;margin:clamp(1.3rem,2.4vw,2rem) 0;color:var(--el);
}
.ma-line{
  width:1px;height:clamp(30px,4.4vw,48px);position:relative;overflow:hidden;
  background:linear-gradient(180deg,transparent,var(--line-2));
}
.ma-line::after{
  content:'';position:absolute;left:0;width:1px;height:13px;background:var(--el);
}
@media(prefers-reduced-motion:no-preference){
  .ma-line::after{animation:ma-flow 2.8s var(--ease) infinite}
}
@keyframes ma-flow{
  0%{top:-13px;opacity:0}
  18%{opacity:1}
  82%{opacity:1}
  100%{top:100%;opacity:0}
}
.mani-f{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.mani-sig{font-family:var(--ff-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cr-3)}

/* ── O FRASCO DA MARCA COMO MASCARA ────────────────────────────
   nr-flask.png foi recortado do proprio lockup (componente conectado,
   creme sobre transparente). Usado como mask, a cor vem do CSS: creme
   dentro do painel escuro, azul sobre o papel. Uma imagem, dois usos. */
.flask{
  display:block;pointer-events:none;
  -webkit-mask:url('../img/nr-flask.png') center/contain no-repeat;
  mask:url('../img/nr-flask.png') center/contain no-repeat;
}
/* ── A COSTURA — o frasco no vao entre o hero e o problema ─────
   O bloco tem altura zero: ele nao empurra nada, so ocupa o branco que
   ja existia ali. O frasco cruza a emenda — metade no papel do hero,
   metade sobre o creme — e a trilha vertical costura as duas secoes. */
.seam{position:relative;height:0;z-index:1;pointer-events:none}
/* --seam-x: o eixo do frasco cai na prumada de "Quem somos" na nav.
   A nav e uma pilula centrada de 1340px, entao o desvio a partir do
   centro e constante: o alinhamento segura em qualquer largura. */
.seam{--seam-x:calc(50% + 110px)}
.seam-flask{
  position:absolute;left:var(--seam-x);transform:translateX(-50%);
  top:calc(-1 * clamp(148px,16vw,236px));
  height:clamp(296px,32vw,472px);aspect-ratio:101/105;
  background:var(--blue);opacity:.065;
}
@media(max-width:1080px){.seam{--seam-x:62%}}
@media(max-width:680px){
  .seam{--seam-x:56%}
  .seam-flask{height:clamp(210px,52vw,300px);top:calc(-1 * clamp(90px,22vw,140px))}
}
/* marca d'agua da secao de contato */
.flask-wm{
  position:absolute;left:calc(-1 * clamp(2rem,6vw,4.5rem));bottom:-16%;
  width:clamp(210px,25vw,360px);aspect-ratio:101/105;z-index:0;
  background:var(--blue);opacity:.06;
}

/* ── MARCA D'AGUA — o frasco com DNA ───────────────────────────
   A assinatura da NR Labs no miolo da pagina, dentro do manifesto.
   A helice e desenhada com um periodo extra acima e abaixo do recorte
   e desliza exatamente um periodo (130u): a translacao continua le
   como rotacao, e o loop nao tem emenda. */
.dna-mark{
  position:absolute;z-index:1;pointer-events:none;user-select:none;
  top:50%;right:clamp(-90px,-3vw,-20px);
  height:clamp(230px,132%,460px);aspect-ratio:420/560;
  color:var(--el);opacity:.17;
  filter:drop-shadow(0 0 26px rgba(112,165,255,.4));
  animation:dm-float 15s ease-in-out infinite;
}
.dna-mark svg{width:100%;height:100%;display:block;overflow:visible}
.dm-flask path{fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.dm-liquid{stroke-width:5;opacity:.8}
.dm-strand{fill:none;stroke:currentColor;stroke-width:6.5;stroke-linecap:round}
.dm-strand-b{opacity:.55}
.dm-rung{fill:none;stroke:currentColor;stroke-width:4.5;stroke-linecap:round}
.dm-helix{animation:dm-spin 11s linear infinite}
.dm-bub{fill:currentColor;opacity:0;animation:dm-rise 7s ease-in infinite}
.dm-bub-2{animation-duration:9s;animation-delay:2.4s}
.dm-bub-3{animation-duration:8s;animation-delay:4.6s}
@keyframes dm-spin{from{transform:translateY(0)}to{transform:translateY(130px)}}
@keyframes dm-float{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 14px))}}
@keyframes dm-rise{
  0%{transform:translateY(0);opacity:0}
  14%{opacity:.8}
  82%{opacity:.45}
  100%{transform:translateY(-118px);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .dna-mark,.dm-helix,.dm-bub{animation:none}
  .dm-bub{opacity:.45}
}
/* o manifesto estreita para nao correr por cima da marca */
@media(min-width:901px){.mani-q,.mani .mani-f{max-width:min(900px,calc(100% - 210px))}}
@media(max-width:900px){
  .dna-mark{top:auto;bottom:-46px;right:-108px;height:clamp(210px,52%,280px);opacity:.11;animation:none}
}
/* a mesma assinatura no painel do metodo, que e a superficie escura do miolo
   da home. O overflow:hidden do .band.dark corta o frasco na quina
   arredondada — a marca encosta na borda e some, em vez de flutuar solta por
   cima dos quatro cards. z-index 0 porque a .shell do painel esta em 1. */
.method .dna-mark{
  z-index:0;opacity:.13;
  top:46%;right:clamp(-130px,-6vw,-50px);
  height:clamp(300px,66%,540px);
}
@media(max-width:900px){
  .method .dna-mark{top:auto;bottom:-70px;right:-120px;height:clamp(220px,40%,300px);opacity:.1}
}

/* ── PARA QUEM ─────────────────────────────────────────────── */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.85rem,1.6vw,1.1rem)}
.who-c{padding:1.7rem;position:relative}
.who-c:hover{transform:translateY(-3px)}
.who-ic{width:28px;height:28px;color:var(--el);margin-bottom:1.15rem}
.who-t{line-height:1.65;font-family:var(--ff-d);font-size:1.1rem;font-weight:600;letter-spacing:-.024em;margin-bottom:.35rem}
.who-s{font-size:12.5px;color:var(--cr-2);font-weight:300;line-height:1.62;margin-bottom:1.15rem}
.who-tags{display:flex;flex-wrap:wrap;gap:.35rem}
.who-tags span{font-family:var(--ff-m);font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:.28rem .48rem;border:1px solid var(--line);border-radius:3px;color:var(--cr-3)}
/* ── EQUIPE ────────────────────────────────────────────────── */
.team{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);max-width:none;position:relative}
/* o frasco no cruzamento da grade 2x2: a marca no meio dos quatro cards,
   atras deles, amarrando o bloco. */
.team::before{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  height:clamp(230px,30vw,400px);aspect-ratio:101/105;z-index:0;pointer-events:none;
  background:var(--blue);opacity:.07;
  -webkit-mask:url('../img/nr-flask.png') center/contain no-repeat;
  mask:url('../img/nr-flask.png') center/contain no-repeat;
}
.tm{z-index:1}
@media(max-width:820px){.team::before{display:none}}
.tm{padding:clamp(2rem,3.4vw,3.1rem);position:relative}
.tm-top{display:flex;align-items:center;gap:clamp(1.1rem,1.8vw,1.6rem);margin-bottom:clamp(1.5rem,2.4vw,2.1rem)}
.tm-av{width:clamp(88px,9.5vw,128px);height:clamp(88px,9.5vw,128px);border-radius:8px;overflow:hidden;border:1px solid var(--line-2);flex-shrink:0;background:var(--gr-3)}
.tm-av picture,.tm-av img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;display:block}
/* monograma de fallback: se a foto ainda nao existe, o card mostra as
   iniciais em vez do icone de imagem quebrada. */
.tm-av{display:grid;place-items:center}
.tm-av::before{
  content:attr(data-ini);grid-area:1/1;
  font-family:var(--ff-d);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:600;
  letter-spacing:-.02em;color:var(--cr-4);
}
/* o <picture> do webp e quem entra no grid, entao a regra vale para ele
   tambem: sem isso a foto cai numa segunda linha e o monograma fica visivel
   por cima do card. */
.tm-av picture,.tm-av img{grid-area:1/1}
.tm-n{font-family:var(--ff-d);font-size:clamp(1.35rem,2.1vw,1.85rem);font-weight:600;letter-spacing:-.03em;line-height:1.2}
.tm-r{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--el);margin-top:.5rem}
.tm-b{font-size:clamp(14.5px,1.15vw,16.5px);color:var(--cr-2);line-height:1.78;font-weight:300;margin-bottom:clamp(1.5rem,2.2vw,2rem)}
.tm-li{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--ff-m);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--cr-4);text-decoration:none;transition:color .2s}
.tm-li:hover{color:var(--blue)}

/* ── CTA FINAL ─────────────────────────────────────────────── */
.cta{position:relative;overflow:hidden;padding:clamp(4.5rem,8vw,7rem) 0;background:var(--gr-2)}
.cta::before,.cta::after{content:'';position:absolute;left:0;right:0;height:110px;pointer-events:none;z-index:1}
.cta::before{top:0;background:linear-gradient(var(--paper),transparent)}
.cta::after{bottom:0;background:linear-gradient(transparent,var(--paper))}
.cta-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at center,rgba(0,65,179,.2) 0 1.4px,transparent 1.5px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse 65% 95% at 50% 50%,#000 6%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 65% 95% at 50% 50%,#000 6%,transparent 70%);
}
.cta .shell{position:relative;z-index:2}
.aud-head{margin-bottom:clamp(1.75rem,3.5vw,2.5rem)}
.cta .who{margin-bottom:clamp(3rem,6vw,4.75rem);padding-bottom:clamp(3rem,6vw,4.75rem);border-bottom:1px solid var(--line)}
.cta-inner{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:2.5rem;flex-wrap:wrap}
.cta-h{font-family:var(--ff-d);font-size:clamp(1.85rem,4.2vw,3.2rem);font-weight:600;letter-spacing:-.04em;line-height:1.1;max-width:680px}
.cta-p{margin-top:1.25rem;font-size:14.5px;color:var(--cr-2);font-weight:300;max-width:450px;line-height:1.72}

/* #about e #audience sao dois cremes colados — sem troca de cor, sem degrade */
#about::after,#audience::before{background:none}

/* ── CONTATO ───────────────────────────────────────────────── */
#contact{overflow:hidden}
#contact > .shell{position:relative;z-index:1}
#contact .contact-inner{position:relative;z-index:1}
.contact-inner{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
.ch{display:flex;gap:.85rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--line)}
.ch:first-of-type{border-top:1px solid var(--line)}
.ch-ic{width:32px;height:32px;border-radius:4px;background:var(--blue-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ch-l{font-family:var(--ff-m);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--cr-4);margin-bottom:.15rem}
.ch-v{font-size:14.5px;color:var(--cr);text-decoration:none;font-weight:500;transition:color .2s}
.ch-v:hover{color:var(--blue)}
form{padding:clamp(1.5rem,3vw,2.2rem);background:var(--cream);border-color:var(--line-2);box-shadow:var(--sh-2)}
form.mod:hover{background:var(--cream)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.f-g{margin-bottom:1.1rem;display:flex;flex-direction:column;gap:.4rem}
.f-g label{font-family:var(--ff-m);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--cr-4)}
.f-g input,.f-g select,.f-g textarea{
  font-family:var(--ff-b);font-size:14px;color:var(--cr);background:var(--paper);
  border:1px solid var(--line-2);border-radius:4px;padding:.75rem .85rem;width:100%;
  transition:border-color .2s,box-shadow .2s;
}
.f-g select option{background:#fff;color:var(--cr)}
.f-g textarea{min-height:104px;resize:vertical}
.f-g input:focus,.f-g select:focus,.f-g textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.f-g input::placeholder,.f-g textarea::placeholder{color:var(--cr-4)}
.f-sub{width:100%;justify-content:center;border:none}
.f-st{margin-top:.85rem;font-size:12.5px;color:var(--cr-2);text-align:center;min-height:1.1em}

/* ── RODAPÉ ────────────────────────────────────────────────── */
footer{background:var(--ink-surface);padding:clamp(3.5rem,6.5vw,5rem) 0 2rem;position:relative;overflow:hidden}
/* textura de grade só no canto, para o grafite não ficar chapado */
footer::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(247,243,234,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(247,243,234,.05) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 62% 78% at 88% 8%,#000 5%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 62% 78% at 88% 8%,#000 5%,transparent 72%);
}
footer > .shell{position:relative;z-index:1}
/* o rodapé é grafite, então usa o lockup claro do próprio arquivo — inverter
   o lockup de tinta virava o ponto azul da marca em amarelo */
.f-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem}
.f-brand .brand-logo-f{width:52px;height:52px}
.f-brand .brand-lockup-f{height:56px;width:auto}
.f-desc{margin-top:1rem;font-size:12.5px;color:var(--cr-3);line-height:1.78;font-weight:300;max-width:250px}
.f-ct{font-family:var(--ff-m);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--cr-2);margin-bottom:1.15rem}
.f-list{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.f-list a{font-size:13px;color:var(--cr-3);text-decoration:none;font-weight:300;transition:color .2s}
.f-list a:hover{color:var(--blue)}
.f-bot{padding-top:1.75rem;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.f-copy{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.12em;color:var(--cr-4)}
.f-soc{display:flex;gap:1.25rem}
.f-soc a{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cr-4);text-decoration:none;transition:color .2s}
.f-soc a:hover{color:var(--blue)}

/* whatsapp — verde oficial da marca */
.wa{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:90;display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;background:#25D366;color:#fff;border-radius:50%;text-decoration:none;
  box-shadow:0 8px 24px rgba(11,13,12,.16),0 0 0 0 rgba(37,211,102,.45);
  transition:transform .22s var(--ease),box-shadow .22s,background .22s;
}
.wa svg{width:28px;height:28px}
.wa:hover{background:#1FBE5B;transform:translateY(-2px) scale(1.04);box-shadow:0 12px 30px rgba(11,13,12,.2),0 0 0 8px rgba(37,211,102,.18)}

/* ── ENTRADA ───────────────────────────────────────────────── */
.r{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.r.on{opacity:1;transform:none}
.step.r{transform:translateY(20px)}
.step.r.on:nth-child(1){transform:none}
.step.r.on:nth-child(2){transform:translateY(clamp(1rem,2.4vw,2.2rem))}
.step.r.on:nth-child(3){transform:translateY(clamp(2rem,4.8vw,4.4rem))}
.step.r.on:nth-child(4){transform:translateY(clamp(3rem,7.2vw,6.6rem))}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}.d4{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .r{opacity:1;transform:none}
}

/* ── PÁGINAS INTERNAS ──────────────────────────────────────── */
.phero{padding:clamp(8.5rem,15vh,10.5rem) 0 clamp(2.5rem,5vw,4rem);position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.phero .hero-grid{mask-image:radial-gradient(ellipse 90% 90% at 20% 10%,#000 5%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 90% 90% at 20% 10%,#000 5%,transparent 70%)}
.phero::after{
  content:'';position:absolute;top:-32%;right:-10%;width:min(760px,92vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(0,65,179,.14) 0%,rgba(0,65,179,.045) 45%,transparent 70%);
  filter:blur(30px);pointer-events:none;z-index:0;
}
/* o phero segue a mesma prumada da nav e das secoes de baixo: nada de
   coluna centrada de 880px deixando o canto esquerdo vazio. A medida de
   leitura fica no h1 e no lede, nao no container. */
.phero .shell{max-width:var(--shell);position:relative;z-index:2}
.phero h1{max-width:34ch}
/* botão de voltar: sobe para logo abaixo da nav e ganha corpo de botão */
.crumb{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  font-family:var(--ff-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cr-2);background:var(--mod);border:1px solid var(--line-2);border-radius:5px;
  padding:.72rem 1.15rem;
  margin-top:calc(-1 * clamp(2.75rem,5.5vh,4.5rem));margin-bottom:clamp(2rem,4vw,3rem);
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.crumb svg{transition:transform .25s var(--ease)}
.crumb:hover{border-color:var(--blue);background:var(--blue-soft);transform:translateY(-1px)}
.crumb:hover svg{transform:translateX(-3px)}
.crumb svg{color:var(--el)}
.phero h1{font-size:clamp(2rem,5vw,3.2rem);margin:.9rem 0 1.1rem}
.phero p{font-size:15px;color:var(--cr-2);font-weight:300;line-height:1.78;max-width:580px}
.pbody{padding:clamp(3rem,6vw,4.5rem) 0 clamp(4rem,7vw,6rem)}
.pbody .shell{max-width:880px}
.pbody .shell:has(.team){max-width:var(--shell)}

.wip{display:flex;gap:.8rem;align-items:flex-start;border:1px dashed var(--line-2);background:var(--blue-soft);border-radius:6px;padding:1rem 1.15rem;margin-bottom:2.5rem}
.wip svg{flex-shrink:0;margin-top:2px;color:var(--el)}
.wip p{font-size:13px;color:var(--cr-2);line-height:1.68}
.wip b{color:var(--cr);font-weight:600}

.qa{border-top:1px solid var(--line)}
.qa-i{border-bottom:1px solid var(--line)}
.qa-h{font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit}
.qa-q{width:100%;background:none;border:none;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.35rem 0;cursor:pointer;font-family:var(--ff-b);font-size:15px;font-weight:500;color:var(--cr);text-align:left;transition:color .2s}
.qa-q:hover{color:var(--blue)}
.qa-ic{width:22px;height:22px;border-radius:4px;border:1px solid rgba(0,65,179,.22);background:var(--blue-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--el);transition:all .3s var(--ease)}
.qa-q:hover .qa-ic{border-color:var(--blue);color:var(--blue)}
.qa-i.open .qa-ic{background:var(--blue);border-color:var(--blue);color:#fff;transform:rotate(45deg)}
.qa-a{overflow:hidden;max-height:0;transition:max-height .4s var(--ease)}
.qa-i.open .qa-a{max-height:440px}
.qa-a > div{padding:0 0 1.4rem;font-size:14px;color:var(--cr-2);line-height:1.82;font-weight:300;max-width:720px}

/* ── TRILHO DE ARTIGOS ─────────────────────────────────────────
   3 cards por vez, rolagem horizontal com snap. As setas paginam de
   card em card; ficam desabilitadas quando nao ha o que rolar. */
.posts-rail{position:relative}
/* a coluna de texto continua estreita; a vitrine de artigos rompe a
   .shell-narrow e ocupa a largura cheia da pagina, sem estourar a viewport. */
.shell-narrow .posts-rail{
  --rail-w:min(var(--shell),calc(100vw - 2 * var(--pad)));
  width:var(--rail-w);margin-inline:calc((100% - var(--rail-w)) / 2);
}
/* sem overflow nao existe o que paginar: escondemos as setas em vez de
   deixar dois botoes mortos na tela. */
.posts-rail.rail-static .rail-nav{display:none}
.rail-nav{display:flex;justify-content:flex-end;gap:.45rem;margin-bottom:.9rem}
.rail-btn{
  width:34px;height:34px;flex:none;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line-2);border-radius:5px;background:var(--mod);color:var(--cr-2);
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.rail-btn:hover:not(:disabled){color:var(--blue);border-color:var(--blue);background:var(--blue-soft)}
.rail-btn:disabled{opacity:.3;cursor:default}
.posts{
  --posts-gap:.85rem;
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2 * var(--posts-gap)) / 3);
  gap:var(--posts-gap);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:0;
  scrollbar-width:none;-ms-overflow-style:none;
}
.posts::-webkit-scrollbar{display:none}
.post{
  display:flex;flex-direction:column;padding:1.6rem 1.75rem;text-decoration:none;position:relative;
  scroll-snap-align:start;
}
.post .post-e{flex:1}
@media(max-width:900px){.posts{grid-auto-columns:calc((100% - var(--posts-gap)) / 2)}}
@media(max-width:620px){.posts{grid-auto-columns:86%}}
.post:hover{transform:translateY(-2px)}
.post-m{display:flex;align-items:center;gap:.7rem;margin-bottom:.75rem}
.post-tag{font-family:var(--ff-m);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--el);background:var(--el-dim);padding:.25rem .5rem;border-radius:3px;font-weight:500}
.post-dt{font-family:var(--ff-m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--cr-4)}
.post-t{font-family:var(--ff-d);font-size:1.04rem;font-weight:600;letter-spacing:-.026em;line-height:1.32;margin-bottom:.5rem}
.post:hover .post-t{color:var(--blue)}
.post-e{font-size:13px;color:var(--cr-2);line-height:1.72;font-weight:300}
.post-more{display:inline-flex;align-items:center;gap:.4rem;margin-top:.95rem;font-family:var(--ff-m);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--cr-4);transition:color .2s}
.post:hover .post-more{color:var(--blue)}

.pcta{position:relative;background:var(--gr-2);padding:clamp(2.5rem,5vw,3.5rem) 0}
.pcta::before{content:'';position:absolute;top:0;left:0;right:0;height:90px;background:linear-gradient(var(--paper),transparent);pointer-events:none}
.pcta .shell{position:relative;z-index:1}
.pcta .shell{max-width:880px;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.pcta h3{font-size:1.35rem;margin-bottom:.35rem}
.pcta p{font-size:13.5px;color:var(--cr-2);font-weight:300}

/* ── RESPONSIVO ────────────────────────────────────────────── */
@media(max-width:1080px){
  .hero-inner{grid-template-columns:1fr;gap:3.25rem}
  .sysfig{max-width:460px;margin:0 auto}
  .hero-chip,.hero-chip-2{right:0}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(2){transform:translateY(clamp(1rem,2.4vw,2.2rem))}
  .step:nth-child(3),.step:nth-child(4){transform:none}
  .step.r.on:nth-child(3),.step.r.on:nth-child(4){transform:none}
  .method-wire{display:none}
  .kpis{grid-template-columns:1fr 1fr}
  .build-inner,.contact-inner{grid-template-columns:1fr;gap:2.5rem}
  .dl-cols{grid-template-columns:1fr;gap:clamp(2rem,4vw,2.75rem)}
  .dl-col .builds{grid-template-columns:1fr 1fr}
  .cases,.who{grid-template-columns:1fr 1fr}
  .f-top{grid-template-columns:1fr 1fr;gap:2rem}
}
@media(max-width:1150px){
  .nav-links{position:static;transform:none;margin-left:auto}
  .nav-desc{display:none}
}
/* com quatro menus o nav horizontal deixa de caber antes do tablet */
@media(max-width:1024px){
  .nav-links,nav > .nav-cta{display:none}
  .burger{display:flex}
  nav{width:calc(100% - 1.5rem);top:10px;padding:.5rem .5rem .5rem 1rem}
}
@media(max-width:900px){
  .prob-inner{grid-template-columns:1fr;gap:2.25rem}
  .sys{grid-template-columns:1fr}
  .sys-link{display:none}
  .team{grid-template-columns:1fr}
}
@media(max-width:680px){
  .axioms{flex-direction:column}
  .axiom{padding:1rem 0}
  .axiom + .axiom{padding-left:0;border-left:none;border-top:1px solid var(--line)}
  .steps,.kpis,.cases,.who,.builds,.dl-col .builds{grid-template-columns:1fr}
  .step:nth-child(n){transform:none}
  .step.r.on:nth-child(n){transform:none}
  .f-row{grid-template-columns:1fr;gap:0}
  .f-top{grid-template-columns:1fr;gap:2.25rem}
  .f-bot{flex-direction:column;align-items:flex-start}
  .wa{width:48px;height:48px;bottom:1.1rem;right:1.1rem}
  .cta-inner,.pcta .shell,.mani-f{flex-direction:column;align-items:flex-start}
  .hero-chip,.hero-chip-2{display:none}
}