/* ========================================
   RESPONSIVE CSS MEDIA QUERIES
   FOR .animation-container SECTION
   ======================================== */

/* ========================================
   BASE ADJUSTMENTS
   Reduce default node icon sizes
   ======================================== */
.node-icon {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 6px !important;
}

.core-icon {
    width: 40px !important;
    height: 40px !important;
}

/* ========================================
   LARGE SCREENS (1500px - 1200px)
   Desktop/Large Monitors
   ======================================== */
@media (max-width: 1500px) {
    .animation-container {
        height: 90vh !important;
        min-height: 600px !important;
        padding: 40px 20px !important;
    }

    .orbit-system {
        width: 550px !important;
        height: 550px !important;
    }

    .orbit-ring-1 {
        width: 450px !important;
        height: 450px !important;
        top: 50px !important;
        left: 50px !important;
    }

    .orbit-ring-2 {
        width: 350px !important;
        height: 350px !important;
        top: 100px !important;
        left: 100px !important;
    }

    .orbit-ring-3 {
        width: 250px !important;
        height: 250px !important;
        top: 150px !important;
        left: 150px !important;
    }

    .core {
        width: 130px !important;
        height: 130px !important;
    }

    .core-icon {
        width: 38px !important;
        height: 38px !important;
    }

    .core-text {
        font-size: 16px !important;
    }

    .feature-node {
        width: 110px !important;
        height: 110px !important;
    }

    .node-icon {
        width: 30px !important;
        height: 30px !important;
        margin-bottom: 6px !important;
    }

    .node-label {
        font-size: 11px !important;
    }

    .beam-1, .beam-2, .beam-3, .beam-4 {
        width: 140px !important;
    }

    /* Adjust node positions for better spacing */
    .nude-1 {
        top: -2% !important;
    }

    .nude-5 {
        bottom: -2% !important;
    }
}

@media (max-width: 1300px) {
    .orbit-system {
        width: 500px !important;
        height: 500px !important;
    }

    .orbit-ring-1 {
        width: 350px !important;
        height: 350px !important;
        top: 75px !important;
        left: 75px !important;
    }

    .orbit-ring-2 {
        width: 270px !important;
        height: 270px !important;
        top: 115px !important;
        left: 115px !important;
    }

    .orbit-ring-3 {
        width: 190px !important;
        height: 190px !important;
        top: 155px !important;
        left: 155px !important;
    }

    .core {
        width: 115px !important;
        height: 115px !important;
    }

    .core-icon {
        width: 35px !important;
        height: 35px !important;
    }

    .core-text {
        font-size: 15px !important;
    }

    .feature-node {
        width: 80px !important;
        height: 80px !important;
    }

    .node-icon {
        width: 28px !important;
        height: 28px !important;
        margin-bottom: 5px !important;
    }

    .node-label {
        font-size: 11px !important;
    }

    .beam-1, .beam-2, .beam-3, .beam-4 {
        width: 130px !important;
    }

    /* Tighten node positioning */
    .nude-1 {
        top: -3% !important;
        left: 42% !important;
    }

    .nude-2 {
        top: 12% !important;
        right: 8% !important;
    }

    .nude-3 {
        top: 40% !important;
        right: -2% !important;
    }

    .nude-4 {
        bottom: 12% !important;
        right: 8% !important;
    }

    .nude-5 {
        bottom: -3% !important;
        left: 42% !important;
    }

    .nude-6 {
        bottom: 12% !important;
        left: 8% !important;
    }

    .nude-7 {
        top: 40% !important;
        left: -2% !important;
    }

    .nude-8 {
        top: 12% !important;
        left: 8% !important;
    }
}

/* ========================================
   LAPTOPS (1199px - 992px)
   Standard Laptop Screens
   ======================================== */
@media (max-width: 1199px) {
    .animation-container {
        height: auto!important;
        min-height: auto !important;
        padding: 30px 15px !important;
    }

    .orbit-system {
        width: 450px !important;
        height: 450px !important;
    }

    .orbit-ring-1 {
        width: 360px !important;
        height: 360px !important;
        top: 45px !important;
        left: 45px !important;
    }

    .orbit-ring-2 {
        width: 280px !important;
        height: 280px !important;
        top: 85px !important;
        left: 85px !important;
    }

    .orbit-ring-3 {
        width: 200px !important;
        height: 200px !important;
        top: 125px !important;
        left: 125px !important;
    }

    .core {
        width: 105px !important;
        height: 105px !important;
        border-radius: 25px !important;
    }

    .core::before {
        border-radius: 25px !important;
    }

    .core-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .core-text {
        font-size: 14px !important;
    }

    .feature-node {
        width: 90px !important;
        height: 90px !important;
        border-radius: 18px !important;
    }

    .feature-node::before {
        border-radius: 18px !important;
    }

    .node-icon {
        width: 24px !important;
        height: 24px !important;
        margin-bottom: 5px !important;
    }

    .node-label {
        font-size: 10px !important;
    }

    .beam-1, .beam-2, .beam-3, .beam-4 {
        width: 115px !important;
        height: 1.5px !important;
    }

    .data-dot {
        width: 6px !important;
        height: 6px !important;
    }

    .particle {
        width: 3px !important;
        height: 3px !important;
    }

    /* Optimize node positions */
    .nude-1 {
        top: -4% !important;
        left: 43% !important;
    }

    .nude-2 {
        top: 10% !important;
        right: 6% !important;
    }

    .nude-3 {
        top: 40% !important;
        right: -3% !important;
    }

    .nude-4 {
        bottom: 10% !important;
        right: 6% !important;
    }

    .nude-5 {
        bottom: -4% !important;
        left: 43% !important;
    }

    .nude-6 {
        bottom: 10% !important;
        left: 6% !important;
    }

    .nude-7 {
        top: 40% !important;
        left: -3% !important;
    }

    .nude-8 {
        top: 10% !important;
        left: 6% !important;
    }
}

