/* ============================================================= */
/* TOKENS                                                          */
/* ============================================================= */
:root{
  --color-bg:#0A0A0A;
  --color-surface:#121212;
  --color-accent:#DFFF00;     /* lima elétrico */
  --color-accent-2:#F97316;   /* laranja        */
  --color-iris:#6366F1;       /* índigo, só decorativo */
  --color-muted:#A1A1A1;
  --ease:cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth;}
/* Lenis (smooth scroll): quando ativo, desliga o smooth nativo p/ não conflitar */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
body{
  font-family:'Inter',system-ui,sans-serif;
  background-color:var(--color-bg);
  color:#fff;
  overflow-x:hidden;
  cursor:none;                /* substituído por #custom-cursor */
}
section{scroll-margin-top:5rem;}

/* ---- Tipografia ---- */
.font-display{font-family:'Syne',sans-serif;}
.font-mono{font-family:'JetBrains Mono',monospace;}
.text-fluid-h1{font-size:clamp(2.75rem,8vw,7.5rem);line-height:.92;}
.text-fluid-h2{font-size:clamp(2rem,5vw,4.5rem);line-height:1;}
.text-fluid-h3{font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.1;}
.text-fluid-body{font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.7;}

/* ---- Cores ---- */
.text-accent{color:var(--color-accent);}
.text-accent-2{color:var(--color-accent-2);}
.bg-accent{background-color:var(--color-accent);}
.bg-accent-2{background-color:var(--color-accent-2);}
.border-accent{border-color:var(--color-accent);}
.bg-surface{background-color:var(--color-surface);}

/* ---- Texto luminoso ---- */
.text-glow{text-shadow:0 0 30px rgba(223,255,0,.25),0 0 60px rgba(223,255,0,.08);}
.text-glow-soft{text-shadow:0 0 24px rgba(255,255,255,.12);}

/* ---- Texto com gradiente animado (lima → laranja → lima) ---- */
.text-gradient{
  background:linear-gradient(110deg,#fff 0%,var(--color-accent) 30%,var(--color-accent-2) 55%,var(--color-accent) 80%,#fff 100%);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:gradient-pan 6s linear infinite;
}
@keyframes gradient-pan{to{background-position:220% center;}}

/* ---- Botões brutalistas com clip-slant ---- */
.clip-slant{clip-path:polygon(5% 0,100% 0,95% 100%,0% 100%);}
.clip-slant-reverse{clip-path:polygon(0 0,95% 0,100% 100%,5% 100%);}

/* ---- Fundos de ambiente ---- */
.dot-grid{
  position:fixed;inset:0;z-index:-3;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:2rem 2rem;
}
.mouse-glow{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(circle 600px at var(--mouse-x,50vw) var(--mouse-y,50vh),rgba(223,255,0,.05),transparent 70%);
}
.structural-line-v{width:1px;background:rgba(255,255,255,.05);height:100%;position:absolute;top:0;}
.structural-line-h{height:1px;background:rgba(255,255,255,.05);width:100%;position:absolute;left:0;}

/* ---- Orbs de aurora ---- */
.orb{position:absolute;border-radius:9999px;filter:blur(110px);pointer-events:none;opacity:.5;will-change:transform;}
.orb-lime{background:radial-gradient(circle,rgba(223,255,0,.55),transparent 65%);}
.orb-orange{background:radial-gradient(circle,rgba(249,115,22,.45),transparent 65%);}
.orb-iris{background:radial-gradient(circle,rgba(99,102,241,.40),transparent 65%);}
@keyframes drift{
  0%{transform:translate(0,0) scale(1);}
  33%{transform:translate(6%,-8%) scale(1.12);}
  66%{transform:translate(-7%,5%) scale(.95);}
  100%{transform:translate(0,0) scale(1);}
}
.drift-a{animation:drift 22s var(--ease) infinite;}
.drift-b{animation:drift 28s var(--ease) infinite reverse;}
.drift-c{animation:drift 34s var(--ease) infinite;}

/* ---- Grain (textura premium) ---- */
.grain{
  position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.04;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Cursor cinético customizado ---- */
#custom-cursor{
  position:fixed;top:0;left:0;width:1rem;height:1rem;background:var(--color-accent);
  border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-radius .3s;
  mix-blend-mode:difference;
}
#custom-cursor.hovering{width:4rem;height:4rem;background:transparent;border:1px solid var(--color-accent);mix-blend-mode:normal;}
#custom-cursor::after{
  content:'VER';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:.5rem;font-family:'JetBrains Mono',monospace;color:var(--color-accent);opacity:0;transition:opacity .3s;
}
#custom-cursor.hovering-project::after{opacity:1;}
@media (hover:none){#custom-cursor{display:none;}body{cursor:auto;}}

/* ---- Scroll reveal (blur up) ---- */
.reveal-up{opacity:0;transform:translateY(3rem);filter:blur(8px);transition:all 1s var(--ease);}
.reveal-up.active{opacity:1;transform:translateY(0);filter:blur(0);}

/* ---- Floating-card 3D lift ---- */
.floating-card{transition:transform .5s cubic-bezier(.25,.46,.45,.94),box-shadow .5s,border-color .5s;will-change:transform;}
.floating-card:hover{transform:scale(1.08) translateY(-10px)!important;z-index:50;box-shadow:0 25px 50px -12px rgba(0,0,0,.6);border-color:rgba(223,255,0,.4);}
.perspective-1000{perspective:1000px;}

/* ---- Beam borders animadas ---- */
.beam-border-v{position:absolute;top:0;bottom:0;left:0;width:1px;background:rgba(255,255,255,.06);overflow:hidden;z-index:10;}
.beam-border-v::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent,var(--color-accent),transparent);transform:translateY(-100%);animation:beam-drop 5s var(--ease) infinite;opacity:.8;}
.beam-border-h{position:absolute;bottom:0;left:0;right:0;height:1px;background:rgba(255,255,255,.06);overflow:hidden;z-index:10;}
.beam-border-h::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,transparent,var(--color-accent-2),transparent);transform:translateX(-100%);animation:beam-slide 7s var(--ease) infinite;animation-delay:2.5s;opacity:.8;}
@keyframes beam-drop{0%{transform:translateY(-100%);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(100%);opacity:0}}
@keyframes beam-slide{0%{transform:translateX(-100%);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(100%);opacity:0}}

