/* NT Orbit — Shared Static CSS (prefix: nto-) */
        .nto-wrapper {
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 80px 20px;
            overflow: visible;
            box-sizing: border-box;
        }
        .nto-container {
            position: relative;
            width: 100%;
            max-width: var(--nto-max, 600px);
            aspect-ratio: 1/1;
        }

        /* Rings */
        .nto-ring {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 1px solid var(--nto-ring-color, rgba(255, 255, 255, 0.12));
            pointer-events: none;
            box-sizing: border-box;
        }
        .nto-ring-1 { width: 20%; height: 20%; border-style: dotted; }
        .nto-ring-2 { width: 35%; height: 35%; }
        .nto-ring-3 { width: 50%; height: 50%; }
        .nto-ring-4 { width: 65%; height: 65%; }
        .nto-ring-5 { width: 80%; height: 80%; }
        .nto-ring-6 { width: 95%; height: 95%; }

        /* Center Box */
        .nto-center {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 18%; min-width: 110px;
            aspect-ratio: 1/1;
            background: #fff;
            border-radius: 20px;
            padding: 12px;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
            z-index: 10;
        }
        .nto-shield {
            width: 32px; height: 32px;
            color: var(--nto-dot, #2563eb);
            margin-bottom: 10px; flex-shrink: 0;
        }
        .nto-shield svg { width: 100%; height: 100%; }
        .nto-bar { width: 60%; height: 3px; background: #f0f0f0; border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
        .nto-bar-fill {
            width: 100%; height: 100%;
            background: var(--nto-dot, #2563eb);
            transform: translateX(-100%);
            animation: ntoScan 2s infinite ease-in-out;
        }
        @keyframes ntoScan { 0% { transform: translateX(-100%) } 50% { transform: translateX(0) } 100% { transform: translateX(100%) } }
        .nto-label { font-size: 8px; font-weight: 800; color: #999; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; }
        .nto-dots { animation: ntoDots 1.4s infinite; }
        @keyframes ntoDots { 0%, 100% { opacity: .2 } 50% { opacity: 1 } }

        /* Badges */
        .nto-badge {
            position: absolute;
            background: #fff;
            padding: 8px 14px;
            border-radius: 50px;
            display: flex; align-items: center; gap: 8px;
            white-space: nowrap; font-size: 13px; font-weight: 600;
            color: #333;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
            z-index: 20;
        }
        .nto-badge-ico { width: 18px; height: 18px; display: flex; align-items: center; flex-shrink: 0; }
        .nto-badge-ico svg, .nto-badge-icon { width: 100%; height: 100%; object-fit: contain; }

        /* FIXED Badge Positions */
        .nto-badge-top-center    { top: 5%; left: 28%; transform: translateX(-50%); animation: ntoFloatV 4s ease-in-out infinite; }
        .nto-badge-right-top     { top: 15%; right: -2%; transform: none; animation: ntoFloatH 5s ease-in-out infinite 0.5s; }
        .nto-badge-right-bottom  { bottom: 30%; right: -10%; transform: none; animation: ntoFloatH 4.5s ease-in-out infinite 1s; }
        .nto-badge-bottom-center { bottom: 8%; left: 50%; transform: translateX(-50%); animation: ntoFloatV 4s ease-in-out infinite 1.5s; }
        .nto-badge-left-middle   { top: 50%; left: 28%; transform: translateX(-100%) translateY(-50%); animation: ntoFloatL 5.5s ease-in-out infinite 2s; }

        @keyframes ntoFloatV { 0%, 100% { transform: translateX(-50%) translateY(0) } 50% { transform: translateX(-50%) translateY(-9px) } }
        @keyframes ntoFloatH { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
        @keyframes ntoFloatL { 0%, 100% { transform: translateX(-100%) translateY(-50%) } 50% { transform: translateX(calc(-100% - 8px)) translateY(-50%) } }

        /* Orbital Dots */
        .nto-dot-path { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: ntoRotate linear infinite; pointer-events: none; }
        .nto-dot-path-1 { width: 20%; height: 20% }
        .nto-dot-path-2 { width: 35%; height: 35% }
        .nto-dot-path-3 { width: 50%; height: 50% }
        .nto-dot-path-4 { width: 65%; height: 65% }
        .nto-dot-path-5 { width: 80%; height: 80% }
        .nto-dot-path-6 { width: 95%; height: 95% }
        @keyframes ntoRotate { from { transform: translate(-50%, -50%) rotate(0deg) } to { transform: translate(-50%, -50%) rotate(360deg) } }
        .nto-dot { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: var(--nto-dc, var(--nto-dot, #2563eb)); box-shadow: 0 0 10px var(--nto-dc, var(--nto-dot, #2563eb)); }

        @media(max-width:600px) {
            .nto-wrapper { padding: 50px 15px; }
            .nto-badge   { font-size: 11px; padding: 6px 11px; }
            .nto-center  { width: 26%; min-width: 90px; }
            .nto-badge-right-top, .nto-badge-right-bottom { right: 0; }
            .nto-badge-left-middle { left: 30%; transform: translateX(-100%) translateY(-50%); }
        }