/* ═══════════════════════════════════════════════════════════
   LBCODE — lbcode.com.br
   Conceito: HUD orbital. A logo nova tem uma órbita cortando
   o "LB" — a página inteira herda isso: anéis que giram,
   partículas que percorrem trajetórias e uma malha holográfica
   ao fundo. Paleta tirada da própria logo (oliva + creme) com
   um acento lima de alta energia.
   ═══════════════════════════════════════════════════════════ */

@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

:root{
  /* substrato */
  --void:     #080C06;
  --deep:     #0D120A;
  --surface:  #141A0F;
  --surface-2:#1B2215;

  /* cores da marca */
  --olive:    #383F2A;   /* fundo da logo */
  --olive-2:  #4A5338;
  --cream:    #EAE7D7;   /* letreiro da logo */
  --cream-2:  #BFC1AD;
  --cream-3:  #8B9079;

  /* acento */
  --neon:     #C7F751;
  --neon-2:   #97E33F;
  --neon-dim: rgba(199,247,81,.16);
  --plasma:   #5FF0C4;   /* sinal "no ar" */

  --line:     rgba(234,231,215,.10);
  --line-2:   rgba(234,231,215,.18);

  --display: "Chakra Petch", system-ui, sans-serif;
  --body:    "IBM Plex Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;
  --tech:    "Orbitron", "Chakra Petch", sans-serif;

  --gut: 26px;
  --wrap: 1160px;
  --r: 14px;

  --brilho: 0 0 30px rgba(199,247,81,.45);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--void);
  color:var(--cream);
  font:400 1.0625rem/1.65 var(--body);   /* 17px na raiz de 16px */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ─── camadas de atmosfera ─────────────────────────────────
   ::before  malha holográfica + auréola
   ::after   scanlines + granulado                            */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(78% 52% at 50% -10%, rgba(199,247,81,.09), transparent 72%),
    radial-gradient(95% 85% at 74% 14%, rgba(56,63,42,.50), transparent 82%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/72px 72px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/72px 72px;
  /* A mascara so pode abrir e fechar na VERTICAL. A elipse que havia
     aqui morria dentro da tela pela lateral: a malha e o oliva sumiam
     de um lado so e sobrava um degrau seco de cor no meio da janela,
     verde de um lado e preto do outro. Assim o tom do "planetinha"
     cobre a largura inteira por igual e so se dissolve descendo. */
  mask-image:linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.55) 66%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.55) 66%, transparent 100%);
  opacity:.9;
}
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.5;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--neon); color:#0A1003; }

/* barra de rolagem alinhada ao tema */
*{ scrollbar-color:var(--olive-2) transparent; scrollbar-width:thin; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--deep); }
::-webkit-scrollbar-thumb{ background:var(--olive-2); border-radius:10px; border:2px solid var(--deep); }
::-webkit-scrollbar-thumb:hover{ background:var(--neon-2); }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--neon); color:#0A1003; padding:12px 18px;
  font:600 14px var(--body); text-decoration:none;
}
.skip:focus{ left:8px; top:8px; }

/* ─── marca (SVG em máscara: a cor vem do background) ────── */
.mark, .word{
  display:block;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain;     mask-size:contain;
}
.mark{
  -webkit-mask-image:url(assets/mark-lb.svg); mask-image:url(assets/mark-lb.svg);
  aspect-ratio:1642.46/737.74; background:var(--cream);
}
.word{
  -webkit-mask-image:url(assets/word-systemys.svg); mask-image:url(assets/word-systemys.svg);
  aspect-ratio:1811.55/105.36; background:var(--cream);
}
.since{
  display:block;
  font:500 9.5px/1 var(--tech); letter-spacing:.34em;
  color:var(--cream-3); text-transform:uppercase;
}

/* ─── tipografia ───────────────────────────────────────── */
h1,h2,h3{ font-family:var(--display); font-weight:600; margin:0; letter-spacing:-.015em; }

