/*==================================================
    WHY CHOOSE US
==================================================*/

.why-us{

    position:relative;

    padding:clamp(70px,12vw,180px) 0;

    overflow:hidden;

    background:#0B0B0D;

}
.why-us::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at 20% 15%,
        rgba(255,139,77,.04),
        transparent 40%
    ),

    radial-gradient(
        circle at 85% 80%,
        rgba(79,125,255,.04),
        transparent 45%
    );

    pointer-events:none;

}

.why-us::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(
        circle at 18% 12%,
        rgba(255,139,77,.05),
        transparent 35%
    ),

    radial-gradient(
        circle at 82% 82%,
        rgba(79,125,255,.04),
        transparent 40%
    );

}

.why-container{

    width:min(1500px,92%);

    margin:auto;

    position:relative;

    z-index:2;

}

/*=========================
        HEADER
==========================*/

.why-header{

    max-width:760px;

    margin-bottom:clamp(40px,6vw,90px);

}

.why-header h2{

    margin:28px 0;

    font-size:clamp(34px,6vw,72px);

    line-height:.95;

    color:white;

}

.why-header p{


    font-size:clamp(15px,1.5vw,20px);

    line-height:1.9;

    color:#8FA6BB;

}

/*=========================
        GRID
==========================*/

.why-grid{

    display:flex;

    flex-direction:column;

    gap:clamp(20px,3vw,32px);

}

.why-top{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:clamp(20px,3vw,32px);

}

/*=========================
        CARDS
==========================*/

.why-card,
.partnership-card{

    position:relative;

    overflow:hidden;

    background:#141416;

    border:1px solid rgba(255,255,255,.06);

    border-radius:clamp(18px,2vw,28px);

    padding:clamp(22px,4vw,46px);

    transition:.45s;

}
.why-card::before,
.partnership-card::before{

    content:"";

    position:absolute;

    inset:8px;

    border:1px solid rgba(255,255,255,.05);

    border-radius:18px;

    pointer-events:none;

}

.why-card::after,
.partnership-card::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:2px;

    background:

    linear-gradient(
        90deg,
        var(--orange),
        var(--blue)
    );

    transition:.6s;

}
.why-card:hover::after,
.partnership-card:hover::after{

    width:100%;

}
.why-card:hover,
.partnership-card:hover{

    transform:translateY(-6px);

    background:#18181B;

    border-color:rgba(255,139,77,.22);

}

.partnership-card{

    min-height:650px;

}

/*=========================
        PLACEHOLDERS
==========================*/

.card-blueprint,
.roadmap-placeholder{

    height:230px;

    border-radius:16px;

    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,.015),
        rgba(255,255,255,.01)
    );

    border:1px solid rgba(255,255,255,.05);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#666;

}

/*=========================
        FOOTER
==========================*/

.partnership-footer{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    margin-top:40px;

}

.spec-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:22px;

}
.spec-id{

    font-size:12px;

    letter-spacing:.28em;

    color:#777;

}
.spec-status{

    padding:6px 14px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:999px;

    font-size:11px;

    letter-spacing:.18em;

    color:var(--orange);

}
.spec-title{

    font-size:clamp(22px,3vw,34px);

    line-height:1.1;

    color:white;

    margin-bottom:32px;

}
.blueprint{

    height:clamp(220px,32vw,300px);

    border-radius:18px;

    position:relative;

    overflow:hidden;

    margin-bottom:34px;

    border:1px solid rgba(255,255,255,.06);

    background:
    linear-gradient(
        rgba(255,255,255,.015),
        rgba(255,255,255,.01)
    );


}

.blueprint-svg{

    width:100%;

    height:100%;

}

.blueprint::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        rgba(255,255,255,.025) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.025) 1px,
        transparent 1px
    );

    background-size:22px 22px;

    opacity:.4;

}

.blueprint-scale{

    position:absolute;

    inset:0;

    transform-origin:center;

}


