/* Shared Kllivo feature-page hero treatment. Loaded after each page's local styles. */
.hero {
  background-color: #123642 !important;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .105) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
}

.hero > div:first-child {
  background: radial-gradient(ellipse 64% 54% at 50% 0%, rgba(63, 224, 197, .11), transparent 72%),
              radial-gradient(ellipse 58% 48% at 50% 100%, rgba(5, 26, 34, .34), transparent 78%),
              linear-gradient(110deg, rgba(8, 35, 44, .36), transparent 38%, transparent 62%, rgba(8, 35, 44, .36)) !important;
}

.hero h1,
.hero .headline { color: #fff !important; }
.hero h1 span,
.hero .headline span { color: #3fe0c5 !important; }
.hero h1 + p,
.hero .headline + p { color: rgba(255, 255, 255, .7) !important; }

.hero > div:last-child > div:first-child {
  color: #d9f5ef !important;
  border-color: rgba(255, 255, 255, .17) !important;
  background: rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(8px);
}

.hero > div:last-child > div:first-child > span:first-child {
  background: #3fe0c5 !important;
}
.hero > div:last-child > div:first-child > span:first-child svg,
.hero > div:last-child > div:first-child > span:first-child svg * {
  stroke: #123642 !important;
}

.hero .btn-primary {
  color: #123642 !important;
  background: #3fe0c5 !important;
  box-shadow: 0 14px 34px rgba(2, 19, 25, .24);
}
.hero .btn-primary:hover { background: #72ead6 !important; }
.hero .btn-ghost {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .28) !important;
  background: rgba(255, 255, 255, .055) !important;
}
.hero .btn-ghost:hover { background: rgba(255, 255, 255, .11) !important; }

.hero [style*="margin-top: 56px"] > div,
.hero [style*="margin-top:56px"] > div { color: rgba(255, 255, 255, .68) !important; }
.hero .trust-sep { background: rgba(255, 255, 255, .28) !important; }