h1{
  font-size:clamp(2.2rem, 4.8vw, 3.9rem);
  line-height:1.03; font-weight:700; letter-spacing:-.03em;
  background:linear-gradient(180deg, var(--cream) 48%, #B4B9A2);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h1 em{
  font-style:normal;
  background:linear-gradient(180deg, #EAFFB0, var(--neon) 60%, var(--neon-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 60px rgba(199,247,81,.35);
  position:relative;
}

h2{ font-size:clamp(1.8rem, 3.5vw, 2.7rem); line-height:1.12; }
h3{ font-size:1.14rem; line-height:1.3; letter-spacing:0; }

p{ margin:0; }

/* etiqueta de seção: colchetes de HUD */
.label{
  display:inline-flex; align-items:center; gap:9px;
  font:500 11px/1 var(--tech);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--neon); margin:0;
}
.label::before{
  content:""; width:22px; height:1px;
  background:linear-gradient(90deg, transparent, var(--neon));
}
.label::after{
  content:""; width:5px; height:5px; transform:rotate(45deg);
  border:1px solid var(--neon); background:var(--neon-dim);
}

.lede, .sec-sub{ color:var(--cream-2); }

/* ─── botões ───────────────────────────────────────────── */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 28px;
  font:600 14.5px/1 var(--display); letter-spacing:.04em; text-transform:uppercase;
  color:#0A1003;
  background:linear-gradient(135deg, #E4FF8E, var(--neon) 45%, var(--neon-2));
  border:1px solid var(--neon); border-radius:10px;
  text-decoration:none; white-space:nowrap;
  box-shadow:0 0 0 rgba(199,247,81,0), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
/* varredura de brilho */
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.75) 50%, transparent 80%);
  transform:translateX(-130%); transition:transform .6s cubic-bezier(.3,.7,.3,1);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 40px -12px rgba(199,247,81,.85); }
.btn:hover::after{ transform:translateX(130%); }
.btn:active{ transform:translateY(0); }

.btn-ghost{
  color:var(--cream);
  background:linear-gradient(var(--surface), var(--surface)) padding-box,
             linear-gradient(135deg, var(--line-2), rgba(199,247,81,.5)) border-box;
  border:1px solid transparent;
  box-shadow:none;
}
.btn-ghost::after{ background:linear-gradient(100deg, transparent 20%, rgba(199,247,81,.22) 50%, transparent 80%); }
.btn-ghost:hover{ box-shadow:0 12px 34px -16px rgba(199,247,81,.6); }

.btn-sm{ padding:11px 18px; font-size:12.5px; }

/* ─── abertura: a marca se monta ───────────────────────── */
.intro{
  position:fixed; inset:0; z-index:200;
  background:radial-gradient(60% 60% at 50% 45%, #131A0D, var(--void) 72%);
  display:grid; place-items:center; overflow:hidden;
  transition:opacity .7s ease, filter .7s ease;
}
.intro.is-out{ opacity:0; filter:blur(6px); pointer-events:none; }
.intro.is-done{ display:none; }

.intro-stage{ position:relative; display:grid; justify-items:center; gap:20px; }

.intro-mark{
  width:min(300px, 54vw); aspect-ratio:1642.46/737.74;
  background:var(--cream);
  -webkit-mask:url(assets/mark-lb.svg) center/contain no-repeat;
  mask:url(assets/mark-lb.svg) center/contain no-repeat;
  filter:drop-shadow(0 0 34px rgba(199,247,81,.35));
  animation:surge 1s cubic-bezier(.2,.8,.25,1) both;
}
.intro-word{
  width:min(330px, 60vw); aspect-ratio:1811.55/105.36;
  background:var(--cream);
  -webkit-mask:url(assets/word-systemys.svg) center/contain no-repeat;
  mask:url(assets/word-systemys.svg) center/contain no-repeat;
  animation:surge .9s cubic-bezier(.2,.8,.25,1) .45s both;
}
.intro-line{
  font:500 10px/1 var(--tech); letter-spacing:.4em; text-transform:uppercase;
  color:var(--neon); margin:6px 0 0;
  animation:surge .8s ease .95s both;
}
@keyframes surge{
  from{ opacity:0; transform:translateY(14px) scale(.96); filter:blur(9px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}

/* anéis girando atrás da marca — o eco da órbita da logo */
.intro-orbits{ position:absolute; inset:-40% -30%; z-index:-1; pointer-events:none; }
.intro-orbits i{
  position:absolute; inset:0; margin:auto;
  border:1px solid rgba(199,247,81,.22); border-radius:50%;
  animation:girar 14s linear infinite;
}
.intro-orbits i:nth-child(1){ width:86%; height:52%; transform:rotate(-18deg); }
.intro-orbits i:nth-child(2){ width:68%; height:38%; animation-duration:9s; animation-direction:reverse; border-color:rgba(199,247,81,.32); }
.intro-orbits i:nth-child(3){ width:100%; height:70%; animation-duration:22s; border-color:rgba(234,231,215,.10); }
@keyframes girar{ to{ transform:rotate(360deg); } }

/* barra de carga da abertura */
.intro-bar{
  position:absolute; left:50%; bottom:14%; transform:translateX(-50%);
  width:min(220px, 46vw); height:2px; background:rgba(234,231,215,.12); overflow:hidden;
}
.intro-bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--neon-2), var(--neon));
  box-shadow:var(--brilho);
  animation:carregar 2.6s cubic-bezier(.4,.1,.2,1) forwards;
}
@keyframes carregar{ to{ width:100%; } }

