/* roadmap.ejs */
.roadmap-item:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 15px rgba(251, 191, 36, 0.2); }
        .category-card { border: 1px solid rgba(255,255,255,0.08); }
        .category-kpis { font-size: 0.78rem; color: rgba(255,255,255,0.75); }
        .category-kpis span { margin-right: 10px; }

        .status-badge { font-size: 0.65rem; padding: 5px 10px; border-radius: 50px; text-transform: uppercase; letter-spacing: 1px; }
        .status-planned { background: rgba(255,255,255,0.1); color: #ccc; }
        .status-progress { background: rgba(255, 122, 0, 0.2); color: var(--accent); border: 1px solid var(--accent); }
        .status-done { background: rgba(34, 197, 94, 0.2); color: var(--success); border: 1px solid var(--success); }

        .progress-custom { height: 10px; background: rgba(255,255,255,0.05); border-radius: 10px; overflow: hidden; width: 100%; display: flex; }
        .progress-fill { height: 100%; border-radius: 10px; transition: width 1s ease-in-out; display: block; }

        .fill-accent { background-color: var(--accent); box-shadow: 0 0 10px var(--accent); }
        .fill-done { background-color: var(--success); box-shadow: 0 0 10px var(--success); }

        .back-btn { color: white; text-decoration: none; opacity: 0.6; transition: 0.3s; }
        .back-btn:hover { opacity: 1; color: var(--accent); }

        .particles-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
        .particle { position: absolute; background: var(--accent); border-radius: 50%; opacity: 0.2; animation: floatUp 15s linear infinite; }

                @keyframes floatUp { 0% { transform: translateY(110vh); opacity: 0; } 10% { opacity: 0.2; } 90% { opacity: 0.2; } 100% { transform: translateY(-10vh); opacity: 0; } }
        @media (max-width: 576px) {
            .display-4 { font-size: 1.7rem; letter-spacing: 1px !important; }
            .roadmap-item { padding: 14px !important; }
            .roadmap-item .d-flex.justify-content-between { flex-direction: column; align-items: flex-start !important; gap: 8px; }
            .status-badge { align-self: flex-start; }
        }