.agent-orbit-hero {
  --agent-orbit-bg: #09090b;
  --agent-orbit-text: #ffffff;
  --agent-orbit-stage-height: 100dvh;
  --agent-orbit-perspective: 1200px;
  --agent-orbit-plane-tilt: 20deg;
  --agent-orbit-center-x: 50%;
  --agent-orbit-center-y: 62%;
  --agent-orbit-card-rotation: 90deg;
  --agent-orbit-card-radius: 4px;
  --agent-orbit-image-filter: saturate(0.9) brightness(0.88) contrast(0.98);
  --agent-orbit-content-width: 960px;
  --agent-orbit-content-gutter: 28px;
  --agent-orbit-content-bottom: clamp(48px, 8dvh, 84px);
  --agent-orbit-heading-size: clamp(42px, 5.4vw, 66px);
  --agent-orbit-heading-line-height: 1.04;
  --agent-orbit-heading-gap: 0.12em;
  --agent-orbit-subline-size: 22px;
  --agent-orbit-subline-width: 760px;
  --agent-orbit-subline-margin: 22px;
  --agent-orbit-cta-margin: 28px;
  --agent-orbit-youtube-width: 0.9em;
  --agent-orbit-youtube-height: 0.62em;
  --agent-orbit-youtube-tilt: -9deg;
  --agent-orbit-back-radius: 680px;
  --agent-orbit-back-card-width: 220px;
  --agent-orbit-back-card-height: 124px;
  --agent-orbit-back-blur: 8px;
  --agent-orbit-back-opacity: 0.32;
  --agent-orbit-back-depth: 220px;
  --agent-orbit-back-duration: 60s;
  --agent-orbit-middle-radius: 550px;
  --agent-orbit-middle-card-width: 204px;
  --agent-orbit-middle-card-height: 115px;
  --agent-orbit-middle-blur: 4px;
  --agent-orbit-middle-opacity: 0.54;
  --agent-orbit-middle-depth: 0px;
  --agent-orbit-middle-duration: 60s;
  --agent-orbit-front-radius: 390px;
  --agent-orbit-front-card-width: 152px;
  --agent-orbit-front-card-height: 86px;
  --agent-orbit-front-blur: 2px;
  --agent-orbit-front-opacity: 1;
  --agent-orbit-front-depth: -260px;
  --agent-orbit-front-duration: 60s;
  --agent-orbit-bottom-fade: linear-gradient(to top, var(--agent-orbit-bg) 10%, rgb(9 9 11 / 80%) 40%, transparent 100%);
  --agent-orbit-edge-fade: radial-gradient(ellipse at center, rgb(9 9 11 / 0%) 0%, rgb(9 9 11 / 0%) 48%, rgb(9 9 11 / 80%) 100%);
  --agent-orbit-content-glow: radial-gradient(ellipse at center, rgb(9 9 11 / 92%) 0%, rgb(9 9 11 / 58%) 45%, rgb(9 9 11 / 0%) 76%);
  --agent-orbit-grain-opacity: 0.1;
  display: block;
  overflow: hidden;
  background: #000;
}

.agent-orbit-hero > .container {
  width: 100%;
  max-width: none;
  padding: 0;
}

.agent-orbit-hero__stage,
.agent-orbit-hero__stage *,
.agent-orbit-hero__stage *::before,
.agent-orbit-hero__stage *::after {
  box-sizing: border-box;
}

.agent-orbit-hero__stage {
  position: relative;
  display: grid;
  width: 100vw;
  min-height: var(--agent-orbit-stage-height);
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  isolation: isolate;
  place-items: center;
  background:
    radial-gradient(ellipse 62% 48% at 50% 44%, rgb(31 41 58 / 20%), transparent 70%),
    var(--agent-orbit-bg);
  color: var(--agent-orbit-text);
}

.agent-orbit-hero__rings {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  perspective: var(--agent-orbit-perspective);
  transform-origin: center bottom;
  transform-style: preserve-3d;
}

.agent-orbit-hero__ring {
  --ring-radius: 400px;
  --card-width: 120px;
  --card-height: 68px;
  --card-blur: 0px;
  --card-opacity: 1;
  --ring-depth: 0px;
  position: absolute;
  top: var(--agent-orbit-center-y);
  left: var(--agent-orbit-center-x);
  z-index: 1;
  width: 1px;
  height: 1px;
  transform-style: preserve-3d;
}

.agent-orbit-hero__ring--far {
  --ring-radius: var(--agent-orbit-back-radius);
  --card-width: var(--agent-orbit-back-card-width);
  --card-height: var(--agent-orbit-back-card-height);
  --card-blur: var(--agent-orbit-back-blur);
  --card-opacity: var(--agent-orbit-back-opacity);
  --ring-depth: var(--agent-orbit-back-depth);
  z-index: 3;
  animation: agent-orbit-spin-right var(--agent-orbit-back-duration) linear infinite;
}