@media(max-width:900px){

    .blueprint-scale{

        transform:scale(.88);

    }

}
@media(max-width:768px){

    .blueprint-scale{

        transform:scale(.76);

    }

}
@media(max-width:430px){

    .blueprint-scale{

        transform:scale(.63);

    }

}
.bp-header{

    position:absolute;

    top:18px;

    left:24px;

    right:24px;

    display:flex;

    justify-content:space-between;

    z-index:5;

}

.bp-header span{

    font-size:10px;

    letter-spacing:.28em;

    color:#666;

}


.bp-quadrants{

    position:absolute;

    inset:55px 28px 24px;

}
.bp-horizontal{

    position:absolute;

    left:0;

    right:0;

    top:50%;

    height:1px;

    background:rgba(255,255,255,.08);

}

.bp-vertical{

    position:absolute;

    top:0;

    bottom:0;

    left:50%;

    width:1px;

    background:rgba(255,255,255,.08);

}
.bp-center{

    position:absolute;

    width:14px;

    height:14px;

    border-radius:50%;

    border:2px solid #d9d9d9;

    background:#171719;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    box-shadow:

    0 0 0 5px rgba(255,139,77,.08);


}
.bp-box{

    position:absolute;

    width:min(170px,32vw);


}
.top-left{

    top:1px;

    left:10px;

}
.top-right{

    top:1px;

    right:10px;

    text-align:right;

}
.bottom-left{

    bottom:15px;

    left:10px;

}
.bottom-right{

    bottom:15px;

    right:10px;

    text-align:right;

}
.bp-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:22px;

    height:22px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.18);

    font-size:11px;

    color:var(--orange);

    margin-bottom:12px;

}
.bp-box h4{

    color:#fff;

    font-size:18px;

    margin-bottom:6px;

}
.bp-box small{

    color:#8a8a8a;

    font-size:13px;

}

.card-description{

    margin:34px 0 40px;

    color:#A7A7A7;

    font-size:clamp(14px,1.5vw,17px);

    line-height:1.85;

    font-weight:400;

}
.inspection{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-top:36px;

    padding-top:28px;

    border-top:1px solid rgba(255,255,255,.06);

}

.inspection-item{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.inspection-item span{

    color:#6d6d6d;

    font-size:11px;

    letter-spacing:.22em;

    text-transform:uppercase;

}

.inspection-item strong{

    color:#ECECEC;

    font-size:17px;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:10px;

}
.inspection-item strong::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--orange);

    box-shadow:0 0 8px rgba(255,139,77,.35);

}

.bp-lifecycle{

    position:absolute;

    left:0;
    right:0;

    top:50%;

    transform:translateY(-50%);

    height:250px;

}

.bp-ring{

    position:absolute;

    left:50%;
    top:50%;

    width:170px;
    height:170px;

    aspect-ratio:1;

    height:auto;


    transform:translate(-50%,-50%);

    border:1px solid rgba(255,255,255,.07);

    border-radius:50%;

}

.bp-ring::before{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:50%;

    border:1px dashed rgba(255,255,255,.04);

}

.bp-core{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);


    width:clamp(30px,5vw,56px);

    aspect-ratio:1;

    height:auto;

    border-radius:50%;

    border:2px solid var(--orange);

    display:flex;

    align-items:center;

    justify-content:center;

    background:#171719;

    box-shadow:

    0 0 0 6px rgba(255,139,77,.06);

}
.core-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:var(--orange);

}
.core-title{

    position:absolute;

    left:50%;

    top:calc(50% + 58px);

    transform:translateX(-50%);

    font-size:11px;

    letter-spacing:.22em;

    color:#9a9a9a;

}
.bp-core span{

    font-size:10px;

    letter-spacing:.18em;

    color:#ffffff;

}
.bp-node{
    position:absolute;
    width:150px;
    text-align:center;
}
.bp-no{

    display:inline-flex;

    width:22px;

    height:22px;

    border-radius:50%;

    justify-content:center;

    align-items:center;

    border:1px solid rgba(255,255,255,.18);

    color:var(--orange);

    font-size:11px;

    margin-bottom:8px;

}
.bp-node h4{

    color:#f2f2f2;

    font-size:15px;

    font-weight:500;

}
.top{
    left:50%;
    top:18px;
    transform:translateX(-50%);
}
.right{
    right:22px;
    top:50%;
    transform:translateY(-50%);
    text-align:left;
}
.bottom{
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
}
.left{
    left:22px;
    top:50%;
    transform:translateY(-50%);
    text-align:right;
}

