:root {
  --bg: #0a0a0c;
  --fg: #f0f0f0;
  --dim: #333;
  --blue: #1535ee;
  --font: 'JetBrains Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font: 12px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

::selection { background: var(--blue); color: #fff; }

/* ── NAV ── */
.nav {
  position: fixed; top: 0; right: 0;
  z-index: 10;
  display: flex; gap: 28px;
  padding: 22px 30px;
}
.nav a {
  font-weight: 700; font-size: 11px;
  color: var(--dim);
  text-decoration: none;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: color .15s;
}
.nav a:hover { color: var(--blue); }

/* ── MAIN ── */
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  gap: 32px;
}

/* ── LOGO MARK ── */
.mark {
  width: clamp(140px, 22vmin, 220px);
  height: clamp(140px, 22vmin, 220px);
}

/* ── TYPE ── */
h1 {
  font-weight: 800;
  font-size: clamp(20px, 3.6vw, 38px);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fg);
  text-align: center;
}

/* ── FOOTER ── */
.foot {
  position: fixed; bottom: 18px; left: 28px;
  z-index: 10;
  font-size: 10px;
  font-weight: 700;
  color: var(--dim);
  letter-spacing: 2px;
}

@media (max-width: 500px) {
  .nav { gap: 18px; padding: 16px 20px; }
  h1 { letter-spacing: 2px; }
}