/* Reset e configurações base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #000000;
    color: white;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Container global */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 3rem;
}

/* Aurora Background - Global */
.aurora-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse 800px 400px at 20% 50%, rgba(0,150,255,0.15) 0%, transparent 50%),
        radial-gradient(ellipse 600px 300px at 80% 20%, rgba(0,200,255,0.1) 0%, transparent 50%),
        radial-gradient(ellipse 400px 200px at 50% 80%, rgba(0,170,255,0.12) 0%, transparent 50%);
    z-index: -1;
    pointer-events: none;
    opacity: 0.8;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 3rem;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(20px);
    z-index: 1000;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Linha azul degradê na parte inferior do navbar */
.navbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0,170,255,0.1) 15%, 
        rgba(0,170,255,0.25) 50%, 
        rgba(0,170,255,0.1) 85%, 
        transparent 100%
    );
    pointer-events: none;
}

.logo {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: color 0.3s ease;
}

.logo:hover {
    color: #00aaff;
}

.nav-links {
    display: flex;
    gap: 3rem;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: 400;
    font-size: 1rem;
    transition: all 0.3s ease;
    position: relative;
}

.nav-links a:hover {
    color: #00aaff;
}

/* ===== HERO SECTION - CORREÇÃO DE FUNDO ===== */

/* Alterar apenas o fundo principal - manter todos os efeitos */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    
    /* ✅ NOVO FUNDO - igual ao How It Works */
    background: rgba(0,0,0,0.8);
    
    /* ❌ REMOVER - fundo antigo */
    /* background: linear-gradient(135deg, #000000 0%, #001122 100%); */
}

/* ✅ MANTER - todos os efeitos visuais intactos */
.hero-content {
    max-width: 900px;
    z-index: 2;
}

.hero-title {
    font-size: 4rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: white;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.3rem;
    color: #cccccc;
    margin-bottom: 3rem;
    line-height: 1.6;
}

.hero-button {
    background: linear-gradient(45deg, #00aaff, #0066cc);
    color: white;
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,170,255,0.3);
}

/* ✅ MANTER - linhas animadas de fundo */
.hero-background-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.animated-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(0,170,255,0.4), transparent);
    border-radius: 1px;
}

/* ✅ MANTER - todas as linhas individuais */
.line1 {
    top: 15%;
    left: -10%;
    width: 30%;
    height: 1px;
    transform: rotate(25deg);
}

.line2 {
    top: 25%;
    right: -5%;
    width: 25%;
    height: 1px;
    transform: rotate(-15deg);
}

.line3 {
    top: 45%;
    left: -8%;
    width: 40%;
    height: 1px;
    transform: rotate(35deg);
}

.line4 {
    top: 60%;
    right: -12%;
    width: 35%;
    height: 1px;
    transform: rotate(-25deg);
}

.line5 {
    top: 75%;
    left: -15%;
    width: 30%;
    height: 1px;
    transform: rotate(20deg);
}

.line6 {
    top: 35%;
    left: 70%;
    width: 40%;
    height: 1px;
    transform: rotate(-40deg);
}

.line7 {
    top: 55%;
    left: 80%;
    width: 25%;
    height: 1px;
    transform: rotate(30deg);
}

.line8 {
    top: 80%;
    right: 10%;
    width: 20%;
    height: 1px;
    transform: rotate(-20deg);
}

/* ✅ MANTER - pontos da rede */
.hero-network-points {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.network-point {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #00aaff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,170,255,0.8);
}

.point1 {
    top: 20%;
    left: 15%;
}

.point2 {
    top: 30%;
    right: 20%;
}

.point3 {
    top: 65%;
    left: 10%;
}

.point4 {
    top: 70%;
    right: 15%;
}

.point5 {
    top: 40%;
    left: 80%;
}

.point6 {
    top: 85%;
    left: 70%;
}

/* ✅ MANTER - z-index do conteúdo */
.hero-content {
    position: relative;
    z-index: 3;
}

/* ✅ MANTER - responsividade */
@media (max-width: 768px) {
    .animated-line {
        height: 0.5px;
    }
    
    .line1, .line3, .line5 {
        width: 40%;
    }
    
    .line2, .line4, .line6, .line7, .line8 {
        width: 35%;
    }
    
    .network-point {
        width: 3px;
        height: 3px;
    }
}

@media (max-width: 480px) {
    .animated-line {
        opacity: 0.7;
    }
    
    .network-point {
        width: 2px;
        height: 2px;
    }
}

/* How It Works Section - Image 10 */
.how-it-works {
    padding: 6rem 0;
    background: rgba(0,0,0,0.8);
}

.section-title {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 1rem;
    color: white;
    font-weight: 600;
}

.section-subtitle {
    text-align: center;
    color: #cccccc;
    font-size: 1.2rem;
    margin-bottom: 4rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.steps-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    position: relative;
    margin-bottom: 2rem;
}

.step-card {
    background: rgba(15, 25, 35, 0.8);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 170, 255, 0.2);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.step-card:hover {
    transform: translateY(-5px);
    border-color: #00aaff;
    box-shadow: 0 15px 30px rgba(0,170,255,0.2);
}

.step-visual {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.step-icon {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Step visuals específicos - Novos ícones */

/* Step 1 - Dataset/Pasta */
.step-1 {
    background: linear-gradient(45deg, #00aaff, #0088cc);
    border-radius: 8px;
    position: relative;
}

.step-1::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35px;
    height: 25px;
    background: rgba(255,255,255,0.9);
    border-radius: 3px 3px 0 0;
    border: 2px solid rgba(255,255,255,0.9);
}

.step-1::after {
    content: '';
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 6px;
    background: rgba(255,255,255,0.9);
    border-radius: 2px 2px 0 0;
}

/* Step 2 - Dois blocos conectados */
.step-2 {
    background: transparent;
    border: 2px solid #00aaff;
    border-radius: 8px;
    position: relative;
}

.step-2::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    background: #00aaff;
    border-radius: 3px;
}

.step-2::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 30%;
    transform: translate(50%, -50%);
    width: 15px;
    height: 15px;
    background: #00aaff;
    border-radius: 3px;
    box-shadow: -18px 0 0 -7px #00aaff;
}

/* Step 3 - Engrenagem + Cérebro */
.step-3 {
    background: linear-gradient(45deg, #00aaff, #0088cc);
    border-radius: 50%;
    position: relative;
}

.step-3::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255,255,255,0.9);
    border-radius: 50%;
    background: transparent;
}

.step-3::after {
    content: '';
    position: absolute;
    top: 30%;
    right: 25%;
    width: 8px;
    height: 8px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    box-shadow: 
        -15px 5px 0 -2px rgba(255,255,255,0.9),
        -8px 15px 0 -2px rgba(255,255,255,0.9),
        5px 12px 0 -2px rgba(255,255,255,0.9);
}

/* Step 4 - Ícone global/rede */
.step-4 {
    width: 60px;
    height: 60px;
    background: transparent;
    border: 3px solid #00aaff;
    border-radius: 50%;
    position: relative;
}

.step-4::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    border: 2px solid #00aaff;
    border-radius: 50%;
    background: transparent;
}

.step-4::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35px;
    height: 2px;
    background: #00aaff;
    border-radius: 1px;
    box-shadow: 
        0 -8px 0 #00aaff,
        0 8px 0 #00aaff;
}

