:root {
  --brand: #cbff42;
  --brand-900: #9dc436;
  --ink: #111827;
  --muted: #6b7280;
  --bg: #0b1221; /* hero grad */
  --azul-400: #48708a;
}

html {
  scroll-behavior: smooth;
}
body {
  color: var(--ink);
}
.btn-brand {
  background: var(--brand) !important;
  border: none;
  color: black !important;
}
.btn-brand:hover {
  background: var(--brand-900) !important;
  scale: 1.01;
  color: white !important;
  transition: 0.3s;
}
.btn-brand-outline {
  background: transparent !important; 
  border: 2px solid var(--azul-400) !important;
  color: var(--azul-400) !important; 
  transition: 0.3s; 
}

.btn-brand-outline:hover {
  background: var(--azul-400) !important; 
  color: rgb(255, 255, 255) !important; 
  transition: 0.5s;
}

.text-brand {
  color: var(--brand);
}
.text-bg-brand {
  background-color: var(--brand) !important; /* Fundo com a cor da brand */
  color: black !important; /* Texto preto */
  padding: 0.25rem 0.5rem; /* Ajuste de padding semelhante ao Bootstrap */
  border-radius: 0.25rem; /* Borda arredondada como no Bootstrap */
  display: inline-block; /* Para se comportar como badge ou label */
}
.text-brand-border {
  background-color: transparent !important; /* Fundo transparente */
  color: black !important; /* Texto da cor brand */
  border: 2px solid var(--brand) !important; /* Borda da cor brand */
  padding: 0.25rem 0.5rem; /* Padding como badge do Bootstrap */
  border-radius: 0.25rem; /* Borda arredondada */
  display: inline-block; /* Para se comportar como badge ou label */
  transition: 0.3s; /* Transição suave para hover */
}

.badge-soft {
  background: rgba(14, 163, 90, 0.12);
  color: var(--brand);
  border: 1px solid rgba(14, 163, 90, 0.2);
}
/* Hero */
.hero {
  background: radial-gradient(
      1000px 600px at 10% 10%,
      rgba(14, 163, 90, 0.15),
      transparent
    ),
    radial-gradient(
      800px 500px at 90% 20%,
      rgba(14, 163, 90, 0.12),
      transparent
    ),
    linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
  color: #fff;
}
.hero h1 {
  letter-spacing: 0.2px;
}
.hero .card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Feature icons */
.fi {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #f2f7f4;
}

/* Pricing */
.plan {
  border-radius: 20px;
  border: 1px solid #e5e7eb;
}
.plan.pop {
  border: 2px solid var(--brand);
  box-shadow: 0 10px 30px rgba(14, 163, 90, 0.15);
}

/* Sticky top nav */
.navbar-blur {
  backdrop-filter: saturate(180%) blur(10px);
  background-color: rgba(255, 255, 255, 0.7) !important;
}

/* Footer */
.footer a {
  color: inherit;
  text-decoration: none;
}