/* Variáveis de Cores - Tema Dark Profissional */
:root {
	--bg-color: #0f172a; /* Azul escuro quase preto */
	--bg-card: #1e293b; /* Fundo dos cartões */
	--text-main: #f8fafc; /* Texto principal (branco gelo) */
	--text-muted: #94a3b8; /* Texto secundário (cinza) */
	--accent: #0ea5e9; /* Azul ciano de destaque */
	--accent-hover: #0284c7;
}

/* Reset Básico */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
body { background-color: var(--bg-color); color: var(--text-main); line-height: 1.6; }
a { text-decoration: none; color: inherit; }

/* Menu de Navegação */
nav {
	display: flex; justify-content: space-between; align-items: center;
	padding: 20px 50px; background-color: rgba(15, 23, 42, 0.9);
	position: sticky; top: 0; backdrop-filter: blur(10px); z-index: 100;
}
.logo { font-size: 1.5rem; font-weight: 700; color: var(--accent); }
.nav-links { display: flex; gap: 20px; }
.nav-links a:hover { color: var(--accent); }

/* Seção Principal (Hero) */
.hero {
	padding: 100px 50px; text-align: center; max-width: 800px; margin: auto;
}
.hero h1 { font-size: 3rem; margin-bottom: 20px; }
.hero h1 span { color: var(--accent); }
.hero p { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 40px; }

/* Botões */
.btn {
	background-color: var(--accent); color: white;
	padding: 12px 24px; border-radius: 6px; font-weight: 600;
	transition: 0.3s; display: inline-block;
}
.btn:hover { background-color: var(--accent-hover); }
.btn-outline { background-color: transparent; border: 2px solid var(--accent); }
.btn-outline:hover { background-color: var(--accent); }

/* Seções Gerais */
section { padding: 80px 50px; max-width: 1200px; margin: auto; }
.section-title { text-align: center; font-size: 2rem; margin-bottom: 50px; }

/* Grid de Serviços e Projetos */
.grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;
}

/* Cartões */
.card {
	background-color: var(--bg-card); padding: 30px; border-radius: 10px;
	border-top: 4px solid var(--accent); transition: transform 0.3s;
}
.card:hover { transform: translateY(-5px); }
.card h3 { font-size: 1.3rem; margin-bottom: 15px; }
.card p { color: var(--text-muted); margin-bottom: 20px; }

/* Rodapé */
footer { text-align: center; padding: 30px; background-color: #0b1120; color: var(--text-muted); }

/* Responsividade para Celular */
@media (max-width: 768px) {
	nav { flex-direction: column; gap: 15px; padding: 20px; }
	.hero { padding: 60px 20px; }
	.hero h1 { font-size: 2rem; }
	section { padding: 50px 20px; }
}