.page {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(5, 7, 12, 0.72), rgba(5, 7, 12, 0.9)),
    url("/assets/website/features-bg.jpg") center / cover no-repeat;
}
.links a[aria-current="page"] { color: #fff; }
.page .eyebrow { margin: 36px 0 12px; }
.page h1 { font-size: 56px; }
.page-intro, .split {
  width: min(1360px, calc(100% - 64px));
  margin: 0 auto;
}
.page .lead { max-width: 680px; }
.page .features { background: none; padding-top: 8px; }
.page .feature-grid + .feature-grid { margin-top: 18px; }
.page .card { transition: border-color .25s ease, box-shadow .25s ease; }
.page .card:hover {
  border-color: rgba(143, 212, 255, 0.38);
  box-shadow: 0 0 28px rgba(70, 150, 230, 0.16);
}
.fact {
  width: 118px;
  min-height: 118px;
  justify-self: end;
  border-radius: 16px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 10px;
  border: 1px solid rgba(143, 212, 255, 0.32);
  background:
    radial-gradient(circle at 50% 35%, rgba(50, 130, 210, 0.35), rgba(6, 12, 20, 0.88) 70%);
  box-shadow: 0 0 22px rgba(70, 160, 230, 0.18);
}
.fact b { display: block; font-size: 22px; letter-spacing: 0.04em; }
.fact span { display: block; margin-top: 6px; color: #9fb4c8; font-size: 12px; }

.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 36px;
  align-items: center;
  padding: 12px 0 28px;
}
.showcase { width: min(560px, 100%); margin-left: auto; animation: hover 7s ease-in-out infinite; }
.showcase .screen { min-height: 300px; padding: 16px 18px 14px; }
.showcase .clock { font-size: 76px; }

@media (max-width: 1100px) {
  .split { display: block; }
  .showcase { margin: 28px auto 0; }
  .fact { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase { animation: none; }
}