.orbit-tiles {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: clip;
  opacity: 0;
}

/* On short viewports (15" laptops) the tall active card centres into the navbar.
   Shift the orbit down so the presented card clears the nav + marquee (~107px). */
@media (max-height: 840px) {
  .orbit-tiles {
    padding-top: 6em;
  }
}

.orbit-tiles__collection {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.orbit-tiles__list {
  place-items: center;
  display: grid;
}

.orbit-tiles__item {
  will-change: transform, opacity, filter;
  grid-area: 1 / 1;
  justify-content: center;
  align-items: center;
  width: max-content;
  height: max-content;
  display: flex;
}

/* Orbit card: exact port of Osmo product-card */
.orbit-card {
  /* Lock font-size to a fixed px so the card does not ride the site's fluid
     --size-font (which scales with 100vw). Everything inside is em-based, so a
     fixed base + fixed width keeps the card a constant size at any window width. */
  font-size: 16px;
  background-color: #151313;
  color: #f4f4f4;
  /* Match the SVG assets' rx="24" — huly designed them for a 24px radius card */
  border-radius: 1.5em;
  justify-content: center;
  align-items: center;
  width: 24em;
  aspect-ratio: 10 / 13;
  display: flex;
  position: relative;
  /* overflow: visible so the glow video can radiate outside the card edges */
  overflow: visible;
  pointer-events: auto;
  text-decoration: none;
  cursor: pointer;
}

.orbit-card.is--purple {
  background-color: #6840ff;
}

.orbit-card.is--black {
  background-color: #000;
}

.orbit-card.is--electric {
  background-color: #a1ff62;
  color: #201d1d;
}

.orbit-card__content {
  flex-flow: column;
  width: 100%;
  height: 100%;
  padding: 2.5em;
  display: flex;
  position: absolute;
  z-index: 3;
}

.orbit-card__intro {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  background-color: inherit;
  overflow: hidden;
  display: flex;
}

.orbit-card__intro::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(21,19,19,1) 0%, rgba(21,19,19,0.7) 25%, rgba(21,19,19,0) 50%);
  pointer-events: none;
}

.orbit-card__intro-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform: scale(1.12) translateY(-6%);
  transform-origin: top center;
}

.orbit-card__intro-content {
  position: relative;
  z-index: 1;
  flex-flow: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding: 2.5em 2.5em 0;
  display: flex;
}

.orbit-card__intro-content .orbit-card__center-content {
  flex: none;
  padding-bottom: 0;
}

.orbit-card.is--neutral {
  background-color: #e1e1e1;
  color: #201d1d;
}

/* Huly-style gradient border on active orbit card (issue #46).
   SVG uses mix-blend-mode:screen so the dark #0D0F11 fill is transparent,
   leaving only the bright gradient border strokes visible over the card. */

