/* CSS customizado da página */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700&display=swap');

:root {
  --glass-color: rgba(255, 255, 255, 0.2);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-blur: 10px;
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

body {
  font-family: 'Exo 2', sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: #333;
  overflow-x: hidden;
}

.glass {
  background: rgb(255 255 255 / 41%);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 16px;
}

.glass-nav {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-card { transition: all 0.3s ease; }
.glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgb(0 253 66 / 52%);
}

/* ========= HERO ========= */
.hero-section {

  position: relative;
  isolation: isolate;               /* fecha a pilha de z-index dentro do herói */
  min-height: clamp(520px, 70vh, 880px);
}

/* SAI do absolute. Deixa o conteúdo “vivo” no fluxo e cria espaço pro carrossel */
.hero-overlay {
  position: relative;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: grid;
  align-content: end;               /* conteúdo no rodapé da seção */
  padding-bottom: 120px;            /* espaço real pro carrossel */
  outline-offset: 1px;
  z-index: 1;
}

/* ======== CARROSSEL NOVO (rail + track) ======== */
.services-rail {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: transparent;
}

.services-track {
  display: flex;
  gap: 1.5rem;
  padding: 1rem 1.5rem;
  will-change: transform;
}

.service-item {
  flex: 0 0 clamp(220px, 28vw, 320px);
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Pontos de navegação (se usar) */
.carousel-nav {
  position: absolute;
  bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 10;
}

.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}
.carousel-dot.active { background: white; transform: scale(1.2); }

/* Ícones com vidro */
.frosted-icon {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 50%;
  padding: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.alg { padding-bottom: 1rem; }

/* ===== Utilitários “estilo Tailwind” que você usava ===== */
.overflow-hidden { overflow: hidden; }
.w-full { width: 100%; }
.absolute { position: absolute; }
.bottom-0 { bottom: 0; }
.flex { display: flex; }
.gap-6 { gap: 1.5rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.opacity-80 { opacity: 0.8; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-3 { margin-bottom: 0.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.font-semibold { font-weight: 600; }
.mb-2 { margin-bottom: 0.5rem; }

/* === animação infinita do carrossel de serviços === */
@keyframes scroll-infinite {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-scroll-infinite { animation: scroll-infinite 45s linear infinite; }

/* Mobile: sem loop automático, usa scroll-snap suave (serviços) */
@media (max-width: 768px) {
  .animate-scroll-infinite { animation: none; }
  .services-rail { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .service-item { scroll-snap-align: start; flex-basis: 82%; }
}

.text-with1 { color: rgb(213 217 219); }

.transition { transition: all 0.3s ease-in-out; }
.hover\:text-blue-500:hover { color: rgb(232 247 255) !important; }

.w-101 { width: 3.9rem; height: 3.5rem !important; }

.w-32.h-32{
  width: 12rem !important;
  height: 12rem !important;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
  display: block;
  margin: 0 auto 1rem;
}

.glasss {
  background: rgb(255 255 255 / 53%);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 16px;
}

/* NÃO arrebente a utilitária .h-64 global. Use classe própria quando quiser herói alto */
.h-hero { height: 45rem; } /* opcional para páginas que pedirem altura grande */

.max100 { max-width: 100%; }

/* suas classes de escala continuam aqui, sem efeito colateral */
.scale-140{ --tw-scale-y: 1.5; --tw-scale-x: 1.8; }
.scale-141{ --tw-scale-y: 1.9; --tw-scale-x: 1.9; }
.scale-142{ --tw-scale-y: 1.5; --tw-scale-x: 1.7; }
.scale-143{ --tw-scale-y: 1.0; --tw-scale-x: 1.0; }
.scale-144{ --tw-scale-y: 1.8; --tw-scale-x: 2; }
.scale-145{ --tw-scale-x:1.5; --tw-scale-y: 1.5; }
.scale-146{ --tw-scale-x:1.0; --tw-scale-y: 1.0; }
.scale-147{ --tw-scale-x:1.0; --tw-scale-y: 1.0; }

.gap-88{ gap: 6rem; }

a { color: #ffffff !important; }

.backgroundline{
  background-image: url('img/line.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.wd{ width: 25%; height: 10%; }

.gap { gap: 2.5rem; }

/* ajustes visuais específicos */
.glass-card.glass.wd.p-6.rounded-2xl.flex-shrink-0.flex.flex-col{
  padding-bottom: 24px;
  margin-bottom: 65px;
  margin-top: 25px;
  margin-left: 25px;
}

/* ===== REMOVIDO: margem fantasma no carrossel antigo
.flex.animate-scroll-infinite.gap-6.px-6.py-4 { margin-bottom: 50px; }
*/

/* === BACKGROUND FX Overlay Seguro (patch) === */
#bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;}
.nodes-canvas,#canvas{position:absolute;inset:0;width:100%;height:100%;display:block;margin:0;border:0;}
.cache-canvas{background:transparent;}
.main-canvas{opacity:1;}
.bg-particles{mix-blend-mode:screen;opacity:.65;}

/* REMOVIDO: isso criava stacking context em tudo e provocava sobreposição
body>*:not(#bgfx){position:relative;z-index:1;}
*/

/* === SITE LOADER (fullscreen, scoped) === */
body.loading { overflow: hidden; }
#site-loader.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(#222922, #000500);
  display: grid;
  place-items: center;
  pointer-events: auto;
  opacity: 1;
  transition: opacity .5s ease;
}
#site-loader.loader.hide { opacity: 0; pointer-events: none; visibility: hidden; }
#site-loader .word {
  color: #fff;
  font-family: 'Source Code Pro', monospace;
  font-weight: 400;
  font-size: 2.5em;
  line-height: 1;
  text-shadow: 0 0 10px rgba(50,255,50,.5), 0 0 5px rgba(100,255,100,.5);
  position: relative; z-index: 1;
}
#site-loader .word span { display: inline-block; transform: translateX(100%) scale(.9); transition: transform 500ms; }
#site-loader .word .done { color: #6f6; transform: translateX(0) scale(1); }
#site-loader .overlay { background-image: linear-gradient(transparent 0%, rgba(10,16,10,.5) 50%); background-size: 1000px 2px; position: absolute; inset: 0; z-index: 0; }

/* === BG SOLID OVERRIDE (safe) === */
body.backgroundline,
.backgroundline {
  background-image: none !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
}

/* preto APENAS enquanto carrega */
body.loading.backgroundline,
body.loading .backgroundline {
  background-image: none !important;
  background-color: #0b1220 !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
}

/* após o loading, volta pro branco */
html, body { background-color: #fff; }

body:not(.loading).backgroundline,
body:not(.loading) .backgroundline {
  background-color: #04154bba !important;
}

.text-4xl.font-bold.mb-4{
  color: white;
}

.text-xl.opacity-80.max-w-2xl.mx-auto{
  color: white;
}

/* ===== Logos Carousel (restore) ===== */
.carousel{
  display: flex;               /* respeita sua utilitária .flex, mas reafirma aqui */
  width: max-content;          /* impede quebra e permite animação contínua */
  align-items: center;
}

@keyframes marquee-x{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }  /* exige lista duplicada (você já duplicou) */
}

.animate-scroll{
  animation: marquee-x 40s linear infinite;
}

.carousel img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Logos clicáveis ===== */
.carousel a.logo-link{
  display: inline-flex;
  width: 3rem;                          /* .w-12 */
  height: 3rem;                         /* .h-12 */
  border-radius: 50%;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.carousel a.logo-link:hover{ transform: scale(1.05); }
.carousel a.logo-link:focus-visible{
  outline: 2px solid #7dd3fc;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(125,211,252,.35);
}

/* utilitários que faltavam e você usa no HTML */
.rounded-full{ border-radius: 9999px; }
.items-center{ align-items: center; }
.justify-center{ justify-content: center; }

/* Mobile: sem animação, com arraste horizontal */
@media (max-width: 768px){
  .animate-scroll{ animation: none; }
  /* override do wrapper que tem .overflow-hidden */
  section[aria-label="Clientes que confiam em nosso trabalho"] > .mx-auto{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .carousel > *{
    flex: 0 0 auto;
    scroll-snap-align: center;
  }
}

/* Acessibilidade: respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce){
  .animate-scroll{ animation: none; }
}


/* ===== SAFE OFFSET PARA NAV FIXO ===== */
:root { --nav-height: 72px; }
.hero-section { padding-top: calc(var(--nav-height) + 16px); scroll-margin-top: calc(var(--nav-height) + 16px); }

/* ===== Esconde painel do dat.GUI (close controls) ===== */
.dg.ac, .dg.main { display: none !important; }

/* Ajuste fino dos botões do carrossel do blog */
#prevBtn { left: -14px !important; }
#nextBtn { right: -20px !important; }

.max-w-7xl.mx-auto{
  color: white;
}

/* ===== CÓDIGO COPIADO DE CARDS.CSS ===== */

/* Variáveis e Media Queries para os cards */
:root{
  --card-w: 400px;
  --card-h: 250px;
  --card-gap: 60px;
}
@media (max-width: 900px){
  :root{
    --card-w: 320px;
    --card-h: 200px;
    --card-gap: 40px;
  }
}
@media (max-width: 600px){
  :root{
    --card-w: 280px;
    --card-h: 175px;
    --card-gap: 28px;
  }
}
.card-wrapper{
  width: var(--card-w);
  height: var(--card-h);
}
.card-line{
  gap: var(--card-gap);
}
@media (max-width: 600px){
  .card-number{ font-size: 0.9rem; }
  .card-info{ font-size: 0.8rem; }
  .card-logo{ font-size: 0.9rem; }
}

/* Estilos do container e da animação */
.container {
  position: relative;
  width: 100vw;
  height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-stream {
  position: absolute;
  width: 100vw;
  height: 180px;
  display: flex;
  align-items: center;
  overflow: visible;
}

.card-line {
  display: flex;
  align-items: center;
  gap: 60px;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
  will-change: transform;
}
.card-line:active, .card-line.dragging {
  cursor: grabbing;
}
.card-line.css-animated {
  animation: scrollCards 40s linear infinite;
}
@keyframes scrollCards {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100vw); }
}

/* Estilos dos cards (wrapper, normal, ascii, etc.) */
.card-wrapper {
  position: relative;
  flex-shrink: 0;
}
.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px; /* Será sobrescrito pelas vars, mas é bom ter */
  height: 250px;
  border-radius: 15px;
  overflow: hidden;
}
.card-normal {
  background: transparent;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  color: white;
  z-index: 2;
  position: relative;
  overflow: hidden;
}
.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  transition: all 0.3s ease;
  filter: brightness(1.1) contrast(1.1);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
}
.card-image:hover { filter: brightness(1.2) contrast(1.2); }
.card-ascii {
  background: transparent;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 400px; /* Será sobrescrito pelas vars */
  height: 250px;
  border-radius: 15px;
  overflow: hidden;
}
.card-number, .card-info, .card-holder, .card-expiry, .card-logo {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.card-number { font-size: 22px; font-weight: bold; letter-spacing: 3px; margin-bottom: 15px; }
.card-info { display: flex; justify-content: space-between; align-items: flex-end; }
.card-holder, .card-expiry { font-size: 14px; }
.card-holder { text-transform: uppercase; }
.card-logo { position: absolute; top: 20px; right: 20px; font-size: 18px; font-weight: bold; }
.card-logo.logo-left { bottom: auto; top: 10px; text-align: center; left: 20px; }

/* Estilos do efeito ASCII e glitch */
.ascii-content {
  position: absolute;
  top: 0; left: 0;
  background-color: rgb(20 75 75);
  width: 100%; height: 100%;
  color: rgba(220, 210, 255, 0.6);
  font-family: "Courier New", monospace;
  font-size: 11px;
  line-height: 13px;
  overflow: hidden; white-space: pre;
  clip-path: inset(0 calc(100% - var(--clip-left, 0%)) 0 0);
  animation: glitch 0.1s infinite linear alternate-reverse;
  margin: 0; padding: 0; text-align: left; vertical-align: top;
  box-sizing: border-box;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.2) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.2) 100%);
}
@keyframes glitch { 0%{opacity:1;} 15%{opacity:.9;} 16%{opacity:1;} 49%{opacity:.8;} 50%{opacity:1;} 99%{opacity:.9;} 100%{opacity:1;} }
.flicker-char { color: #fff; font-weight: bold; }

/* Estilos do Scanner e seus efeitos */
.scanner {
  display: none; /* O JS controla isso, mas o ideal é começar escondido */
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 4px; height: 300px;
  border-radius: 30px;
  background: linear-gradient(to bottom, transparent, rgba(0,255,255,0.8), rgba(0,255,255,1), rgba(0,255,255,0.8), transparent);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.8), 0 0 40px rgba(0, 255, 255, 0.4);
  animation: scanPulse 2s ease-in-out infinite alternate;
  z-index: 10;
}
@keyframes scanPulse { 0% { opacity: 0.8; transform: translate(-50%, -50%) scaleY(1); } 100% { opacity: 1; transform: translate(-50%, -50%) scaleY(1.1); } }
.card-normal { clip-path: inset(0 0 0 var(--clip-right, 0%)); }
.card-ascii { clip-path: inset(0 calc(100% - var(--clip-left, 0%)) 0 0); }
.scan-effect {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.4), transparent);
  animation: scanEffect 0.6s ease-out;
  pointer-events: none;
  z-index: 5;
}
@keyframes scanEffect { 0% { transform: translateX(-100%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }

/* Estilos dos Canvas */
#particleCanvas, #scannerCanvas {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100vw;
  z-index: 0;
  pointer-events: none;
}
#particleCanvas { left: 0; height: 250px; }
#scannerCanvas { left: -3px; height: 300px; z-index: 15; }
.container{ backdrop-filter: blur(5px);}
#clie{z-index: 1}


/* === Mobile menu styles === */
#mobile-menu.hidden { display: none; }
#mobile-menu .mobile-backdrop { background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); }
#mobile-menu .mobile-sheet { background: rgba(18,24,32,0.92); box-shadow: 0 10px 30px rgba(0,0,0,0.35); border-left: 1px solid rgba(255,255,255,0.06); transform: translateX(100%); transition: transform .25s ease; }
#mobile-menu.is-active .mobile-sheet { transform: translateX(0%); }
#mobile-menu.is-active { display: block; }
#mobile-menu .mobile-link { padding: 12px 8px; border-radius: 10px; }
#mobile-menu .mobile-link:hover { background: rgba(255,255,255,0.06); }
html.no-scroll, body.no-scroll { overflow: hidden; }


/* === Responsive menu visibility rules (no Tailwind needed) === */
@media (max-width: 767px){
  #desktop-menu { display: none !important; }
  #hamburger-btn { display: inline-flex !important; }
}
@media (min-width: 768px){
  #hamburger-btn { display: none !important; }
}
/* Make mobile menu above the fixed nav */
#mobile-menu { z-index: 60; }