/* ═══════════════════════════════════════════════════════════
   DIGITAL N1 · base visual compartilhada
   conceito: painel de instrumentos. subtração como motivo.

   Usada pela home e, em seguida, por /solucoes. A oferta em
   /implantacao e a página da DestrIA continuam com o CSS embutido:
   as duas estão no ar, congeladas, e mexer nelas só para economizar
   bytes é risco sem retorno.
   ═══════════════════════════════════════════════════════════ */

/* Ângulo animável para as bordas cônicas. Sem @property o navegador
   não sabe interpolar um <angle> dentro de custom property e a borda
   simplesmente fica parada, que é uma degradação aceitável. */
@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

:root{
  --void:      #07080A;
  --void-2:    #0A0C0F;
  --surface:   #0E1114;
  --surface-2: #12161A;

  --line:        rgba(244,243,239,.075);
  --line-strong: rgba(244,243,239,.16);

  --ink:      #F4F3EF;
  --ink-dim:  #A5ABB1;
  --muted:    #6B727A;
  --faint:    #454C54;

  --acid:     #DFFF4F;
  --acid-dim: #A8C23A;
  --ember:    #FF5C38;
  --azure:    #5896FF;
  --mint:     #57E3B4;

  --sans: "Familjen Grotesk", "Helvetica Neue", Helvetica, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut: clamp(20px, 5vw, 72px);
  --maxw: 1320px;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.55;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--acid); color:#0A0C0F; }

/* Transição entre rotas. Quem clica em "ver todas as soluções" não
   vê a tela piscar em branco: o navegador faz o cruzamento sozinho.
   Onde não houver suporte, a navegação é a de sempre. */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vtOut .28s var(--ease-io) both; }
::view-transition-new(root){ animation:vtIn .42s var(--ease) both; }
@keyframes vtOut{ to{ opacity:0; transform:translateY(-8px); } }
@keyframes vtIn{ from{ opacity:0; transform:translateY(12px); } }

/* ── foco visível ───────────────────────────────────────
   Sem isto, quem navega por teclado não enxerga onde está.
   :focus-visible mostra só para teclado, não no clique de mouse. */
:focus-visible{
  outline:2px solid var(--acid);
  outline-offset:3px;
  border-radius:4px;
}
.btn:focus-visible{ outline-color:var(--ink); outline-offset:4px; }
.shim:has(:focus-visible){ box-shadow:0 0 0 3px rgba(223,255,79,.35); }
.acc-btn:focus-visible{ outline-offset:-2px; }

.skip{
  position:fixed; top:10px; left:10px; z-index:9800;
  padding:12px 18px; border-radius:10px;
  background:var(--acid); color:#0A0C0F;
  font-size:14px; font-weight:600;
  transform:translateY(-160%); transition:transform .3s var(--ease);
}
.skip:focus{ transform:none; }

/* ═══ camadas globais ═══════════════════════════════════ */
.grain{
  position:fixed; inset:-50%;
  pointer-events:none; z-index:9000;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 16%{transform:translate(-2%,1%)}
  33%{transform:translate(1%,-2%)} 50%{transform:translate(-1%,2%)}
  66%{transform:translate(2%,1%)} 83%{transform:translate(-2%,-1%)}
  100%{transform:translate(0,0)}
}

.vignette{
  position:fixed; inset:0; pointer-events:none; z-index:8000;
  background:radial-gradient(130% 100% at 50% 0%, transparent 55%, rgba(0,0,0,.55) 100%);
}

.progress{
  position:fixed; top:0; left:0; height:2px; z-index:9500;
  width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--acid-dim), var(--acid));
  box-shadow:0 0 18px rgba(223,255,79,.5);
}

.cursor{
  position:fixed; top:0; left:0; width:520px; height:520px;
  margin:-260px 0 0 -260px; border-radius:50%;
  pointer-events:none; z-index:1; opacity:0;
  background:radial-gradient(circle, rgba(223,255,79,.09) 0%, transparent 62%);
  transition:opacity .6s ease;
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){ .cursor{ opacity:1; } }

