.hero.is-info.encuro-hero {
  background-color: transparent;
}

.encuro-hero {
  background-image:
    linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
    url("/encuro-hero-b2.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.button.is-link {
  background-color: #005fcc; /* example Encuro blue */
  border-color: #005fcc;
}


/* Dark-hero navbar: keep hover readable */
.encuro-hero .navbar-item.has-text-white:hover,
.encuro-hero .navbar-item.has-text-white:focus {
  background-color: rgba(255,255,255,0.10); /* subtle light tint */
  color: #fff;
}

/* Also prevent Bulma from changing link color on hover */
.encuro-hero a.navbar-item.has-text-white:hover {
  color: #fff;
}

.encuro-hero .navbar-item img {
  max-height: 3.5rem;   /* default is ~1.75rem */
}

/* Mobile navbar menu on dark hero */
@media screen and (max-width: 1023px) {
  .encuro-hero .navbar-menu {
    background-color: rgba(0, 0, 0, 0.92);
  }

  .encuro-hero .navbar-menu .navbar-item {
    color: #fff;
  }

  .encuro-hero .navbar-menu .navbar-item:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
  }
}

/* Consistent navbar logo size across site */
.navbar .navbar-item img {
  max-height: 3.25rem;
}

.hero-illustration {
    max-width: 500px;
    margin: 0 auto;
}

.hero-illustration img {
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (max-width: 768px) {
    .hero-illustration {
        max-width: 100%;
    }
}

/* mod dark */
/* Only apply in dark mode */
@media (prefers-color-scheme: dark) {

  html,
  body {
    background-color: #0b0f17;
    color: #e8edf5;
  }

  /* top cards */
  .card {
    background-color: #141b29;
    color: #e8edf5;
    border: 1px solid rgba(255,255,255,0.08);
  }

  .card .content,
  .card .content h4,
  .card .content p {
    color: #e8edf5;
  }

  /* intro text */
  .intro .title,
  .intro .subtitle {
    color: #e8edf5;
  }

  /* beta box */
  .box.cta {
    background-color: #141b29;
    color: #e8edf5;
    border: 1px solid rgba(255,255,255,0.08);
  }

  /* tile notifications */
  .notification {
    background-color: #141b29;
    color: #e8edf5;
    border: 1px solid rgba(255,255,255,0.08);
  }

  .notification .title,
  .notification .subtitle,
  .notification .content,
  .notification .content p,
  .notification .content li {
    color: #e8edf5;
  }

  /* footer */
  .footer {
    background-color: #0f1522;
    color: #e8edf5;
  }

  .footer strong,
  .footer a,
  .footer li {
    color: #e8edf5;
  }
}