/* ===================================================================
   1. ROOT VARIABLES
   ================================================================= */
:root {
    --primary: #ededed; /* Branco suave para o texto principal */
    --secondary: #999; /* Cinza médio para textos secundários */
    --light: #ededed;
    --accent:  #C9B48C; /* Roxo escuro do logo para destaque */
    --text: #ededed; /* Texto em branco suave para contraste */
    --background: #111111; /* Fundo preto */
    --card-bg: rgba(20, 20, 20, 0.5); /* Cartões com fundo escuro e leve transparência */
    --neon-green: #C9B48C; /* Mesma cor do accent para consistência */
           --accent-gold: #B89146;
            --accent-gold-rgb: 184, 145, 70;
            --card-bg-2: #141414;
            --border-color-2: rgba(var(--accent-gold-rgb), 0.2);
            --glow-color: rgba(var(--accent-gold-rgb), 0.15);

            --font-main: 'Inter', sans-serif;
            --font-headings: 'Space Grotesk', sans-serif;
            --transition: all 0.3s ease-in-out;
    --neon-purple: #C9B48C; /* Cinza escuro para sutis detalhes */
    --dark-bg: #111111; /* Fundo preto (já definido) */
    --shadow: rgba(0, 0, 0, 0.4); /* Sombra suave (já definido) */
    --neon-glow: 0 0 8px var(--accent), 0 0 16px var(--accent); /* Brilho neon com a cor do accent */

      --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
              --text-primary: #EAEAEA;
            --text-secondary: #A0A0A0;
  --first-color: hsl(0, 0%, 90%);
  --black-color: hsl(0, 0%, 0%);
  --black-color-light: hsl(0, 0%, 40%);
  --white-color: hsl(0, 0%, 95%);
  --title-color: hsl(0, 0%, 90%);
  --text-color: #a0a0a0;
  --text-color-light: hsl(0, 0%, 64%);
  --body-color: #111111/*#22162e*/;
  --container-color: hsl(0, 0%, 83%);
    /* Cores de fundo */
    --bg-dark: var(--background); /* Um cinza muito escuro (Tailwind gray-900) */
    --bg-card-dark: #C9B48C; /* Um cinza escuro para os cards (Tailwind gray-800) */
    --bg-card-hover: #C9B48C; /* Um pouco mais claro para o hover do card */

    /* Cores de texto */
    --text-white: #FFFFFF;
    --text-light-gray: #D1D5DB; /* Um cinza claro para parágrafos (Tailwind gray-300) */
    --text-medium-gray: #9CA3AF; /* Um cinza médio (Tailwind gray-400) */

    /* Cores de destaque (roxo) */
    --accent-purple-400: var(--text-white); /* Roxo para títulos e links (Tailwind purple-400) */
    --accent-purple-500: var(--text-white); /* Roxo para ícones e bordas (Tailwind purple-500) */
    --accent-purple-700:var(--text-white); /* Roxo mais escuro para bordas e hover (Tailwind purple-700) */
    --accent-purple-900:var(--text-white); /* Roxo muito escuro para fundo de hover */

    /* Sombras */
    --shadow-initial: rgba(0, 0, 0, 0.4); /* Sombra suave */
    --shadow-hover: rgba(0, 0, 0, 0.7); /* Sombra mais intensa no hover */
    --glow-shadow: rgba(167, 139, 250, 0.3); /* Sombra para o efeito de brilho */

    /* Transições */
    --transition-ease: all 0.4s ease-in-out;

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font:  'Poppins', sans-serif;
  --biggest-font-size: 2.5rem;
  --h1-font-size: 1.75rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1.125rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-bold: 700;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
   /*===== Margenes =====*/
   --mb-2: 1rem;
   --mb-4: 2rem;
   --mb-5: 2.5rem;
   --mb-6: 3rem;
   /*===== z index =====*/
   --z-back: -10;
}

/* ===================================================================
   2. GLOBAL RESETS & BASE STYLES
   ================================================================= */