.step-title {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.step-description {
    color: #cccccc;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Connection lines between steps */
.connection-lines {
    position: absolute;
    top: 50%;
    left: 12.5%;
    width: 75%;
    height: 2px;
    background: linear-gradient(90deg, #00aaff 0%, #00aaff 25%, transparent 25%, transparent 50%, #00aaff 50%, #00aaff 75%, transparent 75%);
    z-index: -1;
    transform: translateY(-50%);
}

/* Mobile Slider - How It Works */
@media (max-width: 768px) {
   .section-title {
       font-size: 2.2rem;
   }
   
   .section-subtitle {
       font-size: 1rem;
       margin-bottom: 3rem;
   }
   
   .steps-container {
       display: flex;
       overflow-x: hidden;
       gap: 0;
       scroll-behavior: smooth;
       position: relative;
       margin-bottom: 2rem;
   }
   
   .step-card {
       min-width: 100%;
       max-width: 100%;
       flex-shrink: 0;
       margin: 0;
       transform: translateX(0);
       transition: transform 0.3s ease;
       padding: 1.2rem;
       box-sizing: border-box;
   }
   
   .step-card:hover {
       transform: translateY(0);
   }
   
   .step-visual {
       height: 40px;
       margin-bottom: 0.8rem;
   }
   
   .step-icon {
       width: 35px;
       height: 35px;
   }
   
   .step-title {
       font-size: 0.95rem;
       margin-bottom: 0.7rem;
       line-height: 1.3;
   }
   
   .step-description {
       font-size: 0.8rem;
       line-height: 1.4;
   }
   
   .connection-lines {
       display: none;
   }
   
   .slider-controls {
       display: flex;
       justify-content: center;
       align-items: center;
       margin-top: 1.5rem;
   }
   
   .slider-dots {
       display: flex;
       gap: 0.7rem;
   }
   
   .slider-dot {
       width: 10px;
       height: 10px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.3);
       cursor: pointer;
       transition: all 0.3s ease;
   }
   
   .slider-dot.active {
       background: #00aaff;
       transform: scale(1.3);
   }
}

@media (min-width: 769px) {
   .slider-controls {
       display: none;
   }
}

/* Ícones ainda menores - dentro da @media (max-width: 768px) */
.step-icon {
   width: 25px;
   height: 25px;
}

/* Step 1 - Pasta menor */
.step-1::before {
   width: 16px;
   height: 12px;
}

.step-1::after {
   width: 6px;
   height: 3px;
}

/* Step 2 - Blocos conectados menores */
.step-2::before,
.step-2::after {
   width: 8px;
   height: 8px;
}

.step-2::after {
   box-shadow: -12px 0 0 -5px #00aaff;
}

/* Step 3 - Engrenagem menor */
.step-3 {
   border-width: 2px; /* Border mais fino */
}

.step-3::before {
   width: 14px;
   height: 14px;
   border-width: 1px; /* Border interno mais fino */
}

.step-3::after {
   width: 4px;
   height: 4px;
   box-shadow: 
       -8px 3px 0 -1px rgba(255,255,255,0.9),
       -4px 8px 0 -1px rgba(255,255,255,0.9),
       3px 6px 0 -1px rgba(255,255,255,0.9);
}

/* Step 4 - Rede global menor */
.step-4 {
   border-width: 2px; /* Border mais fino */
}

.step-4::before {
   width: 12px;
   height: 12px;
   border-width: 1px;
}

.step-4::after {
   width: 18px;
   height: 1px;
   box-shadow: 
       0 -5px 0 #00aaff,
       0 5px 0 #00aaff;
}
/* Diminuir ícones mobile */
@media (max-width: 768px) {
   .step-visual {
       height: 38px;
   }
   
   .step-icon {
       width: 30px !important;
       height: 30px !important;
   }
}

/* ===== ENTERPRISE GRADE - CORREÇÃO Z-INDEX DAS LINHAS ===== */

.enterprise-grade {
    padding: 4rem 0;
    position: relative;
    background: rgba(0,0,0,0.8);
}

.hexagon-diagram {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 550px;
    margin: 0 auto;
}

/* ✅ ELEMENTO CENTRAL - centralizado e destacado */
.center-element {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;

    background: rgba(0,0,0,0.9);
    padding: 1.5rem;
    border-radius: 16px;
    border: 2px solid #00aaff; /* azul forte */
    text-align: center;
    min-width: 220px;
    z-index: 10;
    box-shadow: 0 0 20px rgba(0,170,255,0.6); /* brilho igual dos outros */
}

/* ❌ Remover a bolinha azul do card central */
.center-icon {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.center-element h3 {
    color: white;
    margin-bottom: 0.8rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.center-element p {
    color: #cccccc;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* ✅ ELEMENTOS EXTERNOS - borda e brilho igual ao central */
.hex-element {
    position: absolute;
    background: rgba(0,0,0,0.9); /* igual central */
    padding: 1.4rem;
    border-radius: 12px;
    border: 2px solid #00aaff; /* borda azul forte */
    width: 180px;
    height: 140px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 5;
    box-shadow: 0 0 20px rgba(0,170,255,0.6); /* brilho igual central */
}

.hex-element:hover {
    border-color: #00aaff;
    box-shadow: 0 0 25px rgba(0,170,255,0.9);
    z-index: 15;
}

/* Posições dos elementos */
.hex-element.top-left { top: 2%; left: 8%; }
.hex-element.top-right { top: 2%; right: 8%; }
.hex-element.right { top: 38%; right: 2%; }
.hex-element.bottom-right { bottom: 2%; right: 8%; }
.hex-element.bottom-left { bottom: 2%; left: 8%; }
.hex-element.left { top: 38%; left: 2%; }

/* ✅ Remoção de ícones extras */
.hex-icon,
.hex-element.left .hex-icon,
.hex-element.left > div:first-child {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.hex-element h4 {
    color: white;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
}

.hex-element p {
    color: #cccccc;
    font-size: 0.82rem;
    line-height: 1.25;
}

/* ✅ LINHAS SVG - agora mais fortes */
.connection-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.connection-line {
    stroke: #00aaff;
    stroke-width: 2.2; /* mais grossa */
    opacity: 0.9; /* mais forte */
    filter: drop-shadow(0 0 6px rgba(0,170,255,0.8)); /* brilho */
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .hexagon-diagram {
        height: 450px;
    }
    
    .hex-element {
        width: 160px;
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    .hex-element {
        position: static;
        margin: 1rem auto;
        max-width: 300px;
    }

    .hexagon-diagram {
        height: auto;
        padding: 2rem 0;
    }
}

/* Mobile Slider - Enterprise Grade */
@media (max-width: 768px) {
   .enterprise-grade .section-title {
       font-size: 2.2rem;
   }
   
   .enterprise-grade .section-subtitle {
       font-size: 1rem;
       margin-bottom: 3rem;
   }
   
   .hexagon-diagram {
       display: flex;
       overflow-x: hidden;
       gap: 0;
       scroll-behavior: smooth;
       position: relative;
       margin-bottom: 2rem;
       height: auto;
       padding: 0;
       outline: none;
       -webkit-tap-highlight-color: transparent;
   }
   
   .hex-element {
       min-width: 100%;
       max-width: 100%;
       flex-shrink: 0;
       margin: 0;
       transform: translateX(0);
       transition: transform 0.3s ease;
       padding: 1.2rem;
       box-sizing: border-box;
       position: static;
       width: auto;
       height: auto;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       border-radius: 16px;
       box-shadow: 0 0 15px rgba(0,170,255,0.4);
       pointer-events: none;
       outline: none !important;
       user-select: none;
       -webkit-tap-highlight-color: transparent;
       -webkit-touch-callout: none;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
   }
   
   .hex-element:hover {
       transform: translateY(0);
   }
   
   .hex-element:focus,
   .hex-element:active,
   .hex-element:hover:focus,
   .hex-element:hover:active {
       outline: none !important;
       outline-width: 0 !important;
       outline-color: transparent !important;
       outline-style: none !important;
       -webkit-appearance: none !important;
       border: 2px solid #00aaff !important;
       box-shadow: 0 0 15px rgba(0,170,255,0.4) !important;
   }
   
   .hex-element h4 {
       font-size: 0.95rem;
       margin-bottom: 0.7rem;
       line-height: 1.3;
   }
   
   .hex-element p {
       font-size: 0.8rem;
       line-height: 1.4;
   }
   
   /* Hide center element and SVG on mobile */
   .center-element {
       display: none;
   }
   
   .connection-svg {
       display: none;
   }
   
   /* Enterprise slider controls */
   .enterprise-slider-controls {
       display: flex;
       justify-content: center;
       align-items: center;
       margin-top: 1.5rem;
   }
   
   .enterprise-slider-dots {
       display: flex;
       gap: 0.7rem;
   }
   
   .enterprise-slider-dot {
       width: 10px;
       height: 10px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.3);
       cursor: pointer;
       transition: all 0.3s ease;
   }
   
   .enterprise-slider-dot.active {
       background: #00aaff;
       transform: scale(1.3);
   }
}

@media (min-width: 769px) {
   .enterprise-slider-controls {
       display: none;
   }
}


/* ===== PRODUCTS SECTION - ELEMENTO CONECTOR TECNOLÓGICO ===== */

/* SEÇÃO 1 - Our Products Hero - com elemento conector */
.our-products-hero {
    padding: 8rem 0 6rem 0;
    background: rgba(0,0,0,0.8);
}

.products-showcase {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 4rem;
    margin-top: 4rem;
    align-items: center;
    position: relative;
}

/* ✅ ELEMENTO CONECTOR TECNOLÓGICO */
.tech-connector {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 80px;
    z-index: 5;
}

.connector-main {
    position: relative;
    width: 80px;
    height: 60px;
    background: rgba(0,170,255,0.05);
    border: 2px solid #00aaff;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 0 20px rgba(0,170,255,0.3),
        inset 0 0 15px rgba(0,170,255,0.1);
    animation: connectorPulse 3s ease-in-out infinite;
}

.connector-core {
    width: 12px;
    height: 12px;
    background: #00aaff;
    border-radius: 50%;
    box-shadow: 
        0 0 15px rgba(0,170,255,0.8),
        0 0 25px rgba(0,170,255,0.5);
    animation: coreGlow 2s ease-in-out infinite alternate;
}

.connector-main::before,
.connector-main::after {
    content: '';
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00aaff, transparent);
    top: 50%;
    transform: translateY(-50%);
    animation: dataFlow 2.5s linear infinite;
}

.connector-main::before {
    left: -50px;
    width: 50px;
    background: linear-gradient(90deg, #00aaff, transparent);
}

.connector-main::after {
    right: -50px;
    width: 50px;
    background: linear-gradient(90deg, transparent, #00aaff);
}

.data-points {
    position: absolute;
    width: 200px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.data-point {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #00aaff;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0,170,255,0.8);
    top: -2px;
}

.point-left {
    left: 20px;
    animation: flowLeft 3s linear infinite;
}

.point-right {
    right: 20px;
    animation: flowRight 3s linear infinite;
}

.status-indicators {
    position: absolute;
    top: -8px;
    right: -8px;
    display: flex;
    gap: 3px;
}

.status-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #00aaff;
    box-shadow: 0 0 6px rgba(0,170,255,0.6);
    animation: statusBlink 1.5s ease-in-out infinite;
}

.status-dot:nth-child(2) { animation-delay: 0.3s; }
.status-dot:nth-child(3) { animation-delay: 0.6s; }

/* ✅ PRODUTOS */
.product-item {
    text-align: center;
}

.product-visual {
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3rem;
}

/* Advanced Cube */
.advanced-cube {
    width: 160px;
    height: 160px;
    background: linear-gradient(135deg, #2a4a6b 0%, #1a2f4a 50%, #0f1f35 100%);
    position: relative;
    border-radius: 8px;
    border: 2px solid #00aaff;
    perspective: 1000px;
}

.cube-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.grid-line {
    position: absolute;
    background: rgba(0,170,255,0.4);
}

.grid-line.horizontal {
    width: 100%;
    height: 1px;
}

.grid-line.vertical {
    width: 1px;
    height: 100%;
}

.h1 { top: 25%; }
.h2 { top: 50%; }
.h3 { top: 75%; }
.v1 { left: 25%; }
.v2 { left: 50%; }
.v3 { left: 75%; }

.cube-nodes {
    position: absolute;
    width: 100%;
    height: 100%;
}

.node {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #00aaff;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0,170,255,0.6);
}

.n1 { top: 20%; left: 30%; }
.n2 { top: 35%; right: 25%; }
.n3 { top: 60%; left: 25%; }
.n4 { bottom: 25%; right: 30%; }
.n5 { top: 45%; left: 45%; }
.n6 { bottom: 35%; left: 55%; }

/* Particle Globe - CORRIGIDO */
.particle-globe {
    width: 160px;
    height: 160px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.globe-core {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle at 25% 25%, #3a6b9c, #1a3d5c, #0a1f2f);
    border-radius: 50%;
    border: 2px solid #00aaff;
    position: relative;
    z-index: 2;
}

/* ✅ REMOVER QUADRADO NO HOVER */
.globe-core:focus,
.globe-core:focus-visible,
.particle-globe:focus,
.particle-globe:focus-visible,
.product-visual:focus,
.product-item:focus {
    outline: none !important;
    box-shadow: none !important;
}

.globe-particles {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255,255,255,0.9);
}

.orbital-ring {
    position: absolute;
    border: 1px solid rgba(0,170,255,0.3);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ring1 {
    width: 140px;
    height: 140px;
}

.ring2 {
    width: 180px;
    height: 180px;
}

.product-item h3 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: white;
    font-weight: 600;
}

.product-item p {
    color: #cccccc;
    margin-bottom: 2rem;
    line-height: 1.6;
    font-size: 1rem;
}

.feature-list {
    list-style: none;
    text-align: left;
    max-width: 400px;
    margin: 0 auto;
}

.feature-list li {
    color: #cccccc;
    padding: 0.8rem 0;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

.feature-icon {
    margin-right: 1rem;
    font-size: 1.2rem;
    width: 24px;
}

@media (max-width: 1024px) {
    .products-showcase {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .tech-connector {
        transform: rotate(90deg);
        margin: 2rem 0;
    }
}

@media (max-width: 768px) {
    .tech-connector {
        width: 80px;
        height: 60px;
    }
    
    .connector-main {
        width: 60px;
        height: 40px;
    }
}


/* ===== SEÇÃO 2 - INTERNAL AI TEAM - LAYOUT CLEAN SEM NÚMEROS ===== */

.internal-ai-team {
    padding: 6rem 0;
    background: rgba(0,0,0,0.8);
}

/* ✅ WORKFLOW HEADER */
.workflow-header {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.workflow-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: white;
    line-height: 1.1;
}

.workflow-subtitle {
    font-size: 1.2rem;
    color: #cccccc;
    line-height: 1.6;
    margin: 0;
}

/* ✅ WORKFLOW STEPS - LAYOUT HORIZONTAL CLEAN */
.workflow-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0 auto 3rem;
    max-width: 1000px;
    position: relative;
}

.workflow-step {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 0 1rem;
}

/* ✅ ÍCONES DOS STEPS - SEM NÚMEROS */
.step-icon {
    width: 80px;
    height: 80px;
    background: rgba(0,170,255,0.2);
    border: 2px solid rgba(0,170,255,0.4);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
    position: relative;
}

.step-icon svg {
    width: 50px;
    height: 50px;
    fill: #00aaff;
    transition: all 0.3s ease;
}

.workflow-step:hover .step-icon {
    background: rgba(0,170,255,0.4);
    border-color: #00aaff;
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(0,170,255,0.4);
}

.workflow-step:hover .step-icon svg {
    fill: #00ccff;
}

/* ✅ TEXTOS DOS STEPS */
.step-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    color: white;
    line-height: 1.2;
    transition: all 0.3s ease;
}

.step-description {
    font-size: 1rem;
    color: #cccccc;
    line-height: 1.3;
    margin: 0;
    transition: all 0.3s ease;
}

.workflow-step:hover .step-title {
    color: #00aaff;
}

.workflow-step:hover .step-description {
    color: #ffffff;
}

/* ✅ REMOVER NÚMEROS COMPLETAMENTE */
.step-number {
    display: none;
}

/* ✅ REMOVER CONECTORES COMPLETAMENTE */
.workflow-connector {
    display: none;
}

/* ✅ BENEFITS ROW REMOVIDO */
.benefits-row {
    display: none;
}

/* ✅ RESPONSIVIDADE */
@media (max-width: 1024px) {
    .workflow-title {
        font-size: 2.5rem;
    }
    
    .workflow-subtitle {
        font-size: 1.1rem;
    }
    
    .workflow-steps {
        max-width: 800px;
        gap: 1rem;
    }
    
    .step-icon {
        width: 70px;
        height: 70px;
    }
    
    .step-icon svg {
        width: 40px;
        height: 40px;
    }
    
    .step-title {
        font-size: 1.2rem;
    }
    
    .step-description {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .workflow-title {
        font-size: 2.2rem;
    }
    
    .workflow-subtitle {
        font-size: 1rem;
    }
    
    .workflow-steps {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
        max-width: 400px;
        margin: 0 auto 2rem;
    }
    
    .workflow-step {
        width: 100%;
        max-width: 300px;
    }
    
    .step-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 1rem;
    }
    
    .step-icon svg {
        width: 35px;
        height: 35px;
    }
    
    .step-title {
        font-size: 1.1rem;
    }
    
    .step-description {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .internal-ai-team {
        padding: 4rem 0;
    }
    
    .workflow-header {
        margin-bottom: 3rem;
    }
    
    .workflow-title {
        font-size: 1.8rem;
    }
    
    .workflow-subtitle {
        font-size: 0.95rem;
    }
    
    .workflow-steps {
        margin-bottom: 2rem;
        gap: 2.5rem;
    }
}

/* ===== SEÇÃO 3 - DATA AI POWER - COMPLETA COM GLOBO 3D ===== */

.data-ai-power {
    padding: 6rem 0;
    background: rgba(0,0,0,0.8);
    text-align: center;
}

/* ✅ GLOBO 3D CONTAINER - AUMENTADO E SEM CORTES */
.brain-visual-container {
    margin: 1rem 0 4rem 0; /* AUMENTADO: era 4rem 0 2rem 0 */
    display: flex;
    justify-content: center;
    position: relative;
    overflow: visible;
    padding: 2rem; /* ADICIONADO: espaço extra */
}

.holographic-brain {
    width: 500px; /* AUMENTADO: era 400px */
    height: 300px; /* AUMENTADO: era 200px */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* ✅ GLOBO 3D CANVAS */
.globe-canvas {
    width: 100% !important;
    height: 100% !important;
    z-index: 10;
    position: relative;
    filter: drop-shadow(0 0 20px rgba(0,170,255,0.8));
    animation: brainHoloPulse 6s ease-in-out infinite;
}

/* ✅ PARTÍCULAS REMOVIDAS */
.smart-particles {
    display: none;
}

.particle {
    display: none;
}

/* ✅ BASE HOLOGRÁFICA */
.holographic-base {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 8px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0,170,255,0.3) 20%, 
        rgba(0,204,255,0.6) 50%, 
        rgba(0,170,255,0.3) 80%, 
        transparent 100%
    );
    border-radius: 50%;
    filter: blur(3px);
    animation: holoBasePulse 4s ease-in-out infinite;
    z-index: 1;
}

/* ✅ SCANLINES HOLOGRÁFICAS */
.holo-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        0deg,
        transparent 0%,
        rgba(0,170,255,0.03) 2%,
        transparent 4%,
        transparent 6%,
        rgba(0,170,255,0.03) 8%,
        transparent 10%
    );
    background-size: 100% 20px;
    animation: scanlineMove 3s linear infinite;
    z-index: 15;
    pointer-events: none;
}

/* ✅ CARDS MAIS AFASTADOS */
.data-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 3rem; /* AUMENTADO: era 1rem */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.data-benefit-card {
    background: rgba(15, 25, 35, 0.6);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 170, 255, 0.2);
    text-align: center;
    transition: all 0.3s ease;
    min-height: 120px;
}

.data-benefit-card:hover {
    transform: translateY(-5px);
    border-color: #00aaff;
    box-shadow: 0 15px 30px rgba(0,170,255,0.2);
    background: rgba(15, 25, 35, 0.8);
}

.data-benefit-card h3 {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 0;
}

.data-benefit-card p {
    color: #cccccc;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

/* ✅ ANIMAÇÕES HOLOGRÁFICAS */
@keyframes brainHoloPulse {
    0%, 100% {
        filter: drop-shadow(0 0 15px rgba(0,170,255,0.6));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 25px rgba(0,170,255,1));
        transform: scale(1.02);
    }
}

@keyframes holoBasePulse {
    0%, 100% {
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(0,170,255,0.3) 20%, 
            rgba(0,204,255,0.6) 50%, 
            rgba(0,170,255,0.3) 80%, 
            transparent 100%
        );
        transform: translateX(-50%) scale(1);
    }
    50% {
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(0,170,255,0.5) 20%, 
            rgba(0,204,255,0.9) 50%, 
            rgba(0,170,255,0.5) 80%, 
            transparent 100%
        );
        transform: translateX(-50%) scale(1.1);
    }
}

@keyframes scanlineMove {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(300px); }
}

/* ✅ RESPONSIVIDADE PARA MOBILE */
@media (max-width: 768px) {
    .brain-visual-container {
        margin: 4rem 0 3rem 0;
        overflow: visible;
        padding: 1rem;
    }
    
    .holographic-brain {
        width: 400px;
        height: 250px;
        overflow: visible;
    }
    
    .data-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin-top: 2rem;
    }
    
    .data-benefit-card {
        padding: 1rem;
        min-height: 100px;
    }
}

@media (max-width: 480px) {
    .data-benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .holographic-brain {
        width: 300px;
        height: 200px;
        overflow: visible;
    }
    
    .brain-visual-container {
        padding: 0.5rem;
    }
}

/* ✅ EFEITOS EXTRAS PARA PERFORMANCE */
.brain-visual-container,
.holographic-base,
.holo-scanlines {
    will-change: transform, opacity;
}

.globe-canvas {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ========================================
   NICHE DATASETS PAGE STYLES  
======================================== */

/* SEÇÃO 1 - Ready to Use Datasets */
.ready-datasets {
    padding: 120px 0 80px;
    position: relative;
    background: rgba(0,0,0,0.8);
}

.datasets-main-title {
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    color: #ffffff;
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
}

.datasets-subtitle {
    font-size: 1.2rem;
    text-align: center;
    color: rgba(255,255,255,0.8);
    max-width: 800px;
    margin: 0 auto 4rem;
    line-height: 1.6;
}

/* Dataset Categories Grid */
.datasets-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
    margin-bottom: 4rem;
}

.dataset-category {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(0,170,255,0.2);
    border-radius: 15px;
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.dataset-category:hover {
    transform: translateY(-10px);
    border-color: #00aaff;
    box-shadow: 0 20px 40px rgba(0,170,255,0.2);
    background: rgba(255,255,255,0.05);
}

.dataset-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,170,255,0.1), transparent);
    transition: all 0.6s ease;
}

