.hero {
  color: #fff;
  background: #071a34;
}

.hero::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(5, 20, 42, 0.98) 0%, rgba(5, 20, 42, 0.9) 37%, rgba(5, 20, 42, 0.54) 65%, rgba(5, 20, 42, 0.2) 100%);
}

.hero-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-grid {
  z-index: 1;
  background-image: linear-gradient(rgba(105, 188, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(105, 188, 255, 0.08) 1px, transparent 1px);
}

.hero::after {
  z-index: 1;
  border-color: rgba(105, 188, 255, 0.2);
}

.hero .eyebrow,
.hero h1 em,
.hero h2 em {
  color: #69bcff;
}

.hero .eyebrow span {
  background: #69bcff;
}

.hero .hero-lead,
.hero .hero-copy {
  color: #c8d8ea;
}

.hero .button-ghost {
  border-color: rgba(255, 255, 255, 0.48);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
}

.hero .button-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
}

.hero .slider-controls {
  justify-content: flex-start;
  gap: 8px;
}

.hero-arrow {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.hero-arrow:hover {
  border-color: #69bcff;
  background: #69bcff;
  color: #071a34;
}

.hero-arrow:focus-visible {
  outline: 3px solid rgba(105, 188, 255, 0.45);
  outline-offset: 3px;
}

.blueprint {
  background: #061a36;
  min-height: 329px;
}

.blueprint-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 329px;
  object-fit: cover;
  object-position: center;
}

.hero .hero-note {
  color: #9db1c8;
}

@media (max-width: 900px) {
  .hero-photo {
    object-position: 66% center;
  }

  .hero::before {
    background: linear-gradient(90deg, rgba(5, 20, 42, 0.97), rgba(5, 20, 42, 0.7));
  }

  .blueprint-image {
    min-height: 266px;
  }

  .blueprint {
    min-height: 266px;
  }
}

@media (max-width: 620px) {
  .hero-photo {
    object-position: 63% center;
  }

  .hero::before {
    background: rgba(5, 20, 42, 0.82);
  }

  .hero-arrow {
    width: 46px;
    height: 46px;
  }

  .blueprint-image {
    min-height: 231px;
  }

  .blueprint {
    min-height: 231px;
  }
}