/* Variáveis e reset básico */
:root{
  /* light theme */
  --bg: #f7f8fb;
  --surface: #ffffff;
  --card: var(--surface);
  --text: #111827;
  --muted: #6b7280;
  --accent: #0b61ff; /* azul mais forte */
  --max-width:1100px;
  --radius:10px;
  --gap:1.25rem;
}

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

.container{
  width:calc(100% - 2rem);
  max-width:var(--max-width);
  margin:0 auto;
}

.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}

.logo{height:56px;display:block}

/* logo used as page title inside the hero */
.logo-title{display:block;max-width:460px;width:40vw;height:auto;margin:0 auto;filter:drop-shadow(0 14px 30px rgba(2,6,23,0.12));}
.hero .logo-title{margin-left:0}
.brand{font-weight:700;font-size:1.25rem;color:var(--accent);text-decoration:none}

.nav ul{list-style:none;display:flex;gap:1rem}
.nav a{text-decoration:none;color:var(--muted);padding:0.25rem 0;transition:color .15s}
.nav a:hover{color:var(--accent)}

.site-header{background:transparent;padding:0.5rem 0}

/* Top banner (full-width) */
.top-banner{width:100%;overflow:hidden;background:var(--surface);display:flex;align-items:center;justify-content:center}
.top-banner-img{
  display:block;
  width:100%;
  height:160px;
  object-fit:contain; /* show the full logo without cropping */
  object-position:center;
  background:transparent;
}

@media (max-width:900px){
  .top-banner-img{height:110px}
}
@media (max-width:640px){
  .top-banner-img{height:84px}
}

/* Hero */
.hero{
  position:relative;
  /* hero is transparent; overlay provides contrast */
  background: transparent;
  padding:6rem 0 4rem; /* taller hero spacing */
  overflow:hidden;
  display:flex;
  align-items:center;
}
.hero-overlay{position:absolute;inset:0;pointer-events:none;background:none}
.hero-inner{display:flex;gap:2rem;align-items:center;justify-content:flex-start;padding:1.5rem 0;width:100%}
.hero-text{flex:1;max-width:720px;padding:2rem}
.hero-text h1{font-size:2rem;margin-bottom:.6rem;color:var(--text)}
.lead{color:var(--muted);margin-bottom:1rem}

/* hero text panel for readability on a light background */
.hero-text{
  background: rgba(255,255,255,0.98);
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(2,6,23,0.06);
}
.hero-text h1{color:var(--text);text-shadow:none;margin-bottom:0.6rem}
.lead{color:var(--muted);font-size:1.02rem}
.hero-text .brand-link{color:var(--accent);font-weight:700}

@media (max-width:900px){
  .hero-text{background: rgba(255,255,255,0.95);padding:1rem}
}


.btn{
  display:inline-block;
  background:#0847d6; /* azul mais intenso e escuro para o botão */
  color:#ffffff;
  padding:0.6rem 1rem;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
  border:2px solid rgba(3,41,115,0.12);
  transition:all .15s;
  margin-right:0.6rem;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(8,71,214,0.18)}
.btn-outline{background:transparent;color:var(--accent);border-color:var(--accent)}
.brand-link{color:var(--accent);font-weight:600;text-decoration:none}
.brand-link:hover{text-decoration:underline}

/* Sections */
.about{padding:2rem 0}
.about h2,.services h2,.clients h2{margin-bottom:0.75rem}
.services{padding:2rem 0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.card{background:var(--card);padding:1.15rem;border-radius:var(--radius);box-shadow:0 6px 18px rgba(15,23,42,0.05)}
.card h3{margin-bottom:.5rem}
.card p{color:var(--muted)}

/* About */

.clients{padding:2rem 0}
.clients-list{display:flex;gap:1rem;align-items:center}
.clients-list img{height:64px;object-fit:contain;background:transparent;padding:6px;border-radius:8px}


.contact{padding:2rem 0}
.contact p{color:var(--muted)}

.site-footer{padding:1.25rem 0;color:var(--muted);text-align:center}

/* footer links (explicit white for visibility as requested) */
.site-footer a{color:#ffffff;font-weight:600;text-decoration:none}
.site-footer a:hover{text-decoration:underline;opacity:0.95}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root{
    --bg: #0b1020;
    --surface: #0f1724;
    --text: #e6eef8;
    --muted: #9aa7b8;
    --accent: #60a5fa;
  }
  /* dark-mode: stronger overlay for dark theme readability */
  .hero-overlay{background:linear-gradient(180deg, rgba(11,16,32,0.5), rgba(11,16,32,0.36));}
  .card{box-shadow:0 6px 18px rgba(2,6,23,0.6);background:var(--surface);}
  body{background:linear-gradient(180deg,var(--bg), #071026)}
  
  /* dark mode: use a darker translucent panel behind text for contrast */
  .hero-text{background: rgba(6,10,16,0.6);box-shadow: 0 12px 40px rgba(2,6,23,0.6);}
  .hero-text h1{color:var(--text);text-shadow:0 3px 8px rgba(0,0,0,0.6)}
  .hero-text .brand-link{color:var(--accent)}
}


/* Responsividade */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .hero-text h1{font-size:1.6rem}
  .hero-art{display:none}
}
@media (max-width:640px){
  .nav ul{display:none}
  .grid{grid-template-columns:1fr}
  .hero{padding:2rem 0}
  .hero-inner{flex-direction:column;align-items:flex-start}
}