.intro-skip{
  position:absolute; right:22px; bottom:22px;
  font:500 11px/1 var(--tech); letter-spacing:.18em; text-transform:uppercase;
  color:var(--cream-3);
  background:rgba(20,26,15,.6); border:1px solid var(--line-2);
  border-radius:8px; padding:11px 16px; cursor:pointer;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:color .2s, border-color .2s, background .2s;
}
.intro-skip:hover{ color:var(--neon); border-color:var(--neon); }

body.intro-ativa{ overflow:hidden; }

/* ─── cabeçalho ────────────────────────────────────────── */
.head{
  position:sticky; top:0; z-index:40;
  background:rgba(8,12,6,.55);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  transition:background .25s;
}
/* fio de luz no rodapé do cabeçalho */
.head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(199,247,81,.55), transparent);
  opacity:0; transition:opacity .3s;
}
.head.is-stuck{ background:rgba(8,12,6,.88); }
.head.is-stuck::after{ opacity:1; }

.head-in{
  max-width:var(--wrap); margin:0 auto;
  padding:13px 22px;
  display:flex; align-items:center; gap:28px;
}

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; flex:0 0 auto; }
.brand .mark{ width:64px; }
.brand .word{ width:118px; opacity:.85; transition:opacity .25s, background .25s; }
.brand:hover .word{ opacity:1; }
.brand:hover .mark{ background:var(--neon); }

.nav{ display:flex; gap:30px; margin-left:auto; }
.nav a{
  font:500 12px/1 var(--tech); letter-spacing:.12em; text-transform:uppercase;
  color:var(--cream-3); text-decoration:none; padding:8px 0; position:relative;
  transition:color .2s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--neon); box-shadow:0 0 8px var(--neon);
  transition:right .3s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover{ color:var(--cream); }
.nav a:hover::after{ right:0; }

