/* The homepage's product sculpture uses the existing 8Byte palette and Public Sans. */
.hero-home-interactive { padding-bottom: 70px; }
.hero-home-interactive .hero-home-row { row-gap: 18px; }
.hero-home-interactive .hero-home-title {
  font-size: clamp(2.6rem, 4.05vw, 3.65rem);
  line-height: 1.12;
  letter-spacing: -1.8px;
  margin-bottom: 24px;
}
.hero-home-interactive .topContentBg { pointer-events: none; opacity: .45; }
.byte-experience { position: relative; margin: 0; text-align: center; }
.byte-stage {
  position: relative;
  height: clamp(360px, 34vw, 490px);
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 52%, rgba(200, 0, 64, .12), transparent 65%);
}
.byte-canvas, .byte-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.byte-canvas { z-index: 2; }
.byte-canvas canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.hero-home-interactive .byte-fallback { object-fit: contain; margin: 0; border-radius: 0; }
.byte-experience.is-ready .byte-fallback { visibility: hidden; }
.byte-orbit {
  position: absolute;
  width: 88%;
  height: 61%;
  top: 20%;
  left: 6%;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  pointer-events: none;
}
.byte-orbit-one { transform: rotate(-28deg); }
.byte-orbit-two { transform: rotate(28deg); border-color: rgba(200, 0, 64, .25); }
.hero-home-interactive .byte-tag {
  position: absolute;
  z-index: 3;
  padding: 7px 12px;
  background: #12152d;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  color: #ced0df;
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
}
.byte-tag-top { top: 15%; left: 7%; transform: rotate(-6deg); }
.byte-tag-bottom { bottom: 17%; right: 0; transform: rotate(4deg); }
.byte-caption { position: relative; z-index: 3; padding: 0 8px; }
.byte-invitation { color: #fff; font-size: 14px; margin-bottom: 14px; }
.byte-modes {
  display: inline-flex;
  padding: 5px;
  gap: 3px;
  background: rgba(18, 21, 45, .8);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 10px;
}
.byte-modes[hidden], .byte-motion-toggle[hidden] { display: none; }
.byte-modes button {
  padding: 10px 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #c1c4d7;
  transition: background .2s, color .2s;
}
.byte-modes button:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.byte-modes button[aria-pressed="true"] { background: #c80040; color: #fff; }
.byte-description { max-width: 38ch; min-height: 44px; margin: 15px auto 0; color: #c1c4d7; font-size: 13px; line-height: 1.6; }
.hero-home-interactive ~ .partner-solutions .partner-proof-card { transition-property: background, border-color, box-shadow; }
.byte-motion-toggle {
  position: absolute;
  z-index: 4;
  bottom: 7%;
  left: 7%;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  background: #12152d;
  border-radius: 50%;
  color: #fff;
}
.byte-motion-toggle svg { fill: none; stroke: currentColor; stroke-width: 2; }
.byte-play-icon, .byte-motion-toggle[aria-pressed="true"] .byte-pause-icon { display: none; }
.byte-motion-toggle[aria-pressed="true"] .byte-play-icon { display: block; }
.byte-modes button:focus-visible, .byte-motion-toggle:focus-visible,
.hero-home-interactive a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (min-width: 992px) {
  .hero-home-interactive .hero-home-content { padding-right: 14px; }
  .byte-experience { margin-left: 16px; }
}
@media (max-width: 991px) {
  .hero-home-interactive .hero-home-content { max-width: 700px; }
  .byte-experience { max-width: 540px; margin: 0 auto; }
  .byte-stage { height: 390px; }
}
@media (max-width: 575px) {
  .hero-home-interactive { padding-bottom: 36px; }
  .hero-home-interactive .hero-home-title { font-size: 34px !important; line-height: 1.18 !important; letter-spacing: -1px; }
  .byte-stage { height: 320px; }
  .hero-home-interactive .byte-tag { font-size: 11px; }
  .byte-tag-bottom { right: 2%; }
  .byte-modes { display: flex; }
  .byte-modes button { flex: 1; padding: 11px 6px; font-size: 12px; }
  .byte-description { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .byte-modes button { transition: none; }
}