.agent-orbit-hero__ring--outer {
  --ring-radius: var(--agent-orbit-middle-radius);
  --card-width: var(--agent-orbit-middle-card-width);
  --card-height: var(--agent-orbit-middle-card-height);
  --card-blur: var(--agent-orbit-middle-blur);
  --card-opacity: var(--agent-orbit-middle-opacity);
  --ring-depth: var(--agent-orbit-middle-depth);
  z-index: 2;
  animation: agent-orbit-spin-left var(--agent-orbit-middle-duration) linear infinite;
}

.agent-orbit-hero__ring--inner {
  --ring-radius: var(--agent-orbit-front-radius);
  --card-width: var(--agent-orbit-front-card-width);
  --card-height: var(--agent-orbit-front-card-height);
  --card-blur: var(--agent-orbit-front-blur);
  --card-opacity: var(--agent-orbit-front-opacity);
  --ring-depth: var(--agent-orbit-front-depth);
  z-index: 1;
  animation: agent-orbit-spin-right var(--agent-orbit-front-duration) linear infinite;
}

.agent-orbit-card {
  --angle: 0deg;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--card-width);
  height: var(--card-height);
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--agent-orbit-card-radius);
  background: transparent;
  box-shadow: 0 22px 58px rgb(0 0 0 / 48%);
  filter: blur(var(--card-blur));
  opacity: var(--card-opacity);
  transform:
    rotateZ(var(--angle))
    translateX(var(--ring-radius))
    rotateZ(var(--agent-orbit-card-rotation))
    translate(-50%, -50%);
  transform-origin: 0 0;
  will-change: transform;
}

.agent-orbit-card::before,
.agent-orbit-card::after {
  display: none;
}

.agent-orbit-card__thumb {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--agent-orbit-card-radius);
  filter: var(--agent-orbit-image-filter);
  object-fit: cover;
  clip-path: inset(0 round var(--agent-orbit-card-radius));
}

.agent-orbit-card--wide,
.agent-orbit-card--large {
  width: var(--card-width);
  height: var(--card-height);
}

.agent-orbit-hero__stage::before,
.agent-orbit-hero__stage::after,
.agent-orbit-hero__stage-grain {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.agent-orbit-hero__stage::before {
  z-index: 2;
  background:
    var(--agent-orbit-edge-fade),
    var(--agent-orbit-bottom-fade);
}

.agent-orbit-hero__stage::after {
  z-index: 2;
  background: linear-gradient(180deg, rgb(9 9 11 / 28%) 0%, rgb(9 9 11 / 0%) 30%, rgb(9 9 11 / 82%) 100%);
}

.agent-orbit-hero__stage-grain {
  z-index: 3;
  background-image:
    radial-gradient(circle at 18% 22%, rgb(255 255 255 / 16%) 0 0.7px, transparent 0.95px),
    radial-gradient(circle at 72% 66%, rgb(255 255 255 / 10%) 0 0.6px, transparent 0.9px),
    radial-gradient(circle at 44% 84%, rgb(0 0 0 / 28%) 0 0.8px, transparent 1px);
  background-position: 0 0, 23px 31px, 47px 11px;
  background-size: 74px 74px, 91px 91px, 113px 113px;
  mix-blend-mode: overlay;
  opacity: var(--agent-orbit-grain-opacity);
}

.agent-orbit-hero__content {
  position: relative;
  z-index: 4;
  display: grid;
  align-self: end;
  width: min(100% - var(--agent-orbit-content-gutter), var(--agent-orbit-content-width));
  justify-items: center;
  margin-bottom: var(--agent-orbit-content-bottom);
  text-align: center;
}

.agent-orbit-hero__content::before {
  position: absolute;
  z-index: -1;
  inset: -76px -112px -88px;
  border-radius: 999px;
  background: var(--agent-orbit-content-glow);
  content: "";
  pointer-events: none;
}

.agent-orbit-hero h1 {
  display: grid;
  justify-items: center;
  max-width: var(--agent-orbit-content-width);
  margin: 0;
  color: var(--agent-orbit-text);
  font-size: var(--agent-orbit-heading-size);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  line-height: var(--agent-orbit-heading-line-height);
  text-align: center;
  text-wrap: balance;
}

.agent-orbit-hero__line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: var(--agent-orbit-heading-gap);
  max-width: 100%;
  min-width: 0;
}

.agent-orbit-hero__nowrap {
  white-space: nowrap;
}

.agent-orbit-hero__youtube-mark {
  position: relative;
  top: -0.04em;
  display: inline-flex;
  width: var(--agent-orbit-youtube-width);
  height: var(--agent-orbit-youtube-height);
  border-radius: 0.18em;
  background: rgb(255 0 0);
  box-shadow: 0 0.08em 0.28em rgb(255 0 0 / 28%);
  transform: rotate(var(--agent-orbit-youtube-tilt));
  transform-origin: 50% 60%;
}

.agent-orbit-hero__youtube-mark::after {
  position: absolute;
  top: 50%;
  left: 52%;
  width: 0.23em;
  height: 0.27em;
  background: var(--agent-orbit-text);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: "";
  transform: translate(-42%, -50%);
}

