:root{
--primary:#03071E;
--secondary:#045084;
--accent:#93D6F3;
--white:#fff;
--light:#f5f7fa;
}

body{
font-family:'DM Sans',sans-serif;
background:var(--light);
padding-top:73px;
}


.hero{
background:linear-gradient(135deg,#03071E,#071f44);
padding:100px 0;
color:white;
overflow:hidden;
}

.hero h1{
font-size:3rem;
font-weight:800;
line-height:1.15;
margin-bottom:25px;
}

.hero p{
font-size:1.1rem;
color:#d9e8ff;
}

.badge-custom{
display:inline-block;
background:rgba(147,214,243,.15);
color:var(--accent);
padding:10px 20px;
border-radius:30px;
margin-bottom:25px;
}

.hero-image-wrapper{
border:2px solid #00d9ff;
border-radius:28px;
overflow:hidden;
box-shadow:
0 0 18px rgba(0,217,255,.45),
0 0 45px rgba(0,217,255,.18);
}

.hero-img{
display:block;
width:100%;
}


/* Botão CTA Geral */
.btn-cta-especialista {
  background-color: #054F77;
  color: #ffffff;
  border: 2px solid #054F77;
  font-family: 'Poppins', sans-serif;
  text-decoration: none;
}

.btn-cta-especialista:hover,
.btn-cta-especialista:focus {
  background-color: #043f5f;
  border-color: #043f5f;
  color: #ffffff;
}

.btn-primary-custom:active{
    transform: translateY(0);
}
.section-title{
font-size:2.7rem;
font-weight:800;
}

.section-subtitle{
max-width:800px;
margin:auto;
font-size:1.1rem;
color:#666;
}

.dark-section{
background:#071f44;
padding:90px 0;
}

.tech-box{
background:#0b315f;
padding:35px;
border-radius:22px;
text-align:center;
color:white;
height:100%;
transition:.3s;
}

.tech-box:hover{
transform:translateY(-8px);
}

.tech-box i{
font-size:3rem;
color:var(--accent);
margin-bottom:15px;
}

.pipeline{
background:#03071E;
padding:90px 0;
}

.pipeline-flow{
display:flex;
justify-content:center;
align-items:center;
gap:15px;
flex-wrap:wrap;
}

.step{
background:#0b315f;
padding:15px 24px;
border-radius:16px;
color:white;
font-weight:700;
}

.pipeline-flow i{
color:var(--accent);
font-size:1.4rem;
}

.mini-card{
background:white;
padding:35px;
border-radius:20px;
text-align:center;
height:100%;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.3s;
}

.mini-card:hover{
transform:translateY(-8px);
}

.mini-card i{
font-size:2.5rem;
color:var(--secondary);
margin-bottom:15px;
}


.cta-final-institucional{
    background: linear-gradient(180deg,#045084,#000);
    color:#fff;
    margin-bottom: 40px;
}

.cta-final-institucional h2{
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:2.3rem;
}

.cta-final-institucional p{
    max-width:720px;
    color:#d5e7f8;
    font-size:1.1rem;
}

/* BOTÃO NEON PADRÃO MWX */
.btn-cta-neon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:18px 42px;
    border-radius:999px;
    background:#d7dde0;
    color:#111827;
    border:3px solid #00E5FF;
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:1rem;
    text-transform:uppercase;
    letter-spacing:.5px;
    text-decoration:none;
    transition:all .35s ease;
    box-shadow:
        0 0 12px rgba(0,229,255,.65),
        0 0 28px rgba(0,229,255,.35);
}

.btn-cta-neon:hover{
    background:#eef6fa;
    color:#03071E;
    transform:translateY(-3px) scale(1.02);
    box-shadow:
        0 0 18px rgba(0,229,255,.85),
        0 0 40px rgba(0,229,255,.55);
}

.btn-cta-neon:active{
    transform:translateY(0);
}





@media(max-width:991px){

.hero{
text-align:center;
padding:70px 0;
}

.hero h1{
font-size:2.2rem;
}

.pipeline-flow{
gap:12px;
}

.step{
width:100%;
}

.pipeline-flow i{
display:none;
}

}


/* =========================================================
   BANNER DESKTOP
========================================================= */
.banner-estatico{
  width:100%;
  background-image:url("assets/banner - Fabricio-oficial.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  height:450px;
}

/* =========================================================
   BANNER MOBILE / TABLET
========================================================= */
@media(max-width:991.98px){
  .banner-estatico{
    background-image:url("assets/banner - Fabricio-oficial-mobile.png");
    height:0;
    padding-top:125%;
  }
}

/* =========================================================
   ANIMAÇÃO
========================================================= */
.banner-anim{
  opacity:0;
  transform:translateY(40px);
  transition:900ms;
}

.banner-anim.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   DESKTOP GRANDE
========================================================= */
@media(min-width:1400px) and (max-width:1599px){
  .banner-estatico{height:402px;}
}

@media(min-width:1600px){
  .banner-estatico{height:450px;}
}