/* assets/css/custom.css */
:root {
  --clr-primary: #5b8def;
  --clr-accent: #ff6a3d;
  --clr-teal: #00c2a8;
  --clr-dark: #0e1b2a;
  --clr-soft: #eef4ff;
}
html {
  scroll-behavior: smooth;
}
body {
  color: #1f1f1f;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: #fff;
}
h1,
h2,
h3,
h4 {
  color: #161616;
  letter-spacing: -0.01em;
}
a:focus {
  outline: 2px dashed var(--clr-primary);
  outline-offset: 3px;
}
.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: #4f80e6;
  --bs-btn-hover-border-color: #4f80e6;
}
.text-primary {
  color: var(--clr-primary) !important;
}
.bg-soft {
  background: var(--clr-soft);
}

.hero-fmb {
  background: radial-gradient(
      1200px 600px at 15% 20%,
      rgba(91, 141, 239, 0.85) 0,
      rgba(91, 141, 239, 0.65) 35%,
      rgba(14, 27, 42, 1) 100%
    ),
    linear-gradient(
      135deg,
      var(--clr-primary) 0%,
      var(--clr-accent) 50%,
      var(--clr-teal) 100%
    );
  position: relative;
}
.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;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 0.25rem rgba(91, 141, 239, 0.15);
}
.nav-link.active {
  font-weight: 700;
  color: var(--clr-primary) !important;
}
.card-header {
  background: var(--clr-soft);
}