/* RESET FINAL RESPONSIVO */

*{

box-sizing:border-box;

}


img{

max-width:100%;

height:auto;

}


body{

overflow-x:hidden;

}


.container{

width:min(1200px,90%);

margin:auto;

}

@media(max-width:768px){

.section{

padding:60px 0;

}


h1{

font-size:36px;

}


h2{

font-size:30px;

}


.btn{

width:100%;

text-align:center;

}


}


/* ==========================================================
NEXAFLOW ANALYTICS
GLOBAL RESPONSIVE FOUNDATION
REVISÃO ETAPA 1
========================================================== */


/* =========================
RESET GLOBAL
========================= */

*,
*::before,
*::after{

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}

body{

margin:0;

padding:0;

font-family:'Inter', sans-serif;

color:#1F1F1F;

background:#FFFFFF;

overflow-x:hidden;

}


img{

max-width:100%;

height:auto;

display:block;

}

a{

text-decoration:none;

color:inherit;

}


ul{

padding:0;

margin:0;

list-style:none;

}


/* =========================
CONTAINER PADRÃO
========================= */


.container{

width:min(1200px,90%);

margin:0 auto;

}


/* =========================
SEÇÕES PADRÃO
========================= */


.section{

padding:100px 0;

}


.section-title{

font-family:'Montserrat', sans-serif;

font-weight:700;

font-size:clamp(30px,4vw,45px);

line-height:1.2;

color:#0A1A2F;

}


.section-sub{

font-size:18px;

line-height:1.8;

color:#555555;

max-width:850px;

}


/* =========================
TIPOGRAFIA GLOBAL
========================= */

h1,
h2,
h3,
h4{

font-family:'Montserrat', sans-serif;

margin-top:0;

}


p{

font-family:'Inter', sans-serif;

}

/* =========================
TAG PADRÃO
========================= */


.tag{

display:inline-flex;

align-items:center;

padding:8px 18px;

border-radius:50px;

background:#EAF8FF;

color:#00C2FF;

font-size:13px;

font-weight:700;

letter-spacing:.5px;

text-transform:uppercase;

}

/* =========================
BOTÕES GLOBAIS
========================= */


.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 32px;

border-radius:50px;

font-family:'Montserrat',sans-serif;

font-weight:600;

font-size:15px;

transition:.3s ease;

cursor:pointer;

}


.btn-primary{

background:#00C2FF;

color:#0A1A2F;

}


.btn-primary:hover{

transform:translateY(-3px);

box-shadow:

0 15px 35px rgba(0,194,255,.35);

}

.btn-outline{

border:2px solid #0A1A2F;

color:#0A1A2F;

background:transparent;

}


.btn-outline:hover{

background:#0A1A2F;

color:#FFFFFF;

transform:translateY(-3px);

}


/* =========================
HEADER GLOBAL
========================= */


.header{

position:relative;

width:100%;

background:#FFFFFF;

z-index:1000;

}


.nav{

height:90px;

display:flex;

align-items:center;

justify-content:space-between;

gap:40px;

}


.logo{

font-family:'Montserrat',sans-serif;

font-size:30px;

font-weight:800;

color:#0A1A2F;

}


.logo span{

color:#00C2FF;

}

.menu ul{

display:flex;

align-items:center;

gap:35px;

}


.menu a{

font-size:15px;

font-weight:500;

color:#333;

transition:.3s;

}

.menu a:hover,
.menu a.active{

color:#00C2FF;

}

/* =========================
GRID PADRÃO
========================= */


.grid-2{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:60px;

}


.grid-3{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}


/* =========================
CARDS PADRÃO
========================= */


.card{

background:#FFFFFF;

border-radius:24px;

padding:35px;

box-shadow:

0 15px 40px rgba(10,26,47,.08);

transition:.3s ease;

}


.card:hover{

transform:translateY(-8px);

box-shadow:

0 25px 60px rgba(10,26,47,.12);

}