.burger{
  display:none; width:42px; height:42px; margin-left:auto;
  background:var(--surface); border:1px solid var(--line-2); border-radius:9px;
  cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{ display:block; width:16px; height:1.5px; background:var(--neon); transition:transform .22s, opacity .22s; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.nav-mob{
  display:flex; flex-direction:column;
  border-top:1px solid var(--line);
  padding:6px 22px 14px;
  background:rgba(8,12,6,.96);
}
.nav-mob[hidden]{ display:none; }
.nav-mob a{
  font:500 13px/1 var(--tech); letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream-2); text-decoration:none; padding:16px 0;
  border-bottom:1px solid var(--line);
}
.nav-mob a:last-child{ border-bottom:0; }

/* ─── espinha vertical ─────────────────────────────────── */
main{ position:relative; z-index:1; }

.rail{
  position:absolute; z-index:0;
  left:calc(50% - var(--wrap)/2 + 22px);   /* 50% do main, nao 100vw: a barra de rolagem nao entra */
  top:0; bottom:0; width:1px;
  background:linear-gradient(180deg, transparent, var(--line-2) 4%, var(--line-2) 96%, transparent);
}
.rail-fill{
  position:absolute; left:0; top:0; width:1px; height:0;
  background:linear-gradient(180deg, rgba(199,247,81,0), var(--neon-2) 30%, var(--neon));
  box-shadow:0 0 14px rgba(199,247,81,.65);
}
/* cabeça luminosa da espinha */
.rail-fill::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translate(-50%,50%);
  width:7px; height:7px; border-radius:50%;
  background:var(--neon); box-shadow:0 0 14px 3px rgba(199,247,81,.75);
}
@media (max-width:1240px){ .rail{ left:22px; } }

/* ─── seções ───────────────────────────────────────────── */
.sec{
  position:relative;
  max-width:var(--wrap); margin:0 auto;
  padding:92px 22px 92px calc(22px + var(--gut) + 26px);
}

.node{
  position:absolute; top:98px;
  left:calc(22px - 6px); width:13px; height:13px;
  transform:rotate(45deg);
  background:var(--void); border:1px solid var(--line-2);
  transition:border-color .5s, box-shadow .5s;
}
.node::after{
  content:""; position:absolute; inset:3px;
  background:var(--line-2); transition:background .5s, box-shadow .5s;
}
.sec.is-on .node{ border-color:var(--neon); box-shadow:0 0 18px rgba(199,247,81,.55); }
.sec.is-on .node::after{ background:var(--neon); }

.node::before{
  content:""; position:absolute; left:13px; top:50%;
  width:var(--gut); height:1px; background:var(--line-2);
  transform-origin:left center; transform:rotate(-45deg) scaleX(0);
  transition:transform .55s cubic-bezier(.2,.7,.3,1) .1s, background .5s;
}
.sec.is-on .node::before{ transform:rotate(-45deg) scaleX(1); background:rgba(199,247,81,.5); }

.sec-head{ max-width:660px; margin-bottom:54px; }
.sec-head h2{ margin:18px 0 14px; }
.sec-sub{ font-size:1.05rem; }

/* ─── hero ─────────────────────────────────────────────── */
/* Full-bleed de proposito: o fundo do hero (canvas de orbitas, piso
   holografico, halo da marca) tem de sangrar ate a borda da janela.
   Preso em --wrap com overflow:hidden, ele cortava seco no limite da
   coluna e sobrava uma faixa preta na direita — o degrau de cor era
   visivel a olho nu. O texto continua alinhado a coluna, agora por
   padding em vez de max-width. */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:min(94vh, 920px);
  display:flex; flex-direction:column; justify-content:center;
  max-width:none; margin:0;
  padding-top:120px; padding-bottom:110px;
  padding-left:max(22px + var(--gut) + 26px, 50% - var(--wrap)/2 + 22px + var(--gut) + 26px);
  padding-right:max(22px, 50% - var(--wrap)/2 + 22px);
}
/* piso holográfico em perspectiva */
.hero::after{
  content:""; position:absolute; left:-50%; right:-50%; bottom:-10px; height:44%;
  z-index:-2; pointer-events:none;
  background:
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/68px 68px,
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/68px 68px;
  transform:perspective(320px) rotateX(66deg);
  transform-origin:bottom center;
  mask-image:linear-gradient(180deg, transparent, #000 55%);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 55%);
  opacity:.75;
}
.board{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; }

.hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:56px;
}
.hero-in{ max-width:640px; }