.agent-orbit-hero__subline {
  max-width: var(--agent-orbit-subline-width);
  margin: var(--agent-orbit-subline-margin) 0 0;
  color: rgb(148 163 184 / 92%);
  font-size: var(--agent-orbit-subline-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  line-height: 1.38;
  text-wrap: balance;
}

.agent-orbit-hero__cta {
  min-height: 54px;
  margin-top: var(--agent-orbit-cta-margin);
  padding-inline: 22px 26px;
  box-shadow: 0 18px 44px rgb(0 0 0 / 28%);
}

@keyframes agent-orbit-spin-right {
  from {
    transform: rotateX(var(--agent-orbit-plane-tilt)) translateZ(var(--ring-depth)) rotateZ(0deg);
  }

  to {
    transform: rotateX(var(--agent-orbit-plane-tilt)) translateZ(var(--ring-depth)) rotateZ(360deg);
  }
}

@keyframes agent-orbit-spin-left {
  from {
    transform: rotateX(var(--agent-orbit-plane-tilt)) translateZ(var(--ring-depth)) rotateZ(0deg);
  }

  to {
    transform: rotateX(var(--agent-orbit-plane-tilt)) translateZ(var(--ring-depth)) rotateZ(-360deg);
  }
}

@media (max-width: 820px) {
  .agent-orbit-hero {
    --agent-orbit-heading-size: clamp(34px, 8.4vw, 46px);
    --agent-orbit-subline-size: 18px;
    --agent-orbit-back-radius: 690px;
    --agent-orbit-back-card-width: 188px;
    --agent-orbit-back-card-height: 106px;
    --agent-orbit-middle-radius: 480px;
    --agent-orbit-middle-card-width: 174px;
    --agent-orbit-middle-card-height: 98px;
    --agent-orbit-front-radius: 310px;
    --agent-orbit-front-card-width: 130px;
    --agent-orbit-front-card-height: 73px;
  }
}

@media (max-width: 600px) {
  .agent-orbit-hero {
    --agent-orbit-center-y: 92%;
    --agent-orbit-plane-tilt: 20deg;
    --agent-orbit-content-width: 342px;
    --agent-orbit-content-gutter: 24px;
    --agent-orbit-content-bottom: clamp(44px, 7dvh, 68px);
    --agent-orbit-heading-size: clamp(30px, 8.2vw, 34px);
    --agent-orbit-heading-line-height: 1.05;
    --agent-orbit-heading-gap: 0.08em;
    --agent-orbit-subline-size: 15px;
    --agent-orbit-subline-width: 292px;
    --agent-orbit-subline-margin: 16px;
    --agent-orbit-cta-margin: 22px;
    --agent-orbit-back-radius: clamp(560px, 150vw, 660px);
    --agent-orbit-back-card-width: 176px;
    --agent-orbit-back-card-height: 99px;
    --agent-orbit-back-blur: 7.5px;
    --agent-orbit-back-opacity: 0.28;
    --agent-orbit-back-depth: 170px;
    --agent-orbit-middle-radius: clamp(390px, 104vw, 470px);
    --agent-orbit-middle-card-width: 166px;
    --agent-orbit-middle-card-height: 93px;
    --agent-orbit-middle-blur: 4px;
    --agent-orbit-middle-opacity: 0.48;
    --agent-orbit-middle-depth: 0px;
    --agent-orbit-front-radius: clamp(250px, 68vw, 320px);
    --agent-orbit-front-card-width: 134px;
    --agent-orbit-front-card-height: 75px;
    --agent-orbit-front-blur: 1.4px;
    --agent-orbit-front-opacity: 0.74;
    --agent-orbit-front-depth: -210px;
    --agent-orbit-bottom-fade: linear-gradient(to top, var(--agent-orbit-bg) 8%, rgb(9 9 11 / 88%) 34%, rgb(9 9 11 / 28%) 62%, transparent 100%);
    --agent-orbit-edge-fade: radial-gradient(ellipse at center, rgb(9 9 11 / 0%) 0%, rgb(9 9 11 / 0%) 42%, rgb(9 9 11 / 88%) 100%);
  }

  .agent-orbit-hero__content::before {
    inset: -64px -36px -78px;
  }

  .agent-orbit-hero__ring--far .agent-orbit-card:nth-child(n + 9),
  .agent-orbit-hero__ring--outer .agent-orbit-card:nth-child(n + 9),
  .agent-orbit-hero__ring--inner .agent-orbit-card:nth-child(n + 8) {
    display: none;
  }

  .agent-orbit-hero__cta {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .agent-orbit-hero {
    --agent-orbit-content-bottom: clamp(36px, 6dvh, 56px);
    --agent-orbit-heading-size: clamp(29px, 8.4vw, 32px);
    --agent-orbit-back-radius: clamp(530px, 146vw, 610px);
    --agent-orbit-middle-radius: clamp(370px, 102vw, 430px);
    --agent-orbit-front-radius: clamp(238px, 66vw, 286px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-orbit-hero__ring {
    animation: none !important;
  }
}