.lower-right{

    right:30px;

    bottom:18px;

}

.connector{

    position:absolute;

    background:rgba(255,255,255,.07);

}
.connector.top{

    width:1px;

    height:72px;

    left:50%;

    top:38px;

    transform:translateX(-50%);

}
.connector.bottom{

    width:1px;

    height:72px;

    left:50%;

    bottom:38px;

    transform:translateX(-50%);

}
.connector.left{

    height:1px;
    width:95px;
    left:70px;
    top:50%;

}
.connector.right{

    height:1px;

    width:95px;
    right:70px;

    top:50%;

}

.timeline-wrapper{

    margin:50px 0;

    padding:36px 0;

    border-top:1px solid rgba(255,255,255,.06);

    border-bottom:1px solid rgba(255,255,255,.06);

}
.timeline-header{

    margin-bottom:45px;

    color:#767676;

    font-size:11px;

    letter-spacing:.24em;

    text-transform:uppercase;

}
.timeline{

    display:flex;

    justify-content:space-between;

    align-items:center;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-snap-type:x mandatory;

    padding-bottom:10px;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;

    position:relative;

    display:flex;

    align-items:center;


}
.timeline::-webkit-scrollbar{

    display:none;

}

.timeline-line{

    position:absolute;

    left:9%;

    right:9%;

    top:18px;

    height:2px;

    background:rgba(255,255,255,.08);

    z-index:0;

}
.timeline-point{
    position:relative;
    z-index:2;
    text-align:center;
    flex:1;
    min-width:90px;
    scroll-snap-align:center;
}
.dot{

    width:14px;

    height:14px;

    border-radius:50%;

    background:#141416;

    border:2px solid var(--orange);

    margin:auto;

    margin-bottom:14px;

}
.timeline-point span{

    color:#8e8e8e;

    font-size:12px;

    letter-spacing:.12em;

}
.timeline-labels{

    display:flex;

    justify-content:space-between;

    margin-top:40px;

}
.timeline-labels strong{

    display:block;

    color:white;

    font-size:18px;

    margin-bottom:6px;

}

.timeline-labels small{

    color:#8d8d8d;

    font-size:14px;

}
.timeline-footer{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    margin-top:40px;

    padding-top:30px;

    border-top:1px solid rgba(255,255,255,.06);

}
.timeline-footer ul{

    list-style:none;

    margin-top:18px;

    padding:0;

}

.timeline-footer li{

    position:relative;

    padding-left:18px;

    margin-bottom:14px;

    color:#B5B5B5;

    line-height:1.7;

}

.timeline-footer li::before{

    content:"";

    position:absolute;

    left:0;

    top:9px;

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--orange);

}

/*==================================================
        RESPONSIVE PART 1
        TABLET + LARGE MOBILE
==================================================*/

/*==============================
        TABLET
==============================*/