/* marca do hero dentro do sistema de órbitas */
.hero-chip{ width:min(280px, 26vw); position:relative; }
.hero-chip::before{
  content:""; position:absolute; left:50%; top:50%;
  width:330%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(199,247,81,.18), transparent 62%);
  pointer-events:none; z-index:-1;
}
.chip-mark{
  display:block; width:100%; aspect-ratio:1642.46/737.74;
  background:linear-gradient(160deg, var(--cream), #B9BDA4);
  -webkit-mask:url(assets/mark-lb.svg) center/contain no-repeat;
  mask:url(assets/mark-lb.svg) center/contain no-repeat;
  filter:drop-shadow(0 0 38px rgba(199,247,81,.45));
}
.orbits{ position:absolute; inset:-58% -18%; pointer-events:none; }
.orbits i{
  position:absolute; inset:0; margin:auto; border-radius:50%;
  border:1px solid rgba(199,247,81,.18);
  animation:girar 20s linear infinite;
}
.orbits i:nth-child(1){ width:100%; height:56%; }
.orbits i:nth-child(2){ width:78%; height:40%; animation-duration:13s; animation-direction:reverse; border-color:rgba(199,247,81,.3); }
.orbits i:nth-child(3){ width:118%; height:74%; animation-duration:32s; border-color:rgba(234,231,215,.09); }
/* satélite percorrendo o anel externo */
.orbits i:nth-child(1)::after{
  content:""; position:absolute; top:-3px; left:50%;
  width:6px; height:6px; border-radius:50%;
  background:var(--neon); box-shadow:0 0 12px 2px rgba(199,247,81,.8);
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font:500 10.5px/1 var(--tech); letter-spacing:.28em; text-transform:uppercase;
  color:var(--cream-2); margin:0 0 24px;
  border:1px solid var(--line-2); border-radius:30px;
  padding:9px 16px 9px 13px;
  background:rgba(20,26,15,.5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--neon); box-shadow:0 0 10px var(--neon);
  animation:pulsar 2.4s ease-in-out infinite;
}
.eyebrow .sep{ color:var(--neon); }
@keyframes pulsar{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.82); } }

.hero .lede{
  font-size:clamp(1.03rem, 1.55vw, 1.2rem);
  max-width:610px; margin:28px 0 0;
}

.cta-row{ display:flex; flex-wrap:wrap; gap:13px; margin-top:40px; }

.scroll-hint{
  position:absolute; bottom:44px;
  left:max(22px + var(--gut) + 26px, 50% - var(--wrap)/2 + 22px + var(--gut) + 26px);
  width:22px; height:34px; border:1px solid var(--line-2);
  border-radius:11px; display:flex; justify-content:center; padding-top:6px;
}
.scroll-hint span{
  width:2px; height:6px; border-radius:1px; background:var(--neon);
  box-shadow:0 0 8px var(--neon);
  animation:hint 1.9s ease-in-out infinite;
}
@keyframes hint{
  0%,100%{ transform:translateY(0); opacity:1; }
  60%{ transform:translateY(12px); opacity:0; }
}

/* ─── faixa de palavras-chave ──────────────────────────── */
.ticker{
  position:relative; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, rgba(56,63,42,.35), rgba(20,26,15,.2));
  padding:13px 0; margin-top:10px;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker ul{
  display:flex; gap:0; list-style:none; margin:0; padding:0;
  width:max-content; animation:correr 34s linear infinite;
}
.ticker li{
  font:500 11px/1 var(--tech); letter-spacing:.24em; text-transform:uppercase;
  color:var(--cream-3); padding:0 26px; white-space:nowrap;
  display:flex; align-items:center; gap:26px;
}
.ticker li::after{
  content:""; width:5px; height:5px; transform:rotate(45deg);
  background:var(--neon); box-shadow:0 0 8px var(--neon);
}
@keyframes correr{ to{ transform:translateX(-50%); } }
.ticker:hover ul{ animation-play-state:paused; }

/* ─── painéis de vidro (cards e projetos) ──────────────── */
.grid-4{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }

