body {
            background-color: #000000;
            color: #ffffff;
            overflow-x: hidden;
        }

        /* Animated Noise Background */
        .noise-overlay {
            position: fixed;
            top: -50%; left: -50%; right: -50%; bottom: -50%;
            width: 200%; height: 200vh;
            background: transparent url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E') repeat 0 0;
            animation: noiseAnim 0.2s infinite;
            opacity: 0.04;
            z-index: -1;
            pointer-events: none;
        }

        @keyframes noiseAnim {
            0% { transform: translate(0, 0); }
            10% { transform: translate(-1%, -1%); }
            20% { transform: translate(1%, 1%); }
            30% { transform: translate(-2%, 1%); }
            40% { transform: translate(1%, -1%); }
            50% { transform: translate(-1%, 2%); }
            60% { transform: translate(2%, -2%); }
            70% { transform: translate(1%, 2%); }
            80% { transform: translate(-2%, -1%); }
            90% { transform: translate(2%, 1%); }
            100% { transform: translate(0, 0); }
        }

        /* Glassmorphism */
        .glass-card {
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.06);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        }

        .glass-card:hover {
            border-color: rgba(138, 93, 244, 0.2);
        }

        .glow-btn {
            position: relative;
            background: #8A5DF4;
            color: #ffffff;
            box-shadow: 0 0 20px rgba(138, 93, 244, 0.4);
            transition: all 0.3s ease;
        }
        
        .glow-btn:hover {
            box-shadow: 0 0 30px rgba(138, 93, 244, 0.7);
            transform: scale(1.02);
        }

        /* Scroll Reveal */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Hero Ambient Glows */
        .ambient-glow {
            position: absolute;
            top: 20%; left: 0%;
            width: 50vw; height: 50vw;
            background: radial-gradient(circle, rgba(138, 93, 244, 0.08) 0%, rgba(0,0,0,0) 70%);
            z-index: -1; pointer-events: none;
        }
        .editor-glow {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 120%; height: 120%;
            background: radial-gradient(circle, rgba(138, 93, 244, 0.12) 0%, rgba(0,0,0,0) 60%);
            z-index: -1; pointer-events: none;
            filter: blur(40px);
        }

        /* Code Editor Typing Animation Classes */
        .code-line {
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            width: 0;
            vertical-align: bottom;
            border-right: 2px solid transparent;
        }
        
        .typing-active {
            border-right: 2px solid #8A5DF4;
            animation: typing 0.8s steps(40, end) forwards, blink 0.75s step-end infinite;
        }

        .typing-done {
            width: 100%;
            border-right: 2px solid transparent;
        }

        @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }

        @keyframes blink {
            from, to { border-color: transparent; }
            50% { border-color: #8A5DF4; }
        }

        .btn-run-anim {
            animation: runClick 0.4s ease-in-out;
        }

        @keyframes runClick {
            0% { transform: scale(1); box-shadow: 0 0 0px rgba(138,93,244,0); }
            50% { transform: scale(0.95); box-shadow: 0 0 20px rgba(138,93,244,0.8); background: #9d75fc; }
            100% { transform: scale(1); box-shadow: 0 0 0px rgba(138,93,244,0); }
        }

        /* Accordion */
        .accordion-content {
            transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
            max-height: 0; opacity: 0; overflow: hidden;
        }
        .accordion-item.active .accordion-content {
            max-height: 200px; opacity: 1;
        }
        .accordion-icon {
            transition: transform 0.3s ease, color 0.3s ease;
        }
        .accordion-item.active .accordion-icon {
            transform: rotate(45deg); color: #8A5DF4;
        }

  /* Custom Scrollbar for Code Editor */
        .custom-scrollbar::-webkit-scrollbar {
            height: 6px; /* Чуть тоньше для мобилок */
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #0f0f11;
            border-radius: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #8A5DF4;
        }

        /* Bulletproof Typing Animation */
        .code-anim-line {
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            max-width: 0;
            vertical-align: bottom;
            border-right: 2px solid transparent;
        }
        .code-anim-line.typing {
            max-width: 1000px;
            transition: max-width 0.7s steps(30, end);
            border-right: 2px solid #8A5DF4;
        }
        .code-anim-line.done {
            max-width: 1000px;
            border-right: 2px solid transparent;
        }
        
        .btn-run-anim {
            animation: runClick 0.4s ease-in-out;
        }
        @keyframes runClick {
            0% { transform: scale(1); box-shadow: 0 0 0px rgba(138,93,244,0); }
            50% { transform: scale(0.95); box-shadow: 0 0 20px rgba(138,93,244,0.8); background: #9d75fc; }
            100% { transform: scale(1); box-shadow: 0 0 0px rgba(138,93,244,0); }
        }

    /* Pulse Animation for Status Dots */
        .status-dot-ping {
            animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
        }
        @keyframes ping {
            75%, 100% { transform: scale(2.5); opacity: 0; }
        }

        /* Histogram Bar Growth Animation */
        .bar-grow {
            transform-origin: bottom;
            animation: growUp 1s ease-out forwards;
            transform: scaleY(0);
        }
        @keyframes growUp {
            to { transform: scaleY(1); }
        }

  .feature-grid-bg {
            background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
            background-size: 16px 16px;
        }
        .feature-card:hover .feature-icon-box {
            transform: scale(1.1) rotate(5deg);
            box-shadow: 0 0 20px rgba(138, 93, 244, 0.4);
        }
        .feature-card:hover .feature-number {
            color: rgba(138, 93, 244, 0.08);
            transform: scale(1.05) translate(10px, -10px);
        }

  .script-card {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .script-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(138, 93, 244, 0.15);
            border-color: rgba(138, 93, 244, 0.4);
        }
        .script-number {
            font-family: 'Fira Code', monospace;
            -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
            color: transparent;
        }
        .script-card:hover .script-number {
            -webkit-text-stroke: 1px rgba(138, 93, 244, 0.2);
            transform: scale(1.1);
        }



 .step-timeline::before {
            content: '';
            position: absolute;
            top: 24px;
            bottom: 24px;
            left: 20px;
            width: 2px;
            background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(138,93,244,0.3), rgba(255,255,255,0.1));
            z-index: 0;
        }
        .step-item {
            transition: all 0.3s ease;
        }
        .step-item:hover {
            transform: translateX(5px);
        }
        .step-number {
            box-shadow: 0 0 15px rgba(138, 93, 244, 0);
            transition: all 0.3s ease;
        }
        .step-item:hover .step-number {
            box-shadow: 0 0 20px rgba(138, 93, 244, 0.6);
            background: #8A5DF4;
            color: #ffffff;
            border-color: #8A5DF4;
        }


  .accordion-content {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-out, opacity 0.4s ease-out, padding 0.4s ease-out;
        }
        .accordion-item.active .accordion-content {
            max-height: 200px; /* Adjust if content is very long */
            opacity: 1;
            padding-bottom: 1.25rem; /* pb-5 */
        }
        .accordion-item.active .accordion-icon {
            transform: rotate(45deg);
            color: #8A5DF4;
        }
        .accordion-item.active {
            border-color: rgba(138, 93, 244, 0.4);
            background: linear-gradient(to bottom, rgba(138, 93, 244, 0.05), transparent);
        }

  .path-anim {
            stroke-dasharray: 200;
            stroke-dashoffset: 200;
            animation: dash 3s linear infinite;
        }
        @keyframes dash {
            to { stroke-dashoffset: 0; }
        }