/* Keep the opening screen focused on the real product UI. */
.hero {
  padding-top: 166px;
  padding-bottom: 18px;
  background: #080d18;
}

.hero-bg {
  opacity: 1;
  background:
    radial-gradient(ellipse 62% 70% at 77% 44%, #1d58ac52 0%, #132d5b25 49%, transparent 78%),
    radial-gradient(ellipse 45% 55% at 21% 20%, #182c4b44, transparent 76%),
    linear-gradient(180deg, #0a1323 0%, #080e1b 65%, #070a11 100%);
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .2;
  background-image: linear-gradient(#7ea8e514 1px, transparent 1px),
                    linear-gradient(90deg, #7ea8e514 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 65% 68% at 73% 42%, #000, transparent 86%);
  mask-image: radial-gradient(ellipse 65% 68% at 73% 42%, #000, transparent 86%);
}

.hero-content {
  max-width: 1440px;
  width: calc(100% - 64px);
  grid-template-columns: minmax(380px, .78fr) minmax(0, 1.42fr);
  gap: clamp(36px, 4vw, 68px);
  min-height: 590px;
  padding-bottom: 62px;
}

.hero-copy { max-width: 540px; }
.hero h1 { font-size: clamp(54px, 4.25vw, 70px); }
.hero .lead { color: #dbe5f5; }
.hero-sub { color: #aebdd3; }

.hero-product {
  width: 100%;
  max-width: none;
  margin: 0;
  transform: none;
}

.hero-product::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% -3% -4%;
  border-radius: 50%;
  background: #246bfd33;
  filter: blur(55px);
  pointer-events: none;
}

.hero-product .product-frame {
  display: block;
  padding: 8px;
  overflow: hidden;
  border: 1px solid #7ca4e269;
  border-radius: 17px;
  background: linear-gradient(145deg, #263d60 0%, #0c192f 28%, #101b2f 100%);
  box-shadow: 0 28px 75px #0009, 0 0 0 1px #ffffff0c, 0 0 82px #246bfd18;
  transform: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.hero-product .product-frame:hover {
  border-color: #95bcf0;
  box-shadow: 0 34px 82px #000a, 0 0 0 1px #ffffff16, 0 0 92px #246bfd25;
  transform: translateY(-3px);
}

.hero-product img {
  width: 100%;
  height: auto;
  border-radius: 9px;
  filter: brightness(1.07);
}

.hero-product figcaption {
  margin-top: 15px;
  color: #a7b9d3;
  font-size: 11px;
  letter-spacing: .03em;
  top: 0;
}

.hero-product figcaption a { color: #d5e5ff; text-underline-offset: 3px; }
.hero-product figcaption a:hover { text-decoration: underline; }

.capabilities {
  max-width: 1440px;
  width: calc(100% - 64px);
  border-top-color: #a3c3ef29;
  border-bottom-color: #a3c3ef1c;
}

@media (max-width: 1200px) {
  .hero { padding-top: 154px; }
  .hero-content {
    max-width: 960px;
    grid-template-columns: 1fr;
    gap: 44px;
    min-height: 0;
    padding-bottom: 68px;
  }
  .hero-copy { max-width: 680px; }
  .hero h1 { font-size: clamp(54px, 6.2vw, 72px); }
  .hero-product { max-width: 960px; }
}

@media (max-width: 820px) {
  .hero { padding-top: 145px; }
  .hero-content { gap: 38px; }
  .capabilities { width: calc(100% - 64px); }
}

@media (max-width: 560px) {
  .hero { padding-top: 126px; }
  .hero-content { width: calc(100% - 40px); gap: 34px; padding-bottom: 40px; }
  .hero h1 { font-size: clamp(42px, 11.5vw, 64px); }
  .hero .actions { flex-wrap: wrap; }
  .hero-product { width: calc(100% + 12px); margin-left: -6px; padding-bottom: 0; }
  .hero-product .product-frame { padding: 4px; border-radius: 12px; }
  .hero-product img { border-radius: 7px; }
  .hero-product figcaption { margin: 13px 6px 0; font-size: 10px; text-align: left; }
  .capabilities { width: calc(100% - 40px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-product .product-frame { transition: none; }
  .hero-product .product-frame:hover { transform: none; }
}