.card, .proj{
  position:relative; isolation:isolate; overflow:hidden;
  border:1px solid transparent; border-radius:var(--r);
  background:linear-gradient(160deg, rgba(27,34,21,.92), rgba(13,18,10,.92)) padding-box,
             linear-gradient(150deg, var(--line-2), rgba(199,247,81,.06) 45%, var(--line-2)) border-box;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
/* holofote que segue o mouse (--mx/--my vêm do main.js) */
.card::after, .proj::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(199,247,81,.14), transparent 62%);
  opacity:0; transition:opacity .35s;
}
.card:hover, .proj:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 50px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(199,247,81,.28);
}
.card:hover::after, .proj:hover::after{ opacity:1; }

/* cantoneiras de HUD */
.card::before, .proj::before{
  content:""; position:absolute; right:10px; top:10px;
  width:16px; height:16px;
  border-top:1px solid var(--neon); border-right:1px solid var(--neon);
  opacity:0; transform:translate(-5px,5px); transition:opacity .3s, transform .3s;
}
.card:hover::before, .proj:hover::before{ opacity:.9; transform:none; }

.card{ padding:30px 28px 26px; }
.card h3{ color:var(--cream); margin-bottom:12px; }
.card p{ font-size:.97rem; color:var(--cream-2); }

.tags{
  list-style:none; display:flex; flex-wrap:wrap; gap:7px;
  margin:22px 0 0; padding:0;
}
.tags li{
  font:400 11px/1 var(--mono); letter-spacing:.06em;
  color:var(--cream-3); background:rgba(199,247,81,.05);
  border:1px solid var(--line); border-radius:5px; padding:6px 9px;
  transition:color .25s, border-color .25s, background .25s;
}
.card:hover .tags li{ color:var(--neon); border-color:rgba(199,247,81,.3); background:rgba(199,247,81,.08); }

/* ─── projetos ─────────────────────────────────────────── */
.projects{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.proj{ padding:26px 24px 24px; }

.proj-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px; }
.proj-top h3{ font-size:1.26rem; }

.proj-seg{
  font:400 10.5px/1 var(--tech); letter-spacing:.18em; text-transform:uppercase;
  color:var(--cream-3); margin:0 0 14px;
}
.proj p:last-child{ font-size:.95rem; color:var(--cream-2); }

.status{
  flex:0 0 auto;
  font:500 9.5px/1 var(--tech); letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-3); border:1px solid var(--line);
  border-radius:20px; padding:6px 11px;
}
.status.is-live{
  color:var(--plasma); border-color:rgba(95,240,196,.4);
  background:rgba(95,240,196,.07);
  display:inline-flex; align-items:center; gap:7px;
}
.status.is-live::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--plasma); box-shadow:0 0 9px var(--plasma);
  animation:pulsar 2.4s ease-in-out infinite;
}

/* ─── processo ─────────────────────────────────────────── */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.steps li{
  position:relative;
  padding:28px 26px 0 0;
  border-top:1px solid var(--line);
}
.steps li::before{
  content:""; position:absolute; left:0; top:-1px; width:0; height:1px;
  background:var(--neon); box-shadow:0 0 10px var(--neon);
  transition:width .7s cubic-bezier(.2,.7,.3,1);
}
.sec.is-on .steps li::before{ width:38px; }
.steps li:nth-child(2)::before{ transition-delay:.12s; }
.steps li:nth-child(3)::before{ transition-delay:.24s; }
.steps li:nth-child(4)::before{ transition-delay:.36s; }

.step-n{
  display:block; font:700 30px/1 var(--tech); letter-spacing:.02em;
  color:transparent; -webkit-text-stroke:1px rgba(199,247,81,.55);
  margin-bottom:16px;
  transition:color .35s, -webkit-text-stroke-color .35s, text-shadow .35s;
}
.steps li:hover .step-n{ color:var(--neon); text-shadow:0 0 24px rgba(199,247,81,.6); }
.steps h3{ margin-bottom:11px; }
.steps p{ font-size:.95rem; color:var(--cream-2); }

