/* styles/main.css */
/* Caminho e nome do arquivo */

/* Importa as utilidades do Tailwind CSS a partir da CDN */
@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css');

/* Definição das variáveis de cor e fontes, inspirado na sua referência */
:root {
  --background: 33, 36, 41; /* #212429 */
  --text-primary: 255, 255, 255; /* #fff */
  --text-secondary: 224, 224, 255; /* #e0e0ff */
  --primary: 0, 187, 255; /* --link-1: #0bf */
  --secondary: 156, 66, 245; /* --purple: #9c42f5 */
  
  /* Variáveis para o efeito glassmorphism */
  --surface-shadow: 8px 8px 24px 0 rgba(9,13,20,0.4),-4px -4px 8px 0 rgba(224,224,255,0.04),0 1px 1px 0 rgba(9,13,20,0.4);
  --surface-border: solid 1px rgba(245,247,250,0.06);
}

/* Estilos de base para toda a página */
body {
  font-family: 'Inter', sans-serif;
  background-color: rgb(var(--background));
  color: rgb(var(--text-secondary));
  text-rendering: optimizeSpeed;
  margin: 0;
  overflow-x: hidden; /* Previne scroll horizontal */
}

/* CLASSE REUTILIZÁVEL PARA O EFEITO GLASSMORPHISM */
.glass-card {
  background-image: linear-gradient(101deg, rgba(245, 247, 250, 0.08), rgba(245, 247, 250, 0.04) 52%, rgba(245, 247, 250, 0));
  backdrop-filter: blur(40px);
  box-shadow: var(--surface-shadow);
  border: var(--surface-border);
  background-origin: border-box;
  border-radius: 24px;
}

/* Classes de utilidade para cores */
.primary-text { color: rgb(var(--primary)); }
.primary-button {
    background-color: rgb(var(--primary));
    color: rgb(var(--text-primary));
}
.primary-button:hover { opacity: 0.9; }

/* --- Estilos para o Fundo Animado --- */
.shapes {
  position: fixed;
  inset: 0;
  filter: blur(50px) saturate(140%);
  z-index: -1;
  overflow: hidden;
}

.triangle {
  position: absolute;
  width: 60vmin;
  height: 60vmin;
  opacity: .85;
  mix-blend-mode: screen;
  will-change: transform;
  animation: float 22s ease-in-out infinite;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.t1 { background: linear-gradient(135deg, #7a5cff, #3b2fff); left: -10vmin; top: -10vmin; animation-delay: -4s; }
.t2 { background: linear-gradient(135deg, #00e0ff, #0096ff); right: -15vmin; top: 10vmin; animation-delay: -10s; }
.t3 { background: linear-gradient(135deg, #ff4fa3, #ff0066); left: 20vmin; bottom: -15vmin; animation-delay: -16s; }
.t4 { background: linear-gradient(135deg,