.dataset-category:hover::before {
    left: 100%;
}

/* Category Icons - Simplificado para SVG */
.category-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-icon svg {
    width: 50px;
    height: 50px;
    transition: transform 0.3s ease;
}

.dataset-category:hover .category-icon svg {
    transform: scale(1.1);
}

/* Category Titles and Features */
.dataset-category h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.category-features {
    list-style: none;
    padding: 0;
    text-align: left;
}

.category-features li {
    color: rgba(255,255,255,0.8);
    margin-bottom: 0.8rem;
    position: relative;
    padding-left: 15px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.category-features li::before {
    content: '•';
    color: #00aaff;
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Footer Text */
.datasets-footer {
    text-align: center;
    margin-top: 3rem;
}

.datasets-footer p {
    font-size: 1.4rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 1px;
}
/* Desktop: força 4 colunas na seção Ready to Use Datasets */
@media (min-width: 1200px) {
  .datasets-categories {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* SEÇÃO 2 - Custom Datasets */
.custom-datasets-section {
    padding: 100px 0;
    background: rgba(0,0,0,0.8);
    position: relative;
}

.custom-datasets-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* HOLOGRAM Container */
.tech-brain-container {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hologram-container {
    position: relative;
    width: 400px;
    height: 400px;
    perspective: 1000px;
}

.hologram-base {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 8px;
    background: linear-gradient(90deg, #00f5ff, #0080ff);
    border-radius: 50%;
    box-shadow: 
        0 0 20px #00f5ff,
        0 0 40px #00f5ff,
        0 0 60px #00f5ff;
    animation: basePulse 3s ease-in-out infinite;
}

.data-sphere {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%) rotateX(20deg);
    transform-style: preserve-3d;
    animation: sphereRotate 8s linear infinite;
}

.sphere-ring {
    position: absolute;
    border: 2px solid;
    border-radius: 50%;
    opacity: 0.8;
}

.ring-1 {
    width: 200px;
    height: 200px;
    border-color: #00f5ff;
    animation: ringPulse1 4s ease-in-out infinite;
    box-shadow: inset 0 0 20px #00f5ff, 0 0 20px #00f5ff;
}

.ring-2 {
    width: 160px;
    height: 160px;
    top: 20px;
    left: 20px;
    border-color: #0080ff;
    animation: ringPulse2 3s ease-in-out infinite;
    transform: rotateY(60deg);
    box-shadow: inset 0 0 15px #0080ff, 0 0 15px #0080ff;
}

.ring-3 {
    width: 120px;
    height: 120px;
    top: 40px;
    left: 40px;
    border-color: #40e0d0;
    animation: ringPulse3 2s ease-in-out infinite;
    transform: rotateX(90deg);
    box-shadow: inset 0 0 10px #40e0d0, 0 0 10px #40e0d0;
}

.ai-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #ffffff, #00f5ff);
    border-radius: 50%;
    box-shadow: 
        0 0 20px #ffffff,
        0 0 40px #00f5ff,
        0 0 60px #0080ff;
    animation: corePulse 2s ease-in-out infinite;
}

/* Animações do Holograma */
@keyframes basePulse {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.8; }
    50% { transform: translateX(-50%) scale(1.1); opacity: 1; }
}

@keyframes sphereRotate {
    0% { transform: translate(-50%, -50%) rotateX(20deg) rotateY(0deg); }
    100% { transform: translate(-50%, -50%) rotateX(20deg) rotateY(360deg); }
}

@keyframes ringPulse1 {
    0%, 100% { transform: scale(1) rotateZ(0deg); opacity: 0.8; }
    50% { transform: scale(1.05) rotateZ(180deg); opacity: 1; }
}

@keyframes ringPulse2 {
    0%, 100% { transform: rotateY(60deg) scale(1); opacity: 0.7; }
    50% { transform: rotateY(60deg) scale(1.1); opacity: 1; }
}

@keyframes ringPulse3 {
    0%, 100% { transform: rotateX(90deg) scale(1); opacity: 0.6; }
    50% { transform: rotateX(90deg) scale(1.15); opacity: 1; }
}

@keyframes corePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.3); }
}