/* ═══ utilitários ═══════════════════════════════════════ */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

.sec{ position:relative; padding:clamp(80px,11vh,140px) 0; }
/* Só pinta o que está perto da tela. Numa página desta altura, com
   duas seções fixadas, isso é a diferença entre rolar liso e rolar
   engasgando no celular. O contain-intrinsic-size evita que a barra
   de rolagem pule enquanto o navegador ainda não mediu a seção. */
.sec.lazy{ content-visibility:auto; contain-intrinsic-size:auto 900px; }

.sec-head{ max-width:62ch; }
.sec-head .h-lg{ margin-top:20px; }
.sec-head .lead{ margin:22px 0 0; }

.tag{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  display:inline-flex; align-items:center; gap:9px;
}
.tag::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--acid); box-shadow:0 0 10px var(--acid);
}
.tag.mk::before{ background:var(--azure); box-shadow:0 0 10px var(--azure); }
.tag.at::before{ background:var(--mint); box-shadow:0 0 10px var(--mint); }
.tag.cb::before{ background:var(--ember); box-shadow:0 0 10px var(--ember); }

.serif{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; }
.acid{ color:var(--acid); }
.ember{ color:var(--ember); }

h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.035em; line-height:.98; }

.h-xl{ font-size:clamp(2.45rem, 6vw, 5.2rem); }
.h-lg{ font-size:clamp(1.85rem, 3.5vw, 3.05rem); line-height:1.04; }
.h-lg.wide{ font-size:clamp(2.1rem, 4.4vw, 3.9rem); }
.h-md{ font-size:clamp(1.34rem, 2vw, 1.72rem); line-height:1.14; letter-spacing:-.028em; }
.h-sm{ font-size:clamp(1.12rem, 1.5vw, 1.32rem); line-height:1.2; letter-spacing:-.022em; font-weight:600; }

.lead{ font-size:clamp(1.05rem, 1.45vw, 1.24rem); line-height:1.62; color:var(--ink-dim); letter-spacing:-.014em; }
.dim{ color:var(--ink-dim); }
.small{ font-size:.9rem; line-height:1.6; color:var(--muted); }
.mono{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }

/* ═══ revelação por scroll ══════════════════════════════ */
.rv{ opacity:0; transform:translate3d(0,26px,0); transition:opacity .95s var(--ease), transform .95s var(--ease); transition-delay:var(--d,0ms); }
.rv.in{ opacity:1; transform:none; }

.rv-line{ overflow:hidden; display:block; padding-bottom:.06em; }
.rv-line > span{
  display:block; transform:translate3d(0,105%,0);
  transition:transform 1.05s var(--ease); transition-delay:var(--d,0ms);
}
.rv-line.in > span{ transform:none; }

/* Revelação palavra a palavra. O JS embrulha cada palavra em <i> e
   numera em --i. font-style:inherit porque <i> inclina por padrão e
   o itálico aqui é decisão da tipografia, não da tag. */
.tx > i{
  display:inline-block; font-style:inherit;
  opacity:0; filter:blur(9px); transform:translateY(.34em);
  transition:opacity .8s var(--ease), filter .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--i,0) * 34ms);
}
.tx.in > i{ opacity:1; filter:blur(0); transform:none; }

.no-js .rv{ opacity:1; transform:none; }
.no-js .rv-line > span{ transform:none; }
.no-js .tx > i{ opacity:1; filter:none; transform:none; }

