:root{
  --brand: #20f0c7;
  --brand-600: #10bfa0;
  --ink: #0f172a;     /* quase preto */
  --muted: #475569;   /* cinza elegante */
  --soft: #f6f8fb;    /* fundo suave */
  --ring: 0 0 0 .25rem rgba(32,240,199,.25);
}

*{ box-sizing: border-box; }
body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
}

.skip-link{
  position: absolute;
  left: -9999px;
  top: 12px;
  background: #111;
  color: #fff;
  padding: .7rem 1rem;
  border-radius: .75rem;
  z-index: 9999;
}
.skip-link:focus{ left: 12px; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: none;
  box-shadow: var(--ring);
}

.navbar .nav-link{
  color: var(--ink);
  opacity: .85;
}
.navbar .nav-link:hover{ opacity: 1; }

.btn-primary{
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  border: none;
  color: #06221c;
  font-weight: 700;
}
.btn-primary:hover{ filter: brightness(.98); }
.btn-outline-primary{
  border-color: rgba(16, 185, 129, .45);
  color: #0b3a31;
  font-weight: 600;
}
.btn-outline-primary:hover{
  background: rgba(32,240,199,.12);
  border-color: rgba(16, 185, 129, .55);
  color: #06221c;
}

.hero-section{
  padding: 3.5rem 0 2.5rem;
  background:
    radial-gradient(900px 380px at 10% 10%, rgba(32,240,199,.22), transparent 60%),
    linear-gradient(180deg, #ffffff, #fbfdff);
}

.hero-badge{
  font-weight: 600;
  color: #0b3a31;
}

.py-lg-6{
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}

.section-soft{
  background: var(--soft);
}

.mini-card{
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  border-radius: 1rem;
  padding: .85rem .95rem;
}
.mini-title{
  font-size: .85rem;
  color: var(--muted);
}
.mini-value{
  font-weight: 700;
  margin-top: .1rem;
}

.feature-card{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 1rem;
}

.product-card{
  border-radius: 1.25rem;
  border: 1px solid rgba(15,23,42,.10);
}

.list-check{
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.list-check li{
  padding-left: 1.6rem;
  position: relative;
  margin-bottom: .5rem;
  color: #1f2937;
}
.list-check li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand-600);
  font-weight: 900;
}

.chip{
  display: inline-flex;
  align-items: center;
  padding: .4rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  color: #1f2937;
  font-weight: 600;
  font-size: .9rem;
}

.object-fit-cover{ object-fit: cover; }

/* Navbar escura inspirada no fundo do logo */
.navbar-visiotec{
  background: #2a2a2a;              /* grafite */
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Links no topo */
.navbar-visiotec .nav-link{
  color: rgba(255,255,255,.88);
}
.navbar-visiotec .nav-link:hover{
  color: #ffffff;
}

/* Botão toggler com ícone claro (Bootstrap já ajuda, mas reforça contraste) */
.navbar-visiotec .navbar-toggler{
  border-color: rgba(255,255,255,.25);
}

/* Botão "Contato" no topo continua com seu degradê */
.navbar-visiotec .btn-primary{
  color: #06221c;
}

/* (Opcional) Rodapé escuro para combinar */
.footer-visiotec{
  background: #2a2a2a;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-visiotec, .footer-visiotec a{
  color: rgba(255,255,255,.85);
}
.footer-visiotec a:hover{
  color: #ffffff;
}