/* ============================================================
   BASE — Tokens, Reset e Variáveis Globais
   ============================================================ */

:root {
  /* CORES */
  --bg:           #050507;
  --bg-card:      rgba(255,255,255,.03);
  --white:        #ffffff;
  --dim:          rgba(255,255,255,.62);
  --cyan:         #00E5FF;
  --magenta:      #B026FF;
  --border:       rgba(255,255,255,.10);
  --border-subtle:rgba(255,255,255,.08);
  --glass:        rgba(255,255,255,.03);
  --glass-2:      rgba(255,255,255,.05);

  /* TIPOGRAFIA */
  --font-display: 'Syne', system-ui, sans-serif;
  --font-tech:    'Space Grotesk', ui-sans-serif, system-ui, sans-serif;

  /* ESPAÇAMENTO (Grid de 8pt) */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  64px;
  --space-xl:  120px;

  /* CONTAINER */
  --container: 1240px;

  /* EFEITOS */
  --glow-cyan:   0 0 20px rgba(0,229,255,.4);
  --glass-blur:  blur(12px);
  --transition:  all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* RESET */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a    { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img  { display: block; max-width: 100%; }

/* UTILITÁRIOS GLOBAIS */
.text-gradient {
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.4) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-wrapper {
  padding: var(--space-xl) 40px;
  max-width: var(--container);
  margin: 0 auto;
}