/* ==========================================================
   PÁGINA DE CONSULTORIA DE TECNOLOGIA
   InovaTech Flow
========================================================== */


/* ==========================================================
   HERO
========================================================== */


.hero{

    padding:170px 0 120px;

    background:

    radial-gradient(
        circle at 85% 20%,
        rgba(4,97,203,.22),
        transparent 35%
    ),

    linear-gradient(
        135deg,
        #000b22,
        #001b45
    );

    overflow:hidden;

}



.hero-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:80px;

    align-items:center;

}



.hero-text{

    position:relative;

    z-index:2;

}



.tag{

    display:inline-flex;

    align-items:center;

    background:

    rgba(4,97,203,.15);


    color:#4da3ff;


    padding:9px 20px;


    border-radius:30px;


    border:1px solid rgba(77,163,255,.25);


    margin-bottom:25px;


    font-weight:600;


    letter-spacing:.4px;

}



.hero h1{

    color:#fff;

    font-size:3.6rem;

    line-height:1.15;

    letter-spacing:-1px;

    margin-bottom:28px;

}



.hero p{

    color:#c8d5e8;

    font-size:1.12rem;

    line-height:1.9;

    max-width:600px;

    margin-bottom:45px;

}



.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}



/* BOTÕES */


.btn-primary{

    padding:16px 38px;

    background:

    linear-gradient(
        135deg,
        #0461cb,
        #1a82ff
    );


    color:#fff;

    border-radius:10px;


    text-decoration:none;


    font-weight:600;


    box-shadow:

    0 12px 30px rgba(4,97,203,.35);


    transition:.35s;

}



.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:

    0 18px 40px rgba(4,97,203,.45);

}




.btn-secondary{

    padding:16px 38px;

    border-radius:10px;


    border:

    1px solid rgba(255,255,255,.25);


    background:

    rgba(255,255,255,.04);


    color:#fff;


    text-decoration:none;


    font-weight:600;


    transition:.35s;

}



.btn-secondary:hover{

    background:#fff;

    color:#001338;

}





/* ==========================================================
   IMAGEM HERO
========================================================== */


.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}



.hero-image::before{

    content:"";

    position:absolute;


    width:400px;


    height:400px;


    background:#0461cb;


    opacity:.18;


    filter:blur(100px);


    border-radius:50%;


}



.hero-image img{

    position:relative;

    z-index:1;


    width:100%;


    max-width:520px;


    border-radius:30px;


    border:

    1px solid rgba(77,163,255,.25);



    box-shadow:


    0 35px 90px rgba(0,0,0,.55),


    0 0 60px rgba(4,97,203,.25);



    animation:

    floatConsult 6s ease-in-out infinite;


    transition:.4s;

}



.hero-image img:hover{

    transform:

    translateY(-8px)
    scale(1.02);

}



@keyframes floatConsult{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-14px);

    }


}





/* ==========================================================
   SEÇÕES
========================================================== */


section{

    padding:110px 0;

}



.section-title{

    text-align:center;

    margin-bottom:75px;

}



.section-title span{

    color:#4da3ff;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    font-size:.85rem;

}



.section-title h2{

    color:#fff;

    font-size:2.6rem;

    margin:20px 0;

    letter-spacing:-.5px;

}



.section-title p{

    max-width:720px;

    margin:auto;

    color:#b7c4d8;

    line-height:1.8;

}

/* ==========================================================
   BENEFÍCIOS
========================================================== */


.benefits{

    background:

    linear-gradient(
        180deg,
        #001338,
        #000d24
    );

}



.cards{

    display:grid;

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

    gap:30px;

}



.card{

    position:relative;


    background:

    linear-gradient(
        160deg,
        #071b3d,
        #041126
    );


    padding:38px 32px;


    border-radius:22px;


    border:

    1px solid rgba(255,255,255,.08);


    overflow:hidden;


    transition:.4s;


}



.card::after{

    content:"";


    position:absolute;


    width:160px;


    height:160px;


    right:-60px;


    top:-60px;


    background:#0461cb;


    opacity:.12;


    filter:blur(50px);


    border-radius:50%;


}



.card:hover{

    transform:translateY(-12px);


    border-color:

    rgba(4,97,203,.7);



    box-shadow:

    0 25px 55px rgba(0,0,0,.35);

}




.card-icon{

    width:68px;


    height:68px;


    display:flex;


    align-items:center;


    justify-content:center;


    margin-bottom:28px;


    border-radius:18px;



    background:

    linear-gradient(
        135deg,
        #0461cb,
        #1a82ff
    );


    color:white;


    font-size:30px;


    box-shadow:

    0 12px 30px rgba(4,97,203,.35);

}




.card h3{

    color:#fff;


    font-size:1.2rem;


    margin-bottom:16px;


}



.card p{

    color:#b7c4d8;


    line-height:1.8;


    font-size:.95rem;

}





/* ==========================================================
   SERVIÇOS
========================================================== */


.services{

    background:#06152f;

}



.service-grid{

    display:grid;

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

    gap:28px;

}



.service-box{

    position:relative;


    background:

    #071a36;


    padding:40px;


    border-radius:16px;


    border:

    1px solid rgba(255,255,255,.07);


    overflow:hidden;


    transition:.35s;

}



