body {
    background-color: #0f172a;
    min-height: 100vh;
    will-change: background-color;
}

.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-hover:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.text-gradient {
    background: linear-gradient(90deg, #60a5fa, #3b82f6, #1e40af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Анимация появления карточек возможностей */
#features .feature-card {
    opacity: 0;
    transition: opacity 0.8s ease, filter 0.8s ease;
}

#features .feature-card.visible {
    opacity: 1;
}

/* Задержки для последовательного появления */
#features .feature-card:nth-child(1).visible { transition-delay: 0.1s; }
#features .feature-card:nth-child(2).visible { transition-delay: 0.2s; }
#features .feature-card:nth-child(3).visible { transition-delay: 0.3s; }
#features .feature-card:nth-child(4).visible { transition-delay: 0.4s; }
#features .feature-card:nth-child(5).visible { transition-delay: 0.5s; }
#features .feature-card:nth-child(6).visible { transition-delay: 0.6s; }

.price-card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease !important;
}

.price-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.faq-item {
    transition: all 0.3s ease;
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease-in-out, transform 0.4s ease-in-out, padding 0.4s ease-in-out;
    will-change: max-height, opacity, transform;
}

.faq-content.active {
    opacity: 1;
    transform: translateY(0);
    padding-bottom: 0;
}

.review-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.review-indicator.active {
    background-color: #3b82f6;
    border-color: #3b82f6;
    transform: scale(1.3);
}

.review-indicator:hover {
    background-color: rgba(59, 130, 246, 0.7);
}

/* Анимация деления клетки */
.indicator-blob {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #3b82f6;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
    pointer-events: none;
}

.indicator-blob.animating {
    animation: cell-divide 0.4s ease-in-out;
}

@keyframes cell-divide {
    0% {
        border-radius: 50%;
        transform: translateY(-50%) scaleX(1);
    }
    30% {
        border-radius: 5px;
        transform: translateY(-50%) scaleX(2.5);
    }
    70% {
        border-radius: 5px;
        transform: translateY(-50%) scaleX(2.5);
    }
    100% {
        border-radius: 50%;
        transform: translateY(-50%) scaleX(1);
    }
}

.indicator-wrapper {
    position: relative;
}

.indicator-dots {
    display: flex;
    gap: 12px;
}

.indicator-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.indicator-dot:hover {
    background-color: rgba(59, 130, 246, 0.5);
}

/* Стили для неактивных отзывов (боковых) */
.side-review {
    opacity: 0.5;
    transform: scale(0.9) !important;
    filter: blur(3px);
    transition: all 0.5s ease;
    z-index: 0;
}

/* Левая боковая карточка отзыва */
.side-review:has(~ .active-review-card) {
    transform: scale(0.9) perspective(900px) rotateY(15deg) !important;
}

/* Правая боковая карточка отзыва */
.active-review-card ~ .side-review {
    transform: scale(0.9) perspective(900px) rotateY(-15deg) !important;
}

/* Блокируем изменение масштаба и блюра при наведении на боковые */
.side-review:hover {
    transform: scale(0.9) !important;
    filter: blur(3px) !important;
    opacity: 0.6;
}

/* Блокируем все hover-эффекты на неактивных карточках отзывов */
.side-review:hover {
    opacity: 0.5 !important;
    transform: scale(0.9) !important;
    filter: blur(3px) !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    cursor: default;
}

