body {
            background-color: #101010;
            color: #FFFFFF;
            overflow-x: hidden;
        }

        .hero-digital-grid {
            position: absolute;
            top: 0; left: 0; width: 100vw; height: 110vh;
            background-image: 
                linear-gradient(to right, rgba(30, 37, 47, 0.4) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(30, 37, 47, 0.4) 1px, transparent 1px);
            background-size: 96px 96px; /* Более редкая сетка */
            /* Плавное затухание вниз и по краям */
            mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 40%, transparent 100%);
            -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 40%, transparent 100%);
            z-index: 0;
            pointer-events: none;
        }

        /* Subtle edge glow for Hero */
        .ambient-glow {
            position: absolute;
            top: -10%;
            left: 20%;
            width: 50%;
            height: 600px;
            background: radial-gradient(ellipse at center, rgba(155, 203, 231, 0.08) 0%, transparent 70%);
            z-index: 0;
            pointer-events: none;
        }

        /* Glitch Effect for H1 */
        .glitch-text {
            position: relative;
            display: inline-block;
            color: #FFFFFF;
            font-weight: 900;
        }
        
        .glitch-text::before,
        .glitch-text::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.8;
        }
        
        .glitch-text::before {
            left: 2px;
            text-shadow: -1px 0 #9BCBE7;
            clip-path: inset(24% 0 60% 0);
            animation: glitch-anim-1 4s infinite linear alternate-reverse;
        }
        
        .glitch-text::after {
            left: -2px;
            text-shadow: -1px 0 #FFFFFF;
            clip-path: inset(65% 0 10% 0);
            animation: glitch-anim-2 3s infinite linear alternate-reverse;
        }

        @keyframes glitch-anim-1 {
            0% { clip-path: inset(10% 0 60% 0); transform: translate(-1px, 1px); }
            20% { clip-path: inset(80% 0 5% 0); transform: translate(1px, -1px); }
            40% { clip-path: inset(30% 0 40% 0); transform: translate(-1px, 1px); }
            60% { clip-path: inset(50% 0 30% 0); transform: translate(1px, -1px); }
            80% { clip-path: inset(5% 0 80% 0); transform: translate(-1px, 1px); }
            100% { clip-path: inset(40% 0 20% 0); transform: translate(1px, -1px); }
        }

        @keyframes glitch-anim-2 {
            0% { clip-path: inset(20% 0 50% 0); transform: translate(1px, -1px); }
            20% { clip-path: inset(60% 0 10% 0); transform: translate(-1px, 1px); }
            40% { clip-path: inset(40% 0 30% 0); transform: translate(1px, -1px); }
            60% { clip-path: inset(10% 0 60% 0); transform: translate(-1px, 1px); }
            80% { clip-path: inset(70% 0 5% 0); transform: translate(1px, -1px); }
            100% { clip-path: inset(30% 0 40% 0); transform: translate(-1px, 1px); }
        }

        /* Mac Window Animations */
        .mac-window {
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px #1E252F, 0 0 30px rgba(155, 203, 231, 0.05);
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }

        .typewriter-line {
            overflow: hidden;
            white-space: nowrap;
            border-right: 2px solid transparent;
            width: 0;
        }
        
        .typewriter-line.typing {
            animation: typing 1.5s steps(40, end) forwards, blink-caret 0.75s step-end infinite;
        }

        .typewriter-line.done {
            width: 100%;
            border-right: none;
        }

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

        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: #9BCBE7; }
        }

        /* Scroll Reveal Utility */
        .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);
        }

        /* Custom Accordion */
        .faq-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
        }
        .faq-item.active .faq-content {
            max-height: 300px;
            padding-bottom: 1.5rem;
        }
        .faq-item.active .faq-icon {
            transform: rotate(45deg);
            color: #9BCBE7;
        }

        /* Premium Buttons */
        .btn-primary {
            background: #FFFFFF;
            color: #101010;
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            box-shadow: 0 0 25px rgba(155, 203, 231, 0.4);
            background: #9BCBE7;
            color: #101010;
        }
        .btn-secondary {
            background: #151515;
            color: #FFFFFF;
            border: 1px solid #1E252F;
            transition: all 0.3s ease;
        }
        .btn-secondary:hover {
            border-color: #9BCBE7;
            background: rgba(155, 203, 231, 0.05);
        }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #101010; }
        ::-webkit-scrollbar-thumb { background: #1E252F; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #9BCBE7; }



   /* Premium Navigation Link Hover */
    .nav-link {
        position: relative;
        transition: color 0.3s ease;
    }
    
    /* Button Premium Hover */
    .nav-btn {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .nav-btn:hover {
        box-shadow: 0 0 15px rgba(155, 203, 231, 0.1);
    }

    /* Mobile Header Scroll Behavior Fix */
    /* Using CSS variable to control the transform offset, smaller on mobile */
    :root {
        --header-hide-offset: -100px;
    }
    @media (max-width: 768px) {
        :root {
            /* Less extreme movement on mobile */
            --header-hide-offset: -75px; 
        }
    }
    
    /* This class is applied via JS when scrolling down */
    .header-hidden {
        transform: translateY(var(--header-hide-offset));
    }

 /* Premium Background Pattern: Barely visible, lower frequency */
    .bg-card-dots {
        background-color: #151515;
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
        background-size: 16px 16px; /* Lower frequency */
    }
    
    /* Smooth SVG Line Drawing */
    @keyframes draw-path {
        0% { stroke-dashoffset: 100; opacity: 0; }
        100% { stroke-dashoffset: 0; opacity: 1; }
    }
    @keyframes fade-fill {
        0% { opacity: 0; }
        100% { opacity: 0.15; }
    }
    .chart-path {
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        animation: draw-path 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    .chart-fill {
        opacity: 0;
        animation: fade-fill 1.5s ease-out 0.5s forwards;
    }

    /* Fluid Wave Histogram */
    @keyframes fluid-wave {
        0%, 100% { height: 15%; background-color: rgba(255,255,255,0.15); box-shadow: none; }
        50% { height: 100%; background-color: #9BCBE7; box-shadow: 0 0 6px rgba(155, 203, 231, 0.6); }
    }
    .hist-bar { 
        width: 4px; 
        border-radius: 2px 2px 0 0; 
    }
    .hb-1 { animation: fluid-wave 1.5s infinite ease-in-out 0.0s; }
    .hb-2 { animation: fluid-wave 1.5s infinite ease-in-out 0.15s; }
    .hb-3 { animation: fluid-wave 1.5s infinite ease-in-out 0.3s; }
    .hb-4 { animation: fluid-wave 1.5s infinite ease-in-out 0.45s; }
    .hb-5 { animation: fluid-wave 1.5s infinite ease-in-out 0.6s; }
    .hb-6 { animation: fluid-wave 1.5s infinite ease-in-out 0.75s; }
    .hb-7 { animation: fluid-wave 1.5s infinite ease-in-out 0.9s; }

    /* Glowing Scanline for Progress Bar */
    @keyframes scanline {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(200%); }
    }
    .progress-scan {
        position: absolute;
        top: 0; left: 0; bottom: 0; width: 60%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
        animation: scanline 2s infinite linear;
    }

    /* Bouncing Square Loaders */
    @keyframes sq-bounce {
        0%, 100% { opacity: 0.3; transform: translateY(0) scale(0.8); }
        50% { opacity: 1; transform: translateY(-3px) scale(1.1); box-shadow: 0 4px 8px rgba(155,203,231,0.5); background-color: #9BCBE7; }
    }
    .sq-b-1 { animation: sq-bounce 1.2s infinite ease-in-out 0s; }
    .sq-b-2 { animation: sq-bounce 1.2s infinite ease-in-out 0.15s; }
    .sq-b-3 { animation: sq-bounce 1.2s infinite ease-in-out 0.3s; }

    /* Pulse for network bars */
    @keyframes signal-pulse {
        0%, 100% { opacity: 0.5; }
        50% { opacity: 1; box-shadow: 0 0 5px rgba(255,255,255,0.5); }
    }
    .sig-1 { animation: signal-pulse 2s infinite 0s; }
    .sig-2 { animation: signal-pulse 2s infinite 0.2s; }
    .sig-3 { animation: signal-pulse 2s infinite 0.4s; }
    .sig-4 { animation: signal-pulse 2s infinite 0.6s; background-color: #9BCBE7; box-shadow: 0 0 5px rgba(155,203,231,0.8); }

  /* Tab Content Transitions */
    .platform-tab {
        display: none;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .platform-tab.active-tab {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }

    /* Compact Steps Timeline */
    .step-timeline::before {
        content: '';
        position: absolute;
        top: 6px;
        bottom: 6px;
        left: 5px;
        width: 1px;
        background: linear-gradient(to bottom, #9BCBE7 0%, rgba(30,37,47,0.5) 70%, transparent 100%);
        z-index: 0;
    }

    /* Active Step Dot Glow */
    .step-dot {
        box-shadow: 0 0 8px rgba(155, 203, 231, 0.5);
    }

    /* Terminal Editor Scrollbar */
    .term-scroll::-webkit-scrollbar { width: 4px; }
    .term-scroll::-webkit-scrollbar-track { background: transparent; }
    .term-scroll::-webkit-scrollbar-thumb { background: #1E252F; border-radius: 2px; }
    .term-scroll::-webkit-scrollbar-thumb:hover { background: #9BCBE7; }

    /* Blinking Terminal Cursor */
    @keyframes blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
    }
    .term-cursor { animation: blink 1s step-end infinite; }


  /* Compact Bento Grid Background (Rare dots) */
    .bento-card-bg {
        background-color: #0A0A0A;
        background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
        background-size: 28px 28px;
    }

    /* Card Hover Glow */
    .bento-card {
        transition: all 0.3s ease;
    }
    .bento-card:hover {
        border-color: rgba(155, 203, 231, 0.4);
        box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 0 20px rgba(155,203,231,0.02);
    }

    /* Scanner Animation */
    @keyframes scan-sweep {
        0% { top: -10%; opacity: 0; }
        15% { opacity: 1; }
        85% { opacity: 1; }
        100% { top: 110%; opacity: 0; }
    }
    .anim-scanner-line {
        position: absolute;
        left: 0; right: 0;
        height: 1px;
        background-color: #9BCBE7;
        box-shadow: 0 0 8px #9BCBE7, 0 0 15px #9BCBE7;
        animation: scan-sweep 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        z-index: 10;
        pointer-events: none;
    }
    .anim-scanner-glow {
        position: absolute;
        left: 0; right: 0;
        height: 40px;
        background: linear-gradient(to bottom, transparent, rgba(155,203,231,0.15));
        transform: translateY(-100%);
        animation: scan-sweep 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        z-index: 9;
        pointer-events: none;
    }

    /* Mini Graph Bars */
    @keyframes mini-gb {
        0%, 100% { height: 25%; }
        50% { height: 90%; }
    }
    .gb-1 { animation: mini-gb 1.3s ease-in-out infinite 0s; }
    .gb-2 { animation: mini-gb 1.1s ease-in-out infinite 0.2s; }
    .gb-3 { animation: mini-gb 1.4s ease-in-out infinite 0.1s; }
    .gb-4 { animation: mini-gb 1.2s ease-in-out infinite 0.3s; }
    .gb-5 { animation: mini-gb 1.5s ease-in-out infinite 0.15s; }

    /* Ping Outline */
    @keyframes slow-ping {
        0% { transform: scale(1); opacity: 0.8; }
        100% { transform: scale(2); opacity: 0; }
    }
    .anim-ping-slow {
        animation: slow-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    }

    /* Auto-Exec Progress */
    @keyframes exec-load {
        0% { width: 0%; }
        40% { width: 100%; }
        100% { width: 100%; }
    }
    .anim-exec-bar {
        animation: exec-load 3s ease-in-out infinite;
    }

 /* Card Hover Glow & Lift */
    .platform-card {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .platform-card:hover {
        transform: translateY(-4px);
        border-color: rgba(155, 203, 231, 0.4);
        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(155, 203, 231, 0.1);
    }
    
    /* Ambient Inner Glow on Hover */
    .platform-glow {
        position: absolute;
        top: 0; left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 100px;
        background: radial-gradient(ellipse at top, rgba(155, 203, 231, 0.15) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
    }
    .platform-card:hover .platform-glow {
        opacity: 1;
    }

    /* Icon Bounce Animation */
    @keyframes dl-bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(3px); }
    }
    .platform-card:hover .dl-icon {
        animation: dl-bounce 1s ease-in-out infinite;
        color: #9BCBE7;
    }

    /* Button Hover Effect */
    .btn-download-plat {
        transition: all 0.3s ease;
        background-size: 200% auto;
    }
    .btn-download-plat:hover {
        background-color: #1E252F;
        border-color: #9BCBE7;
        color: #FFFFFF;
    }

  /* Changelog Navigation Active State */
    .cl-nav-item {
        transition: all 0.2s ease;
    }
    .cl-nav-item.active {
        background-color: #1E252F;
        border-color: #2A3441;
    }
    .cl-nav-item.active .cl-nav-text {
        color: #FFFFFF;
        font-weight: 700;
    }
    .cl-nav-item.active .cl-nav-indicator {
        background-color: #9BCBE7;
        box-shadow: 0 0 8px rgba(155, 203, 231, 0.6);
    }

    /* List styling for updates */
    .cl-update-list li {
        position: relative;
        padding-left: 1.25rem;
        margin-bottom: 0.5rem;
    }
    .cl-update-list li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.45rem;
        width: 4px;
        height: 4px;
        border-radius: 50%;
    }
    .cl-added::before { background-color: #27C93F; }
    .cl-fixed::before { background-color: #FFBD2E; }
    .cl-removed::before { background-color: #FF5F56; }
    .cl-improved::before { background-color: #9BCBE7; }

    /* Custom Scrollbar for Changelog Content */
    .cl-scroll::-webkit-scrollbar { width: 4px; }
    .cl-scroll::-webkit-scrollbar-track { background: transparent; }
    .cl-scroll::-webkit-scrollbar-thumb { background: #1E252F; border-radius: 2px; }
    .cl-scroll::-webkit-scrollbar-thumb:hover { background: #9BCBE7; }

    /* Fade-in Animation for Content */
    @keyframes fadeInRight {
        from { opacity: 0; transform: translateX(10px); }
        to { opacity: 1; transform: translateX(0); }
    }
    .cl-content-section {
        display: none;
        animation: fadeInRight 0.3s ease forwards;
    }
    .cl-content-section.active {
        display: block;
    }


  /* Script Card Hover Effects */
    .script-card {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: linear-gradient(180deg, #0A0A0A 0%, #101010 100%);
    }
    .script-card:hover {
        transform: translateY(-4px);
        border-color: rgba(155, 203, 231, 0.4);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.8), 0 0 15px rgba(155, 203, 231, 0.05);
    }
    
    /* Subtle inner glow on hover */
    .script-glow {
        position: absolute;
        top: 0; left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 60px;
        background: radial-gradient(ellipse at top, rgba(155, 203, 231, 0.1) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }
    .script-card:hover .script-glow { opacity: 1; }

    /* Special Script Hub Card */
    .hub-card {
        background: linear-gradient(135deg, #151515 0%, #0A0A0A 100%);
        border-color: #2A3441;
    }
    .hub-card:hover {
        border-color: #9BCBE7;
        box-shadow: 0 0 20px rgba(155, 203, 231, 0.2);
    }
    .hub-pulse {
        animation: pulse-border 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes pulse-border {
        0%, 100% { border-color: rgba(155, 203, 231, 0.2); }
        50% { border-color: rgba(155, 203, 231, 0.6); }
    }


   /* FAQ Accordion Animations & Styles */
    .faq-item {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .faq-item:hover {
        border-color: rgba(155, 203, 231, 0.4);
        background-color: #101010;
    }
    .faq-item.active {
        border-color: rgba(155, 203, 231, 0.5);
        background-color: #151515;
    }
    
    /* Left Highlight Bar */
    .faq-highlight {
        transition: transform 0.3s ease;
        transform: scaleY(0);
        transform-origin: top;
    }
    .faq-item.active .faq-highlight {
        transform: scaleY(1);
    }

    /* Content Expansion */
    .faq-answer {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin-top 0.3s ease;
    }
    .faq-item.active .faq-answer {
        max-height: 400px; /* Large enough to hold content */
        opacity: 1;
        margin-top: 1rem;
    }

    /* Icon Rotation */
    .faq-icon-wrapper {
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s;
    }
    .faq-item.active .faq-icon-wrapper {
        transform: rotate(135deg);
        background-color: rgba(155, 203, 231, 0.1);
        border-color: rgba(155, 203, 231, 0.3);
    }
    .faq-item.active .faq-icon {
        color: #9BCBE7;
    }

 /* Footer Link Hover Animations */
    .footer-link {
        position: relative;
        display: inline-block;
        transition: color 0.3s ease;
    }
    .footer-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 1px;
        bottom: -2px;
        left: 0;
        background-color: #9BCBE7;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .footer-link:hover {
        color: #FFFFFF;
    }
    .footer-link:hover::after {
        width: 100%;
    }

    /* Social Share Buttons */
    .social-btn {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background-color: #101010;
        border-color: #1E252F;
        color: rgba(255, 255, 255, 0.5);
    }
    .social-btn:hover {
        transform: translateY(-3px);
        background-color: #151515;
        border-color: #9BCBE7;
        color: #9BCBE7;
        box-shadow: 0 5px 15px rgba(155, 203, 231, 0.15);
    }

    /* Footer Logo Glow */
    .footer-logo-wrap {
        position: relative;
        display: inline-flex;
    }
    .footer-logo-glow {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 120%; height: 120%;
        background: radial-gradient(circle, rgba(155,203,231,0.15) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
    }
    .footer-logo-wrap:hover .footer-logo-glow {
        opacity: 1;
    }