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

body{
font-family:'Inter',sans-serif;
background:#fff;
color:#1d1d1d;
}

.container{
width:90%;
max-width:1180px;
margin:auto;
}

.hero{

background:
linear-gradient(rgba(7,25,74,.96),rgba(7,25,74,.96)),
url('../img/bg.jpg');

background-size:cover;
background-position:center;

padding:90px 0;

color:#fff;

}

.hero-grid{

display:grid;
grid-template-columns:1.1fr 1fr;
gap:70px;
align-items:center;

}

.tag{

display:inline-block;

font-size:12px;

letter-spacing:2px;

color:#FFC72C;

font-weight:700;

margin-bottom:18px;

text-transform:uppercase;

}

.hero h1{

font-size:64px;

line-height:1.05;

font-weight:800;

margin-bottom:28px;

max-width:620px;

}

.hero h1 span{

color:#FFC72C;

}

.hero p{

font-size:21px;

line-height:1.8;

opacity:.92;

max-width:560px;

margin-bottom:40px;

}

.btn{

display:inline-block;

background:#FFC72C;

color:#081B57;

padding:18px 36px;

border-radius:60px;

font-weight:800;

font-size:18px;

text-decoration:none;

transition:.25s;

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

}

.btn:hover{

transform:translateY(-3px);

}

.benefits{

margin-top:28px;

display:flex;

gap:30px;

flex-wrap:wrap;

font-size:15px;

opacity:.9;

}

.hero-image{

display:flex;

justify-content:center;

}

.hero-image img{

width:100%;

max-width:470px;

border-radius:30px;

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

}

.sobre{

padding:110px 0;

}

.sobre-grid{

display:grid;

grid-template-columns:420px 1fr;

gap:80px;

align-items:center;

}

.foto img{

width:100%;

border-radius:28px;

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

}

.sobre h2{

font-size:60px;

line-height:1.1;

color:#081B57;

margin-bottom:20px;

}

.sobre h2 span{

display:block;

font-size:44px;

color:#FFC72C;

margin-top:8px;

}

.sobre p{

font-size:19px;

line-height:1.9;

margin-bottom:24px;

color:#444;

}

.btn-blue{

background:#081B57;

color:#fff;

}

footer{

border-top:1px solid #ececec;

padding:35px;

text-align:center;

font-size:14px;

color:#777;

}

@media(max-width:900px){

.hero-grid,
.sobre-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero h1{

font-size:46px;

margin:auto auto 25px;

}

.hero p{

margin:0 auto 35px;

}

.hero-image{

margin-top:45px;

}

.benefits{

justify-content:center;

}

.sobre{

padding:70px 0;

}

.sobre h2{

font-size:42px;

}

.sobre h2 span{

font-size:30px;

}

}
/* ================= HERO NOVO ================= */

.hero{

position:relative;

overflow:hidden;

background:linear-gradient(135deg,#07184d 0%,#0b266f 100%);

padding:90px 0;

}

.overlay{

position:absolute;

inset:0;

background:radial-gradient(circle at 75% 35%,rgba(255,199,44,.12),transparent 35%);

pointer-events:none;

}

.hero-grid{

position:relative;

z-index:2;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:70px;

}

.hero-left{

max-width:560px;

}

.tag{

display:inline-block;

font-size:13px;

font-weight:700;

letter-spacing:2px;

color:#FFC72C;

margin-bottom:22px;

text-transform:uppercase;

}

.hero h1{

font-size:64px;

font-weight:800;

line-height:1.05;

color:#fff;

margin-bottom:26px;

}

.hero h1 span{

display:block;

color:#FFC72C;

}

.hero p{

font-size:20px;

line-height:1.8;

color:#dbe4ff;

margin-bottom:18px;

}

.hero-small{

font-size:18px;

opacity:.9;

margin-bottom:34px;

}

.hero .btn{

display:inline-block;

background:#FFC72C;

color:#07184d;

padding:18px 34px;

border-radius:50px;

font-weight:800;

font-size:17px;

text-decoration:none;

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

transition:.25s;

}

.hero .btn:hover{

transform:translateY(-3px);

}

.benefits{

display:flex;

gap:24px;

margin-top:26px;

color:#fff;

font-size:15px;

flex-wrap:wrap;

}

.hero-right{

display:flex;

justify-content:center;

}

.hero-card{

background:white;

padding:18px;

border-radius:28px;

box-shadow:0 35px 70px rgba(0,0,0,.30);

}

.hero-card img{

display:block;

width:430px;

max-width:100%;

border-radius:18px;

}

@media(max-width:900px){

.hero{

padding:60px 0;

}

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-left{

max-width:100%;

}

.hero h1{

font-size:44px;

}

.hero p{

font-size:18px;

}

.benefits{

justify-content:center;

}

.hero-right{

margin-top:40px;

}

.hero-card img{

width:100%;

}

}