/* ==========================================================
   ONYX PRICING V2.5.2
   COSMIC ORBIT FINAL
   ========================================================== */

/* Hide old orbit chips/systems so nothing duplicates */
.hero-art > .float-chip,
.onyx-v24-orbit,
.onyx-v24-orbit-node,
.onyx-v24-planet{
    display:none !important;
}

/* Make sure orbit host can contain our new system */
.hero-orbit{
    position:relative !important;
    overflow:visible !important;
}

/* New orbit system */
.onyx-v252-orbit{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:14;
}

/* 3 orbital ellipses */
.onyx-v252-ring{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border:1px solid rgba(194,118,255,.12);
    border-radius:50%;
    box-shadow:
        0 0 18px rgba(166,85,255,.04),
        inset 0 0 18px rgba(166,85,255,.02);
}

.onyx-v252-ring.r1{
    width:320px;
    height:232px;
    border-color:rgba(222,112,214,.14);
}

.onyx-v252-ring.r2{
    width:470px;
    height:336px;
    border-color:rgba(120,138,255,.13);
}

.onyx-v252-ring.r3{
    width:620px;
    height:442px;
    border-color:rgba(198,108,255,.11);
}

/* Orbit nodes themselves */
.onyx-v252-node{
    position:absolute;
    left:50%;
    top:50%;
    width:0;
    height:0;
    pointer-events:none;
}

/* Planet chip */
.onyx-v252-planet{
    position:absolute;
    left:0;
    top:0;
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    gap:8px;
    min-height:38px;
    padding:0 14px;
    white-space:nowrap;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.09);
    background:
        linear-gradient(
            135deg,
            rgba(23,16,32,.82),
            rgba(10,9,18,.72)
        );
    backdrop-filter:blur(14px);
    box-shadow:
        0 12px 36px rgba(0,0,0,.26),
        0 0 26px rgba(193,99,233,.05),
        inset 0 1px 0 rgba(255,255,255,.06);
    color:rgba(249,242,252,.95);
    font-size:12px;
    font-weight:700;
    line-height:1;
    letter-spacing:.01em;
}

.onyx-v252-planet::before{
    content:"";
    width:9px;
    height:9px;
    border-radius:50%;
    flex:0 0 9px;
    background:radial-gradient(circle at 35% 35%, #ffd0fb 0%, #f56fe0 45%, #7d8cff 100%);
    box-shadow:
        0 0 14px rgba(232,110,225,.62),
        0 0 24px rgba(116,134,255,.18);
}

/* subtle floating feel */
.onyx-v252-planet[data-tone="blue"]::before{
    background:radial-gradient(circle at 35% 35%, #e2ecff 0%, #8fa5ff 46%, #9b5cff 100%);
}

.onyx-v252-planet[data-tone="pink"]::before{
    background:radial-gradient(circle at 35% 35%, #ffd6f8 0%, #ff82d9 48%, #8a73ff 100%);
}

/* small ambient stars */
.onyx-v252-stars{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.55;
    background-image:
        radial-gradient(circle at 18% 28%, rgba(255,255,255,.9) 0 1px, transparent 1.5px),
        radial-gradient(circle at 72% 24%, rgba(214,154,255,.85) 0 1px, transparent 1.5px),
        radial-gradient(circle at 78% 68%, rgba(116,159,255,.7) 0 1px, transparent 1.5px),
        radial-gradient(circle at 31% 74%, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
        radial-gradient(circle at 57% 12%, rgba(255,255,255,.75) 0 1px, transparent 1.5px),
        radial-gradient(circle at 14% 58%, rgba(198,120,255,.8) 0 1px, transparent 1.5px);
}

/* Mobile */
@media(max-width:650px){

    .onyx-v252-ring.r1{
        width:220px;
        height:160px;
    }

    .onyx-v252-ring.r2{
        width:320px;
        height:228px;
    }

    .onyx-v252-ring.r3{
        width:420px;
        height:300px;
    }

    .onyx-v252-planet{
        min-height:30px;
        padding:0 10px;
        gap:6px;
        font-size:9px;
    }

    .onyx-v252-planet::before{
        width:7px;
        height:7px;
        flex-basis:7px;
    }
}