/* ---- Entrada fadeSlideIn ---- */
@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(30px);filter:blur(8px);}100%{opacity:1;transform:translateY(0);filter:blur(0);}}

/* ---- Marquee cinético ---- */
@keyframes marquee{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.marquee-track{display:inline-flex;white-space:nowrap;animation:marquee 32s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}

/* ---- Spin lento (anéis do núcleo) ---- */
@keyframes spin-slow{to{transform:rotate(360deg);}}
.spin-slow{animation:spin-slow 24s linear infinite;}
.spin-slower{animation:spin-slow 40s linear infinite reverse;}

/* ---- Pulse ring (status / nós) ---- */
@keyframes pulse-ring{0%{transform:scale(.8);opacity:.7;}70%{transform:scale(1.8);opacity:0;}100%{opacity:0;}}

/* ---- Utilitários ---- */
.no-scrollbar::-webkit-scrollbar{display:none;}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none;}
::selection{background:var(--color-accent);color:#000;}

/* ---- Headline da Hero (menor que o H1 do design system) ---- */
.hero-headline{font-size:clamp(2.25rem,5.6vw,5.25rem);line-height:.95;}
/* Equilibra a quebra das linhas (evita palavra órfã tipo "MEDIDA" sozinha) */
.hero-line{text-wrap:balance;}

/* ---- Estado inicial das animações GSAP da Hero (evita flash) ---- */
.hero-eyebrow,.hero-line,.hero-sub,.hero-cta,.hero-visual,.hero-scroll{opacity:0;}

/* As seções abaixo da dobra são escondidas/animadas pelo próprio
   gsap.from() (immediateRender) — sem regra CSS aqui para não
   quebrar o estado final das animações. */

/* ============================================================= */
/* SERVIÇOS                                                       */
/* ============================================================= */
.svc-card{transition:transform .5s var(--ease),border-color .5s,box-shadow .5s;will-change:transform;}
.svc-card:hover{transform:translateY(-8px);border-color:rgba(223,255,0,.4);box-shadow:0 30px 60px -20px rgba(0,0,0,.7);}

/* ---- Gráfico do card "Agentes de IA" (contido na caixa visual) ---- */
.ag-box{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 60% 50%,rgba(223,255,0,.06),transparent 70%);}
.ag-core{
  position:absolute;top:50%;left:55%;transform:translate(-50%,-50%);
  width:5rem;height:5rem;border-radius:9999px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(223,255,0,.45);color:var(--color-accent);font-size:1.9rem;
  background:radial-gradient(circle,rgba(223,255,0,.18),transparent 70%);
}
.ag-core::before,.ag-core::after{
  content:'';position:absolute;inset:0;border-radius:9999px;border:1px solid rgba(223,255,0,.5);
  animation:pulse-ring 3s var(--ease) infinite;
}
.ag-core::after{animation-delay:1.5s;}
.ag-chip{
  position:absolute;display:flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;border:1px solid rgba(255,255,255,.15);
  background:rgba(18,18,18,.85);backdrop-filter:blur(4px);color:#fff;font-size:1.15rem;
}
.ag-chip--1{top:16%;left:12%;animation:float-y 4s ease-in-out infinite;}
.ag-chip--2{top:56%;left:8%;animation:float-y 5s ease-in-out infinite .6s;}
.ag-chip--3{bottom:14%;right:14%;color:var(--color-accent);animation:float-y 4.5s ease-in-out infinite 1.2s;}
@keyframes float-y{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}

