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

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

html{

scroll-behavior:smooth;

}

body{

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

background:#f4f7fb;

color:#10233d;

line-height:1.7;

}

img{

display:block;
width:100%;

}

a{

text-decoration:none;

color:inherit;

}

.container{

width:min(1200px,92%);

margin:auto;

}

.pequeno{

max-width:700px;

text-align:center;

}

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

header{

position:fixed;

top:0;

left:0;

right:0;

z-index:999;

background:rgba(8,28,58,.94);

backdrop-filter:blur(12px);

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

padding:22px 0;

}

.logo{

font-size:30px;

font-weight:800;

letter-spacing:1px;

color:white;

}

.logo span{

color:#35c78a;

}

nav{

display:flex;

align-items:center;

gap:34px;

}

nav a{

color:white;

font-weight:600;

transition:.3s;

}

nav a:hover{

color:#35c78a;

}

.btn-menu{

background:#35c78a;

padding:12px 22px;

border-radius:8px;

}

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

.hero{

padding:170px 0 110px;

background:

linear-gradient(rgba(5,18,36,.82),rgba(5,18,36,.82)),

url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1800")

center/cover;

color:white;

}

.hero-grid{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:70px;

align-items:center;

justify-items:center;

}

.hero-texto{

max-width:650px;

}

.tag{

display:inline-block;

padding:10px 20px;

border-radius:40px;

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

margin-bottom:25px;

font-size:13px;

letter-spacing:1px;

text-transform:uppercase;

}

.hero h1{

font-size:64px;

font-weight:800;

line-height:1.1;

margin-bottom:25px;

}

.hero p{

font-size:21px;

max-width:640px;

opacity:.9;

margin-bottom:40px;

}

