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

:root {
  --font-body: "Sora";
  --font-heading: "Space Grotesk";
  --background: 210 40% 98%;
  --foreground: 215 18% 34%;
  --heading-foreground: 220 30% 12%;
  --primary: 214 94% 55%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 80% 96%;
  --secondary-foreground: 220 25% 16%;
  --accent: 192 90% 50%;
  --accent-foreground: 0 0% 100%;
  --border: 214 28% 90%;
  --card-background: 0 0% 100%;
  --card-foreground: var(--foreground);
  --card-shadow: 0 20px 50px rgba(16, 32, 60, 0.08);
  --navbar-foreground: 215 25% 28%;
  --navbar-background: var(--background);
  --navbar-background-hover: var(--primary);
  --navbar-foreground-hover: 0 0% 100%;
  --button-rounded: 999px;
  --headings-letter-spacing: -0.02em;
  --tblr-primary: #2f7bff;
  --tblr-primary-rgb: 47, 123, 255;
  --tblr-body-bg: #f7faff;
  --tblr-body-bg-rgb: 247, 250, 255;
  --tblr-body-color: #2a3550;
  --tblr-border-color: rgba(15, 23, 42, 0.08);
  --tblr-card-border-color: rgba(15, 23, 42, 0.06);
}

#banner .banner-bg {
  background: linear-gradient(135deg, #0b1026 0%, #0e2a6a 45%, #1f6cff 100%);
  background-size: 160% 160%;
  animation: gradient-animation 18s ease-in-out alternate infinite;
}

#banner .banner-subtitle-gradient .animate-hue-rotate {
  background: linear-gradient(135deg, #3b82f6 0%, #22d3ee 100%);
}

#banner .banner-title {
  text-shadow: 0 10px 30px rgba(9, 20, 45, 0.35);
}

#banner p {
  color: rgba(255, 255, 255, 0.86) !important;
}

.site-header.lqd-is-sticky .site-header-nav {
  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(15, 23, 42, 0.08) !important;
}

.site-header.lqd-is-sticky {
  color: #0b1026;
}

.site-header.lqd-is-sticky a {
  color: #0b1026;
}

.site-header .site-logo img {
  max-height: 38px;
}

.blog-content article,
.blog-single-page .feature-image img {
  background: hsl(var(--card-background));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--card-shadow);
}

.blog-content article img {
  filter: saturate(1.05);
}

button,
.btn,
a.btn,
a.button {
  border-radius: var(--button-rounded);
}