/* ---- Gráfico do card "Automações" (fluxo de dados, contido) ---- */
.flow-box{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.flow-line{position:absolute;left:0;right:0;height:1px;transform:translateY(-50%);background:linear-gradient(to right,transparent,rgba(255,255,255,.14),transparent);}
.flow-dot{
  position:absolute;width:.5rem;height:.5rem;border-radius:9999px;transform:translateY(-50%);background:var(--color-accent);
  box-shadow:0 0 12px rgba(223,255,0,.8);animation:flow-move 4s linear infinite;
}
@keyframes flow-move{
  0%{left:-6%;opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{left:106%;opacity:0;}
}
.flow-node{
  position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.4rem;border:1px solid rgba(255,255,255,.15);background:rgba(18,18,18,.85);
  color:var(--color-accent);font-size:1.1rem;
}

/* ============================================================= */
/* DIFERENCIAIS                                                   */
/* ============================================================= */
.diff-divider{
  position:absolute;top:0;left:0;right:0;height:1px;background:rgba(255,255,255,.12);
  transform-origin:left center;
}
.diff-row{transition:background .4s var(--ease);padding-left:clamp(1rem,4vw,3.5rem);padding-right:clamp(1rem,4vw,3.5rem);}
.diff-row:not(:last-child):hover{background:radial-gradient(150% 140% at 35% 50%,rgba(255,255,255,.06),rgba(255,255,255,.02) 60%,transparent 85%);}

.diff-num{
  display:inline-block;font-family:'Syne',sans-serif;font-weight:800;line-height:.9;
  font-size:clamp(3.5rem,7vw,6.5rem);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px rgba(223,255,0,.45);
  transition:color .45s var(--ease),text-shadow .45s var(--ease),transform .45s var(--ease);
}
.diff-row:hover .diff-num{
  color:var(--color-accent);-webkit-text-stroke-color:var(--color-accent);
  text-shadow:0 0 45px rgba(223,255,0,.45);transform:translateX(6px);
}

.diff-icon{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;border:1px solid rgba(255,255,255,.15);color:var(--color-accent);
  font-size:1.5rem;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.diff-row:hover .diff-icon{background:var(--color-accent);color:#000;border-color:var(--color-accent);}
@media (max-width:767px){
  .diff-row{padding-left:0;padding-right:0;}
  .diff-num{display:block;font-size:clamp(2.5rem,11vw,3.5rem);line-height:1;margin-bottom:1.75rem;}
}

/* ============================================================= */
/* COMO FUNCIONA — timeline preenchida no scroll                 */
/* ============================================================= */
.howit-line{
  position:absolute;top:1.75rem;bottom:1.75rem;left:calc(1.75rem - 1px);width:2px;
  background:rgba(255,255,255,.1);overflow:hidden;border-radius:2px;
}
.howit-line-fill{
  position:absolute;top:0;left:0;width:100%;height:0;
  background:linear-gradient(to bottom,var(--color-accent),rgba(223,255,0,.55));
  box-shadow:0 0 18px rgba(223,255,0,.55);will-change:height;
}
.howit-node{
  position:relative;z-index:2;flex-shrink:0;width:3.5rem;height:3.5rem;border-radius:9999px;
  display:flex;align-items:center;justify-content:center;background:#0A0A0A;
  border:1px solid rgba(255,255,255,.18);
  transition:border-color .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease);
}
.howit-num{
  font-family:'JetBrains Mono',monospace;font-size:1.05rem;font-weight:500;
  color:rgba(255,255,255,.5);transition:color .5s var(--ease);
}
.howit-step.is-active .howit-node{
  border-color:var(--color-accent);background:var(--color-accent);
  box-shadow:0 0 34px rgba(223,255,0,.5);transform:scale(1.06);
}
.howit-step.is-active .howit-num{color:#000;font-weight:700;}
.howit-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.35);transition:color .5s var(--ease);
}
.howit-step.is-active .howit-eyebrow{color:var(--color-accent);}
.howit-icon{
  font-size:1.5rem;color:rgba(255,255,255,.4);transition:color .5s var(--ease);
}
.howit-step.is-active .howit-icon{color:var(--color-accent);}

/* ============================================================= */
/* CTA FINAL                                                      */
/* ============================================================= */
.cta-title{font-size:clamp(2.5rem,7vw,6rem);line-height:.95;}
.cta-glow{
  position:absolute;top:42%;left:50%;width:60rem;height:60rem;max-width:120vw;max-height:120vw;
  transform:translate(-50%,-50%);border-radius:9999px;z-index:0;
  background:radial-gradient(circle,rgba(223,255,0,.10),rgba(223,255,0,.03) 38%,transparent 66%);
  animation:cta-pulse 6s ease-in-out infinite;
}
@keyframes cta-pulse{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1);}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08);}}

/* ============================================================= */
/* RODAPÉ                                                         */
/* ============================================================= */
.foot-social{
  display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;
  border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.6);font-size:1.25rem;
  transition:all .4s var(--ease);
}
.foot-social:hover{background:var(--color-accent);border-color:var(--color-accent);color:#000;transform:translateY(-3px);}