/* ==========================================================
   COMPUTECH DEV - SITE INSTITUCIONAL / SOFTWARE HOUSE
   Estilos customizados e utilitários de tema Cyberpunk / Tech
   (Bootstrap 5 cuida do layout; este arquivo cuida do visual)
   ========================================================== */

:root {
  --bg-dark: #040806;
  --bg-surface: #0a110d;
  --neon-green: #00ff66;
  --neon-cyan: #00e5ff;
  --neon-orange: #ff9100;
  --border-subtle: rgba(0, 255, 102, 0.12);
  --text-muted: #cbd5e1;
  --text-faint: #94a3b8;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-dark);
  color: #f0fdf4;
  overflow-x: hidden;
}

body::selection {
  background: #10b981;
  color: #000;
}

.mono {
  font-family: 'JetBrains Mono', monospace;
}

.texto-suave {
  color: var(--text-muted);
}

.texto-faint {
  color: var(--text-faint);
}

/* Fundo com grade cibernética sutil */
.bg-tech-grid {
  background-image:
    linear-gradient(to right, rgba(0, 255, 102, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 255, 102, 0.035) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Efeitos de texto com brilho */
.text-neon {
  color: var(--neon-green);
  text-shadow: 0 0 16px rgba(0, 255, 102, 0.45);
}

.text-cyan-neon {
  color: var(--neon-cyan);
  text-shadow: 0 0 16px rgba(0, 229, 255, 0.4);
}

.link-cyan {
  color: var(--neon-cyan);
}

/* Cards com efeito de vidro e bordas reativas */
.tech-card {
  background: rgba(10, 17, 13, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tech-card:hover {
  border-color: rgba(0, 255, 102, 0.45);
  transform: translateY(-4px);
  box-shadow: 0 16px 35px -10px rgba(0, 255, 102, 0.18);
}

.card-destaque {
  border-color: rgba(0, 255, 102, 0.2);
}

.card-destaque-forte {
  border-color: rgba(0, 255, 102, 0.3);
}

/* Botões da identidade */
.btn-primary-neon {
  background-color: var(--neon-green);
  color: #030805;
  font-weight: 700;
  transition: all 0.25s ease;
  box-shadow: 0 0 20px rgba(0, 255, 102, 0.35);
}

.btn-primary-neon:hover {
  background-color: #33ff85;
  color: #030805;
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(0, 255, 102, 0.6);
}

.btn-ghost-neon {
  border: 1px solid rgba(0, 255, 102, 0.4);
  color: var(--neon-green);
  background: rgba(0, 255, 102, 0.05);
  transition: all 0.25s ease;
}

.btn-ghost-neon:hover {
  border-color: var(--neon-green);
  color: var(--neon-green);
  background: rgba(0, 255, 102, 0.15);
  transform: translateY(-2px);
}

/* ================= HEADER / NAVBAR ================= */
.site-header {
  background: rgba(4, 8, 6, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(5, 46, 22, 0.8);
}

.logo-box {
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
  background: rgba(2, 44, 34, 0.8);
  border: 1px solid rgba(0, 255, 102, 0.5);
  color: var(--neon-green);
  font-weight: 700;
  font-size: 1.1rem;
  transition: all 0.25s ease;
  flex: none;
}

.navbar-brand:hover .logo-box {
  box-shadow: 0 0 15px rgba(0, 255, 102, 0.4);
}

.logo-box-sm {
  width: 32px;
  height: 32px;
  font-size: 0.9rem;
}

.marca-nome {
  letter-spacing: 0.05em;
  transition: color 0.25s ease;
}

.navbar-brand:hover .marca-nome {
  color: var(--neon-green) !important;
}

.marca-dev {
  color: var(--neon-green);
  font-size: 0.85rem;
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.375rem;
  background: rgba(2, 44, 34, 1);
  border: 1px solid rgba(6, 78, 59, 1);
  vertical-align: middle;
}

.marca-sub {
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.2em;
}

.site-header .navbar-toggler {
  color: var(--text-muted);
}

.site-header .navbar-toggler:hover {
  color: var(--neon-green);
}

.link-menu {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.9rem;
}

.link-menu:hover,
.link-menu:focus {
  color: var(--neon-green);
}

.link-portfolio {
  color: var(--neon-cyan) !important;
  font-size: 0.75rem;
  border: 1px solid rgba(6, 182, 212, 0.3);
  padding: 0.4rem 0.8rem !important;
  border-radius: 999px;
  background: rgba(8, 47, 73, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.link-portfolio:hover {
  color: #67e8f9 !important;
}

.link-portfolio-icone {
  font-size: 10px;
}

.cta-icone {
  font-size: 0.75rem;
}

/* ================= HERO ================= */
.hero-section {
  padding: 4rem 0 6rem;
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero-section {
    padding: 8rem 0;
  }
}

.badge-hero {
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: rgba(2, 44, 34, 0.7);
  border: 1px solid rgba(0, 255, 102, 0.3);
  color: var(--neon-green);
  font-size: 0.75rem;
}

.hero-titulo {
  max-width: 62rem;
  letter-spacing: -0.02em;
}

.hero-descricao {
  max-width: 48rem;
  line-height: 1.65;
}

.hero-cta {
  width: 100%;
}

@media (min-width: 576px) {
  .hero-cta {
    width: auto;
  }
}

.trust-bar {
  max-width: 56rem;
  border-top: 1px solid rgba(5, 46, 22, 0.7);
}

.trust-label {
  font-size: 0.75rem;
  color: var(--text-faint);
}

/* ================= SEÇÕES ================= */
.secao {
  padding: 6rem 0;
}

.secao-escura {
  background: rgba(6, 10, 8, 0.9);
  border-top: 1px solid rgba(5, 46, 22, 1);
}

.secao-cabecalho {
  max-width: 48rem;
}

.secao-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
}

/* Serviços */
.servico-icone {
  width: 56px;
  height: 56px;
  border-radius: 0.75rem;
  font-size: 1.5rem;
}

.icone-emerald { background: rgba(2, 44, 34, 0.8); border: 1px solid rgba(0, 255, 102, 0.4); color: var(--neon-green); }
.icone-cyan { background: rgba(8, 47, 73, 0.8); border: 1px solid rgba(6, 182, 212, 0.4); color: #22d3ee; }
.icone-purple { background: rgba(59, 7, 100, 0.8); border: 1px solid rgba(168, 85, 247, 0.4); color: #c084fc; }
.icone-amber { background: rgba(69, 26, 3, 0.8); border: 1px solid rgba(245, 158, 11, 0.4); color: #fbbf24; }

.servico-texto {
  line-height: 1.65;
}

.servico-lista {
  font-size: 0.75rem;
  color: var(--text-faint);
  border-top: 1px solid rgba(30, 41, 59, 0.8);
  padding-top: 0.75rem;
  margin-top: 1rem;
}

.servico-lista li {
  padding: 0.2rem 0;
}

/* Cases */
.case-topo {
  border-bottom: 1px solid rgba(6, 60, 36, 0.5);
}

.case-topo-cyan {
  border-bottom-color: rgba(8, 74, 110, 0.5);
}

.case-badge {
  font-size: 0.75rem;
  padding: 0.3rem 0.75rem;
  border-radius: 0.375rem;
}

.badge-emerald { background: rgba(2, 44, 34, 1); border: 1px solid rgba(0, 255, 102, 0.3); color: var(--neon-green); }
.badge-cyan { background: rgba(8, 47, 73, 1); border: 1px solid rgba(6, 182, 212, 0.3); color: #22d3ee; }

.case-stack {
  font-size: 0.75rem;
  color: var(--text-faint);
}

.case-card:hover .titulo-emerald { color: var(--neon-green); }
.case-card:hover .titulo-cyan { color: #22d3ee; }

.case-titulo {
  transition: color 0.25s ease;
}

.case-btn {
  font-size: 0.75rem;
  font-weight: 700;
}

.case-btn-icone {
  font-size: 10px;
}

/* Liderança */
.lideranca-texto {
  line-height: 1.75;
}

.perfil-box {
  background: #070d0a;
  border: 1px solid rgba(6, 60, 36, 0.6);
}

.perfil-foto {
  width: 96px;
  height: 96px;
  border: 2px solid rgba(0, 255, 102, 0.8);
  padding: 4px;
  background: #000;
}

.perfil-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.perfil-cargo {
  font-size: 0.75rem;
  color: var(--neon-green);
}

/* Orçamento / Formulário */
.contato-icone {
  font-size: 1.1rem;
}

.form-box {
  background: #070c09;
  border: 1px solid rgba(6, 60, 36, 0.6);
}

.label-campo {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.form-control-dark {
  background-color: #050806;
  border: 1px solid rgba(6, 60, 36, 0.8);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #fff;
}

.form-control-dark::placeholder {
  color: #475569;
}

.form-control-dark:focus {
  background-color: #050806;
  border-color: var(--neon-green);
  color: #fff;
  box-shadow: none;
  outline: none;
}

select.form-control-dark {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300ff66' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

select.form-control-dark option {
  background-color: #050806;
  color: #fff;
}

/* Footer */
.footer-site {
  border-top: 1px solid rgba(5, 46, 22, 1);
  background: #030604;
  padding: 2.5rem 0;
  font-size: 0.75rem;
  color: #64748b;
}

.footer-links a {
  color: var(--text-faint);
}

.footer-links a:hover {
  color: var(--neon-green);
}

.footer-links a.link-cyan {
  color: var(--neon-cyan);
}