:root {
  --blue-panel: linear-gradient(120deg, #102439, #224b71);
  --blue-caption: linear-gradient(115deg, #07172cf5, #1a3e60ed);
}

.header .brand { width: clamp(150px, 13.3vw, 180px); }

.hero-facts {
  --facts-wave-height: clamp(58px, 6.2vw, 90px);
  border-top: 0;
  background: linear-gradient(180deg, #07172c, #102d4d 65%, #194874 calc(100% - 2px))
    top / 100% calc(100% - var(--facts-wave-height) + 2px) no-repeat, var(--warm);
}
.hero-facts::after {
  content: "";
  display: block;
  height: var(--facts-wave-height);
  background: url("/assets/header-gradient-wave.svg") center top / 100% 100% no-repeat;
  transform: scaleX(-1);
}

.step-panel {
  background: linear-gradient(122deg, #0b1a2d 33%, #122e4d 63%, #235581);
}
.media {
  background: linear-gradient(120deg, #08182c, #133352 58%, #22527e);
}
.contact {
  background: linear-gradient(110deg, #102844, #1d496f 68%, #23527a);
}
.footer {
  background: linear-gradient(105deg, #081627, #173656 60%, #21496c);
}

[role="tab"][aria-selected="true"],
.film-card,
.media-list a,
.dialog-head button,
.toast {
  background: var(--blue-panel);
}
.scene,
.step-panel figcaption,
.engineering-image figcaption,
.campus figcaption,
.film-runtime,
.film-play {
  background: var(--blue-caption);
}
dialog { background: linear-gradient(135deg, #08182c, #1b3d5e); }

@media (1030px < width <= 1190px) {
  .header-inner, .header-tools { gap: 12px; }
  .navigation { gap: 14px; }
}

@media (max-width: 1030px) {
  .navigation { background: var(--blue-panel); }
}

@media (max-width: 730px) {
  .header .brand { width: clamp(105px, 35vw, 142px); }
  .hero-facts { --facts-wave-height: 54px; }
  .hero-facts::after { background-size: 135% 100%; }
}