:root {
  --clr-primary: #5f2dfb;
  --clr-primary-2: #20c997;
  --clr-dark: #1b1734;
  --clr-soft: #f6f4ff;
}
html {
  scroll-behavior: smooth;
}
.skiplink {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skiplink:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0.5rem;
  background: #fff;
  z-index: 10000;
}
.navbar-brand i {
  color: var(--clr-primary);
}
.btn-primary {
  --bs-btn-bg: var(--clr-primary);
  --bs-btn-border-color: var(--clr-primary);
  --bs-btn-hover-bg: #4e23d4;
  --bs-btn-hover-border-color: #4e23d4;
}
.text-primary {
  color: var(--clr-primary) !important;
}
.hero-gradient {
  background: radial-gradient(
      1200px 600px at 10% 10%,
      #6f3bff 0,
      rgba(95, 45, 251, 0.85) 40%,
      rgba(27, 23, 52, 1) 100%
    ),
    linear-gradient(135deg, #6f3bff 0%, #20c997 100%);
}
.gradient-plate {
  background: linear-gradient(180deg, #ffffff 0%, #f8f7ff 100%);
}
.hover-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.08);
}
.step-badge {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-grid;
  place-content: center;
  background: var(--clr-primary);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
}
.pricing-card .display-6 {
  letter-spacing: -0.02em;
}
.faq-item summary {
  cursor: pointer;
  padding: 0.5rem 0;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:focus {
  outline: 2px dashed var(--clr-primary);
  outline-offset: 3px;
}
.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-content: center;
}
.border-primary {
  border-color: var(--clr-primary) !important;
}
body {
  color: #2a2a2a;
}
h1,
h2,
h3,
h4 {
  color: #1c1c1c;
}
a:focus {
  outline: 2px dashed var(--clr-primary);
  outline-offset: 3px;
}

.card-header {
  background: var(--clr-soft);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 0.25rem rgba(95, 45, 251, 0.15);
}

.nav-link.active {
  font-weight: 700;
  color: var(--clr-primary) !important;
}

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