html {
        scroll-behavior: smooth;
    }
    .material-symbols-outlined {
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }
    .security-grid {
        background-image: radial-gradient(circle at 2px 2px, rgba(128, 0, 128, 0.05) 1px, transparent 0);
        background-size: 40px 40px;
    }
    .purple-glow {
        background: radial-gradient(circle at center, rgba(128, 0, 128, 0.15) 0%, transparent 70%);
    }
    .nav-blur {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    /* CTA glow effect */
    .glow-btn {
        transition: all 0.3s ease;
    }
    .glow-btn:hover {
        box-shadow: 0 0 25px rgba(128, 0, 128, 0.5), 0 0 80px rgba(128, 0, 128, 0.15);
    }

    /* Hero entrance animations */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .hero-headline {
        animation: fadeInUp 0.7s ease-out both;
    }
    .hero-subtitle {
        animation: fadeInUp 0.7s ease-out 0.15s both;
    }
    .hero-cta {
        animation: fadeInUp 0.7s ease-out 0.3s both;
    }
    .hero-visual {
        animation: fadeInUp 0.9s ease-out 0.5s both;
    }

    /* Scroll reveal */
    .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    /* Card hover lift */
    .card-lift {
        transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .card-lift:hover {
        transform: translateY(-4px);
        border-color: rgba(128, 0, 128, 0.3);
        box-shadow: 0 8px 30px rgba(128, 0, 128, 0.08);
    }

    /* ── Interactive Display ── */
    .demo-tab {
        cursor: pointer;
        border-left: 2px solid transparent;
        padding: 10px 14px;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
    }

    /* Policy toggle switch */
    .toggle-track {
        width: 32px; height: 16px;
        border-radius: 8px;
        background: rgba(255,255,255,0.1);
        position: relative;
        transition: background 0.3s ease;
        flex-shrink: 0;
    }
    .toggle-track.on { background: #800080; }
    .toggle-track .toggle-thumb {
        width: 12px; height: 12px;
        border-radius: 50%;
        background: white;
        position: absolute;
        top: 2px; left: 2px;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .toggle-track.on .toggle-thumb { transform: translateX(16px); }
    .demo-tab:hover {
        background: rgba(128, 0, 128, 0.06);
        transform: translateX(2px);
    }
    .demo-tab.active {
        border-left-color: var(--tab-accent, #800080);
        background: rgba(128, 0, 128, 0.08);
    }
    .demo-tab .tab-icon {
        transition: color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .demo-tab.active .tab-icon {
        color: #ffaaf3;
        transform: scale(1.1);
    }
    .demo-tab .tab-label {
        transition: color 0.25s ease;
    }
    .demo-tab.active .tab-label {
        color: #e5e2e3;
    }

    /* Panel transitions */
    .demo-panel {
        position: absolute;
        inset: 0;
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.15s ease, transform 0.15s ease;
        pointer-events: none;
        will-change: transform, opacity;
    }
    .demo-panel.active {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: auto;
    }

    /* Count-up shimmer */
    .count-value {
        display: inline-block;
        background: linear-gradient(135deg, #ffaaf3, #fff, #ffaaf3);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Sparkline draw */
    .sparkline-path {
        stroke-dasharray: var(--path-length, 300);
        stroke-dashoffset: var(--path-length, 300);
        transition: stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .sparkline-path.drawn {
        stroke-dashoffset: 0;
    }

    /* Stagger fade-in for alert rows */
    .alert-row {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .alert-row.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Progress ring */
    .progress-ring-circle {
        transition: stroke-dashoffset 1s cubic-bezier(0.16, 1, 0.3, 1);
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
    }

    /* Bar chart bars */
    .bar-animate {
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .bar-animate.grown {
        transform: scaleY(1);
    }

    /* Severity badges */
    .badge-critical { background: rgba(220, 38, 38, 0.15); color: #fca5a5; border: 1px solid rgba(220, 38, 38, 0.25); }
    .badge-high { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.25); }
    .badge-medium { background: rgba(128, 0, 128, 0.15); color: #ffaaf3; border: 1px solid rgba(128, 0, 128, 0.25); }