/*
  Visita Técnica — Landing (Bootstrap 5.3.8)
  Como usar:
  1) Abra o index.html no navegador.
  2) Para publicar no Cloudflare Pages, envie esta pasta como projeto estático.
*/

:root{
  --brand: #87E64B;
  --brand-hover: #76D83A;
  --brand-active: #66C92B;
  --brand-contrast: #0b0f0a;
}

body{
  scroll-behavior: smooth;
}

.brand-mark{
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(135, 230, 75, .20);
}

.hero{
  background:
    radial-gradient(800px 300px at 15% 10%, rgba(135, 230, 75, .22), transparent 60%),
    radial-gradient(700px 260px at 90% 0%, rgba(135, 230, 75, .16), transparent 55%);
}

.hero-card{
  border-radius: 1.25rem;
}

.btn-brand{
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-contrast);
  font-weight: 800;
}
.btn-brand:hover{
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--brand-contrast);
}
.btn-brand:active{
  background: var(--brand-active);
  border-color: var(--brand-active);
}

.badge-brand{
  background: rgba(135, 230, 75, .18);
  color: #14532d;
  border: 1px solid rgba(135, 230, 75, .45);
}

.icon-pill{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(135, 230, 75, .20);
  border: 1px solid rgba(135, 230, 75, .45);
  font-size: 1.1rem;
}

.service-card{
  border-radius: 1.25rem;
  overflow: hidden;
}
.card-topbar{
  height: 4px;
  background: var(--brand);
}
.service-icon{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(135, 230, 75, .20);
  border: 1px solid rgba(135, 230, 75, .45);
  font-size: 1.35rem;
}

.service-card ul{
  padding-left: 1.1rem;
}

.form-control:focus, .form-select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 .25rem rgba(135, 230, 75, .35);
}

/* Dark mode tweaks */
[data-bs-theme="dark"] .hero{
  background:
    radial-gradient(900px 360px at 15% 10%, rgba(135, 230, 75, .12), transparent 62%),
    radial-gradient(800px 300px at 90% 0%, rgba(135, 230, 75, .10), transparent 58%);
}