@import url("/__newapi/static/css/index.fbbc909ca4.css");

:root {
  --relay-page-bg:
    radial-gradient(44% 48% at 22% 10%, rgba(78, 122, 255, 0.16) 0%, transparent 72%),
    radial-gradient(36% 42% at 82% 12%, rgba(79, 208, 255, 0.12) 0%, transparent 70%),
    linear-gradient(180deg, #eef4ff 0%, #edf3ff 52%, #f3f7ff 100%);
  --relay-surface: rgba(255, 255, 255, 0.76);
  --relay-surface-strong: rgba(255, 255, 255, 0.9);
  --relay-border: rgba(110, 138, 196, 0.2);
  --relay-border-strong: rgba(78, 107, 176, 0.24);
  --relay-shadow: 0 24px 64px rgba(87, 112, 171, 0.14);
  --relay-shadow-soft: 0 12px 34px rgba(109, 129, 177, 0.12);
  --relay-text: #111c35;
  --relay-muted: #6d7d98;
  --relay-blue: #356ef6;
  --relay-blue-deep: #2358d9;
  --relay-grid: rgba(76, 102, 171, 0.085);
}

body:has(a[href="/rankings"]):has(a[href="/about"]) {
  background: var(--relay-page-bg);
  color: var(--relay-text);
}

body:has(a[href="/rankings"]):has(a[href="/about"])::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--relay-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--relay-grid) 1px, transparent 1px);
  background-size: 66px 66px;
  mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.84));
}

body:has(a[href="/rankings"]):has(a[href="/about"]) #root,
body:has(a[href="/rankings"]):has(a[href="/about"]) #root > div {
  position: relative;
  z-index: 1;
}

body:has(a[href="/rankings"]):has(a[href="/about"]) .bg-background.text-foreground.relative.min-h-svh.overflow-x-clip {
  background: transparent !important;
  color: var(--relay-text);
}

body:has(a[href="/rankings"]):has(a[href="/about"]) .text-muted-foreground,
body:has(a[href="/rankings"]):has(a[href="/about"]) .text-muted-foreground\/80,
body:has(a[href="/rankings"]):has(a[href="/about"]) .text-muted-foreground\/45 {
  color: var(--relay-muted) !important;
}