/* ─── CTA ──────────────────────────────────────────────── */
.cta-sec{ padding-bottom:120px; }
.cta-box{
  position:relative; overflow:hidden;
  border:1px solid transparent; border-radius:20px;
  background:
    radial-gradient(120% 150% at 8% 0%, rgba(199,247,81,.13), transparent 60%),
    linear-gradient(160deg, rgba(56,63,42,.6), rgba(13,18,10,.95)) padding-box,
    conic-gradient(from var(--ang), rgba(199,247,81,.65), rgba(234,231,215,.12) 25%, rgba(199,247,81,.65) 50%, rgba(234,231,215,.12) 75%, rgba(199,247,81,.65)) border-box;
  padding:58px 54px;
  animation:rodarBorda 9s linear infinite;
}
@keyframes rodarBorda{ to{ --ang:360deg; } }
/* malha interna do bloco */
.cta-box::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/44px 44px;
  mask-image:radial-gradient(70% 90% at 100% 100%, #000, transparent 70%);
  -webkit-mask-image:radial-gradient(70% 90% at 100% 100%, #000, transparent 70%);
}
.cta-box > *{ position:relative; }
.cta-box h2{ margin:18px 0 16px; max-width:24ch; }
.cta-box .sec-sub{ max-width:56ch; }

/* ─── rodapé ───────────────────────────────────────────── */
.foot{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, var(--deep), #060903);
  position:relative; z-index:1;
}
.foot::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(199,247,81,.5), transparent);
}
.foot-in{
  max-width:var(--wrap); margin:0 auto;
  padding:60px 22px 40px;
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:36px;
}
.foot-brand{ display:flex; align-items:flex-start; gap:16px; }
.foot-brand .mark{ width:76px; flex:0 0 auto; }
.foot-brand .word{ width:150px; }
.foot-brand .since{ margin-top:9px; }

.foot-nav{ display:flex; flex-direction:column; gap:12px; }
.foot-nav .label{ margin-bottom:6px; color:var(--cream-3); }
.foot-nav .label::before{ background:linear-gradient(90deg, transparent, var(--cream-3)); }
.foot-nav .label::after{ border-color:var(--cream-3); background:none; }
.foot-nav a{
  font:400 14.5px/1 var(--body); color:var(--cream-2);
  text-decoration:none; width:fit-content;
  transition:color .2s, transform .2s;
}
.foot-nav a:hover{ color:var(--neon); transform:translateX(3px); }

.foot-legal{
  max-width:var(--wrap); margin:0 auto;
  padding:20px 22px 96px; /* o fim da página não fica sob o botão flutuante */
  border-top:1px solid var(--line);
  font:400 12.5px/1.5 var(--mono); color:var(--cream-3);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}

/* ─── botão flutuante ──────────────────────────────────── */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:50;
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#06301A;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.8);
  transition:transform .2s cubic-bezier(.2,.7,.3,1);
}
.wa-float::before{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid rgba(37,211,102,.5);
  animation:halo 2.6s ease-out infinite;
}
@keyframes halo{
  0%{ transform:scale(1); opacity:.8; }
  70%,100%{ transform:scale(1.5); opacity:0; }
}
.wa-float:hover{ transform:scale(1.08); }

/* ─── entrada por scroll ───────────────────────────────── */
.reveal{ opacity:0; transform:translateY(20px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .65s ease, transform .65s cubic-bezier(.2,.7,.3,1);
}

/* ─── responsivo ───────────────────────────────────────── */
@media (max-width:980px){
  .projects{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); gap:34px 0; }
  .foot-in{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1/-1; }
}

