/* Hero polish: improved headline rhythm and animated Open demo CTA. */
.hero-title-spaced {
  max-width: 790px;
  display: grid;
  gap: clamp(8px, 1.2vw, 15px);
  margin-bottom: 24px;
  font-size: clamp(54px, 7.35vw, 88px);
  line-height: .92;
  letter-spacing: -.075em;
}
.hero-title-spaced span {
  display: block;
  text-wrap: balance;
}
.hero-subline {
  margin-bottom: 24px;
}
.hero-actions-demo-only {
  margin: 26px 0 18px;
}
.button-demo-motion {
  --demo-a: #5f7df5;
  --demo-b: #9d7bf0;
  --demo-c: #69e0ff;
  position: relative;
  min-width: 178px;
  height: 54px;
  padding: 0 22px 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(133, 154, 255, .54);
  border-radius: 16px;
  color: #fff;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(95, 125, 245, .98), rgba(157, 123, 240, .98));
  box-shadow:
    0 18px 44px rgba(95, 125, 245, .28),
    0 0 0 1px rgba(255, 255, 255, .06) inset;
  transform: translateZ(0);
}
.button-demo-motion::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -2;
  background: conic-gradient(from 0deg, var(--demo-a), var(--demo-c), var(--demo-b), var(--demo-a));
  animation: demo-cta-spin 4.8s linear infinite;
}
.button-demo-motion::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: 14px;
  background:
    linear-gradient(110deg, transparent 0 28%, rgba(255,255,255,.30) 40%, transparent 52% 100%),
    linear-gradient(135deg, rgba(78, 103, 238, .96), rgba(139, 103, 226, .96));
  background-size: 260% 100%, 100% 100%;
  animation: demo-cta-sheen 3.2s ease-in-out infinite;
}
.demo-button-orb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(circle at 36% 36%, #fff 0 2px, var(--demo-c) 3px 6px, rgba(255,255,255,.18) 7px 100%);
  box-shadow: 0 0 18px rgba(105, 224, 255, .72);
  animation: demo-cta-pulse 2.2s ease-in-out infinite;
}
.demo-button-label,
.demo-button-arrow {
  position: relative;
  z-index: 1;
}
.demo-button-arrow {
  font-size: 19px;
  line-height: 1;
  transform: translateX(0);
  transition: transform .24s ease;
}
.button-demo-motion:hover {
  transform: translateY(-2px);
  box-shadow:
    0 22px 58px rgba(95, 125, 245, .38),
    0 0 34px rgba(105, 224, 255, .16),
    0 0 0 1px rgba(255, 255, 255, .12) inset;
}
.button-demo-motion:hover .demo-button-arrow {
  transform: translateX(4px);
}
.button-demo-motion:active {
  transform: translateY(0) scale(.99);
}

@keyframes demo-cta-spin {
  to { transform: rotate(360deg); }
}
@keyframes demo-cta-sheen {
  0%, 42% { background-position: 145% 0, 0 0; }
  72%, 100% { background-position: -75% 0, 0 0; }
}
@keyframes demo-cta-pulse {
  0%, 100% { transform: scale(.94); opacity: .82; }
  50% { transform: scale(1.08); opacity: 1; }
}

@media (max-width: 860px) {
  .hero-title-spaced {
    font-size: clamp(45px, 14vw, 68px);
    gap: 7px;
    line-height: .95;
  }
  .button-demo-motion {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button-demo-motion::before,
  .button-demo-motion::after,
  .demo-button-orb {
    animation: none;
  }
}