.orbit-card__border-glow {
  pointer-events: none;
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  z-index: 2;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 0.5s ease;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

[data-orbit-tiles-item-status="active"] .orbit-card__glow-wrap,
[data-orbit-tiles-item-status="active"] .orbit-card__border-glow {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .orbit-card__border-glow {
    transition: none;
  }
  /* Halt the under-nav marquee so the text stays static and readable. */
  [data-css-marquee-list] {
    animation: none;
  }
}

.orbit-card__bg {
  width: 100%;
  height: 100%;
  position: absolute;
  /* Clip the product bg image to the card's rounded corners now that the card
     itself has overflow: visible to allow the outer glow to escape. */
  overflow: hidden;
  border-radius: inherit;
}

.orbit-card__bg-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.orbit-card__tags {
  justify-content: center;
  display: flex;
  gap: 0.375em;
}

.orbit-card__tag {
  color: inherit;
  border-radius: 0.125em;
  justify-content: center;
  align-items: center;
  padding: 0.25em 0.375em 0.1875em;
  display: flex;
  background-color: color-mix(in srgb, #f4f4f4 10%, transparent);
  font-family: Haffer Mono, Arial, sans-serif;
  font-size: 0.6875em;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1;
}

.orbit-card__tag.is--dark {
  background-color: color-mix(in srgb, #201d1d 10%, transparent);
}

.orbit-card__tag.is--round {
  border-radius: 999px;
}

/* a11y: tag text on the purple card needs >=4.5:1; inherited #f4f4f4 was 4.33, pure white is 4.75 */
.orbit-card.is--purple .orbit-card__tag {
  color: #fff;
}

.orbit-card__center-content {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  flex-flow: column;
  flex: 1;
  justify-content: center;
  padding-bottom: 9em;
  display: flex;
}

.orbit-card__btn {
  height: 2.5em;
  flex-flow: column;
  align-items: center;
  /* Hug the pill instead of stretching to full content width, so the glow
     concentrates tightly around the button rather than spreading to nothing. */
  align-self: center;
  display: flex;
  position: relative;
}

/* Exact port of Huly's "See in Action" button glow (huly.io).
   Two blurred border-gradient layers (one mirrored) around a light pill,
   using the padding-box/border-box gradient trick so the gradient renders
   only in the transparent border, then blurred into a warm orange glow. */
.orbit-card__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Huly .border-button-light-blur */
.orbit-card__cta-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  height: calc(100% + 9px);
  width: calc(100% + 9px);
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  border: 3px solid transparent;
  will-change: transform;
}

/* Idle state: glow on the right (first layer visible, mirror hidden). JS cross-fades
   these opacities to track the cursor; this is also the no-JS / reduced-motion look. */
.orbit-card__cta-glow {
  opacity: 1;
}

.orbit-card__cta-glow--mirror {
  transform: translate(-50%, -50%) scaleX(-1);
  opacity: 0;
}

/* Huly .border-button-light-blur::before -- crisp edge, blur 2px */
.orbit-card__cta-glow::before {
  content: '';
  position: absolute;
  left: -0.125rem;
  top: -0.125rem;
  z-index: 10;
  box-sizing: content-box;
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  border: 2px solid transparent;
  filter: blur(2px);
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(97.68deg, rgba(255, 177, 153, 0) 38.1%, rgba(255, 177, 153, 0.2) 82.47%, rgb(255, 121, 80) 93.3%) border-box;
}

/* Huly .border-button-light-blur::after -- broad halo, blur 15px */
.orbit-card__cta-glow::after {
  content: '';
  position: absolute;
  left: -3px;
  top: -3px;
  z-index: 20;
  box-sizing: content-box;
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  border: 3px solid transparent;
  filter: blur(15px);
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(91.88deg, rgba(255, 137, 100, 0.2) 46.45%, rgb(205, 49, 0) 98.59%) border-box;
}

/* Huly .border-button-light */
.orbit-card__cta-glow-inner {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  border: 1px solid transparent;
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(103.7deg, rgba(188, 155, 143, 0.1) 38.66%, rgba(233, 132, 99, 0.1) 68.55%, rgb(233, 132, 99) 85.01%, rgb(255, 255, 255) 92.12%) border-box;
}

/* Huly .border-button-light::before -- blur 7px */
.orbit-card__cta-glow-inner::before {
  content: '';
  position: absolute;
  left: -0.125rem;
  top: -0.125rem;
  z-index: 30;
  box-sizing: content-box;
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  border: 2px solid transparent;
  filter: blur(7px);
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(91.96deg, rgba(255, 177, 153, 0) 6.11%, rgba(255, 177, 153, 0.2) 53.57%, rgb(255, 121, 80) 93.6%) border-box;
}

/* Huly <a> pill */
.orbit-card__cta-pill {
  position: relative;
  z-index: 10;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5em;
  padding: 0 1.5em 0.0625em;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: #d1d1d1;
}

/* Huly inner glow: radial hotspot behind the label, painted over the pill bg
   (z-index below the label, above the background) and clipped to the pill. */
.orbit-card__cta-hotspot {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform;
}

/* Huly h-[121px] w-[121px] core (exact px) */
.orbit-card__cta-core {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 121px;
  width: 121px;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, #fffff5 3.5%, #ffaa81 26.5%, #ffda9f 37.5%, rgba(255, 170, 129, 0.5) 49%, rgba(210, 106, 58, 0) 92.5%);
}

/* Huly h-[103px] w-[204px] soft, blur 5px (exact px) */
.orbit-card__cta-soft {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 103px;
  width: 204px;
  transform: translate(-50%, -50%);
  background: radial-gradient(43.3% 44.23% at 50% 49.51%, #fffff7 29%, #fffacd 48.5%, #f4d2bf 60.71%, rgba(214, 211, 210, 0) 100%);
  filter: blur(5px);
}

.orbit-card__cta-label {
  position: relative;
  z-index: 1;
  font-family: Haffer VF, Arial, sans-serif;
  font-variation-settings: "wght" 700;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  font-size: 0.75em;
  line-height: 1;
  color: #5a250a;
}

.orbit-card__title {
  text-align: center;
}

.orbit-card__h {
  letter-spacing: -0.04em;
  font-family: Haffer XH, Arial, sans-serif;
  font-size: 4em;
  font-weight: 400;
  line-height: 1;
}

.orbit-card__h.is--m {
  font-size: 2.75em;
  line-height: 0.95;
}

.orbit-card__icon {
  justify-content: center;
  display: flex;
}

.orbit-card__icon-svg {
  width: 2.75em;
  display: block;
}

.orbit-card__text {
  text-align: center;
  text-wrap: balance;
  justify-content: center;
  display: flex;
}

.orbit-card__p {
  font-variation-settings: "wght" 430;
  letter-spacing: -0.01em;
  font-family: Haffer VF, Arial, sans-serif;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.2;
}

@media screen and (max-width: 767px) {
  .orbit-card {
    /* Smaller fixed base so the whole card scales down uniformly on phones;
       still a constant px value, so it never scales while resizing. */
    font-size: 13px;
    width: 24em;
    aspect-ratio: 5 / 7;
  }

  .orbit-card__content {
    padding: 1.5em;
  }

  .orbit-card__center-content {
    padding-bottom: 6.5em;
  }
}

/* Fan-out orbit tiles (desktop only, JS drives x + width) */
.orbit-fan {
  display: grid;
}

.orbit-fan__slot {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fix height so split-proportion cards (different widths) stay the same height */
.orbit-fan__slot .orbit-card {
  aspect-ratio: auto;
  height: 31.2em;
}

/* Expanded blank orbit card (desktop only, JS toggles opacity) */
.orbit-card__expanded {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  padding: 2.5em 3em;
  display: flex;
  align-items: center;
  z-index: 3;
  opacity: 0;
}

.orbit-card__expanded-inner {
  display: flex;
  width: 100%;
  gap: 0;
  align-items: center;
}

.orbit-card__expanded-left {
  flex: 0 0 22em;
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding-right: 4em;
  border-right: 1px solid rgba(244, 244, 244, 0.1);
}

.orbit-card__expanded-eyebrow {
  font-family: Haffer Mono, Arial, sans-serif;
  font-size: 0.6875em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(244, 244, 244, 0.45);
}

.orbit-card__expanded-heading {
  font-family: Haffer XH, Arial, sans-serif;
  font-variation-settings: "wght" 500;
  font-size: 2em;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #f4f4f4;
}

.orbit-card__expanded-body {
  font-family: Haffer VF, Arial, sans-serif;
  font-variation-settings: "wght" 430;
  font-size: 0.875em;
  line-height: 1.5;
  color: rgba(244, 244, 244, 0.5);
}

.orbit-card__expanded-cta {
  margin-top: 0.5em;
}

.orbit-card__expanded-cta .orbit-card__cta-pill {
  display: inline-flex;
}

.orbit-card__expanded-features {
  flex: 1;
  display: flex;
  list-style: none;
  padding: 0 0 0 4em;
  margin: 0;
  gap: 0;
}

.orbit-card__expanded-feature {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding-right: 3em;
  border-right: 1px solid rgba(244, 244, 244, 0.14);
}

.orbit-card__expanded-feature:last-child {
  border-right: none;
  padding-right: 0;
}

.orbit-card__expanded-feature-value {
  font-family: Haffer Mono, Arial, sans-serif;
  font-size: 2.75em;
  line-height: 1;
  letter-spacing: 0;
  color: #f4f4f4;
}

.orbit-card__expanded-feature-label {
  font-family: Haffer VF, Arial, sans-serif;
  font-variation-settings: "wght" 430;
  font-size: 0.8125em;
  line-height: 1.35;
  color: rgba(244, 244, 244, 0.4);
}

.bunny-bg {
  pointer-events: none;
  color: #fff;
  isolation: isolate;
  border-radius: 1em;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform: translateX(0);
}

.bunny-bg__shader {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(8px);
}

[data-barba-namespace="home"] {
  background-color: #000;
}

.demo-section {
  color: #efeeec;
  background-color: #000;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 100svh;
  padding: 4vw;
  display: flex;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.demo-section__fade-left {
  pointer-events: none;
  background-image: linear-gradient(45deg, #000, #0000 50%);
  width: 90vw;
  height: 90vw;
  position: absolute;
  bottom: 0;
  left: 0;
}

@media screen and (max-width: 991px) {
  .demo-section {
    padding-bottom: 25vw;
  }
}

/* Blank orbit card: fixed height so JS-driven width expansion is purely horizontal */
[data-orbit-blank] .orbit-card {
  aspect-ratio: unset;
  height: 31.2em; /* 24em × 13/10, matches normal card height at front */
}