body { font-family: 'Inter', sans-serif; }
        .hero-orbit-wrap {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }
        .hero-orbit-fade {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 40%, rgba(2, 6, 23, 0.08), rgba(2, 6, 23, 0.72) 72%);
            z-index: 2;
        }
        .hero-orbit-scene {
            position: relative;
            width: min(78vw, 700px);
            aspect-ratio: 1 / 1;
            perspective: 1000px;
            transform-style: preserve-3d;
            display: grid;
            place-items: center;
            opacity: 0.6;
            transform: translateY(-4%) scale(2);
            z-index: 1;
        }
        .hero-orbit-planet {
            position: absolute;
            width: min(22vw, 180px);
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            background: linear-gradient(135deg, #2bc0ff 0%, #0051d4 100%);
            box-shadow: inset -15px -15px 30px rgba(0, 0, 0, 0.4), 0 0 50px rgba(43, 192, 255, 0.45);
            animation: hero-orbit-pulse 4s ease-in-out infinite;
        }
        .hero-orbit-ring {
            position: absolute;
            width: min(62vw, 520px);
            aspect-ratio: 1 / 1;
            border: 2px solid #f97316;
            border-radius: 50%;
            box-shadow: 0 0 14px rgba(249, 115, 22, 0.7), inset 0 0 14px rgba(249, 115, 22, 0.65);
            transform-style: preserve-3d;
        }
        .hero-orbit-ring-1 { transform: rotateX(72deg) rotateY(30deg); }
        .hero-orbit-ring-2 { transform: rotateX(72deg) rotateY(-30deg); }
        .hero-orbit-spin {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            animation: hero-orbit-spin 6s linear infinite;
        }
        .hero-orbit-ring-2 .hero-orbit-spin {
            animation-direction: reverse;
            animation-duration: 8s;
        }
        .hero-orbit-dot {
            position: absolute;
            width: 14px;
            height: 14px;
            background: #2bc0ff;
            border: 2px solid #f97316;
            border-radius: 50%;
            box-shadow: 0 0 8px #2bc0ff;
        }
        .hero-orbit-dot-1 { top: -8px; left: calc(50% - 8px); }
        .hero-orbit-dot-2 { bottom: -8px; left: calc(50% - 8px); }
        .hero-orbit-ring-2 .hero-orbit-dot-1 { left: -8px; top: calc(50% - 8px); }
        .hero-orbit-ring-2 .hero-orbit-dot-2 { right: -8px; top: calc(50% - 8px); }
        @keyframes hero-orbit-spin {
            from { transform: rotateZ(0deg); }
            to { transform: rotateZ(360deg); }
        }
        @keyframes hero-orbit-pulse {
            0%, 100% { box-shadow: inset -15px -15px 30px rgba(0, 0, 0, 0.4), 0 0 35px rgba(43, 192, 255, 0.45); }
            50% { box-shadow: inset -15px -15px 30px rgba(0, 0, 0, 0.4), 0 0 70px rgba(43, 192, 255, 0.7); }
        }
        @media (max-width: 640px) {
            .hero-orbit-scene { opacity: 0.44; width: min(100vw, 560px); transform: translateY(-2%) scale(1.35); }
            .hero-orbit-ring { border-width: 1.5px; }
        }


.orbit-mark {
    --orbit-size: 32px;
    --orbit-ring: #f97316;
    --orbit-core-a: #2bc0ff;
    --orbit-core-b: #0051d4;
    position: relative;
    display: inline-block;
    width: var(--orbit-size);
    height: var(--orbit-size);
    flex: 0 0 var(--orbit-size);
}
.orbit-mark-sm { --orbit-size: 24px; }
.orbit-mark-md { --orbit-size: 32px; }
.orbit-mark-core {
    position: absolute;
    inset: 28%;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--orbit-core-a), var(--orbit-core-b));
    box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.35), 0 0 8px rgba(43, 192, 255, 0.45);
}
.orbit-mark-ring {
    position: absolute;
    inset: 4%;
    border: 1.6px solid var(--orbit-ring);
    border-radius: 999px;
    box-shadow: 0 0 6px rgba(249, 115, 22, 0.55), inset 0 0 4px rgba(249, 115, 22, 0.45);
}
.orbit-mark-ring-a {
    transform: rotateX(70deg) rotateY(30deg);
    animation: orbit-mark-spin 5.8s linear infinite;
}
.orbit-mark-ring-b {
    transform: rotateX(70deg) rotateY(-30deg);
    animation: orbit-mark-spin-rev 7.2s linear infinite;
}
@keyframes orbit-mark-spin {
    from { transform: rotateX(70deg) rotateY(30deg) rotateZ(0deg); }
    to { transform: rotateX(70deg) rotateY(30deg) rotateZ(360deg); }
}
@keyframes orbit-mark-spin-rev {
    from { transform: rotateX(70deg) rotateY(-30deg) rotateZ(0deg); }
    to { transform: rotateX(70deg) rotateY(-30deg) rotateZ(-360deg); }
}