:root{
    --bg-primary:#06111B;
    --bg-secondary:#0B1C2D;
    --bg-tertiary:#13293D;

    --cyan:#3EDBF0;
    --cyan-soft:#77F5FF;
    --blue-electric:#2A7FFF;

    --white:#F8FAFC;
    --gray:#A8B3C2;
    --gray-dark:#6C7A89;

    --border:rgba(255,255,255,.08);
    --transition:.35s ease;
    --shadow:0 20px 40px rgba(0,0,0,.25);
}

/* RESET */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Open Sans',sans-serif;
    background:var(--bg-primary);
    color:var(--white);
    overflow-x:hidden;
    line-height:1.7;
}

body.menu-open{
    overflow:hidden;
}

section{
    padding:clamp(80px,10vw,110px) 6%;
}

img{
    max-width:100%;
    display:block;
}

.center{
    text-align:center;
}

/* CONTAINERS */
.container-quem-somos,
.container-servicos,
.container-solucoes,
.container-metodologia,
.container-tecnologias,
.container-diferenciais,
.container-contato,
.container-conexao,
.footer-content{
    width:100%;
    max-width:1200px;
    margin:auto;
}

/* NAVBAR */
#navbar{
    position:fixed;
    top:0;
    width:100%;
    z-index:10000;
    padding:16px 6%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    transition:var(--transition);
}

#navbar.scrolled{
    background:rgba(6,17,27,.92);
	backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(62,219,240,.15);
}


.logo img{
    width:95px;
}

/* NAV DESKTOP */
#nav-menu{
    display:flex;
    align-items:center;
	z-index: auto;
}

#nav-menu ul{
    display:flex;
    gap:28px;
    list-style:none;
    align-items:center;
}

.nav-link{
    color:white;
    text-decoration:none;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:1px;
    transition:.3s ease;
}

.nav-link:hover,
.nav-link.active{
    color:var(--cyan);
}

.btn-institucional{
    padding:12px 18px;
    border:1px solid rgba(62,219,240,.3);
    border-radius:4px;
    color:var(--cyan);
    text-decoration:none;
}

/* MENU MOBILE */
.menu-toggle{
    display:none;
    width:32px;
    height:24px;
    flex-direction:column;
    justify-content:space-between;
    cursor:pointer;
    z-index:10002;
}

.menu-toggle span{
    width:100%;
    height:2px;
    background:#fff;
    transition:.35s ease;
}

.menu-toggle.active span:nth-child(1){
    transform:translateY(11px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:translateY(-11px) rotate(-45deg);
}

/* HERO */
.hero{
    min-height:100vh;
    padding:0 6%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    text-align:center;
    overflow:hidden;
}

.hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
}

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(
        to bottom,
        rgba(6,17,27,.4),
        rgba(6,17,27,.95)
    );
}
.fill{
    height:100%;
    width:0;
    background:linear-gradient(90deg,var(--cyan),var(--blue-electric));
    border-radius:30px;
    transition:width 1.5s ease;
}


.hero-content{
    position:relative;
    z-index:2;
    width:100%;
    max-width:900px;
    padding:0 20px;
    opacity:0;
    transform:translateY(40px);
    transition:.8s ease;
}

.hero-content.visible{
    opacity:1;
    transform:translateY(0);
}

.hero-brand h1{
    font-family:'Montserrat';
    font-size:clamp(3rem,8vw,6rem);
    text-transform:uppercase;
}

.hero-brand h2{
    margin-top:15px;
    font-size:1rem;
    letter-spacing:4px;
    color:rgba(255,255,255,.75);
    font-weight:300;
}

.highlight{
    color:var(--cyan);
}

.hero-description{
    max-width:720px;
    margin:30px auto 40px;
    color:#C7D2E0;
    line-height:1.9;
}

.hero-cta{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
}

.btn-cta-primary,
.btn-cta-secondary{
    padding:16px 24px;
    border-radius:4px;
    text-decoration:none;
    font-weight:700;
}

.btn-cta-primary{
    background:linear-gradient(135deg,var(--cyan),var(--blue-electric));
    color:white;
}

.btn-cta-secondary{
    border:1px solid rgba(62,219,240,.3);
    color:white;
}

/* TITLES */
.section-title{
    font-size:2.4rem;
    font-family:'Montserrat';
    margin-bottom:20px;
}

.section-title span{
    color:var(--cyan);
}

.subtitle{
    color:var(--gray);
    margin-bottom:50px;
}

