/* ============================================================
   GLOBAL.CSS — Estilos base compartilhados por todas as páginas
   Inclui: reset, variáveis, tipografia, nav, footer, utilitários
============================================================ */


/* =====================
   RESET
   Normaliza box-model e remove margens padrão do navegador
===================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* =====================
   VARIÁVEIS CSS
   Design tokens centralizados — altere aqui para refletir em todo o projeto
===================== */
:root {
  --bg: #02040A;           /* Fundo principal escuro */
  --bg-2: #061224;         /* Fundo secundário (cards, seções) */
  --primary: #00A8F7;      /* Azul primário */
  --primary-2: #2563EB;    /* Azul escuro (gradientes) */
  --accent: #40E0D0;       /* Ciano de destaque */
  --text: #F4F7FB;         /* Texto principal */
  --muted: #A9B2C3;        /* Texto secundário / labels */
  --border: rgba(255,255,255,0.08);       /* Bordas sutis */
  --cyan-border: rgba(64,224,208,0.28);  /* Bordas com tom ciano */
}


/* =====================
   BASE HTML
===================== */
html {
  scroll-behavior: smooth; /* Scroll suave para âncoras */
}

body {
  min-height: 100vh;
  overflow-x: hidden; /* Evita scroll horizontal indesejado */
  color: var(--text);
  font-family: "DM Sans", sans-serif;
  font-weight: 300;

  /* Background em camadas: gradientes radiais + linear */
  background:
    radial-gradient(circle at 82% 38%, rgba(0,168,247,0.18), transparent 28%),
    radial-gradient(circle at 72% 64%, rgba(64,224,208,0.10), transparent 26%),
    linear-gradient(180deg, #02040A 0%, #071629 54%, #02040A 100%);
}


/* =====================
   FUNDO TECH — Grid decorativo
   Pseudo-elemento ::before cria uma grade sutil no fundo
===================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none; /* Não interfere com cliques */
  opacity: 0.06;
  background-image:
    linear-gradient(rgba(64,224,208,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64,224,208,0.10) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(circle at 74% 40%, black, transparent 62%);
}

/* Ruído (noise) sutil para dar textura ao fundo */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* Garante que o conteúdo fique acima dos pseudo-elementos de fundo */
.page {
  position: relative;
  z-index: 2;
}


/* =====================
   ÓRBITA — Elemento decorativo circular fixo
   Posicionado no canto superior direito da viewport
===================== */
.orbit {
  position: fixed;
  top: 130px;
  right: -160px;
  width: min(760px, 72vw);
  height: min(760px, 72vw);
  border-radius: 50%;
  z-index: 1;
  opacity: 0.50;
  pointer-events: none;
  background:
    radial-gradient(circle, transparent 48%, rgba(0,168,247,0.16) 48.3%, transparent 49%),
    radial-gradient(circle, transparent 63%, rgba(64,224,208,0.12) 63.3%, transparent 64%);
  box-shadow: inset 0 0 90px rgba(0,168,247,0.12);
}

/* Linha diagonal decorativa dentro da órbita */
.orbit::before {
  content: "";
  position: absolute;
  top: 47%;
  right: 13%;
  width: 70%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
  transform: rotate(-15deg);
  opacity: 0.45;
}


/* =====================
   NAVEGAÇÃO PRINCIPAL
   Fixa no topo com blur de fundo
===================== */
nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 76px;
  padding: 0 clamp(24px, 4vw, 64px); /* Padding responsivo */
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(2,4,10,0.82);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(22px); /* Efeito glassmorphism */
}

/* Logo tipográfico */
.logo {
  font-family: "Syne", sans-serif;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 800;
  letter-spacing: -1.4px;
  color: var(--text);
  text-decoration: none;
}

/* Parte colorida do logo (Works) */
.logo em {
  font-style: normal;
  background: linear-gradient(135deg, #60A5FA 0%, var(--primary) 52%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(64,224,208,0.18));
}

/* Container dos links da nav */
.nav-right {
  display: flex;
  align-items: center;
  gap: 34px;
}

/* Links de navegação */
.nav-link {
  color: var(--text);
  opacity: 0.82;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-link:hover {
  opacity: 1;
}

/* Botão CTA na nav (usado em outras páginas) */
.nav-cta {
  color: #fff;
  text-decoration: none;
  font-family: "Syne", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, #00A8F7 0%, #2563EB 80%);
  box-shadow: 0 16px 45px rgba(37,99,235,0.32);
}


/* =====================
   KICKER — Label de seção (ex: "Lançamento em breve")
   Linha decorativa + texto em caixa alta
===================== */
.kicker {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 40px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.44em;
  text-transform: uppercase;
}

/* Traço decorativo antes do kicker */
.kicker::before {
  content: "";
  width: 84px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(64,224,208,0.35);
}


/* =====================
   DIVISOR — Linha horizontal entre seções
===================== */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}


/* =====================
   FOOTER
===================== */
footer {
  border-top: 1px solid var(--border);
  padding: 28px clamp(24px, 4vw, 64px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-logo {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.5px;
}

/* Parte colorida do logo no footer */
.footer-logo em {
  font-style: normal;
  background: linear-gradient(135deg, #60A5FA, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
}

.footer-links a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
}

.footer-links a:hover {
  color: var(--primary);
}

.footer-copy {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.05em;
}


/* =====================
   BOTTOM BAR — Tagline fixa no rodapé
===================== */
.bottom-bar {
  min-height: 50px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Syne", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: linear-gradient(90deg, #00A8F7, #2563EB, #40E0D0);
}


/* =====================
   RESPONSIVO — Mobile (≤ 900px)
===================== */
@media (max-width: 900px) {

  nav {
    height: 90px;
  }

  /* Oculta links de navegação em mobile */
  .nav-link {
    display: none;
  }

  .orbit {
    right: -260px;
    top: 160px;
    width: 660px;
    height: 660px;
  }

  .kicker {
    font-size: 11px;
    letter-spacing: 0.36em;
  }

  /* Footer empilhado no mobile */
  footer {
    flex-direction: column;
    text-align: center;
  }

  .bottom-bar {
    font-size: 11px;
  }
}