@media (max-width: 1024px) {
    .animation-container {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Floating particles background */
    .particle {
        position: absolute !important;
        width: 4px !important;
        height: 4px !important;
        background: #f96a2e !important;
        border-radius: 50% !important;
        opacity: 0 !important;
        animation: float 8s ease-in-out infinite !important;
    }

        .particle:nth-child(1) {
            left: 10% !important;
            animation-delay: 0s !important;
        }

        .particle:nth-child(2) {
            left: 30% !important;
            animation-delay: 1.5s !important;
        }

        .particle:nth-child(3) {
            left: 50% !important;
            animation-delay: 3s !important;
        }

        .particle:nth-child(4) {
            left: 70% !important;
            animation-delay: 4.5s !important;
        }

        .particle:nth-child(5) {
            left: 90% !important;
            animation-delay: 6s !important;
        }

    /* Main circular orbit system */
    .orbit-system {
        position: relative !important;
        width: 600px !important;
        height: 600px !important;
    }

    .orbit-ring {
        position: absolute !important;
        border: 2px solid rgba(249, 106, 46, 0.1) !important;
        border-radius: 50% !important;
        animation: rotateOrbit 20s linear infinite !important;
    }

    .orbit-ring-1 {
        width: 500px !important;
        height: 500px !important;
        top: 50px !important;
        left: 50px !important;
    }

    .orbit-ring-2 {
        width: 400px !important;
        height: 400px !important;
        top: 100px !important;
        left: 100px !important;
        animation-duration: 15s !important;
        animation-direction: reverse !important;
    }

    .orbit-ring-3 {
        width: 300px !important;
        height: 300px !important;
        top: 150px !important;
        left: 150px !important;
        animation-duration: 25s !important;
    }

    /* Central core */
    .core {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 140px !important;
        height: 140px !important;
        background: linear-gradient(135deg, #f96a2e 0%, #ff8f5c 100%) !important;
        border-radius: 30px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 20px 60px rgba(249, 106, 46, 0.3) !important;
        animation: corePulse 3s ease-in-out infinite !important;
        z-index: 10 !important;
    }

        .core::before {
            content: '' !important;
            position: absolute !important;
            width: 100% !important;
            height: 100% !important;
            border-radius: 30px !important;
            background: linear-gradient(135deg, #f96a2e 0%, #ff8f5c 100%) !important;
            filter: blur(20px) !important;
            opacity: 0.6 !important;
            z-index: -1 !important;
            animation: glowPulse 3s ease-in-out infinite !important;
        }

    .core-text {
        color: white !important;
        font-weight: 700 !important;
        font-size: 18px !important;
        margin-top: 8px !important;
        letter-spacing: 0.5px !important;
    }

    .core-icon {
        width: 50px !important;
        height: 50px !important;
        stroke: white !important;
        fill: none !important;
        stroke-width: 2.5 !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Feature nodes */
    .feature-node {
        position: absolute !important;
        width: 120px !important;
        height: 120px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: white !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
        cursor: pointer !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

        .feature-node::before {
            content: '' !important;
            position: absolute !important;
            inset: -2px !important;
            border-radius: 20px !important;
            background: linear-gradient(135deg, #f96a2e, #ff8f5c) !important;
            z-index: -1 !important;
            opacity: 0 !important;
            transition: opacity 0.4s !important;
        }

        .feature-node:hover::before {
            opacity: 1 !important;
        }

        .feature-node:hover {
            transform: scale(1.15) translateY(-5px) !important;
            box-shadow: 0 20px 60px rgba(249, 106, 46, 0.2) !important;
        }

    .node-icon {
        width: 40px !important;
        height: 40px !important;
        stroke: #f96a2e !important;
        fill: none !important;
        stroke-width: 2 !important;
        margin-bottom: 8px !important;
        transition: all 0.4s !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .feature-node:hover .node-icon {
        stroke: white !important;
        transform: rotate(360deg) scale(1.1) !important;
    }

    .node-label {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #1a1a1a !important;
        text-align: center !important;
        transition: color 0.4s !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .feature-node:hover .node-label {
        color: white !important;
    }

}

/* ========================================
   TABLETS (991px - 768px)
   iPad and Tablet Devices
   ======================================== */
@media (max-width: 991px) {
    .animation-container {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Floating particles background */
    .particle {
        position: absolute !important;
        width: 4px !important;
        height: 4px !important;
        background: #f96a2e !important;
        border-radius: 50% !important;
        opacity: 0 !important;
        animation: float 8s ease-in-out infinite !important;
    }

        .particle:nth-child(1) {
            left: 10% !important;
            animation-delay: 0s !important;
        }

        .particle:nth-child(2) {
            left: 30% !important;
            animation-delay: 1.5s !important;
        }

        .particle:nth-child(3) {
            left: 50% !important;
            animation-delay: 3s !important;
        }

        .particle:nth-child(4) {
            left: 70% !important;
            animation-delay: 4.5s !important;
        }

        .particle:nth-child(5) {
            left: 90% !important;
            animation-delay: 6s !important;
        }

    /* Main circular orbit system */
    .orbit-system {
        position: relative !important;
        width: 600px !important;
        height: 600px !important;
    }

    .orbit-ring {
        position: absolute !important;
        border: 2px solid rgba(249, 106, 46, 0.1) !important;
        border-radius: 50% !important;
        animation: rotateOrbit 20s linear infinite !important;
    }

    .orbit-ring-1 {
        width: 500px !important;
        height: 500px !important;
        top: 50px !important;
        left: 50px !important;
    }

    .orbit-ring-2 {
        width: 400px !important;
        height: 400px !important;
        top: 100px !important;
        left: 100px !important;
        animation-duration: 15s !important;
        animation-direction: reverse !important;
    }

    .orbit-ring-3 {
        width: 300px !important;
        height: 300px !important;
        top: 150px !important;
        left: 150px !important;
        animation-duration: 25s !important;
    }

    /* Central core */
    .core {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 140px !important;
        height: 140px !important;
        background: linear-gradient(135deg, #f96a2e 0%, #ff8f5c 100%) !important;
        border-radius: 30px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 20px 60px rgba(249, 106, 46, 0.3) !important;
        animation: corePulse 3s ease-in-out infinite !important;
        z-index: 10 !important;
    }

        .core::before {
            content: '' !important;
            position: absolute !important;
            width: 100% !important;
            height: 100% !important;
            border-radius: 30px !important;
            background: linear-gradient(135deg, #f96a2e 0%, #ff8f5c 100%) !important;
            filter: blur(20px) !important;
            opacity: 0.6 !important;
            z-index: -1 !important;
            animation: glowPulse 3s ease-in-out infinite !important;
        }

    .core-text {
        color: white !important;
        font-weight: 700 !important;
        font-size: 18px !important;
        margin-top: 8px !important;
        letter-spacing: 0.5px !important;
    }

    .core-icon {
        width: 50px !important;
        height: 50px !important;
        stroke: white !important;
        fill: none !important;
        stroke-width: 2.5 !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Feature nodes */
    .feature-node {
        position: absolute !important;
        width: 120px !important;
        height: 120px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: white !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
        cursor: pointer !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

        .feature-node::before {
            content: '' !important;
            position: absolute !important;
            inset: -2px !important;
            border-radius: 20px !important;
            background: linear-gradient(135deg, #f96a2e, #ff8f5c) !important;
            z-index: -1 !important;
            opacity: 0 !important;
            transition: opacity 0.4s !important;
        }

        .feature-node:hover::before {
            opacity: 1 !important;
        }

        .feature-node:hover {
            transform: scale(1.15) translateY(-5px) !important;
            box-shadow: 0 20px 60px rgba(249, 106, 46, 0.2) !important;
        }

    .node-icon {
        width: 40px !important;
        height: 40px !important;
        stroke: #f96a2e !important;
        fill: none !important;
        stroke-width: 2 !important;
        margin-bottom: 8px !important;
        transition: all 0.4s !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .feature-node:hover .node-icon {
        stroke: white !important;
        transform: rotate(360deg) scale(1.1) !important;
    }

    .node-label {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #1a1a1a !important;
        text-align: center !important;
        transition: color 0.4s !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .feature-node:hover .node-label {
        color: white !important;
    }
}

@media (max-width: 850px) {
    .animation-container {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Floating particles background */
    .particle {
        position: absolute !important;
        width: 4px !important;
        height: 4px !important;
        background: #f96a2e !important;
        border-radius: 50% !important;
        opacity: 0 !important;
        animation: float 8s ease-in-out infinite !important;
    }

        .particle:nth-child(1) {
            left: 10% !important;
            animation-delay: 0s !important;
        }

        .particle:nth-child(2) {
            left: 30% !important;
            animation-delay: 1.5s !important;
        }

        .particle:nth-child(3) {
            left: 50% !important;
            animation-delay: 3s !important;
        }

        .particle:nth-child(4) {
            left: 70% !important;
            animation-delay: 4.5s !important;
        }

        .particle:nth-child(5) {
            left: 90% !important;
            animation-delay: 6s !important;
        }

    /* Main circular orbit system */
    .orbit-system {
        position: relative !important;
        width: 600px !important;
        height: 600px !important;
    }

    .orbit-ring {
        position: absolute !important;
        border: 2px solid rgba(249, 106, 46, 0.1) !important;
        border-radius: 50% !important;
        animation: rotateOrbit 20s linear infinite !important;
    }

    .orbit-ring-1 {
        width: 500px !important;
        height: 500px !important;
        top: 50px !important;
        left: 50px !important;
    }

    .orbit-ring-2 {
        width: 400px !important;
        height: 400px !important;
        top: 100px !important;
        left: 100px !important;
        animation-duration: 15s !important;
        animation-direction: reverse !important;
    }

    .orbit-ring-3 {
        width: 300px !important;
        height: 300px !important;
        top: 150px !important;
        left: 150px !important;
        animation-duration: 25s !important;
    }

    /* Central core */
    .core {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 140px !important;
        height: 140px !important;
        background: linear-gradient(135deg, #f96a2e 0%, #ff8f5c 100%) !important;
        border-radius: 30px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 20px 60px rgba(249, 106, 46, 0.3) !important;
        animation: corePulse 3s ease-in-out infinite !important;
        z-index: 10 !important;
    }

        .core::before {
            content: '' !important;
            position: absolute !important;
            width: 100% !important;
            height: 100% !important;
            border-radius: 30px !important;
            background: linear-gradient(135deg, #f96a2e 0%, #ff8f5c 100%) !important;
            filter: blur(20px) !important;
            opacity: 0.6 !important;
            z-index: -1 !important;
            animation: glowPulse 3s ease-in-out infinite !important;
        }

    .core-text {
        color: white !important;
        font-weight: 700 !important;
        font-size: 18px !important;
        margin-top: 8px !important;
        letter-spacing: 0.5px !important;
    }

    .core-icon {
        width: 50px !important;
        height: 50px !important;
        stroke: white !important;
        fill: none !important;
        stroke-width: 2.5 !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Feature nodes */
    .feature-node {
        position: absolute !important;
        width: 120px !important;
        height: 120px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: white !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
        cursor: pointer !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

        .feature-node::before {
            content: '' !important;
            position: absolute !important;
            inset: -2px !important;
            border-radius: 20px !important;
            background: linear-gradient(135deg, #f96a2e, #ff8f5c) !important;
            z-index: -1 !important;
            opacity: 0 !important;
            transition: opacity 0.4s !important;
        }

        .feature-node:hover::before {
            opacity: 1 !important;
        }

        .feature-node:hover {
            transform: scale(1.15) translateY(-5px) !important;
            box-shadow: 0 20px 60px rgba(249, 106, 46, 0.2) !important;
        }

    .node-icon {
        width: 40px !important;
        height: 40px !important;
        stroke: #f96a2e !important;
        fill: none !important;
        stroke-width: 2 !important;
        margin-bottom: 8px !important;
        transition: all 0.4s !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .feature-node:hover .node-icon {
        stroke: white !important;
        transform: rotate(360deg) scale(1.1) !important;
    }

    .node-label {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #1a1a1a !important;
        text-align: center !important;
        transition: color 0.4s !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .feature-node:hover .node-label {
        color: white !important;
    }
}

/* ========================================
   LARGE MOBILES (767px - 576px)
   Large Smartphones in Landscape
   ======================================== */
@media (max-width: 767px) {
    .animation-container {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Floating particles background */
    .particle {
        position: absolute !important;
        width: 4px !important;
        height: 4px !important;
        background: #f96a2e !important;
        border-radius: 50% !important;
        opacity: 0 !important;
        animation: float 8s ease-in-out infinite !important;
    }

        .particle:nth-child(1) {
            left: 10% !important;
            animation-delay: 0s !important;
        }

        .particle:nth-child(2) {
            left: 30% !important;
            animation-delay: 1.5s !important;
        }

        .particle:nth-child(3) {
            left: 50% !important;
            animation-delay: 3s !important;
        }

        .particle:nth-child(4) {
            left: 70% !important;
            animation-delay: 4.5s !important;
        }

        .particle:nth-child(5) {
            left: 90% !important;
            animation-delay: 6s !important;
        }

    /* Main circular orbit system */
    .orbit-system {
        position: relative !important;
        width: 600px !important;
        height: 600px !important;
    }

    .orbit-ring {
        position: absolute !important;
        border: 2px solid rgba(249, 106, 46, 0.1) !important;
        border-radius: 50% !important;
        animation: rotateOrbit 20s linear infinite !important;
    }

    .orbit-ring-1 {
        width: 450px !important;
        height: 450px !important;
        top: 75px !important;
        left: 75px !important;
    }

    .orbit-ring-2 {
        width: 350px !important;
        height: 350px !important;
        top: 125px !important;
        left: 125px !important;
        animation-duration: 15s !important;
        animation-direction: reverse !important;
    }

    .orbit-ring-3 {
        width: 250px !important;
        height: 250px !important;
        top: 175px !important;
        left: 175px !important;
        animation-duration: 25s !important;
    }

    /* Central core */
    .core {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 140px !important;
        height: 140px !important;
        background: linear-gradient(135deg, #f96a2e 0%, #ff8f5c 100%) !important;
        border-radius: 30px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 20px 60px rgba(249, 106, 46, 0.3) !important;
        animation: corePulse 3s ease-in-out infinite !important;
        z-index: 10 !important;
    }

        .core::before {
            content: '' !important;
            position: absolute !important;
            width: 100% !important;
            height: 100% !important;
            border-radius: 30px !important;
            background: linear-gradient(135deg, #f96a2e 0%, #ff8f5c 100%) !important;
            filter: blur(20px) !important;
            opacity: 0.6 !important;
            z-index: -1 !important;
            animation: glowPulse 3s ease-in-out infinite !important;
        }

    .core-text {
        color: white !important;
        font-weight: 700 !important;
        font-size: 18px !important;
        margin-top: 8px !important;
        letter-spacing: 0.5px !important;
    }

    .core-icon {
        width: 50px !important;
        height: 50px !important;
        stroke: white !important;
        fill: none !important;
        stroke-width: 2.5 !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Feature nodes */
    .feature-node {
        position: absolute !important;
        width: 100px !important;
        height: 100px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: white !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
        cursor: pointer !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

        .feature-node::before {
            content: '' !important;
            position: absolute !important;
            inset: -2px !important;
            border-radius: 20px !important;
            background: linear-gradient(135deg, #f96a2e, #ff8f5c) !important;
            z-index: -1 !important;
            opacity: 0 !important;
            transition: opacity 0.4s !important;
        }

        .feature-node:hover::before {
            opacity: 1 !important;
        }

        .feature-node:hover {
            transform: scale(1.15) translateY(-5px) !important;
            box-shadow: 0 20px 60px rgba(249, 106, 46, 0.2) !important;
        }

    .node-icon {
        width: 40px !important;
        height: 40px !important;
        stroke: #f96a2e !important;
        fill: none !important;
        stroke-width: 2 !important;
        margin-bottom: 8px !important;
        transition: all 0.4s !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .feature-node:hover .node-icon {
        stroke: white !important;
        transform: rotate(360deg) scale(1.1) !important;
    }

    .node-label {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #1a1a1a !important;
        text-align: center !important;
        transition: color 0.4s !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .feature-node:hover .node-label {
        color: white !important;
    }
    .nude-1 {
        top: 3% !important;
        left: 42% !important;
    }
    .nude-2 {
        top: 14% !important;
        right: 10% !important;
    }
    .nude-3 {
        top: 41% !important;
        right: 3% !important;
    }
    .nude-4 {
        bottom: 14% !important;
        right: 12% !important;
    }
    .nude-5 {
        bottom: 3% !important;
        left: 41% !important;
    }
    .nude-6 {
        bottom: 13% !important;
        left: 11% !important;
    }
    .nude-7 {
        top: 41% !important;
        left: 3% !important;
    }
    .nude-8 {
        top: 14% !important;
        left: 10% !important;
    }
}

@media (max-width: 700px) {
    .animation-container {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Floating particles background */
    .particle {
        position: absolute !important;
        width: 4px !important;
        height: 4px !important;
        background: #f96a2e !important;
        border-radius: 50% !important;
        opacity: 0 !important;
        animation: float 8s ease-in-out infinite !important;
    }

        .particle:nth-child(1) {
            left: 10% !important;
            animation-delay: 0s !important;
        }

        .particle:nth-child(2) {
            left: 30% !important;
            animation-delay: 1.5s !important;
        }

        .particle:nth-child(3) {
            left: 50% !important;
            animation-delay: 3s !important;
        }

        .particle:nth-child(4) {
            left: 70% !important;
            animation-delay: 4.5s !important;
        }

        .particle:nth-child(5) {
            left: 90% !important;
            animation-delay: 6s !important;
        }

    /* Main circular orbit system */
    .orbit-system {
        position: relative !important;
        width: 600px !important;
        height: 600px !important;
    }

    .orbit-ring {
        position: absolute !important;
        border: 2px solid rgba(249, 106, 46, 0.1) !important;
        border-radius: 50% !important;
        animation: rotateOrbit 20s linear infinite !important;
    }

    .orbit-ring-1 {
        width: 430px !important;
        height: 430px !important;
        top: 75px !important;
        left: 75px !important;
    }

    .orbit-ring-2 {
        width: 330px !important;
        height: 330px !important;
        top: 125px !important;
        left: 125px !important;
        animation-duration: 15s !important;
        animation-direction: reverse !important;
    }

    .orbit-ring-3 {
        width: 230px !important;
        height: 230px !important;
        top: 175px !important;
        left: 175px !important;
        animation-duration: 25s !important;
    }

    /* Central core */
    .core {
        position: absolute !important;
        top: 50% !important;
        left: 53% !important;
        transform: translate(-50%, -50%) !important;
        width: 120px !important;
        height: 120px !important;
        background: linear-gradient(135deg, #f96a2e 0%, #ff8f5c 100%) !important;
        border-radius: 30px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 20px 60px rgba(249, 106, 46, 0.3) !important;
        animation: corePulse 3s ease-in-out infinite !important;
        z-index: 10 !important;
    }

        .core::before {
            content: '' !important;
            position: absolute !important;
            width: 100% !important;
            height: 100% !important;
            border-radius: 30px !important;
            background: linear-gradient(135deg, #f96a2e 0%, #ff8f5c 100%) !important;
            filter: blur(20px) !important;
            opacity: 0.6 !important;
            z-index: -1 !important;
            animation: glowPulse 3s ease-in-out infinite !important;
        }

    .core-text {
        color: white !important;
        font-weight: 700 !important;
        font-size: 18px !important;
        margin-top: 8px !important;
        letter-spacing: 0.5px !important;
    }

    .core-icon {
        width: 50px !important;
        height: 50px !important;
        stroke: white !important;
        fill: none !important;
        stroke-width: 2.5 !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Feature nodes */
    .feature-node {
        position: absolute !important;
        width: 80px !important;
        height: 80px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: white !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
        cursor: pointer !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

        .feature-node::before {
            content: '' !important;
            position: absolute !important;
            inset: -2px !important;
            border-radius: 20px !important;
            background: linear-gradient(135deg, #f96a2e, #ff8f5c) !important;
            z-index: -1 !important;
            opacity: 0 !important;
            transition: opacity 0.4s !important;
        }

        .feature-node:hover::before {
            opacity: 1 !important;
        }

        .feature-node:hover {
            transform: scale(1.15) translateY(-5px) !important;
            box-shadow: 0 20px 60px rgba(249, 106, 46, 0.2) !important;
        }

    .node-icon {
        width: 40px !important;
        height: 40px !important;
        stroke: #f96a2e !important;
        fill: none !important;
        stroke-width: 2 !important;
        margin-bottom: 8px !important;
        transition: all 0.4s !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .feature-node:hover .node-icon {
        stroke: white !important;
        transform: rotate(360deg) scale(1.1) !important;
    }

    .node-label {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #1a1a1a !important;
        text-align: center !important;
        transition: color 0.4s !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .feature-node:hover .node-label {
        color: white !important;
    }
    .beam-1 {
        top: 30% !important;
        left: 52% !important;
    }
    .beam-3 {
        left: 52% !important;
    }
    .dot-1 {
        left: 51.5% !important;
    }
    .dot-3 {
        left: 51.5% !important;
    }
    .nude-1 {
        top: 7% !important;
        left: 45% !important;
    }

    .nude-2 {
        top: 15% !important;
        right: 13% !important;
    }

    .nude-3 {
        top: 43% !important;
        right: 2% !important;
    }

    .nude-4 {
        bottom: 18%  !important;
        right: 9% !important;
    }

    .nude-5 {
        bottom: 6% !important;
        left: 45% !important;
    }

    .nude-6 {
        bottom: 18% !important;
        left: 13%  !important;
    }

    .nude-7 {
        top: 43%  !important;
        left: 6% !important;
    }
    .nude-8 {
        top: 17% !important;
        left: 14% !important;
    }
}

@media (max-width: 650px) {
    .animation-container {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: hidden !important;
        padding: 0px !important;
    }

    /* Floating particles background */
    .particle {
        position: absolute !important;
        width: 4px !important;
        height: 4px !important;
        background: #f96a2e !important;
        border-radius: 50% !important;
        opacity: 0 !important;
        animation: float 8s ease-in-out infinite !important;
    }

        .particle:nth-child(1) {
            left: 10% !important;
            animation-delay: 0s !important;
        }

        .particle:nth-child(2) {
            left: 30% !important;
            animation-delay: 1.5s !important;
        }

        .particle:nth-child(3) {
            left: 50% !important;
            animation-delay: 3s !important;
        }

        .particle:nth-child(4) {
            left: 70% !important;
            animation-delay: 4.5s !important;
        }

        .particle:nth-child(5) {
            left: 90% !important;
            animation-delay: 6s !important;
        }

    /* Main circular orbit system - CENTERED */
    .orbit-system {
        position: relative !important;
        width: 400px !important;
        height: 400px !important;
        margin: 0 auto !important;
    }

    .orbit-ring {
        position: absolute !important;
        border: 2px solid rgba(249, 106, 46, 0.1) !important;
        border-radius: 50% !important;
        animation: rotateOrbit 20s linear infinite !important;
    }

    .orbit-ring-1 {
        width: 320px !important;
        height: 320px !important;
        top: 40px !important;
        left: 40px !important;
    }

    .orbit-ring-2 {
        width: 240px !important;
        height: 240px !important;
        top: 80px !important;
        left: 80px !important;
        animation-duration: 15s !important;
        animation-direction: reverse !important;
    }

    .orbit-ring-3 {
        width: 160px !important;
        height: 160px !important;
        top: 120px !important;
        left: 120px !important;
        animation-duration: 25s !important;
    }

    /* Central core - CENTERED */
    .core {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 100px !important;
        height: 100px !important;
        background: linear-gradient(135deg, #f96a2e 0%, #ff8f5c 100%) !important;
        border-radius: 25px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 20px 60px rgba(249, 106, 46, 0.3) !important;
        animation: corePulse 3s ease-in-out infinite !important;
        z-index: 10 !important;
    }

        .core::before {
            content: '' !important;
            position: absolute !important;
            width: 100% !important;
            height: 100% !important;
            border-radius: 30px !important;
            background: linear-gradient(135deg, #f96a2e 0%, #ff8f5c 100%) !important;
            filter: blur(20px) !important;
            opacity: 0.6 !important;
            z-index: -1 !important;
            animation: glowPulse 3s ease-in-out infinite !important;
        }

    .core-text {
        color: white !important;
        font-weight: 700 !important;
        font-size: 18px !important;
        margin-top: 8px !important;
        letter-spacing: 0.5px !important;
    }

    .core-icon {
        width: 50px !important;
        height: 50px !important;
        stroke: white !important;
        fill: none !important;
        stroke-width: 2.5 !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Feature nodes */
    .feature-node {
        position: absolute !important;
        width: 70px !important;
        height: 70px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: white !important;
        border-radius: 18px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
        cursor: pointer !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

        .feature-node::before {
            content: '' !important;
            position: absolute !important;
            inset: -2px !important;
            border-radius: 18px !important;
            background: linear-gradient(135deg, #f96a2e, #ff8f5c) !important;
            z-index: -1 !important;
            opacity: 0 !important;
            transition: opacity 0.4s !important;
        }

        .feature-node:hover::before {
            opacity: 1 !important;
        }

        .feature-node:hover {
            transform: scale(1.15) translateY(-5px) !important;
            box-shadow: 0 20px 60px rgba(249, 106, 46, 0.2) !important;
        }

    .node-icon {
        width: 30px !important;
        height: 30px !important;
        stroke: #f96a2e !important;
        fill: none !important;
        stroke-width: 2 !important;
        margin-bottom: 6px !important;
        transition: all 0.4s !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .feature-node:hover .node-icon {
        stroke: white !important;
        transform: rotate(360deg) scale(1.1) !important;
    }

    .node-label {
        font-size: 9px !important;
        font-weight: 600 !important;
        color: #1a1a1a !important;
        text-align: center !important;
        transition: color 0.4s !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .feature-node:hover .node-label {
        color: white !important;
    }

    /* Node positions - CENTERED for 400px orbit-system */
    .nude-1 {
        top: 0% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .nude-2 {
        top: 12% !important;
        right: 8% !important;
    }

    .nude-3 {
        top: 50% !important;
        right: 0% !important;
        transform: translateY(-50%) !important;
    }

    .nude-4 {
        bottom: 12% !important;
        right: 8% !important;
    }

    .nude-5 {
        bottom: 0% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .nude-6 {
        bottom: 12% !important;
        left: 8% !important;
    }

    .nude-7 {
        top: 50% !important;
        left: 0% !important;
        transform: translateY(-50%) !important;
    }

    .nude-8 {
        top: 12% !important;
        left: 8% !important;
    }
}


/* ========================================
   SMALL MOBILES (575px - 300px)
   Standard Smartphones in Portrait
   ======================================== */
@media (max-width: 575px) {
    .animation-container {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: hidden !important;
        padding: 0px !important;
    }

    /* Floating particles background */
    .particle {
        position: absolute !important;
        width: 4px !important;
        height: 4px !important;
        background: #f96a2e !important;
        border-radius: 50% !important;
        opacity: 0 !important;
        animation: float 8s ease-in-out infinite !important;
    }

        .particle:nth-child(1) {
            left: 10% !important;
            animation-delay: 0s !important;
        }

        .particle:nth-child(2) {
            left: 30% !important;
            animation-delay: 1.5s !important;
        }

        .particle:nth-child(3) {
            left: 50% !important;
            animation-delay: 3s !important;
        }

        .particle:nth-child(4) {
            left: 70% !important;
            animation-delay: 4.5s !important;
        }

        .particle:nth-child(5) {
            left: 90% !important;
            animation-delay: 6s !important;
        }

    /* Main circular orbit system - CENTERED */
    .orbit-system {
        position: relative !important;
        width: 400px !important;
        height: 400px !important;
        margin: 0 auto !important;
    }

    .orbit-ring {
        position: absolute !important;
        border: 2px solid rgba(249, 106, 46, 0.1) !important;
        border-radius: 50% !important;
        animation: rotateOrbit 20s linear infinite !important;
    }

    .orbit-ring-1 {
        width: 320px !important;
        height: 320px !important;
        top: 40px !important;
        left: 40px !important;
    }

    .orbit-ring-2 {
        width: 240px !important;
        height: 240px !important;
        top: 80px !important;
        left: 80px !important;
        animation-duration: 15s !important;
        animation-direction: reverse !important;
    }

    .orbit-ring-3 {
        width: 160px !important;
        height: 160px !important;
        top: 120px !important;
        left: 120px !important;
        animation-duration: 25s !important;
    }

    /* Central core - CENTERED */
    .core {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 100px !important;
        height: 100px !important;
        background: linear-gradient(135deg, #f96a2e 0%, #ff8f5c 100%) !important;
        border-radius: 25px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 20px 60px rgba(249, 106, 46, 0.3) !important;
        animation: corePulse 3s ease-in-out infinite !important;
        z-index: 10 !important;
    }

        .core::before {
            content: '' !important;
            position: absolute !important;
            width: 100% !important;
            height: 100% !important;
            border-radius: 30px !important;
            background: linear-gradient(135deg, #f96a2e 0%, #ff8f5c 100%) !important;
            filter: blur(20px) !important;
            opacity: 0.6 !important;
            z-index: -1 !important;
            animation: glowPulse 3s ease-in-out infinite !important;
        }

    .core-text {
        color: white !important;
        font-weight: 700 !important;
        font-size: 18px !important;
        margin-top: 8px !important;
        letter-spacing: 0.5px !important;
    }

    .core-icon {
        width: 50px !important;
        height: 50px !important;
        stroke: white !important;
        fill: none !important;
        stroke-width: 2.5 !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Feature nodes */
    .feature-node {
        position: absolute !important;
        width: 70px !important;
        height: 70px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: white !important;
        border-radius: 18px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
        cursor: pointer !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

        .feature-node::before {
            content: '' !important;
            position: absolute !important;
            inset: -2px !important;
            border-radius: 18px !important;
            background: linear-gradient(135deg, #f96a2e, #ff8f5c) !important;
            z-index: -1 !important;
            opacity: 0 !important;
            transition: opacity 0.4s !important;
        }

        .feature-node:hover::before {
            opacity: 1 !important;
        }

        .feature-node:hover {
            transform: scale(1.15) translateY(-5px) !important;
            box-shadow: 0 20px 60px rgba(249, 106, 46, 0.2) !important;
        }

    .node-icon {
        width: 30px !important;
        height: 30px !important;
        stroke: #f96a2e !important;
        fill: none !important;
        stroke-width: 2 !important;
        margin-bottom: 6px !important;
        transition: all 0.4s !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .feature-node:hover .node-icon {
        stroke: white !important;
        transform: rotate(360deg) scale(1.1) !important;
    }

    .dot-1 {
        left: 49.5% !important;
    }

    .dot-3 {
        left: 49.5% !important;
    }

    .beam-1, .beam-3 {
        left: 50% !important;
    }

    .node-label {
        font-size: 9px !important;
        font-weight: 600 !important;
        color: #1a1a1a !important;
        text-align: center !important;
        transition: color 0.4s !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .feature-node:hover .node-label {
        color: white !important;
    }

    /* Node positions - CENTERED for 400px orbit-system */
    .nude-1 {
        top: 0% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .nude-2 {
        top: 12% !important;
        right: 8% !important;
    }

    .nude-3 {
        top: 50% !important;
        right: 0% !important;
        transform: translateY(-50%) !important;
    }

    .nude-4 {
        bottom: 12% !important;
        right: 8% !important;
    }

    .nude-5 {
        bottom: 0% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .nude-6 {
        bottom: 12% !important;
        left: 8% !important;
    }

    .nude-7 {
        top: 50% !important;
        left: 0% !important;
        transform: translateY(-50%) !important;
    }

    .nude-8 {
        top: 12% !important;
        left: 8% !important;
    }
}


@media (max-width: 480px) {
    .animation-container {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: hidden !important;
        padding: 0px !important;
    }

    /* Floating particles background */
    .particle {
        position: absolute !important;
        width: 4px !important;
        height: 4px !important;
        background: #f96a2e !important;
        border-radius: 50% !important;
        opacity: 0 !important;
        animation: float 8s ease-in-out infinite !important;
    }

        .particle:nth-child(1) {
            left: 10% !important;
            animation-delay: 0s !important;
        }

        .particle:nth-child(2) {
            left: 30% !important;
            animation-delay: 1.5s !important;
        }

        .particle:nth-child(3) {
            left: 50% !important;
            animation-delay: 3s !important;
        }

        .particle:nth-child(4) {
            left: 70% !important;
            animation-delay: 4.5s !important;
        }

        .particle:nth-child(5) {
            left: 90% !important;
            animation-delay: 6s !important;
        }

    /* Main circular orbit system - CENTERED */
    .orbit-system {
        position: relative !important;
        width: 320px !important;
        height: 320px !important;
        margin: 0 auto !important;
    }

    .orbit-ring {
        position: absolute !important;
        border: 2px solid rgba(249, 106, 46, 0.1) !important;
        border-radius: 50% !important;
        animation: rotateOrbit 20s linear infinite !important;
    }

    .orbit-ring-1 {
        width: 250px !important;
        height: 250px !important;
        top: 35px !important;
        left: 35px !important;
    }

    .orbit-ring-2 {
        width: 180px !important;
        height: 180px !important;
        top: 70px !important;
        left: 70px !important;
        animation-duration: 15s !important;
        animation-direction: reverse !important;
    }

    .orbit-ring-3 {
        width: 120px !important;
        height: 120px !important;
        top: 140px !important;
        left: 135px !important;
        animation-duration: 25s !important;
    }

    /* Central core - CENTERED */
    .core {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 65px !important;
        height: 65px !important;
        background: linear-gradient(135deg, #f96a2e 0%, #ff8f5c 100%) !important;
        border-radius: 25px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 20px 60px rgba(249, 106, 46, 0.3) !important;
        animation: corePulse 3s ease-in-out infinite !important;
        z-index: 10 !important;
    }

        .core::before {
            content: '' !important;
            position: absolute !important;
            width: 100% !important;
            height: 100% !important;
            border-radius: 30px !important;
            background: linear-gradient(135deg, #f96a2e 0%, #ff8f5c 100%) !important;
            filter: blur(20px) !important;
            opacity: 0.6 !important;
            z-index: -1 !important;
            animation: glowPulse 3s ease-in-out infinite !important;
        }

    .core-text {
        color: white !important;
        font-weight: 700 !important;
        font-size: 10px !important;
        margin-top: 8px !important;
        letter-spacing: 0.5px !important;
    }

    .core-icon {
        width: 30px !important;
        height: 30px !important;
        stroke: white !important;
        fill: none !important;
        stroke-width: 2.5 !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Feature nodes */
    .feature-node {
        position: absolute !important;
        width: 60px !important;
        height: 60px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: white !important;
        border-radius: 18px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
        cursor: pointer !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

        .feature-node::before {
            content: '' !important;
            position: absolute !important;
            inset: -2px !important;
            border-radius: 18px !important;
            background: linear-gradient(135deg, #f96a2e, #ff8f5c) !important;
            z-index: -1 !important;
            opacity: 0 !important;
            transition: opacity 0.4s !important;
        }

        .feature-node:hover::before {
            opacity: 1 !important;
        }

        .feature-node:hover {
            transform: scale(1.15) translateY(-5px) !important;
            box-shadow: 0 20px 60px rgba(249, 106, 46, 0.2) !important;
        }

    .node-icon {
        width: 25px !important;
        height: 25px !important;
        stroke: #f96a2e !important;
        fill: none !important;
        stroke-width: 2 !important;
        margin-bottom: 6px !important;
        transition: all 0.4s !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .feature-node:hover .node-icon {
        stroke: white !important;
        transform: rotate(360deg) scale(1.1) !important;
    }

    .node-label {
        font-size: 9px !important;
        font-weight: 600 !important;
        color: #1a1a1a !important;
        text-align: center !important;
        transition: color 0.4s !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .feature-node:hover .node-label {
        color: white !important;
    }

    /* Node positions - Close to orbit-ring-2 (200px diameter) */
    .nude-1 {
        top: 5% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .nude-2 {
        top: 15% !important;
        right: 13% !important;
    }

    .nude-3 {
        top: 50% !important;
        right: 5% !important;
        transform: translateY(-50%) !important;
    }

    .nude-4 {
        bottom: 15% !important;
        right: 13% !important;
    }

    .nude-5 {
        bottom: 5% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .nude-6 {
        bottom: 15% !important;
        left: 13% !important;
    }

    .nude-7 {
        top: 50% !important;
        left: 5% !important;
        transform: translateY(-50%) !important;
    }

    .nude-8 {
        top: 15% !important;
        left: 13% !important;
    }
}

@media (max-width: 450px) {
    .orbit-system {
        width: 350px !important;
        height: 350px !important;
    }

    .orbit-ring-1 {
        width: 270px !important;
        height: 270px !important;
        top: 40px !important;
        left: 40px !important;
    }

    .orbit-ring-2 {
        width: 190px !important;
        height: 190px !important;
        top: 80px !important;
        left: 80px !important;
    }

    .orbit-ring-3 {
        width: 110px !important;
        height: 110px !important;
        top: 120px !important;
        left: 120px !important;
    }

    .feature-node {
        width: 50px !important;
        height: 50px !important;
        border-radius: 12px !important;
    }

    .feature-node::before {
        border-radius: 12px !important;
    }

    .node-label {
        font-size: 7px !important;
    }
}

@media (max-width: 415px) {
    .orbit-ring-1 {
        width: 260px !important;
        height: 260px !important;
        top: 45px !important;
        left: 45px !important;
    }

    .orbit-ring-2 {
        width: 180px !important;
        height: 180px !important;
        top: 85px !important;
        left: 85px !important;
    }

    .orbit-ring-3 {
        width: 100px !important;
        height: 100px !important;
        top: 125px !important;
        left: 125px !important;
    }

    .nude-3 {
        right: 0% !important;
    }
    .core{
        left:51% !important;
    }

}

@media (max-width: 380px) {
    .animation-container {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: hidden !important;
        padding:0px !important;
    }

    /* Floating particles background */
    .particle {
        position: absolute !important;
        width: 3px !important;
        height: 3px !important;
        background: #f96a2e !important;
        border-radius: 50% !important;
        opacity: 0 !important;
        animation: float 8s ease-in-out infinite !important;
    }

        .particle:nth-child(1) {
            left: 10% !important;
            animation-delay: 0s !important;
        }

        .particle:nth-child(2) {
            left: 30% !important;
            animation-delay: 1.5s !important;
        }

        .particle:nth-child(3) {
            left: 50% !important;
            animation-delay: 3s !important;
        }

        .particle:nth-child(4) {
            left: 70% !important;
            animation-delay: 4.5s !important;
        }

        .particle:nth-child(5) {
            left: 90% !important;
            animation-delay: 6s !important;
        }

    /* Main circular orbit system - CENTERED */
    .orbit-system {
        position: relative !important;
        width: 260px !important;
        height: 260px !important;
        margin: 0 auto !important;
    }

    .orbit-ring {
        position: absolute !important;
        border: 1px solid rgba(249, 106, 46, 0.1) !important;
        border-radius: 50% !important;
        animation: rotateOrbit 20s linear infinite !important;
    }

    .orbit-ring-1 {
        width: 230px !important;
        height: 230px !important;
        top: 25px !important;
        left: 25px !important;
    }

    .orbit-ring-2 {
        width: 170px !important;
        height: 170px !important;
        top: 55px !important;
        left: 55px !important;
        animation-duration: 15s !important;
        animation-direction: reverse !important;
    }

    .orbit-ring-3 {
        width: 110px !important;
        height: 110px !important;
        top: 85px !important;
        left: 85px !important;
        animation-duration: 25s !important;
    }

    /* Central core - CENTERED */
    .core {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 55px !important;
        height: 55px !important;
        background: linear-gradient(135deg, #f96a2e 0%, #ff8f5c 100%) !important;
        border-radius: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 15px 50px rgba(249, 106, 46, 0.3) !important;
        animation: corePulse 3s ease-in-out infinite !important;
        z-index: 10 !important;
    }

    .core::before {
        content: '' !important;
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 15px !important;
        background: linear-gradient(135deg, #f96a2e 0%, #ff8f5c 100%) !important;
        filter: blur(15px) !important;
        opacity: 0.6 !important;
        z-index: -1 !important;
        animation: glowPulse 3s ease-in-out infinite !important;
    }

    .core-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .core-text {
        font-size: 10px !important;
        margin-top:0px !important;
    }

    .feature-node {
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
    }

    .feature-node::before {
        border-radius: 10px !important;
    }

    .node-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .node-label {
        font-size: 6px !important;
    }
}

/* ========================================
   EXTRA SMALL MOBILES (300px)
   Minimum Supported Screen Size
   ======================================== */
@media (max-width: 350px) {
        .orbit-ring-1 {
            left: 20px !important;
        }

        .orbit-ring-2 {
            left: 60px !important;
        }

        .orbit-ring-3 {
            left: 100px !important;
        }

        .node-label {
            font-size: 6px !important;
        }

        .orbit-ring-1 {
            left: 20px !important;
        }

        .orbit-ring-2 {
            left: 50px !important;
        }

        .orbit-ring-3 {
            left: 85px !important;
        }

        .nude-7 {
            left: 0% !important;
        }
        .node-icon{
            width :20px !important;
            height:20px!important;
        }
    }


  

    /* ========================================
   PERFORMANCE OPTIMIZATIONS
   Reduce Motion for Accessibility
   ======================================== */
    @media (prefers-reduced-motion: reduce) {
        .orbit-ring,
        .core,
        .core::before,
        .core-icon,
        .feature-node,
        .beam,
        .data-dot,
        .particle {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* ========================================
   PRINT STYLES
   Optimize for Print Media
   ======================================== */
    @media print {
        .animation-container {
            height: auto !important;
            page-break-inside: avoid !important;
        }

        .orbit-ring,
        .beam,
        .data-dot,
        .particle {
            display: none !important;
        }

        .orbit-system {
            position: static !important;
            width: 100% !important;
            height: auto !important;
        }

        .core,
        .feature-node {
            position: static !important;
            display: inline-block !important;
            margin: 10px !important;
            animation: none !important;
            transform: none !important;
        }
    }