/* QUEM SOMOS */
.container-quem-somos{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.visual-lab {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lab-frame {
    position: relative;
    width: min(100%, 900px);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(200, 169, 91, 0.15);
    background: #000;
}

/* Mantém proporção real do vídeo */
.lab-frame .lab-video{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}
 

/* Overlay por cima */
.lab-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10,31,51,0.15),
        rgba(10,31,51,0.35)
    );
    z-index: 2;
    pointer-events: none;
}

.hologram-effect {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}


.texto-institucional p{
    color:var(--gray);
    margin-bottom:20px;
}

.destaque-ls{
    border-left:3px solid var(--cyan);
    padding-left:20px;
    color:var(--cyan);
}

/* SERVIÇOS */
.grid-servicos{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:25px;
}

.card-servico{
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    padding:35px;
    border-radius:8px;
    transition:var(--transition);
}

.card-servico:hover{
    transform:translateY(-8px);
    border-color:rgba(62,219,240,.3);
}

.card-servico i{
    font-size:2rem;
    color:var(--cyan);
    margin-bottom:20px;
}

/* SOLUÇÕES */
.lista-solucoes{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.card-solucao{
    background:var(--bg-secondary);
    padding:30px;
    border-left:4px solid var(--cyan);
    border-radius:8px;
}

/* PIPELINE */
.pipeline-section{
    background:var(--bg-secondary);
}

.pipeline-container{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:20px;
    position:relative;
    margin-top:60px;
}

.line{
    position:absolute;
    top:32px;
    left:6%;
    width:88%;
    height:1px;
    background:rgba(62,219,240,.2);
}

.pipeline-step{
    text-align:center;
    position:relative;
    z-index:2;
}

.step-number{
    width:64px;
    height:64px;
    margin:auto auto 20px;
    border-radius:50%;
    background:var(--bg-tertiary);
    border:1px solid rgba(62,219,240,.3);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    color:var(--cyan);
}

.pipeline-step p{
    font-size:.85rem;
    color:var(--gray);
}

/* METODOLOGIA */
.timeline-metodologia{
    max-width:900px;
    margin:auto;
    position:relative;
    padding-left:60px;
}

.timeline-metodologia::before{
    content:'';
    position:absolute;
    left:20px;
    top:0;
    width:2px;
    height:100%;
    background:rgba(62,219,240,.2);
}

.timeline-item{
    display:flex;
    gap:25px;
    margin-bottom:40px;
}

.timeline-item span{
    width:42px;
    height:42px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--cyan),var(--blue-electric));
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.8rem;
    font-weight:700;
    flex-shrink:0;
}

.timeline-content h3{
    margin-bottom:8px;
}

.timeline-content p{
    color:var(--gray);
}

/* TECNOLOGIAS */
.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:25px;
}

.tech-card{
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    border-radius:8px;
    padding:30px;
}

.tech-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}

.tech-top i{
    font-size:1.5rem;
    color:var(--cyan);
}

.tech-top span{
    color:var(--cyan);
    font-weight:700;
}

.bar-progress{
    height:8px;
    background:rgba(255,255,255,.05);
    border-radius:30px;
    overflow:hidden;
}



/* DIFERENCIAIS */
.lista-diferenciais{
    display:flex;
    flex-direction:column;
    gap:30px;
    max-width:900px;
    margin:auto;
}

.dif-item{
    display:flex;
    gap:20px;
    padding:25px;
    background:rgba(255,255,255,.02);
    border-left:2px solid rgba(62,219,240,.2);
    border-radius:8px;
}

.dif-item.left{
    margin-right:100px;
}

.dif-item.right{
    margin-left:100px;
}

.dif-item i{
    font-size:1.8rem;
    color:var(--cyan);
}

/* CONEXÃO */
.container-conexao{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:60px;
    align-items:center;
}

