.engine-section {
    position: relative;
    overflow: hidden;
    padding: 140px 0 160px;
    background:
            radial-gradient(circle at 50% 50%, rgba(203, 166, 87, 0.16), transparent 32%),
            linear-gradient(180deg, #050505 0%, #0b0b0b 55%, #050505 100%);
}

.engine-section::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
            radial-gradient(circle at 20% 30%, rgba(203, 166, 87, 0.10), transparent 28%),
            radial-gradient(circle at 80% 70%, rgba(255, 220, 140, 0.08), transparent 30%);
    opacity: 0.8;
    pointer-events: none;
}

/* ==========================
   BACKGROUND PREMIUM
========================== */

.engine-bg-metal,
.engine-bg-nebula,
.engine-bg-wheel {
    position: absolute;
    pointer-events: none;
}

.engine-bg-metal {
    inset: 0;

    background:
            url('../img/engine-metal-texture.png');

    background-size: 420px;

    opacity: .06;

    mix-blend-mode: screen;

    z-index: 0;
}

.engine-bg-nebula {
    inset: 0;
    background:
            linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65)),
            url('../img/engine-nebula-gold.jpg') center center / cover no-repeat;
    opacity: .75;
    filter: none;
    z-index: 0;
}

.engine-bg-wheel {
    left: 50%;
    top: 50%;

    border-radius: 50%;

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

    border:
            1px solid rgba(203,166,87,.08);

    z-index: 0;
}

.engine-bg-wheel::before,
.engine-bg-wheel::after {
    content: "";

    position: absolute;

    inset: 40px;

    border-radius: 50%;

    border:
            1px dashed rgba(203,166,87,.05);
}

.engine-bg-wheel-1 {

    width: 1400px;
    height: 1400px;

    animation:
            engineWheelRotate 180s linear infinite;
}

.engine-bg-wheel-2 {

    width: 1100px;
    height: 1100px;

    animation:
            engineWheelRotateReverse 140s linear infinite;
}






.engine-container {
    position: relative;
    z-index: 10;
}

.engine-head {
    max-width: 760px;
    margin: 0 auto 80px;
    text-align: center;
}

.engine-machine {
    position: relative;
    width: min(760px, 92vw);
    height: min(760px, 92vw);
    margin: 0 auto;
}

.engine-glow {
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(203, 166, 87, 0.32), transparent 68%);
    filter: blur(18px);
    animation: engineGlow 4s ease-in-out infinite alternate;
}

.engine-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(203, 166, 87, 0.28);
    box-shadow:
            inset 0 0 34px rgba(203, 166, 87, 0.08),
            0 0 34px rgba(203, 166, 87, 0.08);
}

.engine-ring-1 {
    inset: 10%;
    animation: engineRotate 34s linear infinite;
}

.engine-ring-2 {
    inset: 21%;
    border-style: dashed;
    animation: engineRotateReverse 26s linear infinite;
}

.engine-ring-3 {
    inset: 32%;
    opacity: 0.7;
    animation: engineRotate 18s linear infinite;
}

.engine-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 190px;
    height: 190px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
            radial-gradient(circle at 50% 40%, rgba(255, 225, 150, 0.38), rgba(203, 166, 87, 0.14) 44%, rgba(0, 0, 0, 0.92) 72%);
    border: 1px solid rgba(203, 166, 87, 0.65);
    box-shadow:
            0 0 50px rgba(203, 166, 87, 0.38),
            inset 0 0 36px rgba(203, 166, 87, 0.16);
    color: #f6dfaa;
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    z-index: 4;
    animation: enginePulse 3s ease-in-out infinite;
}

.engine-node {
    position: absolute;
    width: 168px;
    height: 168px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 22px;
    background: rgba(8, 8, 8, 0.82);
    border: 1px solid rgba(203, 166, 87, 0.44);
    box-shadow:
            0 0 28px rgba(203, 166, 87, 0.14),
            inset 0 0 24px rgba(203, 166, 87, 0.08);
    color: #f2ddb0;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    z-index: 5;
    transition: 0.4s ease;
}

.engine-node.active {
    background: rgba(203, 166, 87, 0.16);
    border-color: rgba(255, 223, 150, 0.85);
    box-shadow:
            0 0 44px rgba(203, 166, 87, 0.42),
            inset 0 0 28px rgba(203, 166, 87, 0.20);
    transform: scale(1.06);
}

