/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 25px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  display: inline-block;
  padding: 16px 32px;
  border: none;
  border-radius: 8px;
  background: var(--primary);
  color: #000;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 15px rgba(0, 229, 86, 0.3);
  text-align: center;
}

.btn-primary:hover {
  background: #00cc33;
  color: #000;
  box-shadow: 0 0 20px rgba(0, 229, 86, 0.4);
}

/* Full-width buttons (like in pricing cards) */
.pricing-card .btn-primary,
.pricing-card .btn-outline {
  width: 100%;
  padding: 12px 0;
  text-transform: capitalize; /* Changed from uppercase to capitalize */
}

.btn-outline {
  display: inline-block;
  padding: 16px 32px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: transparent;
  color: var(--text-main);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--text-main);
}

/* Light theme outline button */
html:not(.dark) .btn-outline {
  border-color: #d1d5db;
  color: #374151;
}

html:not(.dark) .btn-outline:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

/* Hero CTA Buttons */
.hero-cta {
  margin-top: 0; /* reset, buttons have their own spacing */
  display: flex;
  gap: 20px; /* gap-5 */
  justify-content: center;
  flex-wrap: wrap;
}

.hero-cta .btn-primary {
  padding: 16px 32px; /* px-8 py-4 */
  background-color: var(--primary); /* bg-primary */
  color: #000000; /* text-black */
  font-weight: 700; /* font-bold */
  font-size: 1.125rem; /* text-lg */
  text-transform: capitalize; /* Changed from uppercase to capitalize */
}

.hero-cta .btn-primary:hover {
  background-color: #00cc33; /* hover:bg-primary-dark (#00CC33) */
  box-shadow: 0 0 30px rgba(0, 229, 86, 0.6); /* hover:shadow-[0_0_30px_rgba(0,255,65,0.6)] */
}

.hero-cta .btn-primary::after {
  content: ' →';
  display: inline-block;
  transition: transform 0.2s ease;
}

.hero-cta .btn-primary:hover::after {
  transform: translateX(4px); /* group-hover:translate-x-1 */
}

.hero-cta .btn-hero-secondary::after {
  content: ' →';
  display: inline-block;
  transition: transform 0.2s ease;
}

.hero-cta .btn-hero-secondary:hover::after {
  transform: translateX(4px); /* group-hover:translate-x-1 */
}

/* Hero Secondary Button - matching reference exactly */
.btn-hero-secondary {
  padding: 16px 32px; /* px-8 py-4 */
  background: transparent; /* bg-transparent */
  border: 1px solid #d1d5db; /* border-gray-300 - light mode default */
  color: #111827; /* text-gray-900 - light mode default */
  font-weight: 600; /* font-semibold */
  font-size: 1.125rem; /* text-lg */
  border-radius: 8px; /* rounded-lg */
  transition: all 0.2s ease; /* transition-all */
  text-align: center;
  text-transform: capitalize; /* Changed from uppercase to capitalize */
}

.btn-hero-secondary:hover {
  background-color: #f3f4f6; /* hover:bg-gray-100 - light mode */
  border-color: #9ca3af; /* hover:border-gray-400 - light mode */
}

/* Dark mode secondary button */
html.dark .btn-hero-secondary {
  border-color: #374151; /* dark:border-gray-700 */
  color: #ffffff; /* dark:text-white */
}

html.dark .btn-hero-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1); /* dark:hover:bg-white/10 */
  border-color: #6b7280; /* dark:hover:border-gray-500 */
}

/* Responsive Buttons */
@media (max-width: 768px) {
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
  }

  .hero-cta .btn {
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
  }
}