/* ==========================================================================
   afa.services — estilo base das páginas simples (hub, produtos, placeholders)
   Cada site tem sua própria cópia deste arquivo (ADR-0003: sites independentes).
   ========================================================================== */
:root {
  --color-bg: #0A0B0E;
  --color-bg-card: #121620;
  --color-primary: #00D2FF;
  --color-secondary: #0066FF;
  --color-gray: #A0AEC0;
  --color-border: #1F2937;
  --color-primary-rgb: 0, 210, 255;
}

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

body {
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--color-bg);
  color: #fff;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.glow-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(circle at 20% 10%, rgba(var(--color-primary-rgb), 0.10), transparent 45%),
              radial-gradient(circle at 85% 80%, rgba(0, 102, 255, 0.10), transparent 45%);
}

/* HEADER */
.site-header { padding: 28px 0; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand img { width: 40px; height: 40px; }
.brand-title { font-weight: 900; font-size: 22px; letter-spacing: 2px; }
.brand-subtitle { display: block; font-size: 11px; letter-spacing: 3px; color: var(--color-primary); }

/* HERO */
main { flex: 1; }
.page-hero { padding: 48px 0 32px; }
.eyebrow { color: var(--color-primary); font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 12px; }
.page-title { font-size: clamp(32px, 5vw, 52px); font-weight: 900; line-height: 1.1; letter-spacing: -1px; margin-bottom: 16px; }
.page-title .accent { color: var(--color-primary); }
.page-lead { color: var(--color-gray); font-size: 18px; max-width: 680px; }

/* CARDS */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; padding: 24px 0 64px; }
.card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 16px;
  padding: 24px; transition: border-color .2s, transform .2s;
}
a.card:hover, a.card:focus-visible { border-color: var(--color-primary); transform: translateY(-3px); }
.card h2, .card h3 { font-size: 20px; font-weight: 700; }
.card p { color: var(--color-gray); font-size: 15px; }
.card .card-lang { font-size: 12px; letter-spacing: 2px; color: var(--color-primary); font-weight: 700; }
.card .card-link { margin-top: auto; padding-top: 8px; color: var(--color-primary); font-weight: 500; }
.card-soon { opacity: .75; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag { font-size: 13px; border: 1px solid var(--color-border); border-radius: 999px; padding: 4px 12px; color: var(--color-gray); }

/* BOTÕES */
.btn { display: inline-block; padding: 14px 28px; border-radius: 10px; font-weight: 700; }
.btn-primary { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: #fff; }
.btn-outline { border: 1px solid var(--color-primary); color: var(--color-primary); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* FOOTER */
.site-footer { border-top: 1px solid var(--color-border); padding: 24px 0; color: var(--color-gray); font-size: 14px; }
.site-footer a { color: var(--color-primary); }

@media (max-width: 768px) {
  .page-hero { padding: 24px 0 16px; }
  .page-lead { font-size: 16px; }
}