@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

:root {
  color-scheme: dark;
}

body {
  font-family: "IBM Plex Sans", system-ui, sans-serif !important;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.16), transparent 28%),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 24%),
    linear-gradient(135deg, #020617 0%, #0f172a 48%, #111827 100%) !important;
}

body *[class*="font-"],
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif !important;
  letter-spacing: -0.02em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at center, black 35%, transparent 85%);
  opacity: 0.3;
}

body a,
body button,
body input,
body [role="button"] {
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
}

body a:hover,
body button:hover,
body [role="button"]:hover {
  transform: translateY(-1px);
}

body input {
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
}

body div[class*="service"],
body div[class*="bookmark"],
body div[class*="widget"],
body section[class*="group"],
body div[class*="group"] {
  border-radius: 24px !important;
}

body div[class*="service"],
body div[class*="bookmark"],
body div[class*="widget"] {
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  box-shadow:
    0 18px 60px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body div[class*="service"]:hover,
body div[class*="bookmark"]:hover {
  border-color: rgba(96, 165, 250, 0.38) !important;
  box-shadow:
    0 20px 70px rgba(15, 23, 42, 0.24),
    0 0 0 1px rgba(96, 165, 250, 0.14);
}

body div[class*="tab"] {
  border-radius: 999px !important;
  backdrop-filter: blur(16px);
}