.elementor-368 .elementor-element.elementor-element-57c7fced{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-368 .elementor-element.elementor-element-57c7fced:not(.elementor-motion-effects-element-type-background), .elementor-368 .elementor-element.elementor-element-57c7fced > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:radial-gradient(at center center, #200EE6 22%, #000000 100%);}.elementor-368 .elementor-element.elementor-element-57c7fced.e-con{--align-self:center;}.elementor-368 .elementor-element.elementor-element-119449fd{width:var( --container-widget-width, 100vw );max-width:100vw;--container-widget-width:100vw;--container-widget-flex-grow:0;}.elementor-368 .elementor-element.elementor-element-119449fd.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-368 .elementor-element.elementor-element-401d6c37{--display:flex;}@media(min-width:768px){.elementor-368 .elementor-element.elementor-element-57c7fced{--content-width:100%;}}/* Start custom CSS for container, class: .elementor-element-57c7fced */* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(135deg, #0a0a2e 0%, #16213e 50%, #0f3460 100%);
    min-height: 100vh;
    overflow: hidden;
    font-family: 'Arial', sans-serif;
}

.container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Linhas de Energia das Laterais */
.energy-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #00f2ff 20%, 
        #0084ff 50%, 
        #00f2ff 80%, 
        transparent 100%);
    box-shadow: 0 0 10px #00f2ff, 0 0 20px #0084ff;
    animation: pulse-line 2s ease-in-out infinite;
}

.line-left {
    left: 0;
    top: 50%;
    width: 40%;
    transform-origin: right center;
    animation: slideFromLeft 3s ease-out infinite;
}

.line-right {
    right: 0;
    top: 50%;
    width: 40%;
    transform-origin: left center;
    animation: slideFromRight 3s ease-out infinite;
}

/* Partículas de Energia */
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #00f2ff;
    border-radius: 50%;
    box-shadow: 0 0 10px #00f2ff;
    animation: moveParticle 3s linear infinite;
}

.particle-left {
    left: 0;
    top: 50%;
}

.particle-right {
    right: 0;
    top: 50%;
}

/* Container das Letras */
.logo-container {
    position: relative;
    display: flex;
    gap: 60px;
    z-index: 10;
}

/* Conexão Central */
.connection-center {
    position: absolute;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, #00f2ff, #0084ff, #00f2ff);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px #00f2ff, 0 0 40px #0084ff;
    animation: pulse-connection 2s ease-in-out infinite;
}

/* Nós de Energia */
.energy-node {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #00f2ff;
    border-radius: 50%;
    box-shadow: 
        0 0 20px #00f2ff,
        0 0 40px #0084ff,
        0 0 60px #00f2ff;
    animation: pulse-node 1.5s ease-in-out infinite;
}

.node-left {
    left: calc(50% - 150px);
    top: 50%;
    transform: translate(-50%, -50%);
}

.node-right {
    right: calc(50% - 150px);
    top: 50%;
    transform: translate(50%, -50%);
}

/* Letras K e H */
.letter {
    font-size: 120px;
    font-weight: bold;
    color: #fff;
    text-shadow: 
        0 0 10px #00f2ff,
        0 0 20px #00f2ff,
        0 0 30px #0084ff,
        0 0 40px #0084ff,
        0 0 70px #0084ff,
        0 0 80px #0084ff;
    animation: glow-letter 2s ease-in-out infinite;
    position: relative;
}

/* Círculos de Energia ao redor das letras */
.energy-circle {
    position: absolute;
    width: 160px;
    height: 160px;
    border: 2px solid #00f2ff;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: expand-circle 3s ease-out infinite;
}

/* Grid Tecnológico de Fundo */
.tech-grid {
    position: fixed;
    top: -50px;
    left: -50px;
    width: calc(100% + 100px);
    height: calc(100% + 100px);
    background-image: 
        linear-gradient(rgba(0, 242, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 242, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: moveGrid 20s linear infinite;
    z-index: 1;
    pointer-events: none;
}

/* Texto de Manutenção */
.maintenance-text {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #fff;
    z-index: 10;
}

.maintenance-text h2 {
    font-size: 28px;
    margin-bottom: 10px;
    text-shadow: 0 0 10px #00f2ff;
}

.maintenance-text p {
    font-size: 16px;
    color: #a0a00;
    margin-bottom: 5px;
}

/* ========== ANIMAÇÕES ========== */

@keyframes slideFromLeft {
    0%, 100% {
        transform: translateX(-100%) scaleX(0);
        opacity: 0;
    }
    50% {
        transform: translateX(0) scaleX(1);
        opacity: 1;
    }
}

@keyframes slideFromRight {
    0%, 100% {
        transform: translateX(100%) scaleX(0);
        opacity: 0;
    }
    50% {
        transform: translateX(0) scaleX(1);
        opacity: 1;
    }
}

@keyframes moveParticle {
    0% {
        transform: translateX(0) scale(0);
        opacity: 0;
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        transform: translateX(600px) scale(0);
        opacity: 0;
    }
}

@keyframes glow-letter {
    0%, 100% {
        text-shadow: 
            0 0 10px #00f2ff,
            0 0 20px #00f2ff,
            0 0 30px #0084ff,
            0 0 40px #0084ff;
    }
    50% {
        text-shadow: 
            0 0 20px #00f2ff,
            0 0 30px #00f2ff,
            0 0 40px #0084ff,
            0 0 50px #0084ff,
            0 0 90px #0084ff,
            0 0 100px #0084ff;
    }
}

@keyframes pulse-line {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

@keyframes pulse-connection {
    0%, 100% {
        box-shadow: 0 0 20px #00f2ff, 0 0 40px #0084ff;
    }
    50% {
        box-shadow: 0 0 30px #00f2ff, 0 0 60px #0084ff, 0 0 80px #00f2ff;
    }
}

@keyframes pulse-node {
    0%, 100% {
        transform: scale(1);
        box-shadow: 
            0 0 20px #00f2ff,
            0 0 40px #0084ff;
    }
    50% {
        transform: scale(1.5);
        box-shadow: 
            0 0 30px #00f2ff,
            0 0 60px #0084ff,
            0 0 80px #00f2ff;
    }
}

@keyframes expand-circle {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

@keyframes moveGrid {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, 50px);
    }
}

/* ========== RESPONSIVO ========== */

@media (max-width: 768px) {
    .letter {
        font-size: 80px;
    }
    .logo-container {
        gap: 40px;
    }
    .maintenance-text h2 {
        font-size: 22px;
    }
}/* End custom CSS */