:root {
  color-scheme: dark;
  --ink: #f4f7fb;
  --muted: #b8c3d5;
  --line: rgba(210, 223, 245, 0.22);
  --blue: #82a9ff;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: #05070b;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

.hero {
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 4rem);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
}

.backdrop {
  background:
    linear-gradient(90deg, rgba(4, 6, 11, .94) 0%, rgba(4, 6, 11, .77) 42%, rgba(4, 6, 11, .22) 100%),
    linear-gradient(0deg, rgba(4, 6, 11, .72), transparent 52%),
    url("./quantum-hardware.png") center / cover no-repeat;
  inset: 0;
  position: absolute;
  z-index: -2;
}

.backdrop::after {
  background: radial-gradient(ellipse at 72% 47%, rgba(75, 113, 194, .16), transparent 44%);
  content: "";
  inset: 0;
  position: absolute;
}

.grain {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  inset: 0;
  mix-blend-mode: soft-light;
  opacity: .16;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.nav, footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.wordmark {
  color: var(--ink);
  font: 500 1.18rem/1 Consolas, "Courier New", monospace;
  letter-spacing: .2em;
  text-decoration: none;
}

.status, .eyebrow, footer {
  color: var(--muted);
  font: 500 .72rem/1.4 Consolas, "Courier New", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.status {
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 1.08rem;
  padding: .78rem 1.16rem;
}

.content { align-self: center; max-width: 75rem; padding: clamp(2rem, 7vh, 5rem) 0; }

.eyebrow { color: var(--blue); margin: 0 0 1.35rem; }

h1 {
  font-size: clamp(3.2rem, 8vw, 8.8rem);
  font-weight: 700;
  letter-spacing: -.075em;
  line-height: .95;
  margin: 0;
  max-width: 10.5ch;
  text-wrap: balance;
}

.statement {
  color: #d7e0ef;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  font-weight: 500;
  line-height: 1.45;
  margin: 2rem 0 0;
  max-width: 34rem;
}

footer { border-top: 1px solid var(--line); padding-top: 1.2rem; }

.contacts {
  align-items: end;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  padding: 1.15rem 0 1.35rem;
}

.contacts > p {
  color: var(--blue);
  font: 500 .92rem/1.4 Consolas, "Courier New", monospace;
  letter-spacing: .08em;
  margin: 0;
  text-transform: uppercase;
}

.contact-list { display: flex; gap: clamp(1.6rem, 5vw, 5rem); }

.contact-list a {
  color: var(--muted);
  display: grid;
  font: 400 1rem/1.6 Consolas, "Courier New", monospace;
  text-decoration: none;
}

.contact-list a:hover { color: var(--ink); }
.contact-name { color: var(--ink); font-size: 1.08rem; font-weight: 500; }

@media (max-width: 620px) {
  .hero { padding: 1.35rem; }
  .backdrop { background-position: 63% center; }
  h1 { font-size: clamp(3.1rem, 15vw, 5.1rem); }
  .wordmark { font-size: 1rem; }
  .status { font-size: .75rem; padding: .62rem .82rem; }
  .contacts { align-items: start; flex-direction: column; gap: .8rem; }
  .contact-list { flex-direction: column; gap: .85rem; }
  .contact-list a { font-size: .92rem; }
  .contact-name { font-size: 1rem; }
  footer { align-items: flex-start; flex-direction: column; gap: .5rem; }
}