/* =========================
RESPONSIVIDADE TABLET
========================= */


@media(max-width:992px){



.nav{

height:auto;

padding:25px 0;

}



.hero-grid,
.grid-2{

grid-template-columns:1fr;

}



.grid-3{

grid-template-columns:repeat(2,1fr);

}



.menu ul{

gap:20px;

}



}

/* =========================
RESPONSIVIDADE MOBILE
========================= */


@media(max-width:600px){



.container{

width:90%;

}



.section{

padding:60px 0;

}



.nav{

flex-direction:column;

gap:25px;

}



.menu ul{

flex-wrap:wrap;

justify-content:center;

gap:15px;

}



.logo{

font-size:26px;

}



h1{

font-size:34px!important;

}



h2{

font-size:28px!important;

}



p{

font-size:16px;

}



.grid-3{

grid-template-columns:1fr;

}



.btn{

width:100%;

}



.hero-buttons{

flex-direction:column;

width:100%;

}



}


/* ==========================================================
HOME PAGE FINAL ADJUSTMENTS
========================================================== */


.home-hero{

padding:120px 0;

}



.home-hero .hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:70px;

}



.home-hero h1{

font-family:Montserrat;

font-size:clamp(38px,5vw,60px);

line-height:1.15;

color:#0A1A2F;

}




.home-hero p{

font-size:18px;

line-height:1.8;

color:#555;

max-width:600px;

}




.home-visual img{

max-width:100%;

}




.services-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}




.benefits-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}





.home-cta{

background:#0A1A2F;

padding:90px 0;

text-align:center;

}



.home-cta h2{

color:#FFFFFF;

}



.home-cta p{

color:#FFFFFF;

opacity:.85;

}





@media(max-width:992px){


.home-hero .hero-grid{

grid-template-columns:1fr;

text-align:center;

}


.home-hero p{

margin:auto;

}



.services-grid{

grid-template-columns:repeat(2,1fr);

}



.benefits-grid{

grid-template-columns:repeat(2,1fr);

}


}




@media(max-width:600px){


.home-hero{

padding:70px 0;

}



.services-grid,
.benefits-grid{

grid-template-columns:1fr;

}



.home-hero h1{

font-size:34px;

}



}


/* ==========================================================
SOBRE - NOSSA HISTÓRIA RESPONSIVA
========================================================== */


.history-section{

padding:100px 0;

background:#F7F9FC;

}



.history-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:70px;

}




.history-image{

display:flex;

justify-content:center;

}



.history-image img{

width:100%;

max-width:500px;

border-radius:30px;

}





.history-content h2{

font-family:Montserrat;

font-size:clamp(30px,4vw,45px);

color:#0A1A2F;

margin-bottom:25px;

}



.history-content p{

font-size:17px;

line-height:1.8;

color:#555;

margin-bottom:20px;

}







/* Linha do tempo */

.history-timeline{

margin-top:40px;

}



.history-item{

display:flex;

gap:20px;

margin-bottom:25px;

}



.history-number{

min-width:45px;

height:45px;

border-radius:50%;

background:#00C2FF;

color:#0A1A2F;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

}



.history-item p{

margin:0;

}







@media(max-width:992px){



.history-grid{

grid-template-columns:1fr;

text-align:center;

}



.history-content p{

max-width:700px;

margin-left:auto;

margin-right:auto;

}



.history-item{

justify-content:center;

text-align:left;

}



}





@media(max-width:600px){



.history-section{

padding:60px 0;

}



.history-image img{

border-radius:20px;

}



.history-item{

gap:15px;

}



.history-number{

min-width:38px;

height:38px;

}

}


/* ==========================================================
SOLUÇÕES - PADRONIZAÇÃO FINAL
========================================================== */


.solutions-hero{

padding:120px 0;

}



.solutions-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:60px;

}





