/* Homepage refresh — layered on top of the Webflow export.
   Scope: body.sp-home only. The navbar styles are site-wide in /assets/site/site.css. */

.sp-home {
  --sp-ink: #08080f;
  --sp-ink-2: #101019;
  --sp-paper: #f6f6f9;
  --sp-cyan: #0becfe;
  --sp-line-dark: rgba(255, 255, 255, 0.09);
  --sp-line-light: rgba(8, 8, 15, 0.1);
}

/* ---------- One button language: pills ---------- */
.sp-home .primary-button-inner {
  border-radius: 100px;
  padding-left: 28px;
  padding-right: 28px;
  background-color: var(--sp-ink);
  transition: background-color 0.2s;
}
.sp-home .primary-button-text-block {
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  color: #fff;
}
.sp-home .primary-button:hover .primary-button-inner { background-color: #1f1f2c; }
/* white variant (used on the dark CTA banner) */
.sp-home .primary-button-inner.w-variant-87a1fbc7-f066-f125-80d5-39847f18f3e6 { background-color: #fff; }
.sp-home .primary-button-text-block.w-variant-87a1fbc7-f066-f125-80d5-39847f18f3e6 { color: var(--sp-ink); }
.sp-home .primary-button:hover .primary-button-inner.w-variant-87a1fbc7-f066-f125-80d5-39847f18f3e6 { background-color: var(--sp-cyan); }

/* Pricing buttons */
.sp-home .button-6 { border-radius: 100px; font-weight: 700; font-size: 16px; padding: 13px 20px; }
.sp-home .button-6:not(._2nd) { background: var(--sp-ink); }
.sp-home .button-5 {
  background: rgba(11, 236, 254, 0.12);
  color: #067c86;
  border: 1px solid rgba(11, 236, 254, 0.45);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  pointer-events: none;
}
.sp-home .div-block-2._2nd .button-5 { color: var(--sp-cyan); }

/* ---------- One eyebrow style: small pill with a cyan dot ---------- */
.sp-home .section-subtitle-single,
.sp-home .dk-label,
.sp-home .tm-section-label,
.sp-home .cs-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: auto;
  padding: 6px 12px;
  border-radius: 100px;
  background: transparent;
  border: 1px solid var(--sp-line-light);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sp-ink);
}
.sp-home .section-subtitle { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: inherit; }
.sp-home .section-subtitle-icon { display: none; }
.sp-home .section-subtitle-single::before,
.sp-home .tm-section-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sp-cyan);
  box-shadow: 0 0 10px var(--sp-cyan);
}
/* on dark backgrounds */
.sp-home .section-subtitle-single.gray-bg,
.sp-home .tm-section-label,
.sp-home .cs-badge { border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.03); }
.sp-home .section-subtitle.white { color: rgba(255, 255, 255, 0.85); }

/* ---------- One dark colour everywhere ---------- */
.sp-home section.services,
.sp-home .services-tools,
.sp-home .section.footer { background-color: var(--sp-ink); }
.sp-home .section-title { letter-spacing: -0.02em; }

/* ---------- Services list ---------- */
.sp-home .services-name { letter-spacing: -0.02em; transition: color 0.25s; }
.sp-home .services-single:hover .services-name { color: var(--sp-cyan); }
.sp-home .services-number { color: rgba(255, 255, 255, 0.4); }

/* ---------- Cards: softer, consistent radius ---------- */
.sp-home .about-us-card,
.sp-home .single-faq-accordion-wrap { border-radius: 18px; }
.sp-home .about-us-card { border: 1px solid var(--sp-line-light); box-shadow: none; }