.engine-node-products {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.engine-node-communities {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.engine-node-value {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.engine-node-universe {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.engine-node-products.active {
    transform: translateX(-50%) scale(1.06);
}

.engine-node-communities.active {
    transform: translateY(-50%) scale(1.06);
}

.engine-node-value.active {
    transform: translateX(-50%) scale(1.06);
}

.engine-node-universe.active {
    transform: translateY(-50%) scale(1.06);
}

.engine-flow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: #f6d68a;
    box-shadow: 0 0 18px rgba(246, 214, 138, 0.95);
    z-index: 6;
}

.engine-flow-1 {
    animation: engineFlow1 5s linear infinite;
}

.engine-flow-2 {
    animation: engineFlow2 5s linear infinite;
    animation-delay: 1.25s;
}

.engine-flow-3 {
    animation: engineFlow3 5s linear infinite;
    animation-delay: 2.5s;
}

.engine-flow-4 {
    animation: engineFlow4 5s linear infinite;
    animation-delay: 3.75s;
}

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

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

@keyframes engineGlow {
    from {
        opacity: 0.45;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes enginePulse {
    0%, 100% {
        box-shadow:
                0 0 42px rgba(203, 166, 87, 0.30),
                inset 0 0 30px rgba(203, 166, 87, 0.12);
    }
    50% {
        box-shadow:
                0 0 72px rgba(203, 166, 87, 0.55),
                inset 0 0 42px rgba(203, 166, 87, 0.22);
    }
}

@keyframes engineFlow1 {
    0% { transform: rotate(0deg) translateY(-230px); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: rotate(360deg) translateY(-230px); opacity: 0; }
}

@keyframes engineFlow2 {
    0% { transform: rotate(90deg) translateY(-230px); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: rotate(450deg) translateY(-230px); opacity: 0; }
}

@keyframes engineFlow3 {
    0% { transform: rotate(180deg) translateY(-230px); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: rotate(540deg) translateY(-230px); opacity: 0; }
}

@keyframes engineFlow4 {
    0% { transform: rotate(270deg) translateY(-230px); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: rotate(630deg) translateY(-230px); opacity: 0; }
}


@keyframes engineWheelRotate {

    from {
        transform:
                translate(-50%, -50%)
                rotate(0deg);
    }

    to {
        transform:
                translate(-50%, -50%)
                rotate(360deg);
    }
}

@keyframes engineWheelRotateReverse {

    from {
        transform:
                translate(-50%, -50%)
                rotate(360deg);
    }

    to {
        transform:
                translate(-50%, -50%)
                rotate(0deg);
    }
}


.engine-ring-1::before,
.engine-ring-1::after {
    content:"";
    position:absolute;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#f6d68a;
    box-shadow:0 0 20px rgba(246,214,138,.9);
}

.engine-ring-1::before{
    top:-5px;
    left:50%;
}

.engine-ring-1::after{
    bottom:-5px;
    left:50%;
}


/*.engine-ring-2::before,*/
/*.engine-ring-2::after {*/
/*    content:"";*/
/*    position:absolute;*/
/*    width:10px;*/
/*    height:10px;*/
/*    border-radius:50%;*/
/*    background:#f6d68a;*/
/*    box-shadow:0 0 20px rgba(246,214,138,.9);*/
/*}*/

/*.engine-ring-2::before{*/
/*    top:-5px;*/
/*    left:50%;*/
/*}*/

/*.engine-ring-2::after{*/
/*    bottom:-5px;*/
/*    left:50%;*/
/*}*/


.engine-ring-3::before,
.engine-ring-3::after {
    content:"";
    position:absolute;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#f6d68a;
    box-shadow:0 0 20px rgba(246,214,138,.9);
}

.engine-ring-3::before{
    top:-5px;
    left:50%;
}

.engine-ring-3::after{
    bottom:-5px;
    left:50%;
}



@media (max-width: 760px) {

    .engine-section {
        padding: 100px 0 120px;
    }

    .engine-head {
        margin-bottom: 56px;
    }

    .engine-machine {
        height: 620px;
        width: 100%;
    }

    .engine-bg-wheel-1 {
        width: 850px;
        height: 850px;
    }

    .engine-bg-wheel-2 {
        width: 650px;
        height: 650px;
    }

    .engine-bg-nebula {
        filter: blur(50px);
    }


    .engine-ring-1 {
        inset: 13%;
    }

    .engine-ring-2 {
        inset: 24%;
    }

    .engine-ring-3 {
        inset: 35%;
    }

    .engine-core {
        width: 145px;
        height: 145px;
        font-size: 11px;
    }

    .engine-node {
        width: 132px;
        height: 132px;
        font-size: 10px;
        padding: 18px;
    }

    .engine-node-products {
        top: 10px;
    }

    .engine-node-value {
        bottom: 10px;
    }

    .engine-node-communities {
        right: 4px;
    }

    .engine-node-universe {
        left: 4px;
    }

    @keyframes engineFlow1 {
        0% { transform: rotate(0deg) translateY(-170px); opacity: 0; }
        10% { opacity: 1; }
        100% { transform: rotate(360deg) translateY(-170px); opacity: 0; }
    }

    @keyframes engineFlow2 {
        0% { transform: rotate(90deg) translateY(-170px); opacity: 0; }
        10% { opacity: 1; }
        100% { transform: rotate(450deg) translateY(-170px); opacity: 0; }
    }

    @keyframes engineFlow3 {
        0% { transform: rotate(180deg) translateY(-170px); opacity: 0; }
        10% { opacity: 1; }
        100% { transform: rotate(540deg) translateY(-170px); opacity: 0; }
    }

    @keyframes engineFlow4 {
        0% { transform: rotate(270deg) translateY(-170px); opacity: 0; }
        10% { opacity: 1; }
        100% { transform: rotate(630deg) translateY(-170px); opacity: 0; }
    }
}