/* Interactive widgets moved off the landing page (maturity radar, phishing card). */
.level-bar { height: 4px; background: #1e293b; border-radius: 2px; overflow: hidden; }
.level-progress { height: 100%; width: 0%; background: var(--accent-blue, #3b82f6); transition: width 0.5s ease, background 0.5s ease; }
.radar-grid {
    background-image:
        radial-gradient(circle, var(--accent-blue, #3b82f6) 1px, transparent 1px),
        repeating-radial-gradient(rgba(59, 130, 246, 0.1) 0, rgba(59, 130, 246, 0.1) 1px, transparent 1px, transparent 40px);
    background-size: 100% 100%;
}
@keyframes radar-sweep {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.radar-sweep-effect {
    position: absolute; top: 50%; left: 50%; width: 150vmax; height: 150vmax; aspect-ratio: 1 / 1;
    background: conic-gradient(from 0deg, var(--accent-blue, #3b82f6) 0%, transparent 80%);
    opacity: 0.05; transform-origin: center; animation: radar-sweep 6s linear infinite; pointer-events: none; border-radius: 50%;
}
input[type=range] { -webkit-appearance: none; background: transparent; width: 100%; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; background: rgba(255, 255, 255, 0.05); border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.1); }
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; height: 24px; width: 8px; background: var(--accent-blue, #3b82f6); margin-top: -11px; cursor: pointer;
    border: 1px solid white; box-shadow: 0 0 15px var(--accent-blue, #3b82f6); transition: all 0.2s ease;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scaleY(1.2); background: white; }
input[type=range]::-moz-range-track { height: 4px; background: rgba(255, 255, 255, 0.05); border-radius: 4px; }
input[type=range]::-moz-range-thumb { height: 24px; width: 8px; background: var(--accent-blue, #3b82f6); border: 1px solid white; border-radius: 0; cursor: pointer; }

.propaganda-card {
    background: linear-gradient(to bottom right, #ef4444, #991b1b); color: white; padding: 1.5rem;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%);
}
@keyframes glitch {
    0% { text-shadow: 2px 0 #ef4444, -2px 0 #06b6d4; }
    50% { text-shadow: -1px 0 #ef4444, 1px 0 #06b6d4; }
    100% { text-shadow: 2px 0 #ef4444, -2px 0 #06b6d4; }
}
.glitch-text { text-shadow: 2px 0 #ef4444, -2px 0 #06b6d4; animation: glitch 3s infinite; }