.perfil-shayane{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.perfil-shayane p{
    color:var(--gray);
}

.perfil-visual{
    position:relative;
    width:min(100%,420px);
    aspect-ratio:4/5;
    margin:0 auto;
    overflow:hidden;
    border-radius:12px;
    border:1px solid var(--border);
}

.foto-perfil {
    width: 100%;
    height: 100%; /* ESSENCIAL */
    object-fit: cover;
    object-position: center top; /* ajusta melhor rosto/cabeça */
    display: block;
    position: relative;
    z-index: 2;
    filter: contrast(1.05) brightness(0.95);
}
.scanner-frame {
    position: absolute;
    left:0;
    width:100%;
    height:3px;	
    border: 1px solid rgba(200,169,91,.35);
    border-radius: 8px;
    z-index: 3;
    box-shadow:
        0 0 30px rgba(18,58,102,.25),
        0 0 15px rgba(200,169,91,.08);
	background:linear-gradient(to right,transparent,var(--cyan),transparent);
    animation:scanner 4s linear infinite;
}


.lab-frame video{
    width:100%;
    height:100%;
    object-fit:contain;
}

@media (max-width: 980px){
 

    .menu-toggle{
		display:flex;
        flex-direction:column;
        gap:6px;
        border:none;
        cursor:pointer;
        z-index:10002;
		background: rgba(6,17,27,1);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
    }

    .menu-toggle span{
        width:28px;
        height:2px;
        background:#fff;
        transition:.3s;
    }

	#nav-menu{
		position:fixed;
		inset:0;
		background:rgba(6,17,27,.98);
		backdrop-filter:blur(8px);
		-webkit-backdrop-filter:blur(8px);
		transform:translateX(100%);
		transition:.4s ease;
		display:flex;
		justify-content:center;
		align-items:center;
		z-index:9998;
	}

	#nav-menu.active{
		transform:translateX(0);
	}

	#nav-menu ul{
		flex-direction:column;
		gap:30px;
		text-align:center;
	}
	
    #nav-menu ul li a{
        font-size:1.2rem;
    }

    .container-quem-somos,
    .container-conexao,
    .contato-wrapper,
    .footer-content{
        grid-template-columns:1fr;
    }

    .menu-toggle.active span:nth-child(1){
        transform:rotate(45deg) translate(6px,6px);
    }

    .menu-toggle.active span:nth-child(2){
        opacity:0;
    }

    .menu-toggle.active span:nth-child(3){
        transform:rotate(-45deg) translate(6px,-6px);
    }
}

@keyframes scanner{
    0%{top:0;}
    100%{top:calc(100% - 3px);}
}


/* CONTATO */
.contato-wrapper{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:60px;
}

.canais{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:20px;
}

.canais a{
    color:white;
    text-decoration:none;
}

.form-contato{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.form-contato input,
.form-contato textarea{
    padding:16px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    border-radius:4px;
    color:white;
}

.form-contato button{
    padding:16px;
    border:none;
    border-radius:4px;
    background:linear-gradient(135deg,var(--cyan),var(--blue-electric));
    color:white;
    font-weight:700;
}

/* FOOTER */
.footer-premium{
    padding:80px 6% 40px;
    border-top:1px solid rgba(255,255,255,.05);
}

.footer-content{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
}

.footer-col h4{
    color:var(--cyan);
    margin-bottom:15px;
}

.footer-col a{
    color:var(--gray);
    text-decoration:none;
    display:block;
    margin-bottom:10px;
}

.footer-bottom{
    margin-top:40px;
    text-align:center;
    color:var(--gray-dark);
}

/* REVEAL */
.reveal{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .8s ease, transform .8s ease;
}

.reveal.visible{
    opacity:1;
    transform:translateY(0);
}

.reveal:nth-child(1){ transition-delay:.1s; }
.reveal:nth-child(2){ transition-delay:.2s; }
.reveal:nth-child(3){ transition-delay:.3s; }
.reveal:nth-child(4){ transition-delay:.4s; }
}

/* RESPONSIVO */
@media(max-width:1100px){
    .pipeline-container{
        grid-template-columns:repeat(2,1fr);
    }

    .line{
        display:none;
    }
}


@media (max-width:768px){

    section{
        padding:80px 6%;
    }

    .hero-brand h1{
        font-size:2.3rem;
    }

    .hero-brand h2{
        font-size:.85rem;
        letter-spacing:2px;
    }

    .hero-description{
        font-size:.95rem;
        line-height:1.7;
    }

    .container-quem-somos,
    .container-conexao,
    .contato-wrapper,
    .footer-content{
        display:grid;
        grid-template-columns:1fr;
        gap:35px;
    }

    .pipeline-container{
        grid-template-columns:1fr;
    }

    .dif-item.left,
    .dif-item.right{
        margin:0;
    }

    .section-title{
        font-size:1.8rem;
    }

    .hero-cta{
        flex-direction:column;
        align-items:center;
    }

    .btn-cta-primary,
    .btn-cta-secondary{
        width:100%;
        max-width:320px;
        text-align:center;
    }
}

.card-servico,
.tech-card,
.card-solucao{
    height:100%;
}