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

:root{

--azul:#0A4BFF;
--azulEscuro:#061C46;
--cinza:#F5F7FB;
--texto:#111827;
--borda:#E5E7EB;

}

body{

font-family:'Poppins',sans-serif;
background:var(--cinza);
color:var(--texto);

}

.container{

max-width:1400px;
margin:auto;
padding:0 25px;

}

/* HEADER */

.header{

background:#fff;
height:90px;
display:flex;
align-items:center;
box-shadow:0 4px 30px rgba(0,0,0,.05);

}

.nav{

display:flex;
justify-content:space-between;
align-items:center;

}

.logo img{

height:70px;

}

.menu{

display:flex;
list-style:none;
gap:30px;

}

.menu li a{

text-decoration:none;
font-weight:600;
font-size:14px;
color:#111827;

}

.buttons{

display:flex;
gap:15px;

}

.btn-login{

padding:12px 22px;
border:1px solid #dbe4ff;
border-radius:14px;
text-decoration:none;
color:#111827;
font-weight:600;

}

.btn-primary{

background:var(--azul);
padding:14px 26px;
border-radius:14px;
color:#fff;
text-decoration:none;
font-weight:700;

}

/* HERO */

.hero{

position:relative;
height:720px;
overflow:hidden;

}

.hero-image{

position:absolute;
width:100%;
height:100%;
object-fit:cover;

}

.hero-overlay{

position:absolute;
inset:0;

background:
linear-gradient(
90deg,
rgba(6,28,70,.95) 0%,
rgba(6,28,70,.80) 45%,
rgba(6,28,70,.25) 100%
);

}

.hero-content{

position:relative;
z-index:2;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
color:white;

}

.hero-content h1{

font-size:74px;
line-height:1;
max-width:650px;
margin-bottom:25px;
font-weight:800;

}

.hero-content span{

color:#8ec7ff;

}

.hero-content p{

font-size:20px;
max-width:650px;
line-height:1.8;

}

.hero-features{

display:flex;
gap:25px;
margin-top:35px;
flex-wrap:wrap;

}

.feature{

display:flex;
align-items:center;
gap:12px;

background:rgba(255,255,255,.08);
padding:12px 18px;
border-radius:14px;

}

.feature img{

width:24px;

}

.history-card{

position:absolute;
right:0;
bottom:120px;

background:#fff;
color:#111827;

padding:35px;

border-radius:28px;

width:260px;

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

}

.history-card strong{

display:block;
font-size:38px;
color:var(--azul);

}

/* CLÁSSICAS */

.classica{

margin-top:-70px;
position:relative;
z-index:5;

}

.classica-box{

background:#0A4BFF;
border-radius:28px;

padding:35px;

display:flex;
justify-content:space-between;
align-items:center;

color:white;

}

.classica-box .left{

display:flex;
align-items:center;
gap:20px;

}

.classica-box img{

width:60px;

}

/* GRID PRINCIPAL */

.cards-principais{

padding:60px 0;

}

.cards-grid{

display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:25px;

}

.card{

background:white;
border-radius:24px;
padding:30px;
box-shadow:0 8px 35px rgba(0,0,0,.05);

}

.card h3{

margin-bottom:25px;
font-size:20px;

}

/* SEGUNDA LINHA */

.cards-secundarios{

padding:20px 0 60px;

}

.cards-grid-2{

display:grid;
grid-template-columns:1.2fr .8fr;
gap:25px;

}

.card-large{

background:white;
border-radius:24px;
padding:30px;
box-shadow:0 8px 35px rgba(0,0,0,.05);

}

/* CTA */

.cta{

padding:80px 0;

}

.cta-box{

background:#0A4BFF;

border-radius:32px;

padding:60px;

display:flex;
justify-content:space-between;
align-items:center;

color:white;

}

.cta h2{

font-size:54px;

}

/* CRIADOR */

.criador{

padding:100px 0;

}

.criador-box{

display:grid;
grid-template-columns:420px 1fr;
gap:60px;
align-items:center;

}

.criador-foto{

width:100%;
border-radius:28px;

}

.criador-info span{

color:var(--azul);
font-weight:700;
letter-spacing:2px;

}

.criador-info h2{

font-size:54px;
line-height:1.1;
margin:20px 0;

}

.criador-info p{

line-height:2;
font-size:18px;

}

.assinatura{

margin-top:30px;

}

.assinatura img{

width:220px;

}

/* FOOTER */

footer{

background:#061C46;
color:white;
padding:80px 0;

}

.footer-grid{

display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:40px;

}

.footer-logo{

height:70px;
margin-bottom:20px;

}

footer ul{

list-style:none;

}

footer li{

margin-bottom:12px;

}

/* RESPONSIVO */

@media(max-width:1100px){

.cards-grid{

grid-template-columns:1fr;

}

.cards-grid-2{

grid-template-columns:1fr;

}

.criador-box{

grid-template-columns:1fr;

}

.history-card{

display:none;

}

.hero-content h1{

font-size:52px;

}

}

@media(max-width:768px){

.menu{

display:none;

}

.hero{

height:auto;
padding:120px 0;

}

.hero-content h1{

font-size:42px;

}

.classica-box{

flex-direction:column;
gap:25px;

}

.cta-box{

flex-direction:column;
gap:30px;

}

}