:root {
  --slate: #787471;   /* FACTO coming-soon background (from Figma) */
  --ink: #e7e7dd;     /* warm greige type */
  --ink-soft: rgba(231, 231, 221, 0.6);
  --gap: clamp(20px, 4vw, 56px);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--slate);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.frame {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(18px, 2.4vw, 30px) var(--gap);
  gap: clamp(16px, 3vw, 32px);
}

/* ---------- NAV ---------- */
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.brand { display: inline-flex; align-items: center; justify-self: start; color: var(--ink); }

.nav-tagline {
  justify-self: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0.82;
}
.brand-mark {
  display: block;
  height: 16px;
  width: auto;
  color: var(--ink); /* drives the SVG currentColor fill */
}

.nav-utility {
  display: flex;
  justify-content: flex-end;
  justify-self: end;
  gap: clamp(16px, 2vw, 28px);
}

.nav-link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  text-decoration: none;
  opacity: 0.82;
  transition: opacity 0.2s ease;
}

a.nav-link:hover { opacity: 1; }

/* ---------- CENTER STAGE ---------- */
.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(18px, 3vw, 30px);
}

.object {
  width: clamp(300px, 60vmin, 640px);
  height: auto;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ---------- FOOTER ---------- */
.foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.foot-left  { justify-self: start; }
.foot-mid   { justify-self: center; }
.foot-right { justify-self: end; color: var(--ink-soft); text-decoration: none; transition: color 0.2s ease; }
.foot-right:hover { color: var(--ink); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 760px) {
  .nav { grid-template-columns: 1fr; justify-items: center; gap: 10px; }
  .brand, .nav-tagline, .nav-utility { justify-self: center; }

  .object { width: clamp(260px, 78vw, 460px); }

  .foot { grid-template-columns: 1fr; justify-items: center; gap: 8px; text-align: center; }
  .foot-left, .foot-mid, .foot-right { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .object { animation: none; }
}