:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  color: #f2f5f6;
  background: #000;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --cyan: #42d4fa;
}

* { box-sizing: border-box; }
body { min-width: 280px; margin: 0; }
.page {
  max-width: 1920px;
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  padding: clamp(25px, 3.3vw, 60px) clamp(24px, 5vw, 96px) 30px;
  display: flex;
  flex-direction: column;
  overflow: clip;
}
.masthead, .baseline { display: flex; align-items: center; justify-content: space-between; }
.masthead { position: relative; z-index: 2; }
.wordmark { font-size: 20px; font-weight: 800; letter-spacing: .2em; }
.wordmark__point { color: var(--cyan); }
.launch { display: flex; align-items: center; gap: 11px; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.launch__light { width: 5px; height: 5px; background: var(--cyan); }
.hero { flex: 1; display: grid; grid-template-columns: 1.13fr 1fr; align-items: center; min-height: 610px; }
.statement { position: relative; z-index: 1; padding-block: 55px 80px; }
.eyebrow { display: flex; align-items: center; gap: 15px; margin: 0 0 36px; color: #8c9ca6; text-transform: uppercase; font-size: 10px; font-weight: 500; letter-spacing: .23em; }
.eyebrow::before { content: ""; display: block; width: 24px; height: 1px; background: var(--cyan); }
h1 { margin: 0 0 0 -.055em; font-size: clamp(48px, 6.85vw, 131px); font-weight: 800; letter-spacing: -.075em; line-height: 1.02; }
h1 span { display: block; white-space: nowrap; }
.statement__accent { color: var(--cyan); }
.signal { display: flex; align-items: center; width: 135px; height: 14px; margin-top: 48px; }
.signal::before { content: ""; width: 118px; height: 1px; background: linear-gradient(90deg, #42d4fa, #12303a); }
.signal span { width: 5px; height: 5px; margin-left: 12px; background: #42d4fa; transform: rotate(45deg); }
.identity { position: relative; isolation: isolate; display: grid; place-items: center; width: 122%; margin-left: -8%; }
.identity__logo { position: relative; display: block; width: 100%; height: auto; filter: contrast(1.32) brightness(1.05); mix-blend-mode: screen; }
.identity__field { position: absolute; z-index: -1; inset: 6% 0 4%; opacity: .55; transform: rotate(-30deg); border: 1px solid #18303a; clip-path: polygon(0 0, 100% 0, 100% 19%, 0 19%, 0 81%, 100% 81%, 100% 100%, 0 100%); }
.identity__field::before { content: ""; position: absolute; inset: 9%; border: 1px solid #102128; }
.baseline { gap: 28px; padding-top: 22px; }
.baseline__line { height: 1px; background: #152027; flex: 1; }
.baseline__mark { color: var(--cyan); font-size: 14px; font-weight: 800; }

@media (min-width: 1600px) {
  .hero { min-height: 720px; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; justify-items: center; min-height: 0; padding-block: 10px 30px; }
  .identity { grid-row: 1; width: min(88vw, 450px); margin: -5px 0 -30px; }
  .identity__field { inset: 15% 2%; }
  .statement { width: 100%; padding: 0; text-align: center; }
  .eyebrow { justify-content: center; margin-bottom: 24px; font-size: 9px; }
  h1 { font-size: clamp(42px, 9vw, 80px); line-height: 1.01; margin-left: 0; }
  .signal { margin: 28px auto 0; }
  .baseline { padding-top: 0; }
}
@media (max-width: 480px) {
  .page { padding: 26px 24px 23px; }
  .wordmark { font-size: 15px; }
  .launch { font-size: 9px; gap: 8px; }
  .hero { padding-block: 15px 32px; align-content: center; }
  .identity { width: 102%; max-width: 390px; margin-bottom: -9px; }
  h1 { font-size: clamp(38px, 10.4vw, 50px); }
  .eyebrow { margin-bottom: 23px; letter-spacing: .17em; }
  .signal { margin-top: 30px; }
  .baseline { gap: 16px; }
}
@media (max-height: 540px) and (min-width: 600px) {
  .page { padding: 22px 35px; }
  .hero { grid-template-columns: 1.15fr 1fr; padding-block: 10px; min-height: 0; }
  .statement { text-align: left; padding-block: 20px; }
  .eyebrow { justify-content: flex-start; margin-bottom: 24px; }
  h1 { font-size: 6.3vw; }
  .identity { grid-row: auto; width: 110%; margin: -35px 0 -35px -5%; }
  .signal { margin: 25px 0 0; }
  .baseline { padding-top: 5px; }
}