/* Official campaign artwork is used unchanged; the overlay protects readable text. */
.hero {
  background:
    linear-gradient(90deg, rgba(7, 27, 59, .94) 0%, rgba(7, 27, 59, .82) 46%, rgba(7, 27, 59, .34) 100%),
    url("assets/img/hero-kompas-bez-tekstu.png") center center / cover no-repeat;
}

/* The foundation name is a key brand cue in the opening view. */
.hero-foundation-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 28px;
}

.hero-foundation-lockup img {
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 5px 12px rgba(0, 7, 23, .26));
}

.hero-foundation-lockup p {
  margin: 0;
  color: #a9d3ff;
  font-size: clamp(27px, 2.45vw, 40px);
  font-weight: 850;
  letter-spacing: -.055em;
  line-height: .93;
}

.hero-foundation-lockup span {
  display: block;
  margin-bottom: 6px;
  color: #fff;
  font-size: .34em;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.hero-foundation-lockup strong { display: block; font: inherit; }

/* Make the foundation name the clearest element of the top navigation. */
.site-header .brand {
  gap: 13px;
}

.site-header .brand img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: transparent;
}

.site-header .brand-name {
  color: #a9d3ff;
  font-size: 41px;
  font-weight: 850;
  letter-spacing: -.055em;
  line-height: .96;
}

.site-header .brand-name small {
  margin-bottom: 5px;
  color: #fff;
  font-size: 14px;
  letter-spacing: .2em;
}

.site-header .brand-name strong {
  display: block;
  font: inherit;
}

/* A low-contrast compass fills the left side without competing with the copy. */
.hero-compass-watermark {
  position: absolute;
  z-index: 0;
  left: max(-88px, calc((100% - 1160px) / 2 - 208px));
  bottom: -170px;
  width: 480px;
  height: 480px;
  opacity: .26;
  pointer-events: none;
}

.watermark-ring,
.watermark-axis,
.watermark-needle,
.watermark-core {
  position: absolute;
  display: block;
}

.hero-themes {
  position: absolute;
  z-index: 2;
  left: max(22px, calc((100% - 1160px) / 2 - 262px));
  bottom: 72px;
  width: 214px;
  padding: 21px 20px 18px;
  border: 1px solid rgba(170, 209, 255, .28);
  border-left: 3px solid #6fb4ff;
  background: rgba(4, 23, 52, .43);
  backdrop-filter: blur(3px);
}

.themes-label {
  display: block;
  margin-bottom: 11px;
  color: #a9d3ff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.hero-themes ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.hero-themes li { color: #fff; font-size: 14px; font-weight: 750; line-height: 1.25; }
.hero-themes b { display: inline-block; width: 29px; color: #73b9ff; font-size: 10px; letter-spacing: .06em; }

.watermark-ring {
  inset: 37px;
  border: 2px solid #92c9ff;
  border-radius: 50%;
}

.watermark-axis {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(transparent, #92c9ff 18%, #92c9ff 82%, transparent);
}

.watermark-axis-a { transform: rotate(45deg); }
.watermark-axis-b { transform: rotate(-45deg); }

.watermark-needle {
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin: -178px 0 0 -38px;
  border-right: 38px solid transparent;
  border-bottom: 178px solid rgba(132, 192, 255, .72);
  border-left: 38px solid transparent;
  transform: rotate(-37deg);
  transform-origin: 38px 178px;
}

.watermark-core {
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px;
  border: 2px solid #c8e4ff;
  border-radius: 50%;
  background: rgba(7, 27, 59, .55);
}

.footer-brand .brand-name {
  color: #fff;
  font-size: 15px;
}

.footer-brand .brand-name strong { display: block; font: inherit; }

@media (max-width: 1100px) {
  .site-header .brand img { width: 57px; height: 57px; }
  .site-header .brand-name { font-size: 29px; }
  .site-header .brand-name small { font-size: 10px; }
  .primary-nav { gap: 18px; }
  .hero-themes { display: none; }
}

@media (max-width: 680px) {
  .site-header .brand { gap: 9px; }
  .site-header .brand img { width: 45px; height: 45px; }
  .site-header .brand-name { font-size: 17px; }
  .site-header .brand-name small { margin-bottom: 3px; font-size: 8px; }
  .hero-compass-watermark { left: -190px; bottom: -215px; opacity: .15; }
  .hero-foundation-lockup { gap: 11px; margin-bottom: 22px; }
  .hero-foundation-lockup img { width: 54px; height: 54px; }
  .hero-foundation-lockup p { font-size: 26px; }
  .hero-foundation-lockup span { margin-bottom: 4px; font-size: .36em; letter-spacing: .15em; }
}