.solution-card{

background:#FFFFFF;

border-radius:25px;

padding:40px 35px;

box-shadow:

0 15px 40px rgba(10,26,47,.08);

transition:.3s ease;

position:relative;

overflow:hidden;

}





.solution-card:hover{

transform:translateY(-10px);

box-shadow:

0 25px 60px rgba(10,26,47,.15);

}





.solution-icon{

width:65px;

height:65px;

border-radius:18px;

background:#EAF8FF;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

margin-bottom:25px;

}





.solution-card h3{

font-family:Montserrat;

font-size:24px;

color:#0A1A2F;

margin-bottom:20px;

}



.solution-card p{

font-size:16px;

line-height:1.8;

color:#555;

}




.solution-list{

margin-top:25px;

}



.solution-list li{

margin-bottom:12px;

padding-left:20px;

position:relative;

color:#444;

}



.solution-list li::before{

content:"✓";

position:absolute;

left:0;

color:#00C2FF;

font-weight:bold;

}







/* Destaque */

.solution-card.featured{

background:#0A1A2F;

}



.solution-card.featured h3{

color:#FFFFFF;

}



.solution-card.featured p{

color:#FFFFFF;

opacity:.85;

}



.solution-card.featured .solution-list li{

color:#FFFFFF;

}







@media(max-width:992px){


.solutions-grid{

grid-template-columns:repeat(2,1fr);

}



}





@media(max-width:600px){


.solutions-hero{

padding:70px 0;

}



.solutions-grid{

grid-template-columns:1fr;

}



.solution-card{

padding:30px;

}



}


/* ==========================================================
CASES - FINAL RESPONSIVE REVIEW
========================================================== */


.case-detail{

overflow:hidden;

}



.case-grid,
.solution-grid,
.tech-grid,
.skills-grid,
.metrics-grid{

width:100%;

}



.case-box,
.solution-item,
.tech-card,
.skill-card,
.metric-card{

height:100%;

}





.technology-tags{

display:flex;

flex-wrap:wrap;

gap:12px;

}



.technology-tags span{

white-space:normal;

text-align:center;

}




@media(max-width:600px){


.case-header{

padding:0 10px;

}



.case-header h2{

font-size:28px!important;

}



.case-deliveries{

padding:25px!important;

}



.case-deliveries li{

font-size:15px;

}



.technology-tags{

justify-content:center;

}



}

/* ==========================================================
CONTATO - FINAL RESPONSIVE
========================================================== */


.contact-section{

padding:100px 0;

background:#F7F9FC;

}




.contact-grid{

display:grid;

grid-template-columns:1fr 1.2fr;

gap:60px;

align-items:start;

}





.contact-info h1{

font-family:Montserrat;

font-size:clamp(35px,5vw,55px);

color:#0A1A2F;

margin-bottom:25px;

}




.contact-info p{

font-size:18px;

line-height:1.8;

color:#555;

}






.contact-card{

background:#FFFFFF;

padding:40px;

border-radius:25px;

box-shadow:

0 15px 40px rgba(10,26,47,.08);

}





.form-group{

margin-bottom:20px;

}



.form-group label{

display:block;

font-weight:600;

margin-bottom:8px;

color:#0A1A2F;

}



.form-group input,
.form-group textarea{

width:100%;

padding:15px 18px;

border-radius:12px;

border:1px solid #E6E6E6;

font-family:Inter;

font-size:15px;

outline:none;

transition:.3s;

}



.form-group input:focus,
.form-group textarea:focus{

border-color:#00C2FF;

}





.form-group textarea{

min-height:150px;

resize:none;

}






.contact-submit{

margin-top:20px;

}






@media(max-width:992px){


.contact-grid{

grid-template-columns:1fr;

}



}




@media(max-width:600px){


.contact-section{

padding:60px 0;

}



.contact-card{

padding:25px;

}



.contact-submit .btn{

width:100%;

}



}