:root{
--bg: #333333; 
--panel: #3b3f42; 
--text: #F2F3F4; 
--muted: #bfc6c9; 
--accent: #2C9AB7; 
--max-width: 960px;
}


.quicksand-300 {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 3000;
  font-style: normal;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
background:var(--bg);
color:var(--text);
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height:1.4;
}


.container{
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:32px 20px;
}


.hero{
text-align:center;
max-width:var(--max-width);
width:100%;
padding:24px;
border-radius:12px;
background:transparent; /* mantém o fundo limpo */
}


.logo{
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 20px auto;
width:100%;
max-width:520px; /* limite para desktop */
}


.logo svg, .logo img{
width:100%;
height:auto;
max-width:520px; /* desktop */
border-radius:8px;
}


.slogan{
margin:0 auto;
font-size:1.8rem;
max-width:760px;
color:var(--text);
font-weight:520;
}


.footer{
margin-top:40px;
width:100%;
text-align:center;
color:var(--muted);
font-size:0.95rem;
}


.contact a{ color:var(--muted); text-decoration:none }
.contact a:hover{ text-decoration:underline }


/* Responsividade */
@media (max-width:480px){
:root{ --max-width:420px }
.logo{ max-width:160px }
.logo svg, .logo img{ max-width:160px }
.slogan{ font-size:0.98rem; padding:0 12px }
.container{ padding:20px }
}