@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --black: #000000;
  --accent: #0E00FF;
  --accent-lit: #6E60FF;
  --paper: #FFFFFF;
  --hair-dark: #222222;
  --grid-dark: #191919;
  --on-dark: #9C9C9C;
  --footer: #7A7A7A;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gut: clamp(18px, 3.4vw, 56px);
}

body {
  background: var(--black);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent-lit); outline-offset: 3px; }
.mono { font-family: var(--mono); font-weight: 400; font-size: clamp(10px, .72vw, 11.5px); letter-spacing: .14em; text-transform: uppercase; }

.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient(to right, var(--grid-dark) 0 1px, transparent 1px 120px), repeating-linear-gradient(to bottom, var(--grid-dark) 0 1px, transparent 1px 120px); }
#cloud { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hero > .head, .hero > .stage, .hero > .backers { position: relative; z-index: 2; }
.head { display: flex; align-items: stretch; border-bottom: 1px solid var(--hair-dark); }
.brand { padding: 16px var(--gut); font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; letter-spacing: -.045em; border-right: 1px solid var(--hair-dark); }
.stage { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(56px, 12vh, 132px) var(--gut) clamp(40px, 7vh, 76px); max-width: 68ch; }
h1 { margin: 0 0 clamp(18px, 2.4vh, 28px); font-size: clamp(2.3rem, 5.4vw, 4.5rem); font-weight: 500; line-height: 1; letter-spacing: -.042em; text-wrap: balance; max-width: 22ch; }
.sub { margin: 0 0 clamp(28px, 4vh, 44px); font-size: clamp(.9688rem, 1.15vw, 1.1875rem); font-weight: 400; line-height: 1.45; letter-spacing: -.016em; color: var(--on-dark); max-width: 44ch; }
.cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; background: var(--accent); color: var(--paper); padding: 15px 22px; transition: background .15s ease; }
.cta:hover { background: #0B00CC; }
.cta .arrow { font-family: var(--sans); letter-spacing: 0; }
.backers { display: flex; align-items: center; gap: 0; flex-wrap: wrap; border-top: 1px solid var(--hair-dark); }
.backers .label { padding: 17px var(--gut); color: var(--footer); border-right: 1px solid var(--hair-dark); white-space: nowrap; }
.backers ul { flex: 1; display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.backers li { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 14px clamp(18px, 2.2vw, 34px); border-right: 1px solid var(--hair-dark); font-size: clamp(.875rem, 1.05vw, 1.0625rem); font-weight: 500; letter-spacing: -.028em; color: var(--on-dark); text-align: center; white-space: nowrap; }
.backers li img { display: block; height: 18px; width: auto; opacity: .62; }
.backers li .logo-general-catalyst { height: 27px; }
.backers li .logo-bcv { height: 12px; }
.backers li:last-child { border-right: 0; }

@media (max-width: 760px) {
  .stage { max-width: none; padding-top: clamp(80px, 26vh, 200px); }
  h1 { max-width: none; }
  #cloud { opacity: .5; }
  .backers .label { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--hair-dark); }
  .backers li { padding-block: 15px; }
}