@media (max-width:760px){
  body{ font-size:16px; }
  .nav{ display:none; }
  .head .btn-sm{ display:none; }
  .burger{ display:flex; }
  .brand .mark{ width:52px; }
  .brand .word{ width:96px; }

  .rail{ left:14px; }
  .sec, .hero{ padding-left:calc(14px + 22px); padding-right:18px; }
  .sec{ padding-top:78px; padding-bottom:78px; }
  .node{ left:calc(14px - 6px); top:86px; }
  .node::before{ width:14px; }
  .hero{ min-height:auto; padding-top:56px; padding-bottom:80px; }
  .scroll-hint{ display:none; }
  .hero-grid{ grid-template-columns:1fr; gap:0; }
  .hero-chip{ width:132px; order:-1; margin-bottom:44px; }
  .hero::after{ height:30%; }

  .grid-4, .projects{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; gap:30px 0; }
  .steps li{ padding-right:0; }

  .cta-box{ padding:38px 24px; border-radius:16px; }
  .cta-box h2{ max-width:none; }
  .sec-head{ margin-bottom:36px; }

  .foot-in{ grid-template-columns:1fr; gap:30px; padding-top:46px; }
  .foot-legal{ flex-direction:column; gap:8px; }
  .wa-float{ width:50px; height:50px; right:16px; bottom:16px; }
  .cta-row .btn{ flex:1 1 auto; }
}

/* ─── celular estreito: 360-400px ──────────────────────── */
@media (max-width:400px){
  body{ font-size:15.5px; }
  h1{ font-size:2rem; letter-spacing:-.022em; }
  h2{ font-size:1.6rem; }

  .sec, .hero{ padding-left:calc(12px + 18px); padding-right:15px; }
  .rail{ left:12px; }
  .node{ left:6px; }
  .node::before{ width:12px; }

  /* a pilula quebrava em duas linhas e esticava; aperta o rastreio */
  .eyebrow{ font-size:9.5px; letter-spacing:.16em; gap:8px; padding:8px 12px 8px 10px; }
  .brand .mark{ width:46px; }
  .brand .word{ width:84px; }
  .hero{ padding-top:44px; padding-bottom:66px; }
  .hero-chip{ width:112px; margin-bottom:36px; }

  .card{ padding:24px 20px 22px; }
  .cta-box{ padding:32px 18px; }
  .cta-row{ gap:10px; margin-top:32px; }
  .cta-row .btn{ flex:1 1 100%; }        /* botao inteiro, um por linha */
  .wa-float{ right:12px; bottom:12px; }
}

/* ─── telas grandes: 24" ate monitor de 34" ────────────── */
/* A coluna do site tem largura fixa (--wrap: 1160px). Sem estes
   degraus, um 34" (3440px) mostra uma tira de conteudo perdida no
   meio de dois vazios enormes. A escala vem da RAIZ, nao do body:
   titulo, texto e etiquetas estao todos em rem, entao sobem juntos
   e as proporcoes do desenho nao mudam. --wrap tem teto para a
   linha nao passar de ~75 caracteres. */
@media (min-width:1500px){
  html{ font-size:17px; }
  :root{ --wrap:1280px; --gut:30px; }
  .hero-in{ max-width:700px; }
  .sec-head{ max-width:720px; }
  .hero-chip{ width:min(320px, 24vw); }
}

@media (min-width:1900px){          /* 27" em 1x, notebook 4K a 100% */
  html{ font-size:18px; }
  :root{ --wrap:1400px; }
  .hero{ min-height:min(90vh, 1000px); }
  .hero-in{ max-width:760px; }
  .hero .lede{ max-width:680px; }
  .sec-head{ max-width:780px; }
  .hero-chip{ width:360px; }
  .sec{ padding-top:112px; padding-bottom:112px; }
}

@media (min-width:2400px){          /* 32" em 1x e o ultrawide 34" */
  html{ font-size:19px; }
  :root{ --wrap:1560px; }
  .hero-in{ max-width:820px; }
  .hero .lede{ max-width:720px; }
  .hero-chip{ width:400px; }
  .sec{ padding-top:130px; padding-bottom:130px; }
}

@media (min-width:3200px){          /* 34" ultrawide, 3440x1440 */
  html{ font-size:20px; }
  :root{ --wrap:1680px; }
  .hero-in{ max-width:880px; }
  .hero .lede{ max-width:760px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .ticker ul{ animation:none; }
  .sec.is-on .steps li::before{ width:38px; }
}