@media (max-width:1024px){

    .why-us{
        padding:130px 0;
    }

    .why-container{
        width:min(94%,1100px);
    }

    .why-header{
        max-width:700px;
        margin-bottom:70px;
    }

    .why-header h2{
        font-size:58px;
        line-height:.95;
    }

    .why-header p{
        font-size:18px;
        line-height:1.8;
    }

    .why-top{
        grid-template-columns:1fr;
        gap:28px;
    }

    .why-card,
    .partnership-card{
        padding:38px;
    }

    .partnership-card{
        min-height:auto;
    }

    .spec-title{
        font-size:32px;
    }

    .card-description{
        font-size:16px;
    }

    /* Blueprint 01 */

    .blueprint{
        height:280px;
    }

    .bp-box{
        width:145px;
    }

    .bp-box h4{
        font-size:16px;
    }

    .bp-box small{
        font-size:12px;
    }

    /* Blueprint 02 */

    .bp-ring{
        width:190px;
        height:190px;
    }

    .bp-ring::before{
        inset:-10px;
    }

    .bp-core{
        width:50px;
        height:50px;
    }

    .core-dot{
        width:8px;
        height:8px;
    }

    .bp-node{
        width:95px;
    }

    .bp-node h4{
        font-size:13px;
    }

    .connector.left,
    .connector.right{
        width:55px;
    }

    .connector.top,
    .connector.bottom{
        height:45px;
    }

    .timeline-footer{
        grid-template-columns:1fr 1fr;
        gap:30px;
    }

    .bottom-left{
        bottom:1px;
        top: 80px;
        left:10px;

    }
    .bottom-right{
        bottom:1px;
        top:80px;
        text-align:right;
    }
}


/*==============================
        LARGE MOBILE
==============================*/

