body {
            background-color: #000000;
            color: #FFFFFF;
            overflow-x: hidden;
            position: relative;
        }

        /* Diagonal 3D Pixel Text Effect */
        .text-3d {
            color: #FFFFFF;
            -webkit-text-stroke: 1px #8400FF;
            text-shadow: 
                1px 1px 0px #4d0099,
                2px 2px 0px #4d0099,
                3px 3px 0px #4d0099,
                4px 4px 0px #4d0099,
                5px 5px 0px #4d0099,
                6px 6px 15px rgba(132, 0, 255, 0.5);
            letter-spacing: 0.02em;
            font-weight: 700;
        }

        /* Gradient Backgrounds */
        .bg-gradient-card {
            background: linear-gradient(180deg, #101010 0%, #050505 100%);
        }
        
        .bg-gradient-badge {
            background: linear-gradient(90deg, rgba(132, 0, 255, 0.15) 0%, rgba(132, 0, 255, 0.05) 100%);
            border: 1px solid rgba(132, 0, 255, 0.2);
        }

        /* Buttons */
        .btn-3d {
            position: relative;
            background: linear-gradient(180deg, #9e2af5 0%, #6c00d9 100%);
            transition: transform 0.1s ease, box-shadow 0.1s ease;
            box-shadow: 1px 1px 0 0 #3a0073, 2px 2px 0 0 #3a0073, 3px 3px 0 0 #3a0073, 4px 4px 0 0 #3a0073;
            transform: translate(0, 0);
            border: 1px solid #c275ff;
        }
        .btn-3d:hover { filter: brightness(1.1); }
        .btn-3d:active {
            box-shadow: 0px 0px 0 0 #3a0073;
            transform: translate(4px, 4px);
        }

        .btn-ghost-3d {
            position: relative;
            background: linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
            color: #000000 !important;
            transition: transform 0.1s ease, box-shadow 0.1s ease;
            box-shadow: 1px 1px 0 0 #555555, 2px 2px 0 0 #555555, 3px 3px 0 0 #555555, 4px 4px 0 0 #555555;
            transform: translate(0, 0);
            border: 1px solid #ffffff;
        }
        .btn-ghost-3d:hover { filter: brightness(1.1); }
        .btn-ghost-3d:active {
            box-shadow: 0px 0px 0 0 #555555;
            transform: translate(4px, 4px);
        }

        /* Matrix Canvas - Scoped to Hero */
        #matrix-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        /* Ambient Glowing Orbs */
        .bg-orb {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(132, 0, 255, 0.04) 0%, rgba(0, 0, 0, 0) 70%);
            pointer-events: none;
            z-index: 0;
            filter: blur(40px);
        }

        /* --- Custom Dash/Status Visuals --- */

        /* 1. Radar Animation */
        .radar-box {
            position: relative;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 1px solid rgba(132,0,255,0.3);
            background: radial-gradient(circle, rgba(132,0,255,0.1) 0%, transparent 70%);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .radar-box::before {
            content: '';
            position: absolute;
            width: 100%; height: 100%;
            border-radius: 50%;
            border: 1px dashed rgba(132,0,255,0.15);
            transform: scale(0.5);
        }
        .radar-sweep {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: conic-gradient(from 0deg, transparent 70%, rgba(132,0,255,0.6) 100%);
            animation: sweep 2.5s linear infinite;
        }
        @keyframes sweep { to { transform: rotate(360deg); } }
        .radar-blip {
            position: absolute;
            width: 4px; height: 4px;
            background: #15F417;
            border-radius: 50%;
            box-shadow: 0 0 8px #15F417;
            top: 30%; left: 60%;
            animation: blip 2.5s ease-out infinite;
        }
        @keyframes blip { 0%, 100% { opacity: 0; transform: scale(0.5); } 10% { opacity: 1; transform: scale(1.5); } 30% { opacity: 0; } }

        /* 2. Histogram Animation */
        .hist-bar {
            width: 6px;
            background: linear-gradient(180deg, #8400FF 0%, rgba(132,0,255,0.2) 100%);
            border-radius: 2px 2px 0 0;
            transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            will-change: height;
        }

        /* 3. Segmented Squares Wave (Snake) */
        .segmented-bar {
            width: 6px;
            /* Creates the appearance of stacked tiny squares using a repeating mask/gradient */
            background-color: #8400FF;
            mask-image: repeating-linear-gradient(to bottom, black 0px, black 4px, transparent 4px, transparent 6px);
            -webkit-mask-image: repeating-linear-gradient(to bottom, black 0px, black 4px, transparent 4px, transparent 6px);
            transition: height 1.2s ease-in-out;
            will-change: height;
            border-radius: 1px;
        }

        /* Smooth CSS line wave */
        .wave-line-svg path {
            stroke-dasharray: 100;
            animation: dashWave 4s linear infinite;
        }
        @keyframes dashWave {
            from { stroke-dashoffset: 100; }
            to { stroke-dashoffset: -100; }
        }

        /* General Utilities */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .reveal.active { opacity: 1; transform: translateY(0); }
        .accordion-content { transition: max-height 0.3s ease-out, opacity 0.3s ease-out; max-height: 0; opacity: 0; overflow: hidden; }
        .accordion-content.expanded { max-height: 500px; opacity: 1; }


.progress-fill { animation: progressGrow 2.5s ease-out forwards; }
@keyframes progressGrow { from { width: 0%; } }
.pixel-loader { display: flex; gap: 3px; align-items: end; }
.pixel-block {
    width: 5px; height: 5px; background: #8400FF; border-radius: 1px;
    animation: pixelPulse 1.5s ease-in-out infinite;
}
.pixel-block:nth-child(2) { animation-delay: .15s; }
.pixel-block:nth-child(3) { animation-delay: .3s; }
.pixel-block:nth-child(4) { animation-delay: .45s; }
.pixel-block:nth-child(5) { animation-delay: .6s; }
@keyframes pixelPulse {
    0%,100% { opacity:.2; transform:scaleY(1); }
    50% { opacity:1; transform:scaleY(2.5); }
}
.download-feed { position:relative; overflow:hidden; height:120px; }
.feed-item {
    height:40px; display:flex; align-items:center; padding:0 10px;
    border-bottom:1px solid rgba(255,255,255,0.03);
}
.feed-item.entering { animation: feedIn .4s ease-out; }
@keyframes feedIn { from { opacity:0; transform:translateY(-100%); } to { opacity:1; transform:translateY(0); } }
.spin-slow { animation: spinSlow 8s linear infinite; }
@keyframes spinSlow { to { transform:rotate(360deg); } }
.card-num {
    font-family:'Pixelify Sans',cursive; font-size:10px; color:#a855f7;
    letter-spacing:.12em; text-transform:uppercase;
}
.feat-badge {
    font-size:9px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700;
    letter-spacing:.06em; padding:2px 8px; border-radius:5px; white-space:nowrap;
}
.icon-grad {
    background: linear-gradient(135deg, rgba(132,0,255,0.25) 0%, rgba(132,0,255,0.08) 100%);
}

.os-tab {
    transition: all 0.2s ease;
    cursor: pointer;
}
.os-tab.active {
    background: linear-gradient(135deg, rgba(132,0,255,0.25) 0%, rgba(132,0,255,0.1) 100%);
    border-color: rgba(132,0,255,0.5);
    color: #fff;
}
.os-tab:not(.active):hover {
    border-color: rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.02);
}
.os-content { display: none; }
.os-content.active { display: flex; flex-direction: column; gap: 10px; animation: fadeUp .3s ease-out; }
@keyframes fadeUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.step-num {
    font-family: 'Pixelify Sans', cursive;
    font-size: 11px;
    color: #a855f7;
    width: 28px; height: 28px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(132,0,255,0.2) 0%, rgba(132,0,255,0.06) 100%);
    border: 1px solid rgba(132,0,255,0.25);
    flex-shrink: 0;
}
.step-card {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
}
@media (max-width: 767px) {
    .step-card {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .step-card .step-left { display: flex; align-items: center; gap: 10px; }
    .step-card .step-badge-wrap { display: flex; justify-content: flex-start; }
}
.dl-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
}
@media (max-width: 639px) {
    .dl-bar {
        grid-template-columns: 1fr;
        gap: 10px;
        text-align: center;
    }
    .dl-bar .dl-icon { justify-content: center; }
    .dl-bar .dl-btn { width: 100%; justify-content: center; }
}

.key-char{font-family:'Plus Jakarta Sans',monospace;font-weight:700;font-size:14px;letter-spacing:.1em}
.key-generating .key-char{animation:charFlicker .08s infinite}
@keyframes charFlicker{0%{opacity:1}50%{opacity:.3}}
.cursor-blink{display:inline-block;width:2px;height:14px;background:#8400FF;margin-left:2px;vertical-align:middle;animation:blink .8s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.keygen-progress{height:2px;background:linear-gradient(90deg,transparent,#8400FF,transparent);width:0%;transition:width .1s linear;border-radius:1px}
.kg-box.generating{border-color:rgba(132,0,255,.5);box-shadow:0 0 15px rgba(132,0,255,.1)}
.kg-box.done{border-color:rgba(21,244,23,.35);box-shadow:0 0 12px rgba(21,244,23,.06)}
.copy-tip{position:absolute;top:-26px;left:50%;transform:translateX(-50%) scale(.9);background:#15F417;color:#000;font-size:9px;font-weight:700;padding:2px 7px;border-radius:4px;opacity:0;pointer-events:none;transition:all .2s ease;white-space:nowrap}
.copy-tip.show{opacity:1;transform:translateX(-50%) scale(1)}
.hex-p{position:absolute;font-family:monospace;font-size:9px;color:rgba(132,0,255,.12);pointer-events:none;animation:hxf linear forwards}
@keyframes hxf{from{transform:translateY(-8px);opacity:.25}to{transform:translateY(100%);opacity:0}}




.review-avatar {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.star-box {
    width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
}
.star-full { background: #15F417; }
.star-empty { background: rgba(21,244,23,0.15); }



.cl-sidebar-item {
    cursor: pointer;
    transition: all 0.15s ease;
    border-left: 2px solid transparent;
}
.cl-sidebar-item:hover { background: rgba(255,255,255,0.02); }
.cl-sidebar-item.active {
    background: linear-gradient(90deg, rgba(132,0,255,0.1) 0%, transparent 100%);
    border-left-color: #8400FF;
}
.cl-sidebar-item.active .cl-ver { color: #fff; }
.cl-sidebar-item.active .cl-dot { background: #8400FF; box-shadow: 0 0 6px #8400FF; }
.cl-content { display: none; animation: fadeUp .25s ease-out; }
.cl-content.active { display: block; }
.cl-tag {
    font-size: 9px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700;
    letter-spacing: 0.05em; padding: 2px 7px; border-radius: 4px; white-space: nowrap;
}
.cl-change-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 6px 0;
}
.cl-change-icon {
    width: 18px; height: 18px; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px;
}