:root {
  color-scheme: dark;
  background: #020304;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #020304;
}

body {
  overflow-x: hidden;
}

.landing {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #020304;
}

.landing__art {
  display: block;
  width: 100%;
  height: 100vh;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.hotspots {
  position: absolute;
  inset: 0;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  margin: auto;
  pointer-events: none;
}

.hotspot {
  position: absolute;
  display: block;
  pointer-events: auto;
  border-radius: 4px;
  outline: none;
}

.hotspot:focus-visible {
  box-shadow: 0 0 0 2px #d8a63c;
}

/* Pozycje procentowe względem obrazu 1920×1080. */
.hotspot--protection { left: 32.8%; top: 4.2%; width: 6.2%; height: 5.2%; }
.hotspot--testing    { left: 41.7%; top: 4.2%; width: 5.1%; height: 5.2%; }
.hotspot--features   { left: 48.8%; top: 4.2%; width: 5.7%; height: 5.2%; }
.hotspot--roadmap    { left: 56.4%; top: 4.2%; width: 6.5%; height: 5.2%; }
.hotspot--guardian   { left: 78.2%; top: 3.5%; width: 19.1%; height: 6.4%; }

.hotspot--enter      { left: 4.0%; top: 59.3%; width: 17.4%; height: 7.4%; }
.hotspot--explore    { left: 21.9%; top: 59.3%; width: 17.4%; height: 7.4%; }

.about-dropdown {
  position: absolute;
  left: 64.6%;
  top: 4.2%;
  width: 5%;
  height: 5.2%;
  pointer-events: auto;
}
.about-dropdown summary { width: 100%; height: 100%; list-style: none; cursor: pointer; border-radius: 4px; }
.about-dropdown summary::-webkit-details-marker { display: none; }
.about-dropdown summary:focus-visible { box-shadow: 0 0 0 2px #d8a63c; outline: none; }
.about-panel {
  position: absolute;
  z-index: 20;
  top: 100%;
  right: -150%;
  width: clamp(180px, 15vw, 250px);
  padding: 7px;
  border: 1px solid #8b641c;
  border-radius: 8px;
  background: rgba(10, 8, 5, .97);
  box-shadow: 0 18px 40px #000c;
}
.about-panel a { display: block; padding: 9px 10px; border-radius: 5px; color: #d8c69e; font: clamp(11px,.8vw,15px)/1.25 Georgia,"Times New Roman",serif; text-decoration: none; }
.about-panel a:hover,.about-panel a:focus-visible { color: #f2c35c; background: #2a1f0e; outline: none; }

.vip-rail { position:absolute;z-index:10;left:50%;bottom:2.5%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(5px,.7vw,12px);width:min(88%,1200px);transform:translateX(-50%); }
.vip-rail[hidden] { display:none; }
.vip-card { min-width:0;padding:clamp(7px,.8vw,13px);border:1px solid #9c6d16;border-radius:8px;color:#eadcbf;background:rgba(10,8,5,.94);box-shadow:0 10px 30px #000b;font:clamp(10px,.75vw,14px)/1.25 Georgia,"Times New Roman",serif;text-decoration:none; }
.vip-card:hover,.vip-card:focus-visible { border-color:#efb32c;background:rgba(28,20,9,.97);outline:none; }
.vip-card strong,.vip-card__body,.vip-card small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.vip-card__label { color:#efb32c;font-size:.72em;letter-spacing:.14em; }
.vip-card strong { margin:4px 0;color:#f1c35d;font-size:1.12em; }
.vip-card small { margin-top:4px;color:#a99978; }

@media (max-aspect-ratio: 16/9) {
  .landing__art {
    height: auto;
    width: 100vw;
  }
}

@media (max-width: 760px) {
  .about-panel { right: -220%; width: 190px; }
  .vip-rail { bottom:1.5%;width:94%; }
  .vip-card { padding:6px; }
  .vip-card__body { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}