:root {
    --color-primary: #25a550;
    --color-dark: #070B0A;
    --color-white: #FFFFFF;
    --max-width: 1440px;
    --font-main: 'DM Sans', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-main); }

a {
  color: inherit;
  text-decoration: none;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    background-color: #0E1310;

    /* CAMADAS DE BACKGROUND (Da mais alta para a mais baixa) */
    background-image: 
        /* 1. Ponto de Luz Verde (Radial) no topo esquerdo */
        radial-gradient(circle at 0% 0%, rgba(37, 165, 80, 0.12) 0%, transparent 50%),
        
        /* 2. Grid Vertical (1px) */
        linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        
        /* 3. Grid Horizontal (1px) */
        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        
        /* 4. Base Escura com Gradiente Diagonal */
        linear-gradient(135deg, #0b0f0d 0%, #0f1411 100%);

    /* CONTROLE DO TAMANHO DA MALHA */
    background-size: 
        100% 100%,   /* Radial: Ocupa tudo */
        60px 60px,   /* Grid Vertical: Repete a cada 60px */
        60px 60px,   /* Grid Horizontal: Repete a cada 60px */
        100% 100%;   /* Base: Ocupa tudo */

    background-attachment: fixed; /* Mantém o grid estático enquanto o conteúdo rola */
}

/* classe base */
.anim-fade-up {
  opacity: 0;
  animation: fade-up 0.6s ease-out forwards;
}

/* O "Boxed" do Elementor */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
    padding: 0 40px; /* Respiro para telas menores */
}

/* Estrutura de Seção Padrão */
section {
    width: 100%;
    position: relative;
    overflow: hidden;
}