/* Override missing licensed fonts with web-safe/Google fonts and system fallbacks */
:root {
  --font-family-primary: 'Inter', 'Inter Tight', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-secondary: 'Inter', 'Inter Tight', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-tertiary: 'Inter', 'Inter Tight', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-serif: Georgia, 'Times New Roman', serif;
  --font-family-script: 'Segoe Script', 'Brush Script MT', cursive;
}

/* Ensure base text uses the primary family */
body { font-family: var(--font-family-primary) !important; }

/* Map helper classes if used by the theme */
.ft-primary { font-family: var(--font-family-primary) !important; }
.ft-secondary { font-family: var(--font-family-secondary) !important; }
.ft-tertiary { font-family: var(--font-family-tertiary) !important; }

/* Brand gradient only for the main banner (overview section) */
#overview .section-outer.panel {
  /* Top-to-bottom blue gradient */
  background: linear-gradient(
    to bottom,
    #184f77 0%,   /* top dark */
    #1d6aa0 40%,  /* mid-dark */
    #2b82c0 70%,  /* mid */
    #40a7e6 100%  /* bottom light */
  ) !important;
}

/* Neutralize solid white layer; keep our custom gradient overlay */
#overview .position-cover.bg-white { background-color: transparent !important; }
/* Add a darker-at-bottom gradient overlay for the hero */
#overview .position-cover.bg-gradient-to-t {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.60) 0%,           /* darkest at bottom */
    rgba(0, 0, 0, 0.30) 25%,          /* soften quickly */
    rgba(0, 0, 0, 0.00) 70%           /* fade to transparent */
  ) !important;
}

/* Hide the patterned mask image so the gradient reads cleanly */
#overview .position-cover.bg-contain {
  background-image: none !important;
  opacity: 0 !important;
}

/* Pricing section: apply same top-to-bottom gradient and overlay */
#pricing .section-outer.panel {
  background: linear-gradient(
    to bottom,
    #184f77 0%,   /* top dark */
    #1d6aa0 40%,  /* mid-dark */
    #2b82c0 70%,  /* mid */
    #40a7e6 100%  /* bottom light */
  ) !important;
}
#pricing .position-cover.bg-contain {
  background-image: none !important;
  opacity: 0 !important;
}
#pricing .position-cover.bg-gradient-to-t {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.60) 0%,
    rgba(0, 0, 0, 0.30) 25%,
    rgba(0, 0, 0, 0.00) 70%
  ) !important;
}

/* Key Features: set icon color to brand accent */
#key_features .features-item .icon-box img,
#key_features .features-item .icon-box svg,
#key_features .features-item .icon-box svg *,
#key_features .features-item .icon-box .icon {
  color: #a3d420 !important;
  fill: #a3d420 !important;
  stroke: #a3d420 !important;
}