@media (max-width:768px){

    .why-us{
        padding:90px 0;
    }

    .why-container{
        width:92%;
    }

    .why-header{
        margin-bottom:50px;
    }

    .why-header h2{
        font-size:44px;
        line-height:1;
        margin:20px 0;
    }

    .why-header p{
        font-size:16px;
        line-height:1.75;
    }

    .why-grid{
        gap:24px;
    }

    .why-top{
        grid-template-columns:1fr;
        gap:24px;
    }

    .why-card,
    .partnership-card{
        padding:30px;
        border-radius:22px;
    }

    .spec-header{
        margin-bottom:18px;
    }

    .spec-id{
        font-size:11px;
    }

    .spec-status{
        font-size:10px;
        padding:6px 12px;
    }

    .spec-title{
        font-size:28px;
        margin-bottom:24px;
    }

    .card-description{
        font-size:15px;
        line-height:1.8;
        margin:28px 0;
    }

    .inspection{
        gap:18px;
        flex-wrap:wrap;
    }

    /*=========================
        BLUEPRINT 01
    =========================*/

    .blueprint{
        height:255px;
        margin-bottom:28px;
    }

    .bp-header{
        left:18px;
        right:18px;
    }

    .bp-header span{
        font-size:9px;
    }

    .bp-quadrants{
        inset:50px 18px 18px;
    }

    .bp-box{
        width:105px;
    }

    .bp-number{
        width:18px;
        height:18px;
        font-size:10px;
        margin-bottom:8px;
    }

    .bp-box h4{
        font-size:13px;
        margin-bottom:4px;
    }

    .bp-box small{
        font-size:10px;
        line-height:1.4;
    }

    .bp-center{
        width:10px;
        height:10px;
    }

    /*=========================
        BLUEPRINT 02
    =========================*/

    .bp-lifecycle{
        height:220px;
    }

    .bp-ring{
        width:160px;
        height:160px;
    }

    .bp-ring::before{
        inset:-8px;
    }

    .bp-core{
        width:42px;
        height:42px;
    }

    .core-dot{
        width:7px;
        height:7px;
    }

    .core-title{
        font-size:9px;
        top:calc(50% + 42px);
    }

    .bp-node{
        width:72px;
    }

    .bp-node h4{
        font-size:11px;
        line-height:1.3;
    }

    .bp-no{
        width:18px;
        height:18px;
        font-size:9px;
        margin-bottom:6px;
    }

    .connector.left,
    .connector.right{
        width:42px;
    }

    .connector.top,
    .connector.bottom{
        height:35px;
    }

    /*=========================
        TIMELINE
    =========================*/

    .timeline-wrapper{
        margin:34px 0;
        padding:26px 0;
    }

    .timeline{
        display:flex;
        justify-content:space-between;
        align-items:center;

        overflow-x:auto;
        overflow-y:hidden;

        width:100%;
        min-width:0;

        padding-bottom:16px;

        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .timeline::-webkit-scrollbar{
        display:none;
    }

    .timeline-line{
        left:45px;
        right:45px;
    }

    .timeline-point span{
        font-size:11px;
        white-space:normal;
        line-height:1.4;
    }

    .timeline-labels{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:20px;
        margin-top:30px;
    }

    .timeline-labels strong{
        font-size:16px;
    }

    .timeline-labels small{
        font-size:13px;
    }

    .timeline-footer{
        grid-template-columns:1fr;
        gap:24px;
    }

    .bottom-left{
        bottom:1px;
        top: 80px;
        left:10px;
    }

    .bottom-right{
        bottom:1px;
        top:80px;
        text-align:right;
    }


}

/*==================================================
        RESPONSIVE PART 2
        SMALL MOBILE DEVICES
==================================================*/

/*==============================
        576px
==============================*/

@media (max-width:576px){

    .why-us{
        padding:70px 0;
    }

    .why-container{
        width:94%;
    }

    .why-card,
    .partnership-card{
        padding:24px;
        border-radius:18px;
    }

    .why-header{
        margin-bottom:42px;
    }

    .why-header h2{
        font-size:36px;
        line-height:1.05;
    }

    .why-header p{
        font-size:15px;
        line-height:1.7;
    }

    .spec-title{
        font-size:24px;
        line-height:1.2;
    }

    .card-description{
        font-size:14px;
        line-height:1.8;
        margin:24px 0;
    }

    .inspection{
        flex-direction:column;
        gap:20px;
    }

    .inspection-item strong{
        font-size:15px;
    }

    /* Blueprint */

    .blueprint{
        height:225px;
        margin-bottom:24px;
    }

    .bp-header{
        top:14px;
        left:14px;
        right:14px;
    }

    .bp-header span{
        font-size:8px;
        letter-spacing:.18em;
    }

    .bp-quadrants{
        inset:46px 12px 14px;
    }

    .bp-box{
        width:88px;
    }

    .bp-box h4{
        font-size:11px;
        margin-bottom:2px;
    }

    .bp-box small{
        font-size:9px;
        line-height:1.3;
    }

    .bp-number{
        width:16px;
        height:16px;
        font-size:8px;
    }

    .bp-center{
        width:8px;
        height:8px;
    }

    /* Lifecycle */

    .bp-lifecycle{
        height:185px;
    }

    .bp-ring{
        width:135px;
        height:135px;
    }

    .bp-ring::before{
        inset:-6px;
    }

    .bp-core{
        width:36px;
        height:36px;
    }

    .core-dot{
        width:6px;
        height:6px;
    }

    .core-title{
        font-size:8px;
        top:calc(50% + 34px);
    }

    .bp-node{
        width:58px;
    }

    .bp-node h4{
        font-size:10px;
        line-height:1.25;
    }

    .bp-no{
        width:16px;
        height:16px;
        font-size:8px;
    }

    .connector.left,
    .connector.right{
        width:30px;
    }

    .connector.top,
    .connector.bottom{
        height:28px;
    }

    /* Timeline */

    .timeline{
        min-width:640px;
    }

    .timeline-labels{
        grid-template-columns:1fr;
        gap:18px;
    }

    .timeline-footer{
        gap:20px;
    }

    .bottom-left{
        bottom:1px;
        top: 80px;
        left:10px;

    }

    .bottom-right{
        bottom:1px;
        top:80px;
        text-align:right;
    }
}


/*==============================
        430px
==============================*/

@media (max-width:430px){

    .why-header h2{
        font-size:31px;
    }

    .spec-title{
        font-size:21px;
    }

    .why-card,
    .partnership-card{
        padding:20px;
    }

    .blueprint{
        height:205px;
    }

    .bp-box{
        width:76px;
    }

    .bp-box h4{
        font-size:10px;
    }

    .bp-box small{
        font-size:8px;
    }

    .bp-number{
        width:14px;
        height:14px;
        font-size:7px;
    }

    .bp-center{
        width:7px;
        height:7px;
    }

    .bp-ring{
        width:118px;
        height:118px;
    }

    .bp-core{
        width:32px;
        height:32px;
    }

    .bp-node{
        width:50px;
    }

    .bp-node h4{
        font-size:9px;
    }

    .connector.left,
    .connector.right{
        width:24px;
    }

    .connector.top,
    .connector.bottom{
        height:22px;
    }

    .bottom-left{
        bottom:1px;
        top: 80px;
        left:10px;

    }
    .bottom-right{
        bottom:1px;
        top:80px;
        text-align:right;
    }
}


/*==============================
        375px
==============================*/

@media (max-width:375px){

    .why-header h2{
        font-size:28px;
    }

    .why-header p{
        font-size:14px;
    }

    .spec-title{
        font-size:20px;
    }

    .card-description{
        font-size:13px;
    }

    .inspection-item strong{
        font-size:14px;
    }

    .blueprint{
        height:190px;
    }

    .bp-header{
        display:none;
    }

    .bp-quadrants{
        inset:18px 10px;
    }

    .bp-box{
        width:68px;
    }

    .bp-box h4{
        font-size:9px;
    }

    .bp-box small{
        display:none;
    }

    .bp-number{
        margin-bottom:4px;
    }

    .bp-ring{
        width:105px;
        height:105px;
    }

    .bp-core{
        width:28px;
        height:28px;
    }

    .core-dot{
        width:5px;
        height:5px;
    }

    .core-title{
        display:none;
    }

    .bp-node{
        width:44px;
    }

    .bp-node h4{
        font-size:8px;
    }

    .bp-no{
        width:14px;
        height:14px;
        font-size:7px;
    }

    .connector{
        display:none;
    }

    .timeline{
        min-width:600px;
    }

    .bottom-left{
        bottom:1px;
        top: 80px;
        left:10px;

    }
    .bottom-right{
        bottom:1px;
        top:80px;
        text-align:right;
    }
}


/*new*/
/*==================================================
    PLANET SYSTEM
==================================================*/

.planet-system{
    width:min(100%,420px);
    aspect-ratio:1;
    margin-inline:auto;
    position:relative;
}

.planet-svg{
    display:block;
    width:100%;
    height:auto;
    overflow:visible;
}



/*==================================================
    EARTH GLOW
==================================================*/

.earth-glow{
    fill:#3d7bff;
    opacity:.10;
}



/*==================================================
    ORBIT
==================================================*/

.orbit{

    fill:none;

    stroke:rgba(255,255,255,.16);

    stroke-width:2;

    stroke-dasharray:8 8;

    stroke-linecap:round;

}



/*==================================================
    EARTH
==================================================*/

.ocean{

    fill:#25528f;

    stroke:#7ec7ff;

    stroke-width:2;

}



.atmosphere{

    fill:none;

    stroke:#8dd2ff;

    stroke-width:8;

    opacity:.18;

}



/*==================================================
    EARTH GRID
==================================================*/

.grid{

    fill:none;

    stroke:rgba(255,255,255,.16);

    stroke-width:1;

}



/*==================================================
    CONTINENTS
==================================================*/

.land{

    fill:#59ad74;

}



/*==================================================
    SATELLITE
==================================================*/

.panel{

    fill:#5f87df;

    stroke:#cfdcff;

    stroke-width:1.5;

    rx:2;

}



.body{

    fill:#dde2ea;

    stroke:#ffffff;

    stroke-width:1.5;

}



.frame{

    stroke:#dfe5ec;

    stroke-width:2;

    stroke-linecap:round;

}



.dish{

    fill:none;

    stroke:#dde2ea;

    stroke-width:2;

}



/*==================================================
    LED
==================================================*/

.led{

    fill:#54ff82;

}



/*==================================================
    SIGNAL
==================================================*/

.signal{

    fill:none;

    stroke:#9bdcff;

    stroke-width:1.6;

    stroke-linecap:round;

    opacity:.65;

}



/*==================================================
    SVG PERFORMANCE
==================================================*/

.orbit-group,
.earth-grid,
.satellite{

    transform-box:fill-box;

    transform-origin:center;

    will-change:transform;

}

/*==================================================
    ORBIT ANIMATION
==================================================*/

.orbit-group{
    animation:orbitRotate 22s linear infinite;
}

@keyframes orbitRotate{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}



/*==================================================
    SATELLITE COUNTER ROTATION
==================================================*/

.satellite{
    animation:counterRotate 22s linear infinite;
}

@keyframes counterRotate{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(-360deg);
    }
}