/* ═══ NAV ═══════════════════════════════════════════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:7000;
  transition:background .5s ease, border-color .5s ease, backdrop-filter .5s ease;
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(7,8,10,.72);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom-color:var(--line);
}
.nav-in{
  max-width:var(--maxw); margin-inline:auto; padding:16px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo{ display:flex; align-items:center; gap:11px; }
.logo-mark{
  width:32px; height:32px; display:grid; place-items:center;
  border:1px solid var(--line-strong); border-radius:8px;
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:-.02em;
  color:var(--acid); background:rgba(223,255,79,.04);
  position:relative; overflow:hidden; flex:none;
}
.logo-mark::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 35%, rgba(223,255,79,.35) 50%, transparent 65%);
  transform:translateX(-130%); animation:sheen 5.5s var(--ease) infinite;
}
@keyframes sheen{ 0%,72%{transform:translateX(-130%)} 88%,100%{transform:translateX(130%)} }
.logo-txt{ font-size:15px; font-weight:600; letter-spacing:-.03em; }
.logo-txt em{ font-family:var(--serif); font-style:italic; font-weight:400; }

.nav-links{ display:flex; gap:30px; }
.nav-links a{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted);
  transition:color .3s ease; position:relative; padding-block:4px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--acid); transition:right .45s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ right:0; }
@media (max-width:960px){ .nav-links{ display:none; } }

/* ═══ botões ════════════════════════════════════════════ */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:11px;
  padding:15px 26px; border-radius:999px;
  font-size:15px; font-weight:600; letter-spacing:-.018em;
  color:#0A0C0F; background:var(--acid);
  overflow:hidden; isolation:isolate;
  transition:box-shadow .5s var(--ease);
  box-shadow:0 0 0 rgba(223,255,79,0);
  will-change:transform;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.65) 48%, transparent 62%);
  transform:translateX(-120%); transition:transform .85s var(--ease);
}
.btn:hover{ box-shadow:0 12px 44px -12px rgba(223,255,79,.55); }
.btn:hover::before{ transform:translateX(120%); }
.btn .arw{ transition:transform .45s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }
.btn-sm{ padding:11px 19px; font-size:13.5px; }

.btn-ghost{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:999px;
  border:1px solid var(--line-strong); color:var(--ink);
  font-size:15px; font-weight:500;
  transition:border-color .4s ease, background .4s ease;
}
.btn-ghost:hover{ border-color:rgba(244,243,239,.34); background:rgba(244,243,239,.03); }
.btn-ghost .arw{ transition:transform .45s var(--ease); }
.btn-ghost:hover .arw{ transform:translateX(4px); }

/* borda cônica animada do botão principal */
.shim{
  position:relative; padding:1.5px; border-radius:999px; display:inline-block;
  isolation:isolate; overflow:hidden;   /* sem isto o conic-gradient vaza pela página inteira */
  transition:box-shadow .5s var(--ease); will-change:transform;
}
.shim:hover{ box-shadow:0 14px 48px -12px rgba(223,255,79,.55); }
.shim::before{
  content:""; position:absolute; left:50%; top:50%; width:180%; aspect-ratio:1; z-index:-1;
  margin:-90% 0 0 -90%;
  background:conic-gradient(from 0deg, transparent 0 62%, var(--acid) 76%, #fff 84%, transparent 92% 100%);
  animation:spin 3.6s linear infinite;
}
.shim::after{
  content:""; position:absolute; inset:1.5px; border-radius:999px; z-index:-1; background:var(--void);
}
@keyframes spin{ to{ transform:rotate(1turn); } }

/* seta em texto, para links discretos */
.lnk{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--acid); transition:gap .4s var(--ease), color .3s ease;
}
.lnk:hover{ gap:14px; }

/* ═══ cartão com brilho no cursor ═══════════════════════
   Duas camadas: um halo interno e uma borda que acende. As duas
   seguem --mx/--my, que o JS escreve no pointermove. Sem ponteiro
   fino (celular), as duas ficam invisíveis e o cartão é só o cartão. */
.card{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg, rgba(18,22,26,.72), rgba(10,12,15,.7));
  transition:border-color .5s ease, transform .7s var(--ease);
}
.card > *{ position:relative; z-index:1; }
.card::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(223,255,79,.10), transparent 62%);
  transition:opacity .5s ease;
}
.card::after{
  content:""; position:absolute; inset:0; z-index:0; opacity:0; border-radius:inherit;
  padding:1px;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(223,255,79,.55), transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity .5s ease;
}
@media (hover:hover) and (pointer:fine){
  .card:hover::before,
  .card:hover::after{ opacity:1; }
  .card:hover{ border-color:rgba(244,243,239,.13); }
}

