/* 2. Reset e Estilos Globais */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: 'Inter', sans-serif;
    padding-top: 80px; /* Espaço ajustado para o header fixo */
    line-height: 1.6;
}

/* 3. Estrutura do Header Fixo */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--header-border);
    transition: all 0.3s ease;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 40px;
}

/* Logo */
.logo-syna {
/* Fonte Profissional */
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 2.2rem;
    letter-spacing: -0.04em;
    
    /* Degradê Discreto: Branco -> Roxo -> Rosa */
    background: linear-gradient(
        to right, 
        #FFFFFF 10%, 
        #A855F7 50%, 
        #ec489a7e 90%
    );
    
    /* Efeito de preenchimento no texto */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Removendo qualquer linha de decoração */
    text-decoration: none;
    border: none;
    
    /* Animação suave e discreta */
    background-size: 200% auto;
    animation: shine-discreet 8s linear infinite;
}

@keyframes shine-discreet {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
}

/* 4. Menu Central com Linha Animada Roxa */
.nav-center {
    display: flex;
    gap: 40px;
}

.nav-center a {
    text-decoration: none;
    color: var(--text-gray);
    font-size: 15px;
    font-weight: 500;
    position: relative;
    padding-bottom: 5px;
    transition: color 0.3s ease;
}

.nav-center a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: var(--purple-vibrant);
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%);
}

.nav-center a:hover {
    color: var(--text-white);
}

.nav-center a:hover::after {
    width: 100%;
}

/* 5. Área da Direita (Botão Fale Conosco) */
.cta-area {
    display: flex;
    align-items: center;
}

html {
    scroll-behavior: smooth;
}

/* Configuração para todas as seções que terão o brilho */
section {
    position: relative; /* Necessário para o main-glow se orientar por aqui */
    overflow: hidden;    /* Corta o brilho que sobrar para fora da seção */
}

.p1{
    font-size: 15px;
    color: #ffffff63;
}