/*==================================================
    EARTH GRID ROTATION
==================================================*/

.earth-grid{
    animation:earthSpin 45s linear infinite;
}

@keyframes earthSpin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}



/*==================================================
    LED BLINK
==================================================*/

.led{
    animation:ledBlink 2.4s ease-in-out infinite;
}

@keyframes ledBlink{

    0%,
    70%{
        opacity:1;
    }

    80%{
        opacity:.2;
    }

    90%{
        opacity:1;
    }

    100%{
        opacity:.35;
    }

}



/*==================================================
    SIGNAL PULSE
==================================================*/

.signal{
    animation:signalPulse 2.8s ease-in-out infinite;
}

.signal:nth-of-type(2){
    animation-delay:.45s;
}

@keyframes signalPulse{

    0%{
        opacity:0;
    }

    30%{
        opacity:.75;
    }

    100%{
        opacity:0;
    }

}



/*==================================================
    EARTH GLOW
==================================================*/

.earth-glow{
    animation:glowPulse 6s ease-in-out infinite;
}

@keyframes glowPulse{

    0%{
        opacity:.08;
    }

    50%{
        opacity:.16;
    }

    100%{
        opacity:.08;
    }

}



/*==================================================
    SATELLITE FLOAT
==================================================*/

.satellite-holder{
    animation:floatMotion 4s ease-in-out infinite;
}