/* Для левых карточек отзывов при наведении */
.side-review:has(~ .active-review-card):hover {
    transform: scale(0.9) perspective(800px) rotateY(15deg) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Для правых карточек отзывов при наведении */
.active-review-card ~ .side-review:hover {
    transform: scale(0.9) perspective(800px) rotateY(-15deg) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Блокируем все hover-эффекты на неактивных карточках тарифов */
.side-pricing:hover {
    opacity: 0.5 !important;
    transform: scale(0.9) !important;
    filter: blur(3px) !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    cursor: default;
}

/* Для левых карточек тарифов при наведении */
.side-pricing:has(~ .active-pricing-card):hover {
    transform: scale(0.9) perspective(800px) rotateY(15deg) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Для правых карточек тарифов при наведении */
.active-pricing-card ~ .side-pricing:hover {
    transform: scale(0.9) perspective(800px) rotateY(-15deg) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Стили для активного отзыва (центрального) */
.active-review-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: scale(1.05) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    border-color: rgba(147, 197, 253, 0.5);
    z-index: 10;
    opacity: 1;
    filter: blur(0px) !important;
}

/* Стили для слайдера тарифов (аналогично отзывам) */
.side-pricing {
    opacity: 0.5;
    transform: scale(0.9) !important;
    filter: blur(3px);
    transition: all 0.5s ease;
    z-index: 0;
}

/* Левая боковая карточка тарифа */
.side-pricing:has(~ .active-pricing-card) {
    transform: scale(0.9) perspective(900px) rotateY(15deg) !important;
}

/* Правая боковая карточка тарифа */
.active-pricing-card ~ .side-pricing {
    transform: scale(0.9) perspective(900px) rotateY(-15deg) !important;
}

.side-pricing:hover {
    transform: scale(0.9) !important;
    filter: blur(3px) !important;
    opacity: 0.6;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.active-pricing-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: scale(1.05) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    border-color: rgba(147, 197, 253, 0.5);
    z-index: 10;
    opacity: 1;
    filter: blur(0px) !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Плавный переход для всех карточек отзывов */
#reviewsContainer .snap-center {
    transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease, box-shadow 0.5s ease, background 0.5s ease, border-color 0.5s ease;
}

/* Плавный переход для карточек тарифов */
#pricingContainer .snap-center {
    transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease, box-shadow 0.5s ease, background 0.5s ease, border-color 0.5s ease;
}

.pricing-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
    cursor: pointer;
}

.pricing-indicator.active {
    background-color: #3b82f6;
    border-color: #3b82f6;
    transform: scale(1.3);
}

.pricing-indicator:hover {
    background-color: rgba(59, 130, 246, 0.7);
}

/* === ЛОГИКА ЦЕНТРИРОВАНИЯ СЛАЙДЕРОВ === */

/* 1. Базовые стили (Мобильные, ширина карточки ~300px) */
#reviewsContainer, #pricingContainer {
    padding-left: calc(50vw - 150px); /* Отступ слева у контейнера */
    padding-right: 0; /* ВАЖНО: Убираем правый отступ у контейнера */
    
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Маска для затенения краев */
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

/* 2. Добавляем отступ последней карточке (компенсация правого padding) */
#reviewsContainer .snap-center:last-child,
#pricingContainer .snap-center:last-child {
    margin-right: calc(50vw - 150px);
}

/* 3. Desktop версия (md: 768px+) */
@media (min-width: 768px) {
    /* Маска для десктопа */
    #reviewsContainer, #pricingContainer {
        -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }

    /* -- ОТЗЫВЫ (ширина 400px) -- */
    #reviewsContainer {
        padding-left: calc(50vw - 200px);
        padding-right: calc(50vw - 200px);
    }

    /* -- ТАРИФЫ (ширина 350px) -- */
    #pricingContainer {
        padding-left: calc(50vw - 175px);
        padding-right: calc(50vw - 175px);
    }
}

/* Скрытие скроллбара */
#reviewsContainer::-webkit-scrollbar, #pricingContainer::-webkit-scrollbar {
    display: none;
}
#reviewsContainer::-webkit-scrollbar, #pricingContainer::-webkit-scrollbar {
    display: none;
}

/* Эффект перелива для кнопки */
.shimmer-button {
    position: relative;
    overflow: hidden;
}

.shimmer-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
    90deg,
    transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: left 0.5s ease;
}

.shimmer-button:hover::before {
    left: 100%;
}
.faq-content p {
    padding-bottom: 1.5rem;
}

/* Оптимизация для мобильных */
@media (max-width: 768px) {
    /* Увеличиваем область нажатия для кнопок */
    button, a {
        min-height: 44px;
    }
    
    /* Убираем 3D эффект на мобильных (производительность) */
    #features .feature-card {
        transform: none !important;
    }
    
    /* Упрощаем анимации на мобильных */
    .feature-card, .price-card {
        transition-duration: 0.3s !important;
    }
    
    /* Улучшение скролла на мобильных */
    #reviewsContainer, #pricingContainer {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
}

.shimmer-button img {
    transition: transform 0.3s ease;
}

.shimmer-button:hover img {
    transform: translateX(5px);
}

/* Анимация появления карточек Timeline */
.timeline-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.timeline-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Мобильная версия Timeline */
@media (max-width: 768px) {
    /* Убираем статичную линию */
    .max-w-4xl > .relative::before {
        display: none;
    }
    
    /* Скрываем точки на мобильных */
    .timeline-card .hidden.md\:block.absolute,
    .timeline-card > .hidden.md\:block {
        display: none !important;
    }
    
    /* Отступ для контента */
    .timeline-card .glass {
        margin-left: 24px;
    }
    
    /* Анимированная линия на мобильных - за карточками */
    #timelineLineMobile {
        display: block !important;
        position: absolute;
        left: 8px;
        top: 0;
        width: 2px;
        background: linear-gradient(to bottom, #60a5fa, #a78bfa, #34d399);
        z-index: -1;
        transform: translateX(-50%);
    }
    
    /* Карточки выше линии */
    .timeline-card {
        position: relative;
        z-index: 1;
    }
}

/* Анимация линии Timeline */
#timelineLine {
    transform: translateX(-50%);
}

