@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Kalam:wght@400;700&family=Poppins:wght@500;600;700;800&display=swap");

/* Global layout and typography */
.container {
  --bs-gutter-x: 30px;
  max-width: var(--gem-container);
}

.site-main {
  min-height: 50vh;
}

.section {
  position: relative;
  padding-block: var(--gem-section-space);
}

.section--compact {
  padding-block: calc(var(--gem-section-space) * 0.66);
}

.section--light {
  background: var(--gem-light);
}

.section--light-blue {
  background: var(--gem-light-blue);
}

.section--navy {
  background: var(--gem-gradient-blue);
  color: rgba(255, 255, 255, 0.78);
}

.section--navy :is(h1, h2, h3, h4, h5, h6) {
  color: var(--gem-white);
}

.section-heading {
  margin: 0 auto 42px;
  max-width: 760px;
  text-align: center;
}

.section-heading--start {
  margin-inline: 0;
  text-align: left;
}

.section-heading__eyebrow {
  align-items: center;
  color: var(--gem-purple);
  display: inline-flex;
  font-family: var(--gem-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  gap: 10px;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.section-heading__eyebrow::before,
.section-heading__eyebrow::after {
  background: currentColor;
  content: "";
  height: 1px;
  opacity: 0.45;
  width: 28px;
}

.section-heading--start .section-heading__eyebrow::after {
  display: none;
}

.section-heading__title {
  font-size: clamp(1.85rem, 3vw, 2.75rem);
  letter-spacing: -0.035em;
  margin-bottom: 14px;
}

.section-heading__text {
  color: var(--gem-muted);
  margin: 0 auto;
  max-width: 650px;
}

.section-heading--start .section-heading__text {
  margin-inline: 0;
}

.text-accent {
  color: var(--gem-yellow);
  font-family: var(--gem-font-accent);
  font-weight: 700;
}

.text-gradient {
  -webkit-background-clip: text;
  background-image: var(--gem-gradient-brand);
  background-clip: text;
  color: transparent;
}

.icon-circle {
  align-items: center;
  background: rgba(109, 50, 245, 0.1);
  border-radius: 50%;
  color: var(--gem-purple);
  display: inline-flex;
  flex: 0 0 auto;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.visually-hidden-focusable.skip-link {
  background: var(--gem-white);
  color: var(--gem-primary);
  left: 12px;
  padding: 10px 16px;
  position: fixed;
  top: 12px;
  z-index: 2000;
}

.lazy-placeholder {
  background: var(--gem-light-blue);
}

[data-aos] {
  will-change: opacity, transform;
}