@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  color: #ececf1;
  background:
    radial-gradient(800px 320px at 50% -10%, rgba(255,255,255,.06), transparent 55%),
    #09090b;
  font: 16px/1.5 'Instrument Sans', system-ui, sans-serif;
}
a { color: inherit; text-decoration: none; }

.wrap { width: min(980px, calc(100% - 40px)); margin: 0 auto; }
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0;
}
.mark {
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 13px;
}
.top span { color: #8b8b96; font-size: 13px; }

.hero { padding: 48px 0 36px; }
.hero h1 {
  background: linear-gradient(110deg, #fff 20%, #c4b5fd 50%, #7dd3fc 80%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sf-title 8s ease-in-out infinite;
}
@keyframes sf-title {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.hero p.kicker {
  color: #8b8b96;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 12px;
}
h1 {
  margin: 12px 0 14px;
  font-size: clamp(2.8rem, 7vw, 4.8rem);
  letter-spacing: -.05em;
  line-height: .95;
}
.hero p.lead { max-width: 520px; color: #9a9aa6; }

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 8px 0 64px;
}
.card {
  padding: 22px;
  border: 1px solid #222228;
  border-radius: 16px;
  background: #111114;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card:hover { border-color: #3a3a44; }
.card small { color: #8b8b96; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.card h2 { margin: 10px 0 6px; font-size: 1.35rem; }
.card p { color: #9a9aa6; font-size: 14px; }
.card.wide { grid-column: 1 / -1; }

.foot {
  padding: 22px 0 40px;
  color: #6f6f7a;
  font-size: 13px;
  border-top: 1px solid #1c1c22;
}

@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; }
  .card.wide { grid-column: auto; }
}