/* === СКРЫВАЕМ ОТЗЫВЫ НА МОБИЛЬНЫХ И ДОБАВЛЯЕМ КНОПКУ === */
@media (max-width: 768px) {
    /* Полностью скрываем весь блок отзывов */
    #reviews {
        display: none !important;
    }
}

/* Кнопка "Все отзывы в Telegram" — появляется только на мобильных */
.mobile-reviews-link {
    display: none;
    text-align: center;
    padding: 2rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 1.5rem;
    margin: 2rem 1rem 1rem;
}

@media (max-width: 768px) {
    .mobile-reviews-link {
        display: block !important;
    }
}

.mobile-reviews-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    padding: 1rem 1.75rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    border: 1px solid rgba(96, 165, 250, 0.3);
    transition: all 0.3s ease;
}

.mobile-reviews-link a:hover {
    background: rgba(59, 130, 246, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
}

/* === МОБИЛЬНОЕ МЕНЮ ГАМБУРГЕР === */
.hamburger-line {
    transform-origin: center;
}

#menuToggle.active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

#menuToggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

#menuToggle.active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

#mobileMenu a {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

#mobileMenu.open a {
    opacity: 1;
    transform: translateX(0);
}

#mobileMenu.open a:nth-child(1) { transition-delay: 0.1s; }
#mobileMenu.open a:nth-child(2) { transition-delay: 0.15s; }
#mobileMenu.open a:nth-child(3) { transition-delay: 0.2s; }
#mobileMenu.open a:nth-child(4) { transition-delay: 0.25s; }
#mobileMenu.open a:nth-child(5) { transition-delay: 0.3s; }

/* Оптимизация анимации таймлайна */
#timelineLine,
#timelineLineMobile {
    will-change: height;
    transform: translateZ(0);
}

.timeline-card {
    will-change: opacity, transform;
    transform: translateZ(0);
}

/* Оптимизация появления на мобильных */
@media (max-width: 768px) {
    /* Убираем последовательную задержку на телефонах, 
       чтобы карточка появлялась МГНОВЕННО, как только дошла до точки срабатывания */
    #features .feature-card.visible:nth-child(n) { 
        transition-delay: 0s !important; 
    }
    
    /* Чуть уменьшаем смещение, чтобы анимация была короче и быстрее */
    #features .feature-card {
        transform: translateY(30px); /* Было 50px или больше */
    }
}

/* === ПРЕЛОАДЕР С ПУЛЬСИРУЮЩИМ ЛОГОТИПОМ + ПРОГРЕСС-БАР === */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0f172a;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.preloader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Пульсирующий логотип */
.preloader-logo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    animation: pulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(59, 130, 246, 0.6));
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 30px rgba(59, 130, 246, 0.6));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 50px rgba(59, 130, 246, 0.9));
    }
}

/* Название */
.preloader-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.1em;
    margin-top: 0.5rem;
}

/* Прогресс-бар */
.preloader-bar {
    width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.preloader-bar-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #60a5fa, #3b82f6, #1e40af);
    border-radius: 100px;
    transition: width 0.3s ease;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
}

/* Процент загрузки */
.preloader-percent {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* Скрытие прелоадера */
.preloader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#globe-canvas {
    position: absolute;
    top: 53%;          /* Сместили ниже (было 50%) */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    width: 800px;
    height: 800px;
    opacity: 0.4;
    pointer-events: none;
}

/* Скрываем на телефонах, чтобы не грузить */
@media (max-width: 768px) {
    #globe-canvas {
        display: none;
    }
}

/* =========================================================================
   ЭФФЕКТ ПАДАЮЩИХ СНЕЖИНОК
   ========================================================================= */

#snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Используем 100vh для покрытия всего экрана */
    z-index: 10; 
    pointer-events: none; /* Снежинки не мешают кликам */
    overflow: hidden;
    /* Оптимизация производительности */
    will-change: transform; 
}

