/*!
 * Bootstrap 5.3 template kit — shared base
 *
 * Brand retheming without a Sass rebuild: Bootstrap 5.3's utility classes
 * (.text-primary, .bg-primary, .border-primary, .link-primary, …) read
 * --bs-primary / --bs-primary-rgb at runtime, so overriding those two variables
 * retints them. Button variants do NOT — .btn-primary hardcodes its colors as
 * literal hex in --bs-btn-* custom properties, so it needs its own override
 * block below.
 */

:root {
  --brand: #3556d8;
  --brand-rgb: 53, 86, 216;
  --brand-dark: #22348f;
  --brand-darker: #16215c;

  --bs-primary: var(--brand);
  --bs-primary-rgb: var(--brand-rgb);
  --bs-primary-text-emphasis: var(--brand-dark);
  --bs-primary-bg-subtle: #dde3fb;
  --bs-primary-border-subtle: #b7c2f3;
  --bs-link-color: var(--brand);
  --bs-link-color-rgb: var(--brand-rgb);
  --bs-link-hover-color: var(--brand-dark);
  --bs-link-hover-color-rgb: 34, 52, 143;

  /* Off-white / near-black surfaces instead of Bootstrap's stock pure white
     and #212529 dark — kept from the original editorial look. */
  --bs-body-bg: #f7f7f7;
  --bs-secondary-bg: #ececec;

  --kit-section-y: 5rem;
}

[data-bs-theme="dark"] {
  --bs-primary-text-emphasis: #a9b8f5;
  --bs-primary-bg-subtle: #1b2140;
  --bs-primary-border-subtle: #33408f;
  --bs-body-bg: #171717;
  --bs-secondary-bg: #202020;
}

.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-darker);
  --bs-btn-active-border-color: var(--brand-darker);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-disabled-color: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

@media (width >= 768px) {
  :root {
    --kit-section-y: 7rem;
  }
}

.section {
  padding-block: var(--kit-section-y);
}

:where(section[id], main[id]) {
  scroll-margin-top: 5rem;
}

/* ---------------------------------------------------------------
   Sticky header
   --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--bs-body-bg), transparent 20%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.site-header.is-stuck {
  border-bottom-color: var(--bs-border-color);
  background: color-mix(in srgb, var(--bs-body-bg), transparent 8%);
}

/* Color-mode toggle icons */
.theme-icon-dark {
  display: none;
}

[data-bs-theme="dark"] .theme-icon-light {
  display: none;
}

[data-bs-theme="dark"] .theme-icon-dark {
  display: block;
}

/* Minimal icon-button chrome for the theme toggle / navbar-toggler — Bootstrap
   5.3 has no built-in icon-button variant, so this is site-specific. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--bs-border-radius);
  background: transparent;
  color: var(--bs-body-color);
  line-height: 1;
}

.btn-icon:hover {
  background: var(--bs-secondary-bg);
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: 4.5rem 5rem;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20% 0 auto;
  height: 40rem;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    60% 60% at 50% 0%,
    color-mix(in srgb, var(--bs-primary), transparent 84%) 0%,
    transparent 70%
  );
}

/* The same glow for pages with just a compact header */
.page-glow {
  position: relative;
  isolation: isolate;
}

.page-glow::before {
  content: "";
  position: absolute;
  /* Start under the translucent sticky header, so there's no hard top edge */
  inset: -4rem 0 auto;
  height: 28rem;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    50% 100% at 50% 0%,
    color-mix(in srgb, var(--bs-primary), transparent 84%) 0%,
    transparent 70%
  );
}

.hero-title {
  text-wrap: balance;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* ---------------------------------------------------------------
   Pricing cards
   --------------------------------------------------------------- */

.pricing-card {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pricing-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--bs-primary), transparent 60%);
  box-shadow: 0 1.5rem 2.5rem -1rem rgb(0 0 0 / 18%);
}

.pricing-badge {
  position: absolute;
  top: -14px;
  left: 1rem;
  z-index: 1;
}

.pricing-price {
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   Motion preferences
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pricing-card,
  .site-header {
    transition: none;
  }

  .pricing-card:hover {
    transform: none;
  }
}