@keyframes floatMotion{

    0%{
        transform:translate(300px,110px);
    }

    50%{
        transform:translate(300px,106px);
    }

    100%{
        transform:translate(300px,110px);
    }

}



/*==================================================
    SMOOTH RENDERING
==================================================*/

.planet-svg *{

    vector-effect:non-scaling-stroke;

    shape-rendering:geometricPrecision;

}



/*==================================================
    RESPONSIVE
==================================================*/

@media (max-width:991px){

    .planet-system{
        max-width:360px;
    }

}

@media (max-width:767px){

    .planet-system{
        max-width:300px;
    }

}

@media (max-width:480px){

    .planet-system{
        max-width:240px;
    }

}
/*==========================================
    BLUEPRINT FRAME
==========================================*/

.frame-outline{

    fill:none;

    stroke:rgba(255,255,255,.045);

    stroke-width:1;

}

.corner-mark{

    fill:none;

    stroke:#4d6ea8;

    stroke-width:1.5;

    opacity:.55;

    stroke-linecap:round;

    stroke-linejoin:round;

}

/*==========================================
    BLUEPRINT GRID
==========================================*/

.blueprint-grid line{

    stroke:rgba(255,255,255,.03);

    stroke-width:1;

    shape-rendering:crispEdges;

}

/*==========================================
    CONSTRUCTION GEOMETRY
==========================================*/

.construction-lines{

    opacity:.45;

}

.construction-lines line{

    stroke:rgba(125,170,255,.08);

    stroke-width:1;

    stroke-dasharray:4 8;

}

.construction-lines circle{

    fill:none;

    stroke:rgba(125,170,255,.06);

    stroke-width:1;

    stroke-dasharray:3 6;

}

.construction-lines circle:last-child,
.construction-lines circle:nth-last-child(2),
.construction-lines circle:nth-last-child(3),
.construction-lines circle:nth-last-child(4){

    fill:#5b82d8;

    stroke:none;

    opacity:.45;

}

/*==========================================
    ENGINEERING LABELS
==========================================*/

.engineering-labels{

    pointer-events:none;

}

.tech-label{

    fill:rgba(195,215,255,.45);

    font-size:10px;

    font-family:inherit;

    letter-spacing:.18em;

    text-transform:uppercase;

    user-select:none;

}

