:root {
  --bs-primary: oklch(64% 0.11 255deg);
  --bs-primary-rgb: 93, 142, 206;
  --bs-link-color: oklch(64% 0.11 255deg);
  --bs-link-color-rgb: 93, 142, 206;
  --bs-link-hover-color: oklch(64% 0.11 255deg);
  --bs-link-hover-color-rgb: 93, 142, 206;
  --bs-body-color: oklch(22% 0.02 240deg);
  --bs-body-color-rgb: 18, 28, 35;
  --bs-body-bg: oklch(96% 0.008 240deg);
  --bs-border-color: oklch(22% 0.02 240deg / 0.08);
  --bs-body-font-family: Work Sans, -apple-system, BlinkMacSystemFont, sans-serif;
}

html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background: oklch(96% 0.008 240deg);
  color: oklch(22% 0.02 240deg);
  font-family: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
}

.btn, .navbar-brand, label, .form-label {
  font-family: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
}

.btn:focus, .btn:active:focus, .btn.nav-link:focus,
.btn .form-control:focus,
.btn .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem oklch(64% 0.11 255deg);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.landing-hero {
  background: linear-gradient(180deg, #ffffff 0%, oklch(96% 0.008 240deg) 100%);
}
.landing-hero .eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: oklch(64% 0.11 255deg);
  font-weight: 700;
  margin-bottom: 1rem;
}

.landing-links .section-heading {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 1rem;
}

.link-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
  padding: 1.75rem 1.5rem;
  background: white;
  border: 1px solid rgba(93, 142, 206, 0.12);
  border-radius: 1rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.link-card:hover, .link-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px rgba(93, 142, 206, 0.12);
  border-color: rgba(93, 142, 206, 0.22);
}
.link-card h3 {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
}
.link-card .link-url {
  color: oklch(70% 0.01 240deg);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
  word-break: break-all;
}
.link-card .link-cta {
  align-self: flex-start;
  color: oklch(64% 0.11 255deg);
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .landing-hero {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
.hero-card,
.feature-card {
  background: white;
  border: 1px solid oklch(22% 0.02 240deg / 0.08);
}

.landing-page {
  background: oklch(96% 0.008 240deg);
  color: oklch(22% 0.02 240deg);
}
.landing-page .landing-hero {
  background: linear-gradient(180deg, #ffffff 0%, oklch(96% 0.008 240deg) 100%);
}
.landing-page .btn-primary {
  background-color: oklch(64% 0.11 255deg);
  border-color: oklch(64% 0.11 255deg);
}
.landing-page .btn-outline-secondary {
  color: oklch(22% 0.02 240deg);
  border-color: rgba(18, 28, 35, 0.12);
}
.landing-page .btn-outline-secondary:hover {
  background-color: rgba(93, 142, 206, 0.08);
}

.feature-list {
  padding-left: 1rem;
}
.feature-list li {
  margin-bottom: 0.8rem;
  color: oklch(70% 0.01 240deg);
}

.coming-soon-badge {
  background: rgba(93, 142, 206, 0.1);
  color: oklch(64% 0.11 255deg);
}
.coming-soon-badge .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: oklch(64% 0.24 320deg);
  animation: pulse-dot 1.6s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
.step-number {
  display: block;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: rgba(93, 142, 206, 0.25);
  margin-bottom: 0.5rem;
}