/* Custom Datasets Content */
.custom-datasets-content {
    padding-left: 2rem;
}

.custom-datasets-content h2 {
    font-size: 2.8rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.custom-datasets-content p {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

/* Custom Benefits List */
.custom-benefits {
    list-style: none;
    padding: 0;
    margin-bottom: 3rem;
}

.custom-benefits li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.benefit-check {
    color: #00aaff;
    font-weight: bold;
    font-size: 1.2rem;
    margin-right: 1rem;
    margin-top: 2px;
    animation: check-pulse 2s infinite;
}

.benefit-text {
    color: rgba(255,255,255,0.9);
    line-height: 1.5;
}

.benefit-text strong {
    color: #ffffff;
    font-weight: 600;
}

/* Custom Dataset Button */
.custom-dataset-button {
    background: linear-gradient(135deg, #00aaff, #0066cc);
    border: none;
    color: white;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.custom-dataset-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,170,255,0.3);
    background: linear-gradient(135deg, #0099ff, #0055bb);
}

.custom-dataset-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: all 0.6s ease;
}

.custom-dataset-button:hover::before {
    left: 100%;
}

@keyframes check-pulse {
    0%, 100% { 
        transform: scale(1);
        color: #00aaff;
    }
    50% { 
        transform: scale(1.2);
        color: #00ccff;
        text-shadow: 0 0 10px rgba(0,170,255,0.6);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .custom-datasets-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    
    .custom-datasets-content {
        padding-left: 0;
    }
    
    .tech-brain-container {
        height: 400px;
    }
    
    .hologram-container {
        width: 350px;
        height: 350px;
    }
}

@media (max-width: 768px) {
    .custom-datasets-content h2 {
        font-size: 2.2rem;
    }
    
    .hologram-container {
        width: 300px;
        height: 300px;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .data-sphere,
    .ai-core,
    .hologram-base {
        animation: none;
    }
}

/* ========================================
   WHY TRAINSTACK PAGE STYLES  
======================================== */

/* SEÇÃO 1 - Built for Quality, Performance, and Control */
.built-for-section {
    padding: 120px 0 100px;
    background: rgba(0,0,0,0.8);
    position: relative;
}

.built-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.built-content h2 {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.built-content p {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
}

/* 3D Cube Visualization */
.cube-visualization {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.tech-cube {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: rotateX(-15deg) rotateY(25deg);
}

.cube-face {
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(0,170,255,0.1);
    border: 2px solid #00aaff;
    border-radius: 10px;
}

.cube-face.front { transform: translateZ(100px); }
.cube-face.back { transform: translateZ(-100px) rotateY(180deg); }
.cube-face.right { transform: rotateY(90deg) translateZ(100px); }
.cube-face.left { transform: rotateY(-90deg) translateZ(100px); }
.cube-face.top { transform: rotateX(90deg) translateZ(100px); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(100px); }

/* Responsive Design */
@media (max-width: 1024px) {
    .built-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    
    .cube-visualization {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .built-content h2 {
        font-size: 2.2rem;
    }
    
    .tech-cube {
        width: 150px;
        height: 150px;
    }
    
    .cube-face {
        width: 150px;
        height: 150px;
    }
    
    .cube-face.front { transform: translateZ(75px); }
    .cube-face.back { transform: translateZ(-75px) rotateY(180deg); }
    .cube-face.right { transform: rotateY(90deg) translateZ(75px); }
    .cube-face.left { transform: rotateY(-90deg) translateZ(75px); }
    .cube-face.top { transform: rotateX(90deg) translateZ(75px); }
    .cube-face.bottom { transform: rotateX(-90deg) translateZ(75px); }
}

/* SEÇÃO 2 - The Future We're Building */
.future-section {
    padding: 100px 0;
    background: rgba(0,0,0,0.8);
    position: relative;
}

.future-content {
    text-align: center;
}

.future-content h2 {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
}

.future-content p {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.8);
    max-width: 800px;
    margin: 0 auto 4rem;
    line-height: 1.6;
}

/* Future pillars */
.future-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    margin-bottom: 4rem;
}

.future-pillar {
    text-align: center;
    padding: 2rem;
}

.pillar-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 1. DNA HELIX - Adapt continuously */
.dna-helix {
    position: relative;
    width: 60px;
    height: 60px;
}

.dna-strand {
    position: absolute;
    width: 100%;
    height: 100%;
}

.dna-strand::before,
.dna-strand::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 60px;
    background: linear-gradient(180deg, #00f5ff, #0080ff, #00f5ff);
    border-radius: 2px;
    left: 50%;
    transform-origin: center;
}

.dna-strand::before {
    transform: translateX(-50%) rotateY(0deg);
}

.dna-strand::after {
    transform: translateX(-50%) rotateY(90deg);
}

.dna-dots {
    position: absolute;
    width: 100%;
    height: 100%;
}

.dna-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #00f5ff;
    border-radius: 50%;
    box-shadow: 0 0 8px #00f5ff;
    left: 50%;
    transform: translateX(-50%);
}

.dna-dot:nth-child(1) { top: 10%; }
.dna-dot:nth-child(2) { top: 30%; }
.dna-dot:nth-child(3) { top: 50%; }
.dna-dot:nth-child(4) { top: 70%; }
.dna-dot:nth-child(5) { top: 90%; }

/* 2. ORBITAL SPHERES - Empower teams */
.orbital-system {
    position: relative;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orbital-center {
    position: absolute;
    width: 16px;
    height: 16px;
    background: radial-gradient(circle, #ffffff, #00f5ff);
    border-radius: 50%;
    box-shadow: 0 0 25px #00f5ff;
    z-index: 10;
}

.orbital-ring {
    position: absolute;
    border: 1px solid rgba(0,245,255,0.3);
    border-radius: 50%;
    top: 50%;
    left: 50%;
}

.ring-inner {
    width: 35px;
    height: 35px;
    transform: translate(-50%, -50%);
}

.ring-outer {
    width: 55px;
    height: 55px;
    transform: translate(-50%, -50%);
}

.orbital-sphere {
    position: absolute;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #00f5ff, #ffffff);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(0,245,255,0.8);
}

/* Inner ring spheres */
.ring-inner .sphere-1 {
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
}

.ring-inner .sphere-2 {
    top: 50%;
    right: -4px;
    transform: translateY(-50%);
}

.ring-inner .sphere-3 {
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
}

/* Outer ring spheres */
.ring-outer .sphere-4 {
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
}

.ring-outer .sphere-5 {
    top: 50%;
    right: -4px;
    transform: translateY(-50%);
}

.ring-outer .sphere-6 {
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
}

/* 3. EXPANSION WAVES - Scale seamlessly */
.expansion-waves {
    position: relative;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wave-ring {
    position: absolute;
    border: 2px solid #00f5ff;
    border-radius: 50%;
    background: rgba(0,245,255,0.05);
    box-shadow: 0 0 15px rgba(0,245,255,0.3);
}

.wave-1 {
    width: 25px;
    height: 25px;
}

.wave-2 {
    width: 40px;
    height: 40px;
}

.wave-3 {
    width: 55px;
    height: 55px;
}

.wave-4 {
    width: 70px;
    height: 70px;
}

.wave-center {
    position: absolute;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #ffffff, #00f5ff);
    border-radius: 50%;
    box-shadow: 0 0 20px #00f5ff;
    z-index: 10;
}

.future-pillar h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
}

.future-pillar p {
    color: rgba(255,255,255,0.8);
    font-size: 1rem;
    line-height: 1.4;
}

/* Future conclusion */
.future-conclusion {
    text-align: center;
    margin-top: 3rem;
}

.future-conclusion p {
    font-size: 1.4rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .future-content h2 {
        font-size: 2.2rem;
    }
    
    .future-pillars {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .pillar-icon {
        width: 70px;
        height: 70px;
    }
}

/* SEÇÃO 3 - Our Core Beliefs */
.core-beliefs-section {
    padding: 100px 0;
    background: rgba(0,0,0,0.8);
    position: relative;
}

.beliefs-header {
    text-align: center;
    margin-bottom: 4rem;
}

.beliefs-header h2 {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
}

.beliefs-header p {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.8);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Beliefs grid */
.beliefs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.belief-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(0,170,255,0.2);
    border-radius: 15px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.belief-card:hover {
    transform: translateY(-10px);
    border-color: #00aaff;
    box-shadow: 0 20px 40px rgba(0,170,255,0.2);
    background: rgba(255,255,255,0.05);
}

.belief-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* NOVO - Controle de videogame */
.gamepad {
    width: 50px;
    height: 32px;
    position: relative;
}

.gamepad-body {
    width: 50px;
    height: 32px;
    background: transparent;
    border: 2px solid #00aaff;
    border-radius: 16px;
    position: relative;
}

/* D-pad (cruz direcional) */
.dpad {
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
}

.dpad-horizontal {
    width: 12px;
    height: 4px;
    background: #00aaff;
    border-radius: 2px;
}

.dpad-vertical {
    width: 4px;
    height: 12px;
    background: #00aaff;
    border-radius: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Botões direitos */
.buttons {
    position: absolute;
    top: 50%;
    right: 25%;
    transform: translate(50%, -50%);
}

.btn {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #00aaff;
    border-radius: 50%;
}

.btn-top { top: -6px; left: 2px; }
.btn-right { top: -2px; left: 6px; }
.btn-bottom { top: 2px; left: 2px; }
.btn-left { top: -2px; left: -2px; }

/* NOVO - Mira de foco (crosshair) */
.crosshair {
    width: 40px;
    height: 40px;
    position: relative;
}

.crosshair-vertical {
    position: absolute;
    width: 2px;
    height: 30px;
    background: #00aaff;
    top: 5px;
    left: 19px;
}

.crosshair-horizontal {
    position: absolute;
    width: 30px;
    height: 2px;
    background: #00aaff;
    top: 19px;
    left: 5px;
}

.crosshair-center {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #00aaff;
    border-radius: 50%;
    top: 17px;
    left: 17px;
    box-shadow: 0 0 8px rgba(0,170,255,0.8);
}

/* Scalable icon - Bars (MANTÉM IGUAL) */
.scalable-bars {
    display: flex;
    align-items: end;
    gap: 6px;
    height: 50px;
}

.scale-bar {
    width: 12px;
    background: #00aaff;
    border-radius: 2px 2px 0 0;
}

.sb1 { height: 20%; }
.sb2 { height: 40%; }
.sb3 { height: 70%; }
.sb4 { height: 100%; }

/* MODIFICADO - Transparency icon (Olho sem raios) */
.transparency-eye {
    position: relative;
    width: 60px;
    height: 40px;
}

.eye-outer {
    width: 60px;
    height: 40px;
    border: 3px solid #00aaff;
    border-radius: 50%;
    position: relative;
}

.eye-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 2px solid #00aaff;
    border-radius: 50%;
    background: rgba(0,170,255,0.1);
}

.eye-pupil {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #00aaff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,170,255,0.8);
}

.belief-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
}

.belief-card p {
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
    font-size: 1rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .built-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    
    .future-pillars {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .beliefs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .belief-card {
        padding: 2rem 1.2rem;
    }
}

@media (max-width: 768px) {
    .built-content h2,
    .future-content h2,
    .beliefs-header h2 {
        font-size: 2.2rem;
    }
    
    .cube-visualization {
        height: 350px;
    }
    
    .tech-cube {
        width: 150px;
        height: 150px;
    }
    
    .cube-face {
        width: 150px;
        height: 150px;
    }
    
    .future-pillars {
        gap: 2rem;
    }
    
    .beliefs-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}


/* ========================================
   CONTACT US PAGE STYLES  
======================================== */

/* Contact Section */
.contact-section {
    min-height: 100vh;
    padding: 120px 0 80px;
    background: rgba(0,0,0,0.8);
    position: relative;
    display: flex;
    align-items: center;
}

.contact-layout {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

/* Contact Header */
.contact-header {
    margin-bottom: 3rem;
}

.contact-header h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}

.contact-header p {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto;
}

/* Contact Form Container */
.contact-form-container {
    position: relative;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(0,170,255,0.2);
    border-radius: 20px;
    padding: 3rem 2.5rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    overflow: hidden;
}

/* Background Tech Effects */
.form-background-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Network Particles */
.network-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.network-node {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #00aaff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,170,255,0.6);
    opacity: 0.7;
}

.node1 { top: 15%; left: 10%; }
.node2 { top: 25%; right: 15%; }
.node3 { top: 45%; left: 5%; }
.node4 { top: 65%; right: 10%; }
.node5 { top: 80%; left: 20%; }
.node6 { top: 35%; right: 25%; }
.node7 { top: 70%; left: 85%; }
.node8 { top: 20%; left: 80%; }

/* Network Connections */
.network-connections {
    position: absolute;
    width: 100%;
    height: 100%;
}

.network-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,170,255,0.4), transparent);
    opacity: 0.6;
}

.line1 { top: 20%; left: 10%; width: 30%; transform: rotate(15deg); }
.line2 { top: 40%; right: 20%; width: 25%; transform: rotate(-20deg); }
.line3 { top: 60%; left: 15%; width: 40%; transform: rotate(10deg); }
.line4 { top: 75%; right: 15%; width: 35%; transform: rotate(-15deg); }
.line5 { top: 30%; left: 50%; width: 20%; transform: rotate(45deg); }
.line6 { top: 55%; left: 70%; width: 15%; transform: rotate(-30deg); }

/* Floating Data Elements */
.floating-data {
    position: absolute;
    width: 100%;
    height: 100%;
}

.data-element {
    position: absolute;
    width: 12px;
    height: 4px;
    background: linear-gradient(90deg, #00aaff, #00ccff);
    border-radius: 2px;
    opacity: 0.5;
}

.elem1 { top: 30%; left: 20%; }
.elem2 { top: 50%; right: 30%; }
.elem3 { top: 70%; left: 40%; }
.elem4 { top: 40%; right: 40%; }

/* Contact Form */
.contact-form {
    position: relative;
    z-index: 2;
}

/* Form Groups */
.form-group {
    position: relative;
    margin-bottom: 2rem;
    text-align: left;
}

/* Input Styles */
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255,255,255,0.2);
    padding: 15px 0;
    font-size: 1rem;
    color: #ffffff;
    outline: none;
    transition: all 0.3s ease;
    font-family: inherit;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255,255,255,0.6);
    transition: all 0.3s ease;
}

.form-group input:focus::placeholder,
.form-group textarea:focus::placeholder {
    color: rgba(255,255,255,0.4);
    transform: translateY(-20px);
    font-size: 0.85rem;
}

/* Select Styling */
.form-group select {
    appearance: none;
    cursor: pointer;
    padding-right: 30px;
}

.form-group select option {
    background: #1a1a2e;
    color: #ffffff;
    padding: 10px;
}

.select-arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Input Line Animation */
.input-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #00aaff, #00ccff);
    transition: all 0.3s ease;
}

/* Focus States */
.form-group.focused input,
.form-group.focused textarea,
.form-group.focused select {
    border-bottom-color: rgba(0,170,255,0.6);
}

.form-group.focused .input-line {
    width: 100%;
}

.form-group.focused .select-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.form-group.focused .select-arrow svg path {
    stroke: #00ccff;
}

/* Has Value State */
.form-group.has-value input,
.form-group.has-value textarea,
.form-group.has-value select {
    border-bottom-color: rgba(0,170,255,0.4);
}

.form-group.has-value .input-line {
    width: 100%;
    opacity: 0.7;
}

/* Textarea Specific */
textarea {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

/* Submit Button */
.form-submit {
    margin-top: 2.5rem;
    text-align: center;
}

.submit-button {
    position: relative;
    background: linear-gradient(135deg, #00aaff, #0066cc);
    border: none;
    color: white;
    padding: 18px 40px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s ease;
    text-transform: none;
    letter-spacing: 0.5px;
    overflow: hidden;
    min-width: 200px;
}

.submit-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0,170,255,0.4);
    background: linear-gradient(135deg, #0099ff, #0055bb);
}

.submit-button:active {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0,170,255,0.3);
}

/* Button Effect */
.button-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: all 0.6s ease;
}

