/* Pixel values come from the Figma frame (1512 × 967). */
:root {
  --bg: #000;
  --fg: #fff;
  --line: #252525;
  --nav-bg: #0f0f0f;
  --nav-fg: #555;
  --lang-off: #646464;
  --stripe-1: #f4580a;
  --stripe-2: #7a2c05;
  --stripe-3: #622304;
  --stripe-4: #180901;
  --font-display: "Science Gothic", sans-serif;
  --font-text: "Work Sans", "Manrope", sans-serif; /* Work Sans has no Cyrillic, Manrope covers UA */
  --font-mono: "PT Mono", monospace;
  --left-w: 454px; /* 453 + 1px divider */
  --bottom-h: 224px; /* 743 → 967 */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}

p, h1 { margin: 0; }
img { display: block; }
[hidden] { display: none !important; }

.page {
  display: grid;
  grid-template-columns: var(--left-w) 1fr;
  height: 100svh;
  min-height: 700px;
  overflow: hidden;
}

/* ---------- Left column ---------- */
.left {
  position: relative;
  display: grid;
  grid-template-rows: 1fr var(--bottom-h);
  border-right: 1px solid var(--line);
}

.left__top { position: relative; }

.logo { position: absolute; left: 30px; top: 30px; }

.iso { position: absolute; inset: 0; pointer-events: none; }

/* SVG sits at (105, 302) in a 454 × 743 area — keep that relation when the area resizes */
.iso__fallback {
  position: absolute;
  left: calc(50% - 122px);
  top: calc(50% - 69.5px);
}

.iso canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.mark { position: absolute; left: 30px; bottom: 30px; width: 45px; height: 45px; }
.mark img { position: absolute; }
.mark__outer { left: 0; top: 0; }
.mark__mid { left: 9px; top: 9px; }
.mark__dot { left: 19px; top: 19px; }

.clock {
  position: absolute;
  right: 30px;
  bottom: 40px;
  font: 700 16px/normal var(--font-display);
  font-variation-settings: "CTRS" 0, "wdth" 100;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.left__bottom {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.place {
  position: absolute;
  left: 30px;
  top: 30px;
  font: 400 14px/25px var(--font-text);
  letter-spacing: 0.28px;
}

.compass { position: absolute; left: 271px; top: 30px; width: 153px; height: 153px; }
.compass img { position: absolute; }
.compass__ring { left: 0; top: 0; }
.compass__needle {
  left: 26px;
  top: 19.7px;
  overflow: visible;
  transform-origin: 51px 56.3px; /* needle pivot inside the SVG */
}
.compass span {
  position: absolute;
  font: 400 12px/normal var(--font-mono);
  transform: translateY(-50%);
}
.compass__n { left: 73px; top: 15px; }
.compass__e { left: 136px; top: 78px; }
.compass__s { left: 73px; top: 141px; }
.compass__w { left: 9px; top: 78px; }

.brave { position: absolute; left: 30px; bottom: 39px; }

/* ---------- Right column ---------- */
.right { position: relative; min-width: 0; }

.nav {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 1px;
  height: 71px;
  margin-left: 1px;
}

.nav__logo { display: none; }

.nav__item,
.nav__lang {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nav-bg);
}

.nav__item {
  flex: 1 0 0;
  min-width: 1px;
  padding: 0 30px;
  font: 300 14px/normal var(--font-display);
  font-variation-settings: "CTRS" 0, "wdth" 100;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--nav-fg);
  text-decoration: none;
}

a.nav__item { transition: color .2s; }
a.nav__item:hover { color: var(--fg); }

.nav__lang { padding: 0 30px; }

.lang {
  display: flex;
  gap: 9px;
  width: 78px;
  height: 27px;
  padding: 3px 10px 3px 11px;
  border: 1px solid var(--line);
  border-radius: 260px;
}

.lang button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: 300 14px/normal var(--font-display);
  font-variation-settings: "CTRS" 0, "wdth" 100;
  text-transform: uppercase;
  color: var(--lang-off);
  transition: color .2s;
}

.lang button:hover,
.lang button[aria-pressed="true"] { color: var(--fg); }

.hero {
  position: absolute;
  z-index: 1;
  left: 51px;
  top: 132px;
}

.hero__kicker { font: 400 14px/normal var(--font-text); letter-spacing: 0.28px; }

.hero__title {
  position: absolute;
  top: 46px; /* 178 − 132 */
  width: 666px;
  font: 400 44px/normal var(--font-display);
  font-variation-settings: "CTRS" 0, "wdth" 100;
  text-transform: uppercase;
}

.hero__note {
  position: absolute;
  top: 271px; /* 403 − 132 */
  font: 700 14px/25px var(--font-text);
  letter-spacing: 0.28px;
  white-space: nowrap;
}

.stripes { position: absolute; left: 0; right: 0; bottom: 0; }
.stripes i { display: block; }
.stripes__1 { height: 56px; width: 58.79%; background: var(--stripe-1); } /* 622 of 1058 */
.stripes__2 { height: 57px; background: var(--stripe-2); }
.stripes__3 { height: 56px; background: var(--stripe-3); }
.stripes__4 { height: 55px; background: var(--stripe-4); }

.drone {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 142px;
  height: min(753px, calc(100% - 214px));
  aspect-ratio: 602 / 753;
  perspective: 1400px;
  pointer-events: none;
}

.drone__img {
  width: 100%;
  height: 100%;
  object-fit: fill; /* the design stretches the 1024×820 render into the 602×753 box */
  transform: scaleX(-1); /* and mirrors it */
  will-change: transform;
}

.drone canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Narrow screens (not in the design: stacked layout) ---------- */
@media (max-width: 1000px) {
  .page { display: flex; flex-direction: column; height: auto; min-height: 0; overflow: visible; }
  .right { order: 1; display: flex; flex-direction: column; }
  .left { order: 2; width: auto; border-right: 0; grid-template-rows: auto auto; }
  .left__top { height: 300px; }
  .left__bottom { width: auto; height: var(--bottom-h); }
  .logo { display: none; }

  .nav { margin: 0; height: 64px; justify-content: space-between; background: var(--nav-bg); }
  .nav__logo { display: flex; align-items: center; padding: 0 20px; }
  .nav__item { display: none; }
  .nav__lang { padding: 0 20px; }

  .hero { position: static; padding: 48px 20px 0; }
  .hero__title, .hero__note { position: static; width: auto; }
  .hero__title { margin-top: 24px; font-size: clamp(28px, 7.5vw, 44px); }
  .hero__note { margin-top: 24px; white-space: normal; }

  .drone { position: relative; order: 2; align-self: flex-end; bottom: auto; height: auto; width: min(100%, 602px); margin-top: -40px; }
  .stripes { position: relative; order: 3; margin-top: -180px; }

  .compass { left: auto; right: 20px; }
  .place, .brave { left: 20px; }
  .mark { left: 20px; }
  .clock { right: 20px; }
}