/* borda cônica girando, para o que precisa gritar */
.beam-border{ position:relative; }
.beam-border::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; z-index:0;
  background:conic-gradient(from var(--ang), transparent 0 62%, var(--acid) 74%, #fff 80%, transparent 88%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:angSpin 5s linear infinite;
}
@keyframes angSpin{ to{ --ang:1turn; } }

/* inclinação 3D no ponteiro. O JS escreve --rx/--ry. */
.tilt{
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .7s var(--ease);
  transform-style:preserve-3d; will-change:transform;
}

/* ═══ faixa de marquee ══════════════════════════════════ */
.strip{
  position:relative; overflow:hidden;
  border-block:1px solid var(--line);
  background:rgba(244,243,239,.014);
  padding:15px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.track{ display:flex; width:max-content; animation:slide 44s linear infinite; }
.track ul{
  display:flex; align-items:center; gap:34px; margin:0; padding:0 17px; list-style:none;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--faint);
}
.track li{ display:flex; align-items:center; gap:34px; white-space:nowrap; }
.track li::after{ content:"·"; color:var(--faint); opacity:.5; }
.track li.keep{ color:var(--acid-dim); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ═══ barra fixa de CTA no celular ══════════════════════ */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:7500;
  padding:11px var(--gut) calc(11px + env(safe-area-inset-bottom));
  background:rgba(7,8,10,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  transform:translateY(120%); transition:transform .55s var(--ease);
}
.mbar.up{ transform:none; }
.mbar span{ font-size:12.5px; line-height:1.35; color:var(--ink-dim); max-width:19ch; }
@media (min-width:861px){ .mbar{ display:none; } }

/* ═══ rodapé ════════════════════════════════════════════ */
.foot{ border-top:1px solid var(--line); padding:52px 0 clamp(40px,7vh,64px); }
.foot-in{ display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; align-items:flex-start; }
.foot-nav{ display:flex; flex-wrap:wrap; gap:26px; }
.foot-nav a{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); transition:color .3s ease;
}
.foot-nav a:hover{ color:var(--acid); }
.foot small{ display:block; font-size:12px; color:var(--faint); line-height:1.7; }

/* ═══ acordeão ══════════════════════════════════════════ */
.acc{ border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:22px;
  padding:26px 4px; text-align:left;
  font-size:clamp(1.02rem,1.5vw,1.22rem); font-weight:600; letter-spacing:-.022em;
  transition:color .35s ease;
}
.acc-btn:hover{ color:var(--acid); }
.acc-ico{
  position:relative; flex:none; width:22px; height:22px; border-radius:50%;
  border:1px solid var(--line-strong); transition:border-color .4s ease, transform .5s var(--ease);
}
.acc-ico::before,.acc-ico::after{
  content:""; position:absolute; left:5px; right:5px; top:50%; height:1px; background:var(--ink-dim);
  transition:transform .45s var(--ease), background .35s ease;
}
.acc-ico::after{ transform:rotate(90deg); }
.acc-item.open .acc-ico{ border-color:var(--acid); transform:rotate(90deg); }
.acc-item.open .acc-ico::after{ transform:rotate(90deg) scaleX(0); }
.acc-item.open .acc-ico::before{ background:var(--acid); }
.acc-body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease);
}
.acc-item.open .acc-body{ grid-template-rows:1fr; }
.acc-body > div{ overflow:hidden; }
.acc-body p{ margin:0 0 26px; max-width:70ch; color:var(--ink-dim); font-size:15.5px; line-height:1.68; }

/* ═══ respeito a quem pediu menos movimento ═════════════
   Última regra do arquivo de propósito: ela precisa vencer
   qualquer animação declarada acima. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv,.rv-line>span,.tx>i{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .grain{ animation:none; }
  .tilt{ transform:none !important; }
  ::view-transition-old(root),::view-transition-new(root){ animation:none; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}