:root {
  --brand-50: #eff6ff;
  --brand-100: #dbeafe;
  --brand-400: #60a5fa;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-800: #1e40af;
}

.nav-link { color: var(--brand-700); }
.nav-link:hover { color: #0b62e6; }

.btn-primary {
  display: inline-block;
  background: var(--brand-600);
  color: #fff;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  box-shadow: 0 4px 0 var(--brand-700), 0 6px 16px rgba(29, 78, 216, 0.15);
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease, background 150ms ease;
}
.btn-primary:hover {
  background: var(--brand-700);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--brand-700), 0 10px 20px rgba(29, 78, 216, 0.2);
  filter: brightness(1.05);
}
.btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 var(--brand-700), 0 4px 10px rgba(29, 78, 216, 0.18);
}
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 6px 0 var(--brand-700), 0 0 0 3px rgba(59, 130, 246, 0.4);
}

.btn-secondary {
  display: inline-block;
  background: #fff;
  color: var(--brand-700);
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  border: 1px solid var(--brand-100);
}
.btn-secondary:hover { border-color: var(--brand-400); }

.card-link {
  display: block;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--brand-700);
}
.card-link:hover { background: var(--brand-50); }

.feature {
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  background: #fff;
  padding: 1rem;
}

/* Spaziatura tra pulsante (h3) e paragrafo nelle feature */
.feature h3 { margin-bottom: 0.75rem; }

.mobile-link {
  display: block;
  padding: 0.5rem 0.75rem;
  color: var(--brand-700);
}
.mobile-link:hover { background: var(--brand-50); }

/* Pulsanti compatti nei titoli Highlights */
.feature h3 > a.btn-primary {
  padding: 0.375rem 0.75rem; /* altezza leggermente sopra il testo */
  line-height: 1.25;
}

/* Utility testo brand e mapping delle classi 'primary' esistenti */
.text-brand-700 { color: var(--brand-700); }
.text-brand-800 { color: var(--brand-800); }
.hover\:text-brand-700:hover { color: var(--brand-700); }

.text-primary-700 { color: var(--brand-700); }
.text-primary-800 { color: var(--brand-800); }
.text-primary-50 { color: var(--brand-50); }
.hover\:text-primary-700:hover { color: var(--brand-700); }

/* Logo: punto con gradiente brand, indipendente dal config Tailwind */
.logo-dot {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
}