/* HERO */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  background: var(--night); color: var(--white); overflow: hidden;
}
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 26, 51, .72) 0%, rgba(8, 26, 51, .12) 34%, rgba(8, 26, 51, .1) 55%, rgba(8, 26, 51, .78) 100%),
    linear-gradient(90deg, rgba(8, 26, 51, .55) 0%, rgba(8, 26, 51, 0) 65%);
}
.hero__inner {
  position: relative; width: min(1180px, 100% - 3rem);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 400px);
  gap: 3rem; align-items: end;
  padding: calc(var(--header-h) + 3rem) 0 clamp(2.5rem, 6vw, 4.5rem);
}
.hero__title {
  color: var(--white); font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em;
  max-width: 13ch; margin-bottom: 1.25rem;
  text-shadow: 0 2px 24px rgba(8, 26, 51, .45);
  animation: hero-in .9s cubic-bezier(.2, .7, .2, 1) both;
}
.hero__lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 46ch; color: rgba(255, 255, 255, .92); margin-bottom: 2rem; animation: hero-in .9s .12s cubic-bezier(.2, .7, .2, 1) both; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; animation: hero-in .9s .24s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero__feature {
  background: rgba(8, 26, 51, .74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-left: 4px solid var(--sun); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.5rem 1.5rem 1.6rem;
}
.hero__feature-label { font: 500 .9rem/1 var(--font-head); color: var(--sun); margin-bottom: .6rem; }
.hero__feature-name { color: var(--white); font-size: 1.7rem; margin-bottom: .4rem; }
.hero__feature-sum { color: rgba(255, 255, 255, .85); font-size: 1rem; line-height: 1.5; margin-bottom: 1rem; }
.hero__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 1.25rem; margin: 0 0 1.25rem; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.hero__facts dt { font-size: .82rem; color: rgba(255, 255, 255, .7); }
.hero__facts dd { margin: 0; font: 600 1.02rem/1.3 var(--font-head); }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero__feature { max-width: 480px; }
}
@media (max-width: 480px) {
  .hero__facts { grid-template-columns: repeat(2, auto); }
}