.orbit-shell::before { background: radial-gradient(circle at 68% 22%, rgba(138, 95, 255, .27), transparent 28rem), radial-gradient(circle at 27% 74%, rgba(64, 217, 255, .15), transparent 29rem), linear-gradient(180deg, #03051a, #050a25 55%, #02070b); }.orbit-hero { min-height: 740px; display: grid; align-items: center; padding: 148px 0 78px; }.orbit-container { width: min(var(--max), calc(100% - 48px)); margin: auto; }.orbit-hero .orbit-container { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 30px; }.orbit-copy h1 { max-width: 750px; margin: 0; font: 400 clamp(3rem, 6.2vw, 6.8rem)/.96 var(--display); letter-spacing: -.075em; }.orbit-copy h1 span { background: linear-gradient(90deg, #7edcff, #c386ff, #ee8ee6); -webkit-background-clip: text; background-clip: text; color: transparent; }.orbit-copy .lead { max-width: 535px; margin: 28px 0; }.orbit-cta { border: 0; background: linear-gradient(100deg, #438fff, #9a62f6 53%, #df79d5); box-shadow: 0 0 32px rgba(132, 100, 247, .55); cursor: pointer; }.orbit-visual, .demo-orbit { position: relative; display: grid; width: 390px; height: 360px; place-items: center; justify-self: center; border: 0; background: transparent; isolation: isolate; }.orbit-aura { position: absolute; z-index: -4; width: 272px; height: 272px; border-radius: 50%; background: conic-gradient(#5ce3ff, #865cff, #f17be2, #62dfff); filter: blur(52px); opacity: .32; animation: orbit-turn 12s linear infinite; }.orbit-planet { position: relative; z-index: 2; display: grid; width: 205px; height: 205px; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; background: radial-gradient(circle at 32% 24%, #edffff 0 3%, #9ee0ff 12%, #4a7eea 34%, #34248b 61%, #100b39 100%); box-shadow: inset 16px 15px 32px rgba(208,245,255,.48), inset -25px -25px 40px rgba(12,8,55,.58), 0 0 26px #75d9ff, 0 0 74px rgba(159,88,255,.66); animation: orbit-bob 3.6s ease-in-out infinite; }.orbit-planet::after { content: ""; position: absolute; width: 150%; height: 31%; top: 13%; left: -20%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); filter: blur(9px); transform: rotate(-25deg); }.orbit-shine { position: absolute; top: 31px; left: 31px; width: 43px; height: 25px; border-radius: 50%; background: #fff; filter: blur(9px); opacity: .68; }.orbit-eyes { position: relative; z-index: 4; display: flex; gap: 39px; margin-top: 12px; }.orbit-eyes i { width: 17px; height: 43px; border-radius: 50%; background: linear-gradient(#f7ffff, #a5e8ff 50%, #c982ff); box-shadow: 0 0 11px #f5f8ff, 0 0 20px #8a91ff; }.orbit-ring { position: absolute; z-index: 1; width: 345px; height: 133px; border: 8px solid #9d67fa; border-right-color: #5edfff; border-bottom-color: #e884ff; border-radius: 50%; filter: drop-shadow(0 0 8px #816aff) drop-shadow(0 0 18px #bc6eff); transform: rotate(20deg); animation: orbit-ring 5.5s ease-in-out infinite; }.orbit-ring-back { z-index: 0; opacity: .78; }.orbit-ring-front { clip-path: polygon(0 43%, 100% 0, 100% 100%, 0 100%); }.orbit-moon { position: absolute; z-index: 3; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: radial-gradient(circle at 30% 24%, #fff, #69dcff 31%, #8256f5 75%); box-shadow: 0 0 12px #72dfff, 0 0 24px #975eff; }.orbit-moon-a { width: 20px; height: 20px; animation: orbit-moon-a 7s linear infinite; }.orbit-moon-b { width: 12px; height: 12px; animation: orbit-moon-b 5.2s linear infinite; }.orbit-visual aside { position: absolute; z-index: 5; top: 3px; right: -8px; width: 165px; padding: 15px; border: 1px solid rgba(155,152,243,.65); border-radius: 14px 14px 14px 3px; background: rgba(12,14,52,.87); box-shadow: 0 0 24px rgba(113,86,202,.33); font-size: .9rem; line-height: 1.3; text-align: left; }.orbit-visual aside strong { font-size: 1.05rem; }.orbit-visual aside small { color: var(--muted); }.orbit-playground { padding: 85px 0; border-top: 1px solid rgba(122,139,236,.3); background: radial-gradient(circle at 72% 47%, rgba(77,57,166,.62), rgba(16,17,58,.78) 43%, rgba(4,8,24,.78) 78%); }.playground-grid { display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 30px; }.playground-copy h2 { margin: 0; font: 400 clamp(2.8rem, 5vw, 5.3rem)/.98 var(--display); letter-spacing: -.07em; }.playground-copy > p:not(.eyebrow):not(.orbit-status) { max-width: 500px; color: var(--muted); line-height: 1.55; }.orbit-modes { display: flex; flex-wrap: wrap; gap: 8px; margin: 27px 0 17px; }.orbit-modes button { padding: 9px 13px; border: 1px solid rgba(170,172,233,.42); border-radius: 99px; background: rgba(229,228,255,.06); color: #e7e7f8; cursor: pointer; font: inherit; font-size: .78rem; }.orbit-modes button.active { border-color: #c7edff; background: rgba(115,132,238,.48); }.orbit-status { min-height: 1.4em; color: #bbbce7; font-size: .88rem; }.playground-stage { display: grid; min-height: 388px; place-items: center; }.demo-orbit { cursor: pointer; transform: scale(1.12); }.demo-orbit[data-state="listening"] .orbit-planet { animation-duration: .52s; transform: scale(1.13,.9); }.demo-orbit[data-state="listening"] .orbit-aura { opacity: .64; animation-duration: 1.1s; }.demo-orbit[data-state="listening"] .orbit-ring { animation-duration: .62s; }.demo-orbit[data-state="thinking"] .orbit-ring { animation: orbit-turn 1.55s linear infinite; }.demo-orbit[data-state="thinking"] .orbit-planet { animation: orbit-think 1.1s ease-in-out infinite; }.demo-orbit[data-state="speaking"] .orbit-eyes i { animation: orbit-eyes .28s ease-in-out infinite alternate; }.demo-orbit[data-state="speaking"] .orbit-planet { animation-duration: .25s; }.demo-orbit[data-state="speaking"] .orbit-moon { animation-duration: 1.2s; } @keyframes orbit-turn { to { transform: rotate(360deg); } } @keyframes orbit-bob { 50% { transform: translateY(-9px) scale(1.04); } } @keyframes orbit-ring { 50% { transform: rotate(-10deg) scaleX(1.07); } } @keyframes orbit-moon-a { from { transform: translate(-140px,35px); } 25% { transform: translate(-16px,-130px); } 50% { transform: translate(143px,-8px); } 75% { transform: translate(20px,135px); } to { transform: translate(-140px,35px); } } @keyframes orbit-moon-b { from { transform: translate(119px,83px); } 25% { transform: translate(-97px,95px); } 50% { transform: translate(-117px,-42px); } 75% { transform: translate(88px,-109px); } to { transform: translate(119px,83px); } } @keyframes orbit-think { 50% { transform: translateY(-8px) rotate(5deg) scale(.93); } } @keyframes orbit-eyes { to { transform: scaleY(.56) scaleX(1.18); } } @media (max-width: 850px) { .orbit-hero .orbit-container, .playground-grid { grid-template-columns: 1fr; text-align: center; }.orbit-hero { padding-top: 125px; }.orbit-copy .lead { margin-inline: auto; }.orbit-visual { grid-row: 1; transform: scale(.88); margin: -35px 0; }.orbit-visual aside { right: 0; }.orbit-modes { justify-content: center; }.playground-stage { min-height: 300px; }.demo-orbit { transform: scale(.83); margin: -35px 0; } }