:root{
  --bg: #0f172a;
  --surface:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#38bdf8;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
}
.container{ width:min(1100px,92%); margin:0 auto; }

.site-header{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(90deg, rgba(56,189,248,.12), rgba(56,189,248,0));
  border-bottom: 1px solid rgba(229,231,235,.08);
  backdrop-filter: blur(6px);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
  gap:16px;
}
.logo img{ display:block; }

.main-nav ul{
  display:flex; gap:16px; list-style:none; padding:0; margin:0;
}
.main-nav a{
  display:inline-block; padding:8px 10px; border-radius:8px;
  color:var(--text); text-decoration:none;
}
.main-nav a:hover, .main-nav a:focus{
  background:rgba(56,189,248,.18);
  outline:none;
}

/* Conteúdo */
.hero{ padding:56px 0 24px; }
.hero h1{ font-size:2.2rem; line-height:1.1; margin:0 0 12px; }
.hero p{ color:var(--muted); max-width:70ch; }

.card{
  background: var(--surface);
  border:1px solid rgba(229,231,235,.06);
  border-radius:14px;
  padding:20px;
  margin:16px 0;
  box-shadow: 0 6px 24px rgba(0,0,0,.2);
}
.card h2{ margin-top:0; }

/* Rodapé */
.site-footer{
  border-top: 1px solid rgba(229,231,235,.08);
  margin-top:56px;
}
.site-footer .container{
  padding:18px 0; color:var(--muted); font-size:.95rem; text-align:center;
}

/* Acessibilidade: foco visível */
a:focus{ outline:2px dashed var(--accent); outline-offset:2px; }