:root{
--primary:#1a73e8;
--background:#f8f9fa;
--surface:#ffffff;
--text:#202124;
--secondary:#5f6368;
--border:#dadce0;
}

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

body{
font-family:Roboto,Arial,sans-serif;
background:var(--background);
color:var(--text);
line-height:1.7;
}

header{
background:#fff;
border-bottom:1px solid var(--border);
}

.container{
width:min(1120px,92%);
margin:auto;
}

.logo{
font-size:1.5rem;
font-weight:500;
color:var(--primary);
}

.hero{
align-items:center;
}

.hero h1{
font-size:3rem;
font-weight:400;
}

.hero p{
font-size:1.1rem;
color:var(--secondary);
}

.button{
display:inline-block;
padding:14px 30px;
background:var(--primary);
color:#fff;
border-radius:999px;
text-decoration:none;
font-weight:500;
transition:.2s;
}

.button:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(26,115,232,.25);
}

.mockup{
background: darkslategray;
border:1px solid var(--border);
border-radius:18px;
padding:30px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
margin: 8px 0 8px 0;
}

.browser{
height:22px;
display:flex;
gap:8px;
margin-bottom:25px;
}

.browser span{
width:12px;
height:12px;
border-radius:50%;
background:#dadce0;
}

.element{
background:#e8f0fe;
padding:18px;
border-left:5px solid var(--primary);
border-radius:8px;
font-family:monospace;
margin-bottom:15px;
}

section{
padding:80px 0;
}

.title{
text-align:center;
margin-bottom:60px;
}

.title h2{
font-size:2rem;
font-weight:400;
margin-bottom:12px;
}

.title p{
color:var(--secondary);
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
}

.card{
background:white;
border:1px solid var(--border);
border-radius:16px;
padding:28px;
transition:.25s;
}

.card:hover{
transform:translateY(-6px);
box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.card h3{
margin-bottom:15px;
color:var(--primary);
font-weight:500;
}

.card p{
color:var(--secondary);
}

.highlight{
background:#fff;
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
}

.features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:35px;
}

.feature{
display:flex;
gap:18px;
}

.icon{
width:54px;
height:54px;
border-radius:50%;
background:#e8f0fe;
display:flex;
align-items:center;
justify-content:center;
font-size:1.4rem;
}

footer{
background:#fff;
border-top:1px solid var(--border);
padding:40px 0;
text-align:center;
color:var(--secondary);
margin-top:60px;
}

@media(max-width:900px){

.hero{
grid-template-columns:1fr;
text-align:center;
}

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

}
#inspetor-visual-popup-site-site {
    width: fit-content;
    height: fit-content;
    background-color: rgba(191, 249, 255, .93);
    border: solid 1px rgb(14, 8, 95);
    position: fixed;
    z-index: 9999;
    min-width: 100px;
    padding: 14px;
    color: rgb(14, 8, 95);
    font-size: 12px;
}