/* One atmospheric, responsive scene for both desktop and mobile. */
.hero {
  isolation: isolate; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
  gap: clamp(1rem,3vw,3rem); min-height: 780px; padding-top: 10rem; padding-bottom: 7rem;
  background: radial-gradient(ellipse at 76% 36%, #16384b 0%, #0b2537 32%, #061927 72%);
}
.hero::after { inset: 0; width: auto; height: auto; border-radius: 0; filter: none; opacity: 1; z-index: 0; pointer-events: none; background: linear-gradient(90deg, #061927c9 0%, #06192770 35%, #06192708 70%), linear-gradient(0deg, #061927b3 0%, transparent 35%); }
.hero-sky { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.hero-grid { z-index: 0; opacity: .3; background-size: 100px 100px; mask-image: linear-gradient(90deg,#0004,transparent 70%); }
.hero-copy { z-index: 2; }
.hero-orbit { position: relative; inset: auto; width: min(36vw, 510px); aspect-ratio: 1; max-width: 100%; justify-self: center; opacity: 1; z-index: 2; }
.hero-orbit::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle,#87cbd528, #84d0b30c 45%,transparent 72%); box-shadow: 0 0 80px #8abfcb0d; }
.hero-orbit .core { inset: 31%; background: none; animation: brand-hover 7s ease-in-out infinite; filter: drop-shadow(0 0 24px #94dcc445); }
.hero-orbit .core img { width: 100%; max-height: 100%; object-fit: contain; }
.hero-orbit .orbit { inset: 10%; border-color: #9cdac641; box-shadow: 0 0 30px #82cdd00a; }
.hero-orbit .orbit-one { animation: brand-ring-one 38s linear infinite; }
.hero-orbit .orbit-two { inset: 21%; border-color: #acb9df45; animation: brand-ring-two 29s linear infinite; }
.hero-orbit .orbit-one::after { width: 7px; height: 7px; top: -4px; left: calc(50% - 4px); background: #b2e6d1; box-shadow: 0 0 16px #a4f6df8a; }
.hero-orbit .orbit-two::after { width: 5px; height: 5px; box-shadow: 0 0 12px #bdd8ff; }
.hero-orbit .orbit-label {
  display: block; position: absolute; inset: auto; transform: translate(-50%,-50%);
  padding: .7rem 1.05rem; border-radius: 100px; border: 1px solid #9ec6d35e;
  background: linear-gradient(130deg,#17374beb,#13273ce8); backdrop-filter: blur(8px);
  box-shadow: 0 8px 28px #020d2440, inset 0 1px 0 #e2fbff12;
  font: 500 clamp(.9375rem,1.35vw,1.125rem)/1.25 "Space Grotesk",var(--body);
  letter-spacing: .025em; color: #e5f6ef; white-space: nowrap; animation: none;
  will-change: transform; transition: border-color .3s, box-shadow .3s;
}
.hero-orbit .label-one { left: 24%; top: 17%; color: #bcebd0; border-color: #90d1ab70; }
.hero-orbit .label-two { left: 87%; top: 45%; color: #badaf2; border-color: #7ab4dd78; }
.hero-orbit .ai-word { font: inherit; color: #e9f6ff; text-shadow: 0 0 12px #acd8ff30; }
.hero-orbit .label-three { left: 36%; top: 87%; color: #e7daf1; border-color: #c5afe375; }
.hero.is-paused *, .hero.is-paused *::before, .hero.is-paused *::after { animation-play-state: paused !important; }
@keyframes brand-hover { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-11px) rotate(2deg); } }
@keyframes brand-ring-one { from { transform: rotate(-20deg); } to { transform: rotate(340deg); } }
@keyframes brand-ring-two { from { transform: rotate(35deg); } to { transform: rotate(-325deg); } }
@media (max-width: 1000px) and (min-width: 851px) { .hero { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }.hero h1 { font-size: 2.75rem; }.hero-orbit { width: 36vw; } }
@media (max-width: 850px) {
  .hero { grid-template-columns: minmax(0,1fr); min-height: 0; padding-top: 8rem; padding-bottom: 5.5rem; gap: 4.5rem; }
  .hero-copy { max-width: 650px; margin: 0; }
  .hero-orbit { position: relative; top: auto; right: auto; width: min(100%,400px); opacity: 1; margin: 0; }
  .hero::after { background: linear-gradient(180deg,#0619279e 0%,#06192770 40%,transparent 70%,#0619276e 100%); }
  .hero-orbit .orbit-label { font-size: 1rem; padding: .6rem .85rem; }
}
@media (max-width: 560px) { .hero { padding-top: 7.5rem; }.hero-orbit { width: min(100%,350px); }.hero-orbit .orbit-label { font-size: .9375rem; padding: .55rem .65rem; } }
@media (max-width: 400px) { .hero-orbit .label-two { text-align: center; }.hero-orbit .label-two .ai-group { display: block; }.hero-orbit .core { inset: 34%; } }
@media (prefers-reduced-motion: reduce) { .hero-orbit *, .hero-orbit *::after { animation: none !important; }.hero-orbit .orbit-label { will-change: auto; } }