/*
 * Nikro — the studio site.
 *
 * Dark only, and that is a committed decision rather than an oversight: the page
 * paints its own background and text, so under a light system setting it reads
 * as intended rather than as an inverted mistake. `color-scheme: dark` in the
 * markup tells the browser as much.
 *
 * Product colours arrive FROM the products, through `--tint` on each card. The
 * page itself stays neutral: if the studio adopted one app's language, the other
 * would read as a guest on it — and a third would have to be fitted into a
 * palette that was never its own.
 */

:root {
  --bg: #020617;
  --surface: #0f172a;
  --surface-bar: rgba(11, 19, 38, 0.7);
  --line: #1e293b;
  --line-soft: rgba(68, 71, 73, 0.3);
  --fg: #ffffff;
  --muted: #c4c7c9;

  /*
   * System fonts, with no network request at all.
   *
   * The mockup used Geist and JetBrains Mono. Sizes, weights and tracking are
   * taken from it unchanged — those are what carry the look — but the files are
   * not fetched: this is the page an App Store reviewer opens, and every external
   * dependency is one more way for it to fail to open on the day it matters.
   *
   * `-apple-system` also fits because both products are mobile: on the audience's
   * devices this is the system's own typeface.
   */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  line-height: 1.5;
}

/* ─────────────────────────── Header ─────────────────────────── */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface-bar);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(12px);
}

.bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -1.2px;
  color: var(--fg);
  text-decoration: none;
}

.nav-links { display: flex; gap: 24px; }

.nav-link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.nav-link:hover { color: var(--fg); border-bottom-color: #4ae176; }

.nav-button {
  padding: 8px 16px;
  background: var(--line);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.nav-button:hover { background: #27354d; }

/* ─────────────────────────── Content ─────────────────────────── */

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 128px 104px 80px;
}

.hero { margin-bottom: 80px; }

h1 {
  margin: 0;
  font-size: 48px;
  line-height: 1.17;
  font-weight: 700;
  letter-spacing: -0.96px;
  max-width: 16ch;
}

.lede {
  margin: 24px 0 0;
  max-width: 62ch;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}

/* The "Now" line: the dot makes it read as a status indicator — something
   reporting on a system — rather than as one more sentence. */
.now {
  margin: 32px 0 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted);
}

.now-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ae176;
  transform: translateY(-1px);
}

.now-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg);
}

/* ─────────────────────────── Cards ─────────────────────────── */

.apps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 80px;
}

.card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 24px;
  min-height: 400px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
}

/* The product's colour as a hairline is the only place the studio takes colour.
   Filling the card with it is not an option: two large colour blocks start
   competing, and by the fourth app the page turns into a patchwork. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: color-mix(in srgb, var(--tint) 50%, transparent);
}

/* The corner geometry lives on a pseudo-element rather than in real nodes:
   decoration should not appear in the markup or be read out by a screen reader. */
.card::after {
  content: "";
  position: absolute;
  right: -39px;
  bottom: -39px;
  width: 192px;
  height: 192px;
  border: 1px solid var(--line);
  border-radius: 12px;
  opacity: 0.2;
  pointer-events: none;
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  position: relative;
}

.badge {
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.index {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted);
  opacity: 0.5;
}

.card h2 {
  position: relative;
  margin: 32px 0 16px;
  font-size: 32px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.32px;
}

.card p {
  position: relative;
  margin: 0;
  max-width: 42ch;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}

.status {
  margin-top: 16px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-family: var(--sans) !important;
}

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.status.is-accent { color: var(--tint); }

.card-link {
  position: relative;
  margin-top: auto;
  align-self: flex-start;
  padding: 12px 24px;
  border: 1px solid var(--tint);
  color: var(--tint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.card-link:hover { background: color-mix(in srgb, var(--tint) 12%, transparent); }

.card-link:focus-visible,
.nav-link:focus-visible,
.nav-button:focus-visible,
.foot-links a:focus-visible {
  outline: 2px solid #4ae176;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .card-link { transition: none; }
}

/* ─────────────────────────── Studio ─────────────────────────── */

.studio { max-width: 768px; }

.studio h2,
.card h2 { color: var(--fg); }

.studio h2 {
  margin: 0 0 32px;
  font-size: 32px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.32px;
}

.studio p {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}

/* ─────────────────────────── Footer ─────────────────────────── */

footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 104px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  background: #0b1326;
  border-top: 1px solid rgba(68, 71, 73, 0.2);
}

.foot-left { display: flex; flex-direction: column; gap: 8px; }
.foot-left .wordmark { font-size: 24px; }

.foot-right { text-align: right; max-width: 320px; }

.fine {
  margin: 0;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted);
}

a.fine { text-decoration: none; }
a.fine:hover { color: var(--fg); }

.foot-links {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.foot-links a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.foot-links a:hover { color: var(--fg); }

/* ─────────────────────────── Narrow screens ─────────────────────────── */

/*
 * One column, and nothing is reordered. The sequence — headline, apps, studio,
 * contact — stays as it is: the layout has to stay readable on a phone, because
 * a phone is where a shared link gets clicked.
 */
@media (max-width: 900px) {
  main { padding: 96px 24px 64px; }
  footer { padding: 48px 24px; flex-direction: column; gap: 32px; }
  .foot-right { text-align: left; max-width: none; }
  .foot-links { justify-content: flex-start; }
  .bar-inner { padding: 12px 24px; }
  .apps { grid-template-columns: 1fr; }
  h1 { font-size: 36px; letter-spacing: -0.6px; }
  .card { min-height: 0; }
  .card h2 { margin-top: 24px; }
  /* Without a min-height on the card, `margin-top: auto` resolves to zero and the
     button collides with the status. The gap is set explicitly here. */
  .card-link { margin-top: 24px; }
}

@media (max-width: 620px) {
  .nav-links { display: none; }
}