/* КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ ПОЗИЦИЙ ПЛАШЕК - ВСЕ 3 ДОЛЖНЫ БЫТЬ ВИДНЫ */

/* Убираем все конфликтующие стили для плашек */
.floating-cards {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 20 !important; /* Выше робота */
}

/* ПЕРВАЯ ПЛАШКА - "+300% конверсия" - ЛЕВЫЙ ВЕРХ */
.floating-cards .float-card:nth-child(1),
.float-card:first-child,
.float-card:nth-of-type(1) {
    position: absolute !important;
    top: 15% !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(0) rotate(-3deg) !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 21 !important;
    animation: badge-float-1 6s ease-in-out infinite !important;
}

/* ВТОРАЯ ПЛАШКА - "10K+ контактов/день" - ПРАВЫЙ ЦЕНТР */
.floating-cards .float-card:nth-child(2),
.float-card:nth-of-type(2) {
    position: absolute !important;
    top: 40% !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateY(0) rotate(3deg) !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 22 !important;
    animation: badge-float-2 7s ease-in-out infinite !important;
}

/* ТРЕТЬЯ ПЛАШКА - "5.0 рейтинг" - ЛЕВЫЙ НИЗ */
.floating-cards .float-card:nth-child(3),
.float-card:last-child,
.float-card:nth-of-type(3) {
    position: absolute !important;
    bottom: 25% !important;
    left: 30px !important;
    top: auto !important;
    right: auto !important;
    transform: translateY(0) rotate(-2deg) !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 23 !important;
    animation: badge-float-3 8s ease-in-out infinite !important;
}

/* Новые анимации для лучшей видимости */
@keyframes badge-float-1 {
    0%, 100% { 
        transform: translateY(0) translateX(0) rotate(-3deg) scale(1);
    }
    25% {
        transform: translateY(-10px) translateX(5px) rotate(-1deg) scale(1.05);
    }
    50% { 
        transform: translateY(-15px) translateX(10px) rotate(2deg) scale(1.02);
    }
    75% {
        transform: translateY(-8px) translateX(5px) rotate(0deg) scale(1.03);
    }
}

@keyframes badge-float-2 {
    0%, 100% { 
        transform: translateY(0) translateX(0) rotate(3deg) scale(1);
    }
    25% {
        transform: translateY(-8px) translateX(-5px) rotate(1deg) scale(1.03);
    }
    50% { 
        transform: translateY(-18px) translateX(-8px) rotate(-2deg) scale(1.05);
    }
    75% {
        transform: translateY(-10px) translateX(-3px) rotate(0deg) scale(1.02);
    }
}

@keyframes badge-float-3 {
    0%, 100% { 
        transform: translateY(0) translateX(0) rotate(-2deg) scale(1);
    }
    25% {
        transform: translateY(-5px) translateX(3px) rotate(0deg) scale(1.02);
    }
    50% { 
        transform: translateY(-12px) translateX(8px) rotate(3deg) scale(1.04);
    }
    75% {
        transform: translateY(-6px) translateX(4px) rotate(1deg) scale(1.01);
    }
}

/* Стили самих плашек - компактные и видимые */
.float-card {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 16px !important;
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    border-radius: 17px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    line-height: 34px !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
    cursor: default !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.float-card i {
    font-size: 15px !important;
    color: #000000 !important;
    line-height: 1 !important;
}

.float-card span {
    font-size: 14px !important;
    color: #000000 !important;
    line-height: 1 !important;
}

/* Hover эффект для десктопа */
@media (hover: hover) and (min-width: 769px) {
    .float-card {
        transition: all 0.3s ease !important;
    }
    
    .float-card:hover {
        transform: scale(1.15) !important;
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.35) !important;
        animation-play-state: paused !important;
        z-index: 30 !important;
        background: linear-gradient(135deg, #FFD700, #FF8C00) !important;
    }
}

/* МОБИЛЬНАЯ ВЕРСИЯ - ПОЛНОЕ СКРЫТИЕ */
@media (max-width: 768px) {
    .float-card,
    .floating-cards,
    .float-card:nth-child(1),
    .float-card:nth-child(2),
    .float-card:nth-child(3) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ПЛАНШЕТНАЯ ВЕРСИЯ - АДАПТАЦИЯ ПОЗИЦИЙ */
@media (min-width: 769px) and (max-width: 1024px) {
    .float-card:nth-child(1) {
        top: 10% !important;
        left: 20px !important;
    }
    
    .float-card:nth-child(2) {
        top: 35% !important;
        right: 20px !important;
    }
    
    .float-card:nth-child(3) {
        bottom: 20% !important;
        left: 40px !important;
    }
}

/* БОЛЬШИЕ ЭКРАНЫ - ОПТИМАЛЬНЫЕ ПОЗИЦИИ */
@media (min-width: 1025px) {
    .hero-visual {
        position: relative !important;
    }
    
    .hero-visual .floating-cards {
        position: absolute !important;
        top: -50px !important;
        left: -100px !important;
        right: -100px !important;
        bottom: -50px !important;
        width: calc(100% + 200px) !important;
        height: calc(100% + 100px) !important;
    }
    
    .float-card:nth-child(1) {
        top: 10% !important;
        left: -80px !important;
    }
    
    .float-card:nth-child(2) {
        top: 45% !important;
        right: -70px !important;
    }
    
    .float-card:nth-child(3) {
        bottom: 15% !important;
        left: -60px !important;
    }
}

/* ПРИНУДИТЕЛЬНОЕ ПРИМЕНЕНИЕ */
body .floating-cards .float-card,
html body .hero .floating-cards .float-card,
.hero-visual .floating-cards .float-card {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}