/* oculus — лендинг. Палитра из tokens.css (Дедал: «оптический циан», глаз-апертура). */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font), system-ui, sans-serif;
  color: var(--fg);
  background: var(--bg) url('/static/images/cover.webp') center/cover no-repeat;
  display: flex;
  flex-direction: column;
}
.wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(28px, 8vw, 140px);
  max-width: 760px;
}
.mark {
  display: flex; align-items: center; gap: 14px;
  font-weight: 600; font-size: 20px; letter-spacing: .34em; color: var(--fg);
}
.mark .eye { width: 34px; height: 34px; color: var(--accent); flex: none; }
.mark b { font-weight: 600; color: var(--accent); }
.lead {
  margin-top: 28px; font-weight: 200;
  font-size: clamp(26px, 4vw, 44px); line-height: 1.22;
  color: var(--fg); max-width: 15ch;
}
.sub { margin-top: 18px; font-weight: 300; font-size: 15px; color: var(--muted); letter-spacing: .02em; }
.enter { margin-top: 40px; }
.enter a, .enter button {
  display: inline-block; text-decoration: none; cursor: pointer;
  appearance: none; background: transparent; font-family: inherit;
  font-weight: 500; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); padding: 13px 36px;
  border: 1px solid var(--accent); border-radius: var(--radius);
  transition: background .2s, color .2s;
}
.enter a:hover, .enter button:hover { background: var(--accent); color: var(--accent-fg); }
.foot { padding: 22px clamp(28px, 8vw, 140px); font-weight: 300; font-size: 12px; color: var(--muted); letter-spacing: .14em; }