/* ======================= FUNDO TECNOLÓGICO ======================= */
/* Reset de estilos que podem estar afetando o posicionamento */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    position: relative;
}

.tech-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    opacity: 1;
    pointer-events: none;
    margin: 0;
    padding: 0;
}

/* Efeito de brilho sutil no fundo */
.tech-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle at center,
        rgba(99, 102, 241, 0.1) 0%,
        rgba(59, 130, 246, 0.05) 40%,
        rgba(30, 64, 175, 0.02) 70%,
        transparent 100%
    );
    z-index: 1;
    pointer-events: none;
}

.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    margin: 0;
    padding: 0;
    display: block;
}

.particles-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

/* Efeito de sobreposição sutil */
.tech-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(248, 250, 252, 0.1) 0%,
        rgba(241, 245, 249, 0.2) 100%
    );
    z-index: 3;
    pointer-events: none;
    /* Sem blend mode */
}

/* Melhora a performance em dispositivos móveis */
@media (max-width: 768px) {
    .tech-background {
        opacity: 1;
    }
    
    .particles-container canvas {
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
}

/* ======================= FUNDO INTERATIVO ======================= */
.interactive-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    background-attachment: fixed;
}

.interactive-bg canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    mix-blend-mode: multiply;
}

/* ======================= ELEMENTOS FLUTUANTES ======================= */
.floating-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 0;
    animation: float 15s infinite ease-in-out;
}

.shape-1 {
    width: 200px;
    height: 200px;
    top: 10%;
    left: 5%;
    background: linear-gradient(45deg, rgba(37, 99, 235, 0.1), rgba(30, 64, 175, 0.1));
    animation-delay: 0s;
    animation-duration: 20s;
}

.shape-2 {
    width: 150px;
    height: 150px;
    bottom: 15%;
    right: 10%;
    background: linear-gradient(45deg, rgba(99, 102, 241, 0.1), rgba(79, 70, 229, 0.1));
    animation-delay: 2s;
    animation-duration: 25s;
}

.shape-3 {
    width: 100px;
    height: 100px;
    top: 60%;
    left: 15%;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.1));
    animation-delay: 4s;
    animation-duration: 18s;
}

.shape-4 {
    width: 80px;
    height: 80px;
    top: 20%;
    right: 20%;
    background: linear-gradient(45deg, rgba(96, 165, 250, 0.1), rgba(59, 130, 246, 0.1));
    animation-delay: 6s;
    animation-duration: 22s;
}

.shape-5 {
    width: 250px;
    height: 250px;
    bottom: 10%;
    left: 20%;
    background: linear-gradient(45deg, rgba(147, 197, 253, 0.1), rgba(96, 165, 250, 0.1));
    animation-delay: 8s;
    animation-duration: 30s;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(20px, 20px) rotate(5deg);
    }
    50% {
        transform: translate(0, 40px) rotate(0deg);
    }
    75% {
        transform: translate(-20px, 20px) rotate(-5deg);
    }
}

/* Responsividade para elementos flutuantes */
@media (max-width: 768px) {
    .shape-1, .shape-5 {
        width: 150px;
        height: 150px;
    }
    
    .shape-2, .shape-3, .shape-4 {
        width: 80px;
        height: 80px;
    }
}