.leader{

    fill:none;

    stroke:rgba(120,170,255,.18);

    stroke-width:1;

    stroke-dasharray:3 5;

}
.target{

    fill:#6fa3ff;

    opacity:.7;

}



.rocket-body{
    fill:url(#rocketBodyGradient);
    stroke:#edf4ff;
    stroke-width:1;
}

.rocket-nose{
    fill:url(#noseGradient);
    stroke:#ffe18a;
    stroke-width:1;
}

.rocket-nozzle{
    fill:url(#engineGradient);
    stroke:#cfd8e4;
    stroke-width:1;
}

.rocket-band{
    fill:#ffb31a;
}

.rocket-window{
    fill:#2c8dff;
    stroke:#bfe9ff;
    stroke-width:2.5;
}

.rocket-window::after{
    fill:white;
}

.panel-line{
    stroke:#b8c2cf;
    stroke-width:1.5;
}

.rocket-fin-left{
    fill:#ff6b35;
}

.rocket-fin-right{
    fill:#1478d8;
}

.rocket-highlight{
    fill:#ffffff;
    opacity:.35;
}
/* =====================================================
   LAUNCH PLATFORM
===================================================== */

.pad-shadow{
    fill:#000;
    opacity:.18;
}

.pad-platform{
    fill:#232a34;
    stroke:#56b8ff;
    stroke-width:2;
}

.pad-inner{
    fill:none;
    stroke:#7dd2ff;
    stroke-width:1.5;
    opacity:.8;
}

.pad-core{
    fill:#7dd2ff;
}

.pad-bolt{
    fill:#9fdcff;
}


/*rocket*/


/* ===========================
   ENGINE FLAME
=========================== */

.flame-outer{
    fill:url(#flameOuterGradient);
    opacity:.95;
}

.flame-inner{
    fill:url(#flameInnerGradient);
    opacity:.9;
}
/* ============================
   Rocket Lift
============================ */

.rocket{
    transform-origin:300px 300px;
    animation:rocketLift 6s ease-in-out infinite;
}

@keyframes rocketLift{

    0%{
        transform:translateY(0);
    }

    15%{
        transform:translateY(-2px);
    }

    25%{
        transform:translateY(-8px);
    }

    35%{
        transform:translateY(-12px);
    }

    55%{
        transform:translateY(-12px);
    }

    75%{
        transform:translateY(-4px);
    }

    100%{
        transform:translateY(0);
    }

}
.engine-flame{

    transform-origin:300px 360px;

    animation:flameFlicker .18s ease-in-out infinite;

}

@keyframes flameFlicker{

    0%{

        transform:scaleY(.88);

        opacity:.82;

    }

    50%{

        transform:scaleY(1.18);

        opacity:1;

    }

    100%{

        transform:scaleY(.92);

        opacity:.9;

    }

}

.engine-flame{

    filter:url(#flameGlow);

    animation:

    flameFlicker .18s ease-in-out infinite,

    enginePulse 1.2s ease-in-out infinite;

}

@keyframes enginePulse{

    0%{

        opacity:.65;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.75;

    }

}
.rocket{

    animation:

    rocketLift 6s ease-in-out infinite,

    rocketShake .12s linear infinite;

}

@keyframes rocketShake{

    0%{

        transform:translateX(0);

    }

    25%{

        transform:translateX(-.5px);

    }

    50%{

        transform:translateX(.5px);

    }

    75%{

        transform:translateX(-.4px);

    }

    100%{

        transform:translateX(0);

    }

}
.launch-pad{

    animation:padPulse 6s ease-in-out infinite;

}

@keyframes padPulse{

    0%{

        transform:scale(1);

    }

    30%{

        transform:scale(1.015);

    }

    60%{

        transform:scale(1.02);

    }

    100%{

        transform:scale(1);

    }

}

.rocket-system{
    width:min(100%,420px);
    aspect-ratio:1;

    margin-inline:auto;

    position:relative;
}

.rocket-svg{
    width:100%;
    height:100%;
    display:block;
}