.service-box::before{

    content:"";


    position:absolute;


    left:0;


    top:0;


    width:3px;


    height:100%;


    background:

    linear-gradient(
        180deg,
        #0461cb,
        #1a82ff
    );


}



.service-box:hover{

    transform:translateY(-8px);


    border-color:

    rgba(4,97,203,.6);


    box-shadow:

    0 20px 45px rgba(0,0,0,.3);

}



.service-box h3{

    color:#fff;


    margin-bottom:18px;


    font-size:1.2rem;

}



.service-box p{

    color:#b8c5d8;


    line-height:1.8;

}





/* ==========================================================
   PROCESSO CONSULTORIA
========================================================== */


.process{

    position:relative;

    background:

    radial-gradient(
        circle at top,
        rgba(4,97,203,.25),
        transparent 45%
    ),

    linear-gradient(
        180deg,
        #000d24,
        #001338
    );

    overflow:hidden;

}



/* linha de conexão */

.timeline{

    position:relative;

    display:grid;

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

    gap:30px;

}



.timeline::before{

    content:"";


    position:absolute;


    top:31px;


    left:8%;


    right:8%;


    height:2px;


    background:

    linear-gradient(
        90deg,
        transparent,
        #0461cb,
        #1a82ff,
        transparent
    );


    opacity:.5;


}





.step{

    position:relative;


    background:

    linear-gradient(
        160deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.03)
    );



    border:

    1px solid rgba(77,163,255,.18);



    padding:45px 28px 35px;


    border-radius:24px;


    text-align:center;


    backdrop-filter:blur(10px);


    transition:.4s;



}



/* brilho interno */

.step::before{

    content:"";


    position:absolute;


    width:120px;


    height:120px;


    top:-60px;


    left:50%;


    transform:translateX(-50%);


    background:#0461cb;


    opacity:.15;


    filter:blur(45px);


    border-radius:50%;


}




.step:hover{

    transform:

    translateY(-12px);


    border-color:

    rgba(26,130,255,.8);



    box-shadow:


    0 25px 60px rgba(0,0,0,.35),


    0 0 35px rgba(4,97,203,.25);



}





.step span{


    position:relative;


    z-index:2;


    width:64px;


    height:64px;


    display:flex;


    align-items:center;


    justify-content:center;


    margin:

    -75px auto 30px;



    border-radius:50%;



    background:


    linear-gradient(
        135deg,
        #0461cb,
        #1a82ff
    );



    border:

    4px solid #001338;



    color:#fff;


    font-size:1.35rem;


    font-weight:700;



    box-shadow:


    0 10px 30px rgba(4,97,203,.45);



}



.step h3{

    color:#fff;


    font-size:1.15rem;


    margin-bottom:15px;


}



.step p{

    color:#b7c8df;


    line-height:1.8;


    font-size:.95rem;


}





/* animação leve */

.step:hover span{


    box-shadow:

    0 0 35px rgba(26,130,255,.8);


}

/* ==========================================================
   FAQ
========================================================== */


.faq{

    background:#06152f;

}



.faq-item{

    background:

    #071a36;


    border-radius:18px;


    padding:32px;


    margin-bottom:22px;


    border:

    1px solid rgba(255,255,255,.07);


    transition:.3s;

}



.faq-item:hover{

    border-color:#0461cb;


    transform:translateX(5px);

}



.faq-item h3{

    color:#fff;


    margin-bottom:15px;

}



.faq-item p{

    color:#b7c4d8;


    line-height:1.8;

}





/* ==========================================================
   CTA
========================================================== */


.cta{

    text-align:center;


    background:


    radial-gradient(
        circle at center,
        rgba(4,97,203,.35),
        transparent 40%
    ),


    linear-gradient(
        135deg,
        #001338,
        #00091b
    );

}



.cta h2{


    font-size:2.8rem;


    max-width:850px;


    margin:

    0 auto 25px;

}



.cta p{

    max-width:700px;


    margin:

    0 auto 40px;


    color:#c4d0e3;


    line-height:1.8;

}





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


.card,
.service-box,
.step,
.faq-item{

    animation:

    fadeConsult .8s ease both;

}



@keyframes fadeConsult{


from{

    opacity:0;

    transform:translateY(35px);

}



to{

    opacity:1;

    transform:translateY(0);

}


}





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


@media(max-width:1100px){


.hero-grid{

    grid-template-columns:1fr;

    text-align:center;

}



.hero p{

    margin-left:auto;

    margin-right:auto;

}



.hero-image{

    order:-1;

}



.cards{

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

}



.service-grid{

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

}



.timeline{

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

}



.hero-buttons{

    justify-content:center;

}

.cta h2{
    font-size: 1rem;
}

}





@media(max-width:768px){


section{

    padding:75px 0;

}



.hero{

    padding:120px 0 80px;

}



.hero h1{

    font-size:2.35rem;

}



.section-title h2{

    font-size:2rem;

}



.cards,
.service-grid,
.timeline{

    grid-template-columns:1fr;

}



.cta.container h2{

    font-size:1rem;
    color: pink;

}



}





@media(max-width:480px){



.hero h1{

    font-size:2rem;

}



.btn-primary,
.btn-secondary{

    width:100%;

    text-align:center;

}



.card,
.service-box,
.step{

    padding:30px 22px;

}


}