.submit-button:hover .button-effect {
    left: 100%;
}

.button-text {
    position: relative;
    z-index: 1;
}

/* Success Message */
.success-message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.success-content {
    background: rgba(26,26,46,0.95);
    border: 2px solid #00aaff;
    border-radius: 20px;
    padding: 3rem 2.5rem;
    text-align: center;
    max-width: 400px;
    margin: 0 20px;
    box-shadow: 0 20px 40px rgba(0,170,255,0.3);
}

.success-icon {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
}

.success-icon svg {
    animation: success-draw 2s ease-in-out;
}

@keyframes success-draw {
    0% { 
        stroke-dasharray: 200;
        stroke-dashoffset: 200;
    }
    100% { 
        stroke-dasharray: 200;
        stroke-dashoffset: 0;
    }
}

.success-content h3 {
    font-size: 1.8rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
}

.success-content p {
    color: rgba(255,255,255,0.8);
    margin-bottom: 2rem;
    line-height: 1.5;
}

.close-success {
    background: linear-gradient(135deg, #00aaff, #0066cc);
    border: none;
    color: white;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,170,255,0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .contact-header h1 {
        font-size: 2.5rem;
    }
    
    .contact-form-container {
        padding: 2rem 1.5rem;
        margin: 0 20px;
    }
    
    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .submit-button {
        width: 100%;
        padding: 16px 20px;
    }
    
    .success-content {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .contact-header h1 {
        font-size: 2rem;
    }
    
    .contact-header p {
        font-size: 1rem;
    }
    
    .contact-form-container {
        padding: 1.5rem 1rem;
        margin: 0 15px;
    }
}

/* Form validation styles */
.form-group input:invalid:not(:placeholder-shown),
.form-group textarea:invalid:not(:placeholder-shown),
.form-group select:invalid:not(:placeholder-shown) {
    border-bottom-color: #ff4444;
}

.form-group input:valid:not(:placeholder-shown),
.form-group textarea:valid:not(:placeholder-shown),
.form-group select:valid:not(:placeholder-shown) {
    border-bottom-color: #00aaff;
}

/* Loading state for button */
.submit-button.loading {
    opacity: 0.7;
    cursor: not-allowed;
}

.submit-button.loading .button-text::after {
    content: '...';
    animation: loading-dots 1s infinite;
}

@keyframes loading-dots {
    0%, 20% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* ===== SPECIALIZED KNOWLEDGE SECTION - COM CÉREBRO NEURAL ===== */

.specialized-knowledge {
    padding: 100px 0;
    position: relative;
    background: rgba(0,0,0,0.8);
}

/* Layout principal */
.specialized-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.specialized-content h2 {
    font-size: 2.8rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.specialized-content > p {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    margin-bottom: 3rem;
}

/* Example section */
.example-section {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(0,170,255,0.2);
    border-radius: 15px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.example-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,170,255,0.05), transparent);
    animation: example-shimmer 4s infinite;
}

/* Example header e tabs */
.example-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.example-label {
    display: inline-block;
    background: linear-gradient(135deg, #00aaff, #0066cc);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.example-tabs {
    display: flex;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 4px;
    border: 1px solid rgba(0,170,255,0.2);
}

.example-tab {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.example-tab:hover {
    color: rgba(255,255,255,0.9);
    background: rgba(0,170,255,0.1);
}

.example-tab.active {
    background: linear-gradient(135deg, #00aaff, #0066cc);
    color: white;
    box-shadow: 0 4px 12px rgba(0,170,255,0.3);
}

.example-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: all 0.6s ease;
}

.example-tab:hover::before {
    left: 100%;
}

/* Example content */
.example-content {
    display: none;
    animation: content-fade-in 0.5s ease-out;
}

.example-content.active {
    display: block;
}

.example-text {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.9);
    font-style: italic;
    margin-bottom: 2rem;
    line-height: 1.5;
    position: relative;
    z-index: 2;
}

/* Process flow */
.process-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.process-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.process-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Briefcase icon */
.briefcase-icon {
    position: relative;
}

.briefcase-body {
    width: 40px;
    height: 28px;
    background: rgba(0,170,255,0.2);
    border: 2px solid #00aaff;
    border-radius: 4px;
    position: relative;
}

.briefcase-handle {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 8px;
    border: 2px solid #00aaff;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background: transparent;
}

.briefcase-lock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #00aaff;
    border-radius: 50%;
}

/* Plus icon */
.plus-icon {
    position: relative;
}

.plus-horizontal,
.plus-vertical {
    position: absolute;
    background: #00aaff;
    border-radius: 2px;
}

.plus-horizontal {
    width: 30px;
    height: 4px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.plus-vertical {
    width: 4px;
    height: 30px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Arrow icon */
.arrow-icon {
    position: relative;
}

.arrow-line {
    width: 30px;
    height: 3px;
    background: #00aaff;
    border-radius: 2px;
    position: relative;
}

.arrow-head {
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid #00aaff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

/* Neural Brain Container - NOVO */
.neural-brain-container {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#brainCanvas {
    width: 100%;
    height: 100%;
}

.brain-glow-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(0,170,255,0.15) 0%, transparent 70%);
    filter: blur(50px);
    pointer-events: none;
}

/* Hover effects */
.specialized-content:hover .example-section {
    border-color: #00aaff;
    box-shadow: 0 10px 30px rgba(0,170,255,0.2);
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

/* Responsividade */
@media (max-width: 1024px) {
    .specialized-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    
    .neural-brain-container {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .specialized-content h2 {
        font-size: 2.2rem;
    }
    
    .specialized-content > p {
        font-size: 1rem;
    }
    
    .example-section {
        padding: 1.5rem;
    }
    
    .process-flow {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .neural-brain-container {
        height: 350px;
    }
    
    .example-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .example-tabs {
        width: 100%;
        justify-content: center;
    }
    
    .example-tab {
        flex: 1;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .specialized-knowledge {
        padding: 60px 0;
    }
    
    .specialized-content h2 {
        font-size: 1.8rem;
    }
    
    .example-section {
        padding: 1rem;
    }
    
    .process-flow {
        gap: 1rem;
    }
    
    .process-icon {
        width: 40px;
        height: 40px;
    }
    
    .example-tab {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .neural-brain-container {
        height: 300px;
    }
    
    .brain-glow-effect {
        width: 250px;
        height: 250px;
    }
}

/* ========================================
   FOOTER UNIVERSAL
======================================== */

.site-footer {
    background: rgba(0,0,0,0.8) !important;
    border-top: 1px solid rgba(0,170,255,0.1);
    padding: 4rem 0 2rem;
    position: relative;
    margin-top: 0rem;
}

/* Linha superior do footer com degradê azul */
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0,170,255,0.1) 15%, 
        rgba(0,170,255,0.3) 50%, 
        rgba(0,170,255,0.1) 85%, 
        transparent 100%
    );
    pointer-events: none;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Grid principal do footer */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    margin-bottom: 3rem;
}

/* Colunas do footer */
.footer-column h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 0.8rem;
}

.footer-column ul li a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-block;
    position: relative;
}

.footer-column ul li a:hover {
    color: #00aaff;
    transform: translateX(5px);
}

.footer-column ul li a::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #00aaff;
    transition: width 0.3s ease;
}

.footer-column ul li a:hover::before {
    width: 100%;
}

/* Seção de redes sociais */
.social-links {
    display: flex;
    gap: 1rem;
}

.social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(0,170,255,0.2);
    border-radius: 8px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: rgba(0,170,255,0.1);
    border-color: #00aaff;
    color: #00aaff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,170,255,0.2);
}

/* Linha divisória */
.footer-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255,255,255,0.1) 20%, 
        rgba(255,255,255,0.1) 80%, 
        transparent 100%
    );
    margin: 2rem 0;
}