.hero-botoes{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.btn-verde{

background:#35c78a;

padding:18px 34px;

border-radius:10px;

font-weight:700;

color:white;

transition:.3s;

}

.btn-verde:hover{

transform:translateY(-4px);

}

.btn-branco{

padding:18px 34px;

border:2px solid white;

border-radius:10px;

font-weight:700;

color:white;

transition:.3s;

}

.btn-branco:hover{

background:white;

color:#081c3a;

}
/* ===========================
CARD HERO
=========================== */

.hero-card{

background:white;

border-radius:20px;

padding:40px;

box-shadow:0 25px 60px rgba(0,0,0,.25);

color:#10233d;

}

.hero-card h2{

font-size:30px;

margin-bottom:30px;

color:#081c3a;

}

.hero-card ul{

list-style:none;

}

.hero-card li{

display:flex;

align-items:center;

gap:16px;

padding:16px 0;

border-bottom:1px solid #ececec;

font-weight:600;

}

.hero-card li:last-child{

border:none;

}

.hero-card svg{

width:22px;

height:22px;

color:#35c78a;

flex-shrink:0;

}

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

.secao{

padding:100px 0;

}

.branco{

background:white;

}

.azul{

background:#081c3a;

color:white;

}

.titulo{

font-size:46px;

font-weight:800;

margin-bottom:20px;

color:#081c3a;

}

.titulo.branco{

color:white;

}

.subtitulo{

font-size:19px;

color:#666;

max-width:760px;

margin-bottom:55px;

}

.azul .subtitulo{

color:#d8d8d8;

}

/* ===========================
GRID CIDADES
=========================== */

.grid-cidades{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.cidade{

background:white;

border-radius:18px;

overflow:hidden;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.35s;

}

.cidade:hover{

transform:translateY(-8px);

}

.cidade img{

height:240px;

object-fit:cover;

}

.cidade-info{

padding:30px;

}

.cidade-info h3{

font-size:28px;

margin-bottom:15px;

color:#081c3a;

}

.cidade-info p{

color:#666;

margin-bottom:20px;

}

.cidade-info a{

color:#35c78a;

font-weight:700;

}

/* ===========================
ARTIGOS
=========================== */

.grid-artigos{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:35px;

}

.artigo{

background:white;

border-radius:18px;

overflow:hidden;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.35s;

}

.artigo:hover{

transform:translateY(-8px);

}

.artigo img{

height:220px;

object-fit:cover;

}

.artigo div{

padding:30px;

}

.artigo span{

display:inline-block;

background:#35c78a;

color:white;

padding:8px 16px;

border-radius:30px;

font-size:13px;

margin-bottom:18px;

}

.artigo h3{

font-size:28px;

margin-bottom:15px;

color:#081c3a;

}

.artigo p{

color:#666;

}
/* ===========================
FERRAMENTAS
=========================== */

.grid-ferramentas{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

gap:35px;

}

.ferramenta{

background:rgba(255,255,255,.08);

padding:45px;

border-radius:20px;

transition:.35s;

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

}

.ferramenta:hover{

transform:translateY(-8px);

background:rgba(255,255,255,.12);

}

.ferramenta h3{

font-size:32px;

margin-bottom:18px;

}

.ferramenta p{

color:#d9d9d9;

margin-bottom:30px;

}

.botao{

display:inline-block;

background:#35c78a;

color:white;

padding:16px 30px;

border-radius:10px;

font-weight:700;

transition:.3s;

}

.botao:hover{

transform:translateY(-3px);

}

.inteligencia{

padding:90px 0;

background:#f5f7fb;

}

.inteligencia-topo{

text-align:center;

margin-bottom:50px;

}

.grid-indicadores{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:22px;

}

.indicador{

background:#fff;

padding:28px;

border-radius:18px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

text-align:center;

transition:.3s;

}

.indicador:hover{

transform:translateY(-6px);

}

.indicador h4{

margin-bottom:12px;

font-size:15px;

letter-spacing:1px;

color:#6b7280;

}

.indicador span{

font-size:30px;

font-weight:700;

color:#0d3b66;

}

.destaque{

grid-column:span 2;

background:#0d3b66;

color:#fff;

}

.destaque h3{

margin-bottom:20px;

}

#impostometro{

font-size:38px;

font-weight:800;

margin:20px 0;

color:#4ade80;

}

.destaque small{

opacity:.8;

}

/* ===========================
NEWSLETTER
=========================== */

.newsletter{

padding:110px 0;

background:#eef3f8;

}

.newsletter h2{

font-size:42px;

margin-bottom:15px;

color:#081c3a;

}

.newsletter p{

font-size:18px;

color:#666;

margin-bottom:35px;

}

.newsletter input{

width:100%;

padding:18px;

margin-bottom:18px;

border:1px solid #d8d8d8;

border-radius:10px;

font-size:16px;

}

.newsletter button{

width:100%;

padding:18px;

background:#35c78a;

border:none;

border-radius:10px;

color:white;

font-size:17px;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.newsletter button:hover{

background:#2fb078;

}

/* ===========================
RODAPÉ
=========================== */

footer{

background:#081c3a;

color:white;

padding:70px 0;

}

.footer{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:60px;

}

.footer h3{

margin-bottom:18px;

font-size:28px;

}

.footer p{

color:#d5d5d5;

}

.footer div:last-child{

display:flex;

flex-direction:column;

gap:14px;

}

.footer a{

color:#d5d5d5;

transition:.3s;

}

.footer a:hover{

color:#35c78a;

}

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

@media(max-width:960px){

nav{

display:none;

}

.hero-grid{

grid-template-columns:1fr;

}

.hero h1{

font-size:42px;

}

.titulo{

font-size:34px;

}

.footer{

flex-direction:column;

}

.foto-perfil{

display:flex;

justify-content:center;

margin-bottom:30px;

}

.foto-perfil img{

width:190px;

height:190px;

object-fit:cover;

border-radius:50%;

border:6px solid rgba(255,255,255,.95);

box-shadow:0 20px 50px rgba(0,0,0,.35);

transition:.35s;

}

.foto-perfil img:hover{

transform:scale(1.05);

}

.hero-card{

margin-top:20px;

}

}