body:has(a[href="/rankings"]):has(a[href="/about"]) header > div {
  max-width: 1240px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

body:has(a[href="/rankings"]):has(a[href="/about"]) header nav {
  height: 58px !important;
  margin-top: 18px;
  padding-inline: 18px !important;
  border: 1px solid var(--relay-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(22px);
  box-shadow: var(--relay-shadow-soft);
}

body:has(a[href="/rankings"]):has(a[href="/about"]) header a[aria-current="page"] {
  color: var(--relay-blue) !important;
  background: rgba(53, 110, 246, 0.08);
}

body:has(a[href="/rankings"]):has(a[href="/about"]) header a[role="button"][href="/sign-in"],
body:has(a[href="/rankings"]):has(a[href="/about"]) header a[data-slot="button"][href="/sign-in"] {
  border-radius: 999px !important;
  padding-inline: 18px !important;
  background: linear-gradient(135deg, var(--relay-blue) 0%, #4d82ff 100%) !important;
  box-shadow: 0 12px 30px rgba(53, 110, 246, 0.28);
}

body:has(a[href="/rankings"]):has(a[href="/about"]) header button[data-slot="dropdown-menu-trigger"],
body:has(a[href="/rankings"]):has(a[href="/about"]) header button[data-slot="popover-trigger"] {
  border-radius: 999px !important;
}

body:has(a[href="/rankings"]):has(a[href="/about"]) main > section:first-of-type {
  padding-top: 136px !important;
  padding-bottom: 80px !important;
}

body:has(a[href="/rankings"]):has(a[href="/about"]) main > section:first-of-type > div,
body:has(a[href="/rankings"]):has(a[href="/about"]) main > section:nth-of-type(2) > div,
body:has(a[href="/rankings"]):has(a[href="/about"]) main > section:nth-of-type(3) > div,
body:has(a[href="/rankings"]):has(a[href="/about"]) main > section:nth-of-type(4) > div {
  max-width: 1180px !important;
}

body:has(a[href="/rankings"]):has(a[href="/about"]) main > section:first-of-type .grid {
  align-items: center;
  gap: 52px !important;
}

body:has(a[href="/rankings"]):has(a[href="/about"]) main > section:first-of-type .grid > div:last-child > div {
  border: 1px solid var(--relay-border-strong) !important;
  border-radius: 32px !important;
  background: var(--relay-surface-strong) !important;
  box-shadow: var(--relay-shadow) !important;
  backdrop-filter: blur(16px);
}

body:has(a[href="/rankings"]):has(a[href="/about"]) main > section:first-of-type h1 {
  letter-spacing: 0;
  max-width: 10.5ch;
  color: var(--relay-text);
}

body:has(a[href="/rankings"]):has(a[href="/about"]) main > section:first-of-type h1 span {
  background-image: linear-gradient(135deg, #316cf2 0%, #6d8eff 52%, #7c60f4 100%) !important;
}

body:has(a[href="/rankings"]):has(a[href="/about"]) a[data-slot="button"][href="/sign-up"],
body:has(a[href="/rankings"]):has(a[href="/about"]) a[data-slot="button"][href="/sign-in"],
body:has(a[href="/rankings"]):has(a[href="/about"]) a[data-slot="button"][href="/pricing"] {
  border-radius: 999px !important;
}

body:has(a[href="/rankings"]):has(a[href="/about"]) a[data-slot="button"][href="/sign-up"] {
  min-width: 132px;
  background: linear-gradient(135deg, var(--relay-blue) 0%, #4d82ff 100%) !important;
  box-shadow: 0 16px 34px rgba(53, 110, 246, 0.24);
}

body:has(a[href="/rankings"]):has(a[href="/about"]) a[data-slot="button"][href="/pricing"],
body:has(a[href="/rankings"]):has(a[href="/about"]) a[data-slot="button"][href="https://docs.newapi.pro"] {
  border-color: rgba(113, 136, 190, 0.22) !important;
  background: rgba(255, 255, 255, 0.68) !important;
}

body:has(a[href="/rankings"]):has(a[href="/about"]) main > section:first-of-type .mt-14.grid > div,
body:has(a[href="/rankings"]):has(a[href="/about"]) main > section:nth-of-type(2) .grid > div,
body:has(a[href="/rankings"]):has(a[href="/about"]) main > section:nth-of-type(3) .grid > div,
body:has(a[href="/rankings"]):has(a[href="/about"]) footer .bg-muted\/20 {
  border: 1px solid var(--relay-border) !important;
  border-radius: 28px !important;
  background: var(--relay-surface) !important;
  box-shadow: var(--relay-shadow-soft) !important;
  backdrop-filter: blur(14px);
}

body:has(a[href="/rankings"]):has(a[href="/about"]) main > section:nth-of-type(2) .grid > div,
body:has(a[href="/rankings"]):has(a[href="/about"]) main > section:nth-of-type(3) .grid > div {
  padding: 28px !important;
}

body:has(a[href="/rankings"]):has(a[href="/about"]) main > section:first-of-type .mt-14.grid > div {
  padding-block: 30px;
}

body:has(a[href="/rankings"]):has(a[href="/about"]) .bg-muted\/30,
body:has(a[href="/rankings"]):has(a[href="/about"]) .bg-muted\/20,
body:has(a[href="/rankings"]):has(a[href="/about"]) .bg-muted {
  background-color: rgba(241, 246, 255, 0.82) !important;
}

body:has(a[href="/rankings"]):has(a[href="/about"]) .border-border\/40,
body:has(a[href="/rankings"]):has(a[href="/about"]) .border-border\/50,
body:has(a[href="/rankings"]):has(a[href="/about"]) .border-border\/60 {
  border-color: var(--relay-border) !important;
}

body:has(a[href="/rankings"]):has(a[href="/about"]) .bg-primary {
  background: linear-gradient(135deg, var(--relay-blue) 0%, #4d82ff 100%) !important;
}

body:has(a[href="/rankings"]):has(a[href="/about"]) .text-blue-500,
body:has(a[href="/rankings"]):has(a[href="/about"]) .text-primary {
  color: var(--relay-blue) !important;
}

body:has(a[href="/rankings"]):has(a[href="/about"]) footer .custom-footer {
  font-weight: 500;
}

@media (max-width: 900px) {
  body:has(a[href="/rankings"]):has(a[href="/about"]) main > section:first-of-type {
    padding-top: 112px !important;
  }

  body:has(a[href="/rankings"]):has(a[href="/about"]) main > section:first-of-type .grid {
    gap: 28px !important;
  }
}