/* Área do copyright */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-copyright {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
}

.footer-legal {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.footer-legal a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: #00aaff;
}

.footer-legal span {
    color: rgba(255,255,255,0.4);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding: 3rem 0 2rem;
    }
    
    .footer-container {
        padding: 0 1.5rem;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
    
    .footer-legal {
        justify-content: center;
    }
    
    .social-links {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .footer-legal {
        flex-direction: column;
        gap: 1rem;
    }
    
    .social-links {
        gap: 0.8rem;
    }
    
    .social-link {
        width: 36px;
        height: 36px;
    }
}

/* ========================================
   PÁGINA DE SUPPORT
======================================== */

.support-page {
    background: rgba(0,0,0,0.8);
    min-height: 100vh;
    padding: 120px 0 80px;
    position: relative;
}

/* Header da página de support */
.support-header {
    text-align: center;
    margin-bottom: 4rem;
}

.support-header h1 {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}

.support-subtitle {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.8);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Conteúdo da página de support */
.support-content {
    max-width: 1000px;
    margin: 0 auto;
}

.support-section {
    margin-bottom: 4rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(0,170,255,0.1);
    border-radius: 15px;
    padding: 3rem;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.support-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,170,255,0.05), transparent);
    transition: all 0.8s ease;
}

.support-section:hover::before {
    left: 100%;
}

.support-section h2 {
    font-size: 2rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 2rem;
    text-align: center;
}

.support-section p {
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Seção de contato principal */
.contact-support-section {
    border-color: rgba(0,170,255,0.3);
    background: rgba(0,170,255,0.05);
    text-align: center;
}

.support-icon-container {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
}

.support-icon {
    width: 80px;
    height: 80px;
    background: rgba(0,170,255,0.1);
    border: 2px solid #00aaff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(0,170,255,0.3);
}

.contact-method {
    margin-top: 2rem;
    padding: 2rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(0,170,255,0.2);
    border-radius: 12px;
}

.contact-detail h3 {
    color: #00aaff;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.support-email {
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    display: inline-block;
    margin-bottom: 1rem;
}

.support-email:hover {
    color: #00aaff;
    border-bottom-color: #00aaff;
    transform: translateY(-2px);
}

.response-time {
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    margin: 0;
    font-style: italic;
}

/* FAQ Grid */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.faq-item {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(0,170,255,0.2);
    border-radius: 10px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.faq-item:hover {
    transform: translateY(-5px);
    border-color: #00aaff;
    box-shadow: 0 10px 25px rgba(0,170,255,0.2);
}

.faq-item h3 {
    color: #00aaff;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.faq-item p {
    color: rgba(255,255,255,0.8);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: left;
}

/* Support Categories */
.support-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.category-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(0,170,255,0.2);
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.category-card:hover {
    transform: translateY(-10px);
    border-color: #00aaff;
    box-shadow: 0 20px 40px rgba(0,170,255,0.2);
    background: rgba(255,255,255,0.08);
}

.category-icon {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
}

.category-card h3 {
    color: #ffffff;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.category-card p {
    color: rgba(255,255,255,0.8);
    margin: 0;
    line-height: 1.5;
    text-align: center;
}

/* Resources Grid */
.resources-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}

.resource-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(0,170,255,0.1);
    border-radius: 10px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.resource-item:hover {
    border-color: #00aaff;
    background: rgba(255,255,255,0.05);
    transform: translateX(5px);
}

.resource-icon {
    font-size: 2rem;
    min-width: 50px;
}

.resource-content h3 {
    color: #00aaff;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.resource-content p {
    color: rgba(255,255,255,0.8);
    margin: 0;
    line-height: 1.5;
    text-align: left;
}

/* Responsive Design */
@media (max-width: 768px) {
    .support-header h1 {
        font-size: 2.2rem;
    }
    
    .support-section {
        padding: 2rem 1.5rem;
        margin-bottom: 2.5rem;
    }
    
    .faq-grid,
    .support-categories {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .resource-item {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .support-email {
        font-size: 1.2rem;
    }
    
    .container {
        padding: 0 1.5rem;
    }
}

@media (max-width: 480px) {
    .support-section {
        padding: 1.5rem 1rem;
    }
    
    .support-header h1 {
        font-size: 1.8rem;
    }
    
    .category-card {
        padding: 2rem 1.5rem;
    }
}

/* ========================================
   LEGAL PAGES - CORREÇÃO DE CONFLITOS
======================================== */

.legal-page {
    min-height: 100vh;
    padding: 120px 0 80px;
    background: rgba(0,0,0,0.8) !important;
    position: relative;
}

.legal-header {
    text-align: center;
    margin-bottom: 3rem;
}

.legal-header h1 {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff !important;
    margin-bottom: 1rem;
}

.legal-subtitle {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.8) !important;
    margin-bottom: 1rem;
}

.last-updated {
    color: rgba(255,255,255,0.6) !important;
    font-size: 0.9rem;
}

.legal-content {
    max-width: 900px;
    margin: 0 auto;
    color: rgba(255,255,255,0.9) !important;
}

.legal-section {
    margin-bottom: 3rem;
}

.legal-section h2 {
    color: #00aaff !important;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.legal-list {
    list-style: none;
    padding-left: 0;
}

.legal-list li {
    color: rgba(255,255,255,0.8) !important;
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    position: relative;
}

.legal-list li::before {
    content: '•';
    color: #00aaff;
    position: absolute;
    left: 0;
}

/* ========================================
   FIX PARA PRODUCTS SECTION - PARTÍCULAS E OUTLINE
======================================== */

/* ✅ CORREÇÃO 1: REATIVAR PARTÍCULAS BRANCAS - SOBRESCREVER DISPLAY NONE */
.our-products-hero .particle {
    display: block !important; /* ✅ FORÇA MOSTRAR */
    position: absolute !important;
    width: 4px !important;
    height: 4px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 0 6px rgba(255,255,255,0.9) !important;
    opacity: 1 !important;
    z-index: 3 !important;
}

/* ✅ CORREÇÃO 2: REMOÇÃO COMPLETA DE OUTLINES E FOCUS */
.our-products-hero *,
.our-products-hero *:before,
.our-products-hero *:after,
.our-products-hero *:focus,
.our-products-hero *:focus-visible,
.our-products-hero *:focus-within,
.our-products-hero *:hover,
.our-products-hero *:active,
.our-products-hero *:target,
.particle-globe *,
.globe-core,
.globe-particles,
.product-visual *,
.product-item * {
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    box-shadow: none !important;
    border-focus: none !important;
    -webkit-focus-ring-color: transparent !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* ✅ CORREÇÃO 3: REMOVER QUALQUER BORDA OU OUTLINE DO NAVEGADOR */
.particle-globe,
.globe-core,
.product-visual,
.product-item {
    outline: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background-clip: padding-box !important;
}

/* ✅ CORREÇÃO 4: RESET COMPLETO DE FOCUS PARA A SEÇÃO */
.our-products-hero input,
.our-products-hero button,
.our-products-hero a,
.our-products-hero div,
.our-products-hero span {
    outline: none !important;
    outline-offset: 0 !important;
    outline-width: 0 !important;
}

/* ✅ CORREÇÃO 5: FORÇAR VISIBILIDADE DAS PARTÍCULAS ESPECÍFICAS */
.p1, .p2, .p3, .p4, .p5, .p6, .p7, .p8 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 5 !important;
}

/* ✅ CORREÇÃO 6: CONTAINER DAS PARTÍCULAS VISÍVEL */
.globe-particles {
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
    z-index: 4 !important;
}

/* ✅ CORREÇÃO 7: WEBKIT ESPECÍFICOS PARA SAFARI/CHROME */
.our-products-hero *::-webkit-focus-inner,
.our-products-hero *::-webkit-focus-ring {
    border: 0 !important;
    outline: 0 !important;
}

/* ✅ CORREÇÃO 8: MOZILLA ESPECÍFICOS PARA FIREFOX */
.our-products-hero *::-moz-focus-inner {
    border: 0 !important;
    outline: 0 !important;
}

/* ✅ CORREÇÃO 9: GARANTIR QUE GLOBO CORE ESTÁ CORRETO */
.globe-core {
    width: 120px !important;
    height: 120px !important;
    background: radial-gradient(circle at 25% 25%, #3a6b9c, #1a3d5c, #0a1f2f) !important;
    border-radius: 50% !important;
    border: 2px solid #00aaff !important;
    position: relative !important;
    z-index: 2 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ✅ CORREÇÃO 10: FORÇAR ANIMAÇÕES DAS PARTÍCULAS */
.our-products-hero .p1 { animation: particle-orbit-1 8s linear infinite !important; }
.our-products-hero .p2 { animation: particle-orbit-2 9s linear infinite !important; }
.our-products-hero .p3 { animation: particle-orbit-3 10s linear infinite !important; }
.our-products-hero .p4 { animation: particle-orbit-4 7s linear infinite !important; }
.our-products-hero .p5 { animation: particle-orbit-5 8.5s linear infinite !important; }
.our-products-hero .p6 { animation: particle-orbit-6 9.5s linear infinite !important; }
.our-products-hero .p7 { animation: particle-orbit-7 7.5s linear infinite !important; }
.our-products-hero .p8 { animation: particle-orbit-8 8.8s linear infinite !important; }

/* ✅ ADICIONAR NO FINAL DO SEU STYLES.CSS */

/* ========================================
   CORREÇÃO SIMPLES - SEM ZOOM + ÓRBITAS CORRETAS
======================================== */

/* ✅ REMOVER ZOOM NO HOVER (que funcionou) */
.product-item:hover .particle-globe {
    transform: none !important;
    scale: 1 !important;
    box-shadow: none !important;
}

/* ✅ GARANTIR QUE PARTÍCULAS ESTÃO VISÍVEIS */
.our-products-hero .particle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    width: 4px !important;
    height: 4px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px rgba(255,255,255,0.9) !important;
}

/* ✅ ÓRBITAS PLANETÁRIAS SIMPLES - GIRANDO AO REDOR DO CENTRO */
.our-products-hero .p1 { 
    animation: planet-orbit-1 12s linear infinite !important;
    left: 50% !important;
    top: 50% !important;
}
.our-products-hero .p2 { 
    animation: planet-orbit-2 14s linear infinite !important;
    left: 50% !important;
    top: 50% !important;
}
.our-products-hero .p3 { 
    animation: planet-orbit-3 16s linear infinite !important;
    left: 50% !important;
    top: 50% !important;
}
.our-products-hero .p4 { 
    animation: planet-orbit-4 10s linear infinite !important;
    left: 50% !important;
    top: 50% !important;
}
.our-products-hero .p5 { 
    animation: planet-orbit-5 13s linear infinite !important;
    left: 50% !important;
    top: 50% !important;
}
.our-products-hero .p6 { 
    animation: planet-orbit-6 15s linear infinite !important;
    left: 50% !important;
    top: 50% !important;
}
.our-products-hero .p7 { 
    animation: planet-orbit-7 11s linear infinite !important;
    left: 50% !important;
    top: 50% !important;
}
.our-products-hero .p8 { 
    animation: planet-orbit-8 17s linear infinite !important;
    left: 50% !important;
    top: 50% !important;
}

/* ✅ MOVIMENTO CIRCULAR REAL + VISIBILIDADE CORRETA */
@keyframes planet-orbit-1 {
    0% { 
        transform: translate(-50%, -50%) rotateZ(0deg) translateX(80px);
        opacity: 1;
        z-index: 10;
    }
    25% { 
        transform: translate(-50%, -50%) rotateZ(90deg) translateX(80px);
        opacity: 0.8;
        z-index: 5;
    }
    50% { 
        transform: translate(-50%, -50%) rotateZ(180deg) translateX(80px);
        opacity: 0;
        z-index: 1;
    }
    75% { 
        transform: translate(-50%, -50%) rotateZ(270deg) translateX(80px);
        opacity: 0.8;
        z-index: 5;
    }
    100% { 
        transform: translate(-50%, -50%) rotateZ(360deg) translateX(80px);
        opacity: 1;
        z-index: 10;
    }
}

@keyframes planet-orbit-2 {
    0% { 
        transform: translate(-50%, -50%) rotateZ(45deg) translateX(75px);
        opacity: 0.9;
        z-index: 8;
    }
    25% { 
        transform: translate(-50%, -50%) rotateZ(135deg) translateX(75px);
        opacity: 0.3;
        z-index: 2;
    }
    50% { 
        transform: translate(-50%, -50%) rotateZ(225deg) translateX(75px);
        opacity: 0;
        z-index: 1;
    }
    75% { 
        transform: translate(-50%, -50%) rotateZ(315deg) translateX(75px);
        opacity: 0.7;
        z-index: 6;
    }
    100% { 
        transform: translate(-50%, -50%) rotateZ(405deg) translateX(75px);
        opacity: 0.9;
        z-index: 8;
    }
}

@keyframes planet-orbit-3 {
    0% { 
        transform: translate(-50%, -50%) rotateZ(90deg) translateX(85px);
        opacity: 0.6;
        z-index: 4;
    }
    25% { 
        transform: translate(-50%, -50%) rotateZ(180deg) translateX(85px);
        opacity: 0;
        z-index: 1;
    }
    50% { 
        transform: translate(-50%, -50%) rotateZ(270deg) translateX(85px);
        opacity: 0;
        z-index: 1;
    }
    75% { 
        transform: translate(-50%, -50%) rotateZ(360deg) translateX(85px);
        opacity: 1;
        z-index: 9;
    }
    100% { 
        transform: translate(-50%, -50%) rotateZ(450deg) translateX(85px);
        opacity: 0.6;
        z-index: 4;
    }
}

@keyframes planet-orbit-4 {
    0% { 
        transform: translate(-50%, -50%) rotateZ(135deg) translateX(70px);
        opacity: 0.2;
        z-index: 2;
    }
    25% { 
        transform: translate(-50%, -50%) rotateZ(225deg) translateX(70px);
        opacity: 0;
        z-index: 1;
    }
    50% { 
        transform: translate(-50%, -50%) rotateZ(315deg) translateX(70px);
        opacity: 0.8;
        z-index: 7;
    }
    75% { 
        transform: translate(-50%, -50%) rotateZ(405deg) translateX(70px);
        opacity: 1;
        z-index: 10;
    }
    100% { 
        transform: translate(-50%, -50%) rotateZ(495deg) translateX(70px);
        opacity: 0.2;
        z-index: 2;
    }
}

@keyframes planet-orbit-5 {
    0% { 
        transform: translate(-50%, -50%) rotateZ(180deg) translateX(90px);
        opacity: 0;
        z-index: 1;
    }
    25% { 
        transform: translate(-50%, -50%) rotateZ(270deg) translateX(90px);
        opacity: 0.5;
        z-index: 3;
    }
    50% { 
        transform: translate(-50%, -50%) rotateZ(360deg) translateX(90px);
        opacity: 1;
        z-index: 10;
    }
    75% { 
        transform: translate(-50%, -50%) rotateZ(450deg) translateX(90px);
        opacity: 0.4;
        z-index: 3;
    }
    100% { 
        transform: translate(-50%, -50%) rotateZ(540deg) translateX(90px);
        opacity: 0;
        z-index: 1;
    }
}

@keyframes planet-orbit-6 {
    0% { 
        transform: translate(-50%, -50%) rotateZ(225deg) translateX(77px);
        opacity: 0;
        z-index: 1;
    }
    25% { 
        transform: translate(-50%, -50%) rotateZ(315deg) translateX(77px);
        opacity: 0.6;
        z-index: 4;
    }
    50% { 
        transform: translate(-50%, -50%) rotateZ(405deg) translateX(77px);
        opacity: 1;
        z-index: 9;
    }
    75% { 
        transform: translate(-50%, -50%) rotateZ(495deg) translateX(77px);
        opacity: 0.3;
        z-index: 2;
    }
    100% { 
        transform: translate(-50%, -50%) rotateZ(585deg) translateX(77px);
        opacity: 0;
        z-index: 1;
    }
}

@keyframes planet-orbit-7 {
    0% { 
        transform: translate(-50%, -50%) rotateZ(270deg) translateX(82px);
        opacity: 0;
        z-index: 1;
    }
    25% { 
        transform: translate(-50%, -50%) rotateZ(360deg) translateX(82px);
        opacity: 0.9;
        z-index: 8;
    }
    50% { 
        transform: translate(-50%, -50%) rotateZ(450deg) translateX(82px);
        opacity: 1;
        z-index: 10;
    }
    75% { 
        transform: translate(-50%, -50%) rotateZ(540deg) translateX(82px);
        opacity: 0.2;
        z-index: 2;
    }
    100% { 
        transform: translate(-50%, -50%) rotateZ(630deg) translateX(82px);
        opacity: 0;
        z-index: 1;
    }
}

@keyframes planet-orbit-8 {
    0% { 
        transform: translate(-50%, -50%) rotateZ(315deg) translateX(73px);
        opacity: 0.4;
        z-index: 3;
    }
    25% { 
        transform: translate(-50%, -50%) rotateZ(405deg) translateX(73px);
        opacity: 1;
        z-index: 9;
    }
    50% { 
        transform: translate(-50%, -50%) rotateZ(495deg) translateX(73px);
        opacity: 0.3;
        z-index: 2;
    }
    75% { 
        transform: translate(-50%, -50%) rotateZ(585deg) translateX(73px);
        opacity: 0;
        z-index: 1;
    }
    100% { 
        transform: translate(-50%, -50%) rotateZ(675deg) translateX(73px);
        opacity: 0.4;
        z-index: 3;
    }
}

/* ✅ ADICIONAR NO FINAL DO SEU STYLES.CSS */

/* ========================================
   GLOBAL MOBILE RESPONSIVENESS
   ======================================== */

/* Base font size adjustment */
@media (max-width: 768px) {
    html {
        font-size: 14px; /* Reduz base font para mobile */
    }
}

@media (max-width: 480px) {
    html {
        font-size: 13px;
    }
}

/* Container global */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }
}

/* ========================================
   HEADER/NAVIGATION MOBILE
   ======================================== */

@media (max-width: 768px) {
    /* Ajustar navegação para mobile */
    nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,0.95);
        z-index: 1000;
        padding: 15px;
    }
    
    nav ul {
        flex-direction: column;
        gap: 10px;
    }
}