/* === СЛОЙ 1: БЛИЖНИЙ, МЕНЬШЕ И БЫСТРЕЕ === */
#snow-container::before {
    content: '';
    display: block;
    width: 2px;
    height: 2px;
    background: transparent;
    border-radius: 50%;
    
    /* ИСПРАВЛЕННЫЙ box-shadow: Покрывает до 3000px */
    box-shadow: 
        10px 50px rgba(255,255,255,0.9), 110px 150px rgba(255,255,255,0.8), 210px 350px rgba(255,255,255,0.7), 310px 550px rgba(255,255,255,0.9), 410px 750px rgba(255,255,255,0.6),
        510px 950px rgba(255,255,255,0.8), 610px 150px rgba(255,255,255,0.7), 710px 350px rgba(255,255,255,0.9), 810px 550px rgba(255,255,255,0.8), 910px 750px rgba(255,255,255,0.7),
        
        1010px 50px rgba(255,255,255,0.9), 1110px 150px rgba(255,255,255,0.8), 1210px 350px rgba(255,255,255,0.7), 1310px 550px rgba(255,255,255,0.9), 1410px 750px rgba(255,255,255,0.6),
        1510px 950px rgba(255,255,255,0.8), 1610px 150px rgba(255,255,255,0.7), 1710px 350px rgba(255,255,255,0.9), 1810px 550px rgba(255,255,255,0.8), 1910px 750px rgba(255,255,255,0.7),
        
        2010px 50px rgba(255,255,255,0.9), 2110px 150px rgba(255,255,255,0.8), 2210px 350px rgba(255,255,255,0.7), 2310px 550px rgba(255,255,255,0.9), 2410px 750px rgba(255,255,255,0.6),
        2510px 950px rgba(255,255,255,0.8), 2610px 150px rgba(255,255,255,0.7), 2710px 350px rgba(255,255,255,0.9), 2810px 550px rgba(255,255,255,0.8), 2910px 750px rgba(255,255,255,0.7),
        
        3000px 900px rgba(255,255,255,0.9), 1050px 700px rgba(255,255,255,0.6), 1250px 900px rgba(255,255,255,0.8), 1450px 100px rgba(255,255,255,0.7), 1650px 300px rgba(255,255,255,0.9);
    
    /* 2. Быстрое падение */
    animation: fall 15s linear infinite;
    transform: translateY(-100vh); /* Начинаем за пределами экрана */
}

/* === СЛОЙ 2: ДАЛЬНИЙ, БОЛЬШЕ И МЕДЛЕННЕЕ === */
#snow-container::after {
    content: '';
    display: block;
    width: 4px; /* Чуть крупнее */
    height: 4px;
    background: transparent;
    border-radius: 50%;
    
    /* ИСПРАВЛЕННЫЙ box-shadow: Покрывает до 3000px */
    box-shadow: 
        50px 100px rgba(255,255,255,0.5), 150px 300px rgba(255,255,255,0.6), 250px 500px rgba(255,255,255,0.4), 350px 700px rgba(255,255,255,0.5), 450px 900px rgba(255,255,255,0.6),
        550px 100px rgba(255,255,255,0.4), 650px 300px rgba(255,255,255,0.5), 750px 500px rgba(255,255,255,0.6), 850px 700px rgba(255,255,255,0.4), 950px 900px rgba(255,255,255,0.5),
        
        1050px 100px rgba(255,255,255,0.5), 1150px 300px rgba(255,255,255,0.6), 1250px 500px rgba(255,255,255,0.4), 1350px 700px rgba(255,255,255,0.5), 1450px 900px rgba(255,255,255,0.6),
        1550px 100px rgba(255,255,255,0.4), 1650px 300px rgba(255,255,255,0.5), 1750px 500px rgba(255,255,255,0.6), 1850px 700px rgba(255,255,255,0.4), 1950px 900px rgba(255,255,255,0.5),

        2050px 100px rgba(255,255,255,0.5), 2150px 300px rgba(255,255,255,0.6), 2250px 500px rgba(255,255,255,0.4), 2350px 700px rgba(255,255,255,0.5), 2450px 900px rgba(255,255,255,0.6),
        2550px 100px rgba(255,255,255,0.4), 2650px 300px rgba(255,255,255,0.5), 2750px 500px rgba(255,255,255,0.6), 2850px 700px rgba(255,255,255,0.4), 2950px 900px rgba(255,255,255,0.5);
    
    /* 2. Медленное падение */
    animation: fall 25s linear infinite;
    transform: translateY(-100vh); /* Начинаем за пределами экрана */
}

/* === КЛЮЧЕВЫЕ КАДРЫ (Падение) === */

@keyframes fall {
    /* Перемещаем снежинки из верхней части экрана (Y=0) до нижней (Y=100vh) */
    to { transform: translateY(100vh); }
}

/* === КАСТОМНЫЙ СКРОЛЛБАР (Webkit) === */

/* 1. Общий размер полосы прокрутки (Track) */
::-webkit-scrollbar {
    width: 8px; /* Ширина на ПК */
    background-color: transparent;
}

/* 2. Фон (Track) - место, по которому двигается ползунок */
::-webkit-scrollbar-track {
    background: #0d121f; /* Очень темный фон */
    border-radius: 10px;
}

/* 3. Ползунок (Thumb) - то, что мы двигаем */
::-webkit-scrollbar-thumb {
    /* Используем градиент, как у вашего текста */
    background: linear-gradient(0deg, #60a5fa, #3b82f6, #1e40af);
    border-radius: 10px;
    border: 2px solid #0d121f; /* Отступ от фона */
}

/* 4. Ползунок при наведении (Hover) */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(0deg, #1e40af, #3b82f6, #60a5fa); /* Небольшая инверсия для эффекта */
}