@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Inter:wght@400;500;600;700&display=swap');
#root h1, #root h2, #root h3, #root h4 { font-family: 'Poppins', sans-serif; font-weight: 700; }
#root body, #root p, #root span, #root div { font-family: 'Inter', sans-serif; }

html{
    font-size: 16px !important;
}

/* Точные анимации как в оригинале */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-7.46859px) rotate(1.86715deg); }
    50% { transform: translateY(-15px) rotate(0deg); }
    75% { transform: translateY(-5px) rotate(-1deg); }
}

@keyframes float2 {
    0%, 100% { transform: translateY(0px) scale(1); }
    33% { transform: translateY(9.2167px) scale(1.06144); }
    66% { transform: translateY(-5px) scale(0.98); }
}

@keyframes floatIcon1 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-17.7495px) rotate(218.295deg); }
    50% { transform: translateY(-10px) rotate(0deg); }
    75% { transform: translateY(-5px) rotate(-10deg); }
}

@keyframes floatIcon2 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(0.162078px) rotate(-291.06deg); }
    50% { transform: translateY(5px) rotate(0deg); }
    75% { transform: translateY(-2px) rotate(10deg); }
}

@keyframes floatIcon3 {
    0%, 100% { transform: translateX(0px) rotate(0deg); }
    25% { transform: translateX(7.8762px) rotate(277.272deg); }
    50% { transform: translateX(-5px) rotate(0deg); }
    75% { transform: translateX(2px) rotate(-5deg); }
}

@keyframes sparkle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(1.71364deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-1.71364deg); }
}

@keyframes avatarFloat1 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-3.21782px) rotate(6.43565deg); }
}

@keyframes avatarFloat2 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-4.91583px) rotate(9.83167deg); }
}

@keyframes avatarFloat3 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-3.76886px) rotate(7.53771deg); }
}

@keyframes avatarFloat4 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-1.78218px) rotate(3.56435deg); }
}

.floating-bg1 {
    animation: float 12s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.floating-bg2 {
    animation: float2 10s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.floating-icon1 {
    animation: floatIcon1 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.floating-icon2 {
    animation: floatIcon2 9s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.floating-icon3 {
    animation: floatIcon3 7s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.sparkle-icon {
    animation: sparkle 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.avatar-float1 {
    animation: avatarFloat1 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.avatar-float2 {
    animation: avatarFloat2 7s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.avatar-float3 {
    animation: avatarFloat3 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.avatar-float4 {
    animation: avatarFloat4 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Intersection Observer animations - более плавные и естественные */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.animate-slide-left {
    opacity: 0;
    transform: translateX(-40px) scale(0.95);
    transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-slide-left.visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.animate-scale {
    opacity: 0;
    transform: scale(0.85) rotate(1deg);
    transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-scale.visible {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.animate-fade-up {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-fade-up.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.animate-fade-up-scale {
    opacity: 0;
    transform: translateY(40px) scale(0.9) rotate(0.5deg);
    transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-fade-up-scale.visible {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
}

.animate-slide-right {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
    transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-slide-right.visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.animate-rotate-in {
    opacity: 0;
    transform: translateX(-40px) rotate(-8deg) scale(0.85);
    transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-rotate-in.visible {
    opacity: 1;
    transform: translateX(0) rotate(0deg) scale(1);
}

/* Hover effects - более плавные */
.hover-lift {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.hover-glow {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-glow:hover {
    box-shadow: 0 0 30px rgba(252, 127, 2, 0.3);
}

.hover-scale {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-scale:hover {
    transform: scale(1.05);
}


.container{
    max-width: 1320px !important;
}
@media (max-width: 1319px) {
    .container{
        max-width: 1200px !important;
    }
}
@media (max-width: 1199px) {
    .container {
        max-width: 991px !important;
    }
}
@media (max-width: 991px) {
    .container {
        max-width: 768px !important;
    }
}