/* Shared intro heading system for services/tools/games/contact */

:root {
  --page-intro-line-start: rgba(191, 219, 254, 0.09);
  --page-intro-line-mid: rgba(191, 219, 254, 0.12);
}

body.services_page,
body.tools-page,
body.games-page,
body.contact_page {
  overflow-x: hidden;
  overflow-x: clip;
}

body.services_page .services_page_intro,
body.tools-page .page_intro,
body.games-page .page_intro,
body.contact_page .contact_page_intro {
  width: min(74rem, 100%);
  margin: 0 auto 1rem;
  position: relative;
  padding: 0.68rem 0 0.76rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.services_page .services_page_intro::before,
body.services_page .services_page_intro::after,
body.tools-page .page_intro::before,
body.tools-page .page_intro::after,
body.games-page .page_intro::before,
body.games-page .page_intro::after,
body.contact_page .contact_page_intro::before,
body.contact_page .contact_page_intro::after {
  content: "";
  position: absolute;
  width: 100vw;
  width: 100dvw;
  left: 50%;
  transform: translateX(-50%);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--page-intro-line-start) 14%,
    var(--page-intro-line-mid) 50%,
    var(--page-intro-line-start) 86%,
    transparent 100%
  );
  pointer-events: none;
}

body.services_page .services_page_intro::before,
body.tools-page .page_intro::before,
body.games-page .page_intro::before,
body.contact_page .contact_page_intro::before {
  top: 0;
}

body.services_page .services_page_intro::after,
body.tools-page .page_intro::after,
body.games-page .page_intro::after,
body.contact_page .contact_page_intro::after {
  bottom: 0;
}

body.services_page .services_page_badge,
body.tools-page .page_badge,
body.games-page .page_badge,
body.contact_page .contact_page_badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.45rem;
  padding: 0.26rem 0.62rem;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.5);
  background: rgba(17, 24, 39, 0.52);
  color: #bfdbfe;
  font-family: "Sora", "Outfit", Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.services_page .services_page_badge .material-symbols-outlined,
body.tools-page .page_badge .material-symbols-outlined,
body.games-page .page_badge .material-symbols-outlined,
body.contact_page .contact_page_badge .material-symbols-outlined {
  font-size: 1rem;
  line-height: 1;
}

body.services_page .services_page_title,
body.tools-page .page_title,
body.games-page .page_title,
body.contact_page .contact_page_title {
  margin: 0;
  color: #f7f4ef;
  font-family: "IBM Plex Sans", "Inter", system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif !important;
  font-weight: 420 !important;
  font-size: clamp(1.14rem, 0.98rem + 0.82vw, 1.62rem) !important;
  line-height: 1.14;
  letter-spacing: 0.01em;
}

body.services_page .services_page_text,
body.tools-page .page_text,
body.games-page .page_text,
body.contact_page .contact_page_text {
  margin: 0.55rem 0 0;
  color: #9ca3af;
  font-size: clamp(0.92rem, 0.84rem + 0.32vw, 1.02rem);
  line-height: 1.62;
  max-width: 62ch;
}

@media (max-width: 768px) {
  body.services_page .services_page_intro,
  body.tools-page .page_intro,
  body.games-page .page_intro,
  body.contact_page .contact_page_intro {
    width: 100%;
    margin-bottom: 0.82rem !important;
    padding: 0.56rem 0 0.62rem !important;
  }

  body.services_page .services_page_intro::before,
  body.services_page .services_page_intro::after,
  body.tools-page .page_intro::before,
  body.tools-page .page_intro::after,
  body.games-page .page_intro::before,
  body.games-page .page_intro::after,
  body.contact_page .contact_page_intro::before,
  body.contact_page .contact_page_intro::after {
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(191, 219, 254, 0.07) 14%,
      rgba(191, 219, 254, 0.1) 50%,
      rgba(191, 219, 254, 0.07) 86%,
      transparent 100%
    );
  }

  body.services_page .services_page_badge,
  body.tools-page .page_badge,
  body.games-page .page_badge,
  body.contact_page .contact_page_badge {
    margin-bottom: 0.4rem;
    padding: 0.24rem 0.56rem;
    font-size: 0.68rem;
    letter-spacing: 0.075em;
  }

  body.services_page .services_page_title,
  body.tools-page .page_title,
  body.games-page .page_title,
  body.contact_page .contact_page_title {
    font-size: clamp(1.12rem, 4.9vw, 1.44rem) !important;
    line-height: 1.18;
  }

  body.services_page .services_page_text,
  body.tools-page .page_text,
  body.games-page .page_text,
  body.contact_page .contact_page_text {
    font-size: 0.9rem;
    line-height: 1.52;
    max-width: 100%;
  }
}