/* ========================================
   HERO SECTION MOBILE
   ======================================== */

@media (max-width: 768px) {
    .hero-section {
        padding: 80px 0 60px;
        min-height: 100vh;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    .hero-content p {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-content p {
        font-size: 1rem;
    }
}

/* ========================================
   SPECIALIZED KNOWLEDGE MOBILE
   ======================================== */

@media (max-width: 768px) {
    .specialized-knowledge {
        padding: 60px 0;
    }
    
    .specialized-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .specialized-content h2 {
        font-size: 2rem;
        text-align: center;
    }
    
    .specialized-content > p {
        font-size: 1rem;
        text-align: center;
    }
    
    /* Neural brain canvas mobile */
    .neural-brain-container {
        height: 350px;
        margin: 0 auto;
        max-width: 100%;
    }
    
    #brainCanvas {
        max-width: 100%;
        height: 100%;
    }
    
    .brain-glow-effect {
        width: 280px;
        height: 280px;
    }
    
    /* Process flow mobile */
    .process-flow {
        flex-direction: row;
        justify-content: center;
        gap: 1rem;
        flex-wrap: wrap;
    }
    
    .process-icon {
        width: 40px;
        height: 40px;
    }
    
    /* Example tabs mobile */
    .example-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .example-tabs {
        width: 100%;
        justify-content: stretch;
    }
    
    .example-tab {
        flex: 1;
        text-align: center;
        font-size: 0.85rem;
        padding: 0.6rem 0.8rem;
    }
}

@media (max-width: 480px) {
    .specialized-knowledge {
        padding: 40px 0;
    }
    
    .specialized-content h2 {
        font-size: 1.6rem;
    }
    
    .specialized-content > p {
        font-size: 0.95rem;
    }
    
    .neural-brain-container {
        height: 280px;
    }
    
    .brain-glow-effect {
        width: 220px;
        height: 220px;
    }
    
    .example-section {
        padding: 1rem;
    }
    
    .example-text {
        font-size: 0.95rem;
    }
    
    .example-tab {
        font-size: 0.75rem;
        padding: 0.5rem 0.5rem;
    }
    
    /* Reduzir ícones ainda mais */
    .process-icon {
        width: 35px;
        height: 35px;
    }
    
    .briefcase-body {
        width: 30px;
        height: 20px;
    }
    
    .plus-horizontal {
        width: 20px;
        height: 3px;
    }
    
    .plus-vertical {
        width: 3px;
        height: 20px;
    }
    
    .arrow-line {
        width: 20px;
        height: 2px;
    }
}

/* ========================================
   NICHE DATASETS MOBILE
   ======================================== */

@media (max-width: 768px) {
    .ready-datasets {
        padding: 60px 0;
    }
    
    .datasets-main-title {
        font-size: 2rem;
        letter-spacing: 1px;
    }
    
    .datasets-subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    
    .datasets-categories {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
    }
    
    .dataset-category {
        padding: 2rem 1.5rem;
    }
    
    .dataset-category h3 {
        font-size: 1.3rem;
    }
    
    .category-features li {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .ready-datasets {
        padding: 40px 0;
    }
    
    .datasets-main-title {
        font-size: 1.5rem;
    }
    
    .datasets-subtitle {
        font-size: 0.9rem;
    }
    
    .datasets-categories {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .dataset-category {
        padding: 1.5rem 1rem;
    }
    
    .category-icon svg {
        width: 40px;
        height: 40px;
    }
    
    .dataset-category h3 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
    
    .category-features li {
        font-size: 0.85rem;
        margin-bottom: 0.6rem;
    }
}

/* ========================================
   GENERAL MOBILE OPTIMIZATIONS
   ======================================== */

/* Remove hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
    .dataset-category:hover,
    .example-section:hover,
    .specialized-content:hover .example-section {
        transform: none;
        box-shadow: none;
    }
    
    .example-tab:hover::before {
        left: -100%;
    }
}

/* Optimize animations for mobile */
@media (max-width: 768px) {
    /* Reduce animation complexity */
    @keyframes brain-pulse {
        0%, 100% { 
            opacity: 0.3; 
            transform: translate(-50%, -50%) scale(1); 
        }
        50% { 
            opacity: 0.5; 
            transform: translate(-50%, -50%) scale(1.05); 
        }
    }
    
    /* Disable some animations on mobile for performance */
    .example-section::before {
        animation: none;
    }
    
    .security-dot,
    .data-packet {
        animation-duration: 4s; /* Slower animations */
    }
}

/* Landscape mobile adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .specialized-knowledge,
    .ready-datasets {
        padding: 40px 0;
    }
    
    .neural-brain-container {
        height: 250px;
    }
    
    .specialized-content h2 {
        font-size: 1.8rem;
    }
    
    .datasets-main-title {
        font-size: 1.8rem;
    }
}

/* Ultra small devices */
@media (max-width: 380px) {
    .specialized-content h2 {
        font-size: 1.4rem;
    }
    
    .datasets-main-title {
        font-size: 1.3rem;
    }
    
    .example-tab {
        font-size: 0.7rem;
        padding: 0.4rem 0.3rem;
    }
    
    .neural-brain-container {
        height: 250px;
    }
    
    .process-flow {
        gap: 0.5rem;
    }
    
    .category-features li {
        font-size: 0.8rem;
        padding-left: 12px;
    }
}

/* Text readability on mobile */
@media (max-width: 768px) {
    p, li {
        letter-spacing: 0.01em;
        word-spacing: 0.05em;
    }
    
    h1, h2, h3, h4 {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* Safe areas for modern phones (notch, etc) */
@supports (padding: env(safe-area-inset-top)) {
    .container {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
    
    @media (max-width: 480px) {
        .container {
            padding-left: max(10px, env(safe-area-inset-left));
            padding-right: max(10px, env(safe-area-inset-right));
        }
    }
}

/* CORREÇÕES MOBILE PARA HERO */
@media (max-width: 480px) {
    /* Ajusta texto do hero */
    .hero h1,
    .hero-content h1 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
    }
    
    .hero p,
    .hero-content p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin-bottom: 2rem;
        padding: 0 10px;
    }
}

/* NAVBAR MOBILE SIMPLES */
@media (max-width: 768px) {
    nav ul {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    
    nav ul li {
        font-size: 0.85rem;
    }
    
    nav ul a {
        padding: 5px 10px;
    }
}


/* ===== MOBILE NAVBAR - menu hambúrguer ===== */
@media (max-width: 900px) {
  /* escondemos a lista padrão no mobile */
  .nav-links {
    display: none;
    position: absolute;
    top: 64px;             /* altura do header */
    right: 0;
    width: 75vw;
    max-width: 320px;
    height: calc(100vh - 64px);
    background: rgba(0, 0, 0, 0.95);
    padding: 20px;
    flex-direction: column;
    gap: 16px;
    z-index: 999;
  }

  /* ícone do hambúrguer visível no mobile */
  .hamburger {
    display: block;
    width: 30px;
    height: 22px;
    cursor: pointer;
    position: relative;
    z-index: 1000;
  }

  .hamburger span,
  .hamburger::before,
  .hamburger::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: #fff;   /* cor das barras */
    transition: 0.3s;
  }

  .hamburger span { top: 50%; transform: translateY(-50%); }
  .hamburger::before { top: 0; }
  .hamburger::after { bottom: 0; }

  /* quando o checkbox for marcado, mostra menu */
  #nav-toggle:checked ~ .nav-links {
    display: flex;
  }

  /* animação: hambúrguer vira X */
  #nav-toggle:checked + label.hamburger::before {
    transform: rotate(45deg);
    top: 50%;
  }
  #nav-toggle:checked + label.hamburger span {
    opacity: 0;
  }
  #nav-toggle:checked + label.hamburger::after {
    transform: rotate(-45deg);
    bottom: auto;
    top: 50%;
  }
}
/* Esconde o checkbox que controla o menu */
#nav-toggle {
  display: none;
}
/* Fixar header no mobile */
@media (max-width: 900px) {
  header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1001 !important;
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(10px) !important;
  }
  
  /* Ajustar o body para compensar o header fixo */
  body {
    padding-top: 64px !important;
  }
  
  /* Garantir que o menu dropdown também fique fixo */
  .nav-links {
    position: fixed !important;
    top: 64px !important;
    right: 0 !important;
  }
  
  /* Aumentar z-index do hambúrguer */
  .hamburger {
    z-index: 1002 !important;
  }
}