[data-theme="dark"] {
    --primary: #1e293b;
    --secondary: #0a0a0a;
    --accent: #00ff9d;
    --text: #f8fafc;
    --background: #0a0a0a;
    --card-bg: #111111;
    --shadow: rgba(0, 0, 0, 0.3);
}

* {
    margin: 0;
    padding: 0;
    max-width: 100%;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    scroll-behavior: smooth;
  }
body {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Padrão */
    width: 100%;
    height: 100vh;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
    
}
#particles-js {
    touch-action: none;
}

/* ===================================================================
   3. TYPOGRAPHY
   ================================================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    color: var(--primary-text);
    line-height: 1.2;
    margin-bottom: var(--spacing-3);
}

h1 { font-size: var(--h1-font-size); }
h2 { font-size: var(--h2-font-size); }
h3 { font-size: var(--h3-font-size); }

h1, h2, h3, h4 {
    color: var(--title-color);
    font-weight: var(--font-bold);
  }
  
  ul {
    list-style: none;
  }
  
  a {
    text-decoration: none;
  }
  
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }

/* Ícones */
i {
    font-size: 1rem; /* text-2xl */
}

button {
    border: none;
    cursor: pointer;
}
p {
    margin-bottom: var(--spacing-3);
    color: var(--secondary-text);
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--primary-text);
    text-decoration: underline;
}

:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.container {
    max-width: 1120px;
    margin-inline: 1.5rem;
  }
  
  .grid {
    display: grid;
    gap: 1.5rem;
  }
  
  section {
    padding-block: 4rem 2rem;
  }
        /* --- General Section Styling --- */
        .section-2 { padding: 6rem 0; }
        .section-title-2 {
            text-align: center;
            font-family: var(--font-headings);
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }
        .section-subtitle-2 {
            text-align: center;
            color: var(--text-secondary);
            max-width: 600px;
            margin: 0 auto 4rem auto;
            line-height: 1.6;
        }
.grid-cols-1 {
    grid-template-columns: 1fr;
}

.geometric-box {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: var(--first-color);
  rotate: -30deg;
}

.geometric-box::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 3px solid var(--black-color);
  left: -5px;
  top: -5px;
  opacity: 1;
}

/*.main {
  overflow: hidden; 
}*/


#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
}
header {
    height: var(--header-height);
    position: fixed;
    height: 67px;
    width: 100%;
    top: 0;
    z-index: var(--z-fixed);
    background: var(--body-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
	display: flex;
	align-items: center;
    gap: .200rem;
    font-weight: bold;
    color: var(--title-color);
}

/* ===================================================================
   4. UI COMPONENTS (Buttons, Forms, etc.)
   ================================================================= */
.btn {
    display: inline-block;
    padding: var(--spacing-2) var(--spacing-4);
    background-color: var(--accent);
    color: var(--background);
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    border: 2px solid var(--accent);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-normal);
}

.btn:hover {
    background-color: transparent;
    color: var(--accent);
    text-decoration: none;
}
#contact{
  padding: 4rem 0;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
#contact .btn-contact {
    display: inline-block;
    padding: 1rem;
    background: var(--accent);
    color:  #111;
    font-weight: 500;
    border-radius:50px;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

#contact .btn-contact:hover {
    color: #111;
    transform: translateY(-3px);
}
.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===================================================================
   5. RESPONSIVENESS
   ================================================================= */
@media (max-width: 768px) {
    html {
        font-size: 16px; /* Reduce base font size on smaller screens */
    }

    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.25rem; }
}

/* ===================================================================
   6. NOTIFICATION STYLES
   ================================================================= */
#notification-container {
    position: fixed;
    top: var(--spacing-4);
    right: var(--spacing-4);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.notification {
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--border-radius-md);
    color: var(--primary-text);
    font-weight: var(--font-medium);
    box-shadow: var(--shadow-md);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    opacity: 1;
    transform: translateX(0);
}

.notification.success {
    background-color: #28a745; /* Green for success */
    border-left: 5px solid #218838;
}

.notification.error {
    background-color: #dc3545; /* Red for error */
    border-left: 5px solid #c82333;
}

.notification.fade-out {
    opacity: 0;
    transform: translateX(100%);
}