:root {
  --bg: #ffffff;
  --ink: #111111;
  --muted: #5c5c5c;
  --line: #e6e6e6;
  --sans: "Inter", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: #fff; }

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 80;
  background: var(--ink);
  color: #fff;
  padding: 0.5rem 0.8rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { top: 1rem; }

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6rem var(--gutter) 4.5rem;
}
.hero > * { min-width: 0; max-width: 100%; }
.hero h1 {
  font-weight: 500;
  font-size: clamp(1.85rem, 4.5vw, 3.55rem);
  letter-spacing: -0.032em;
  line-height: 1.04;
  text-transform: uppercase;
}
.hero h1 span { display: block; }
.br-m { display: none; }
.hero-mark {
  background: transparent;
  width: clamp(3.4rem, 6vw, 4.6rem);
  height: auto;
  margin: 2.4rem 0 2.6rem;
}

.platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.6rem;
}
.platforms a {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.platforms i {
  font-style: normal;
  color: #8a8a8a;
}
.platforms span { color: var(--ink); }
.platforms a:hover span { opacity: 0.5; }

.product {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6rem var(--gutter) 4.5rem;
}
.product .kicker {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.85rem;
}
.product h1 {
  font-weight: 500;
  font-size: clamp(1.85rem, 4.2vw, 3.2rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: 18ch;
}
.lines {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2.4rem;
  margin-top: 2.4rem;
}
.lines li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lines i { font-style: normal; color: #8a8a8a; }
.lines span { color: var(--ink); }

@media (max-width: 640px) {
  .hero,
  .product { padding-top: 4.5rem; padding-bottom: 3rem; }
  .hero h1 { font-size: clamp(1.85rem, 8.8vw, 2.25rem); }
  .br-m { display: inline; }
  .platforms,
  .lines { flex-direction: column; gap: 1rem; }
}