/* Prevenir scroll horizontal */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Garantir que nenhum elemento cause overflow */
* {
    box-sizing: border-box;
}

/* Para mobile específico */
@media (max-width: 900px) {
    .container,
    section,
    .steps-container,
    .hexagon-diagram {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Verificar se os sliders não estão vazando */
    .step-card,
    .hex-element {
        max-width: calc(100vw - 2rem) !important;
    }
}

/* ===== CORREÇÃO MAIS RESTRITIVA - TRAVAMENTO COMPLETO DAS SEÇÕES ===== */

@media (max-width: 768px) {
    /* TODAS as seções - completamente fixas */
    .hero,
    .how-it-works,
    .enterprise-grade,
    .specialized-knowledge {
        touch-action: pan-y !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    /* Containers das seções - não podem ser movidos */
    .how-it-works .container,
    .enterprise-grade .container {
        touch-action: pan-y !important;
        overflow: visible !important;
    }
    
    /* APENAS os slides internos - movimento horizontal restrito */
    .steps-container {
        touch-action: pan-x !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        isolation: isolate !important;
    }
    
    .hexagon-diagram {
        touch-action: pan-x !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        isolation: isolate !important;
    }
    
    /* Cards - APENAS movimento horizontal interno */
    .step-card,
    .hex-element {
        touch-action: pan-x !important;
        will-change: transform !important;
    }
    
    /* Área externa dos slides - travada verticalmente */
    .how-it-works > *:not(.container),
    .enterprise-grade > *:not(.container) {
        touch-action: pan-y !important;
    }
    
    /* Títulos e controles - travados */
    .section-title,
    .section-subtitle,
    .slider-controls,
    .enterprise-slider-controls {
        touch-action: pan-y !important;
    }
}

/* ===== CORREÇÃO HERO MOBILE - APENAS ELIMINAR ESPAÇO VAZIO DO TOPO ===== */

@media (max-width: 768px) {
    .hero {
        min-height: 100vh !important; /* Mantém tela cheia */
        padding-top: 28vh !important; /* Só para mobile */
        justify-content: flex-start !important;
    }
    
    .hero-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
        max-width: 90% !important;
    }
    
    .hero-title {
        font-size: 2.2rem !important;
        margin-bottom: 1.5rem !important;
        line-height: 1.2 !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
        margin-bottom: 2rem !important;
        padding: 0 10px !important;
    }
}

@media (max-width: 480px) {
    .hero {
        min-height: 100vh !important; /* Mantém tela cheia */
        padding-top: 25vh !important; /* Só para mobile pequeno */
    }
    
    .hero-title {
        font-size: 1.8rem !important;
    }
    
    .hero-subtitle {
        font-size: 0.9rem !important;
    }
}

/* ===== GARANTIR QUE DESKTOP NÃO SEJA AFETADO ===== */
@media (min-width: 769px) {
    .hero {
        padding-top: 0 !important; /* Reset desktop */
        justify-content: center !important; /* Centralizar no desktop */
    }
}


/* ===== CORREÇÃO EFEITOS DE FUNDO HERO MOBILE ===== */

@media (max-width: 768px) {
    /* Reposicionar linhas animadas para cobrir toda a seção */
    .hero-background-lines {
        top: 0 !important;
        height: 100% !important;
    }
    
    .animated-line {
        opacity: 0.6 !important; /* Mais visível no mobile */
    }
    
    /* Ajustar posições das linhas específicas */
    .line1 {
        top: 5% !important; /* Era 15%, agora mais no topo */
    }
    
    .line2 {
        top: 15% !important; /* Era 25% */
    }
    
    .line3 {
        top: 25% !important; /* Era 45% */
    }
    
    .line4 {
        top: 35% !important; /* Era 60% */
    }
    
    .line5 {
        top: 50% !important; /* Era 75% */
    }
    
    /* Reposicionar pontos da rede */
    .hero-network-points {
        top: 0 !important;
        height: 100% !important;
    }
    
    .point1 {
        top: 10% !important; /* Era 20% */
    }
    
    .point2 {
        top: 20% !important; /* Era 30% */
    }
    
    .point3 {
        top: 45% !important; /* Era 65% */
    }
    
    .point4 {
        top: 55% !important; /* Era 70% */
    }
    
    .point5 {
        top: 25% !important; /* Era 40% */
    }
    
    .point6 {
        top: 70% !important; /* Era 85% */
    }
}

/* REMOVE TODOS OS DESTAQUES NO MOBILE - DUAS SEÇÕES */
@media (max-width: 768px) {
    /* Remove destaque da seção Enterprise-Grade */
    .hex-element,
    .hex-element.top-left,
    .hex-element:first-child,
    .hex-element.active,
    .hex-element:hover,
    .hex-element:active,
    .hex-element:focus {
        border-color: #1a1a2e !important;
        background: rgba(26, 26, 46, 0.5) !important;
        box-shadow: none !important;
    }
    
    /* Remove destaque da seção How It Works */
    .step-card,
    .step-card:first-child,
    .step-card.active,
    .step-card:hover,
    .step-card:active,
    .step-card:focus,
    .step-card .step-visual,
    .step-card .step-icon {
        border-color: #1a1a2e !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }
    
    /* Remove qualquer indicador/dot azul */
    .step-indicator,
    .dot,
    .indicator,
    .step-indicator.active,
    .dot.active,
    .indicator.active {
        background-color: #666 !important;
        opacity: 0.5 !important;
    }
}
/* REMOVE APENAS O DESTAQUE AZUL DO QUADRADO - MANTÉM O QUADRADO VISÍVEL - MOBILE */
@media (max-width: 768px) {
    /* Remove apenas o destaque azul, mantém o background original */
    .example-section {
        border-color: rgba(255, 255, 255, 0.1) !important;
        box-shadow: none !important;
    }
    
    /* Remove highlight ao clicar/focar */
    .example-section:hover,
    .example-section:focus,
    .example-section.active {
        border-color: rgba(255, 255, 255, 0.1) !important;
        box-shadow: none !important;
        outline: none !important;
    }
    
    /* Remove qualquer brilho azul dos tabs quando ativos */
    .example-tab.active {
        box-shadow: none !important;
    }
    
    /* Remove outline de foco */
    .example-tab:focus,
    .example-content:focus {
        outline: none !important;
    }
}

/* AJUSTA ESPAÇAMENTO HERO PARA SEGUNDA SEÇÃO - MOBILE */
@media (max-width: 768px) {
    /* Garante que a hero ocupe a tela toda ao abrir */
    .hero {
        min-height: 100vh !important;
        padding-bottom: 40px !important;
    }
    
    /* Reduz drasticamente o espaço para a próxima seção */
    .specialized-knowledge {
        padding-top: 20px !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 480px) {
    .hero {
        min-height: 100vh !important;
        padding-bottom: 30px !important;
    }
    
    .specialized-knowledge {
        padding-top: 15px !important;
    }
}