/* Страница партнёрства: HERO, преимущества сотрудничества и финальный CTA. */
:root {
            --brand-red: #ea1e1e;
            --brand-purple: #3F0099;
            --brand-yellow: #FFF42B;
            --brand-dark: #1a1d24;
        }

        .gradient-bg {
            background: linear-gradient(270deg, #ea1e1e, #3F0099, #777777, #ea1e1e);
            background-size: 320% 320%;
            animation: gradientShift 9s ease infinite;
        }

        .hero-bg {
            background-image: url('../../img/handshaking-cooperation-2.png');
        }
		
	  html { scroll-behavior: smooth; }
      body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.focus-ring:focus-visible { outline: 3px solid hsl(0 83% 52%); outline-offset: 3px; }

        .text-brand-red {
            color: var(--brand-red) !important;
        }
	  
	  @media (orientation: portrait) {
        .hero-bg {
            background-image: url('../../img/handshaking-cooperation-2-mobile.png') !important;
	  	  	   }
	  }
        /* ===================== ANIMATIONS ===================== */
@keyframes heroFadeUp {
            from {
                opacity: 0;
                transform: translate3d(0, 32px, 0);
                filter: blur(7px);
            }
            to {
                opacity: 1;
                transform: translate3d(0, 0, 0);
                filter: blur(0);
            }
        }

        @keyframes heroFloat {
            0%, 100% { transform: translate3d(0, 0, 0); }
            50% { transform: translate3d(0, -8px, 0); }
        }

        .hero-animate-1 { animation: heroFadeUp 0.75s cubic-bezier(.22,.68,0,1) 0.10s both; }
        .hero-animate-2 { animation: heroFadeUp 0.75s cubic-bezier(.22,.68,0,1) 0.24s both; }
        .hero-animate-3 { animation: heroFadeUp 0.75s cubic-bezier(.22,.68,0,1) 0.38s both; }
        .hero-animate-4 { animation: heroFadeUp 0.75s cubic-bezier(.22,.68,0,1) 0.52s both; }

        #products article {
            position: relative;
            overflow: hidden;
            isolation: isolate;
            will-change: transform, box-shadow;
            transition:
                transform 0.34s cubic-bezier(.22,.68,0,1.05),
                box-shadow 0.34s ease,
                border-color 0.34s ease;
        }

        #products article::before {
            content: "";
            position: absolute;
            inset: -1px;
            z-index: -1;
            border-radius: inherit;
            background:
                radial-gradient(circle at 22% 14%, rgba(255,244,43,0.34), transparent 32%),
                radial-gradient(circle at 84% 10%, rgba(63,0,153,0.20), transparent 34%),
                linear-gradient(135deg, rgba(234,30,30,0.12), rgba(255,255,255,0));
            opacity: 0;
            transition: opacity 0.34s ease;
        }

        #products article:hover,
        #products article:focus-within {
            transform: translateY(-10px) scale(1.015);
            box-shadow: 0 24px 60px rgba(63,0,153,0.16), 0 0 0 1px rgba(234,30,30,0.08);
        }

        #products article:hover::before,
        #products article:focus-within::before {
            opacity: 1;
        }

        #products article img:first-child {
            transition: transform 0.42s cubic-bezier(.22,.68,0,1.05), filter 0.42s ease;
        }

        #products article:hover img:first-child,
        #products article:focus-within img:first-child {
            transform: scale(1.08) rotate(-1deg);
            filter: drop-shadow(0 18px 20px rgba(63,0,153,0.20));
        }

        @keyframes pulseRing {
            0% { box-shadow: 0 0 0 0 rgba(234,30,30,0.38); }
            70% { box-shadow: 0 0 0 16px rgba(234,30,30,0); }
            100% { box-shadow: 0 0 0 0 rgba(234,30,30,0); }
        }

        @keyframes iconPop {
            0% { transform: scale(0.78); }
            60% { transform: scale(1.08); }
            100% { transform: scale(1); }
        }

        #about article .rounded-full {
            transition: transform 0.3s ease, background-color 0.3s ease;
        }

        #about article.visible .rounded-full {
            animation: iconPop 0.6s cubic-bezier(.22,.68,0,1.1) 0.12s both, pulseRing 1.25s ease-out 0.22s 1;
        }

        #about article:hover .rounded-full {
            transform: translateY(-4px) scale(1.04);
            background-color: rgba(255,244,43,0.28);
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes headerSlideDown {
            from { transform: translateY(-100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        @keyframes headerScrollReveal {
            from { transform: translateY(-14px); opacity: 0.82; }
            to { transform: translateY(0); opacity: 1; }
        }

        .site-header {
            animation: headerSlideDown 0.62s cubic-bezier(.22,.68,0,1.05) both;
            transition:
                background-color 0.28s ease,
                box-shadow 0.28s ease,
                backdrop-filter 0.28s ease,
                transform 0.28s ease,
                opacity 0.28s ease;
        }

        .site-header.is-scrolled {
            background-color: rgba(255,255,255,0.92);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            box-shadow: 0 16px 44px rgba(26,29,36,0.12);
            animation: headerScrollReveal 0.42s ease both;
        }

        .site-header nav a {
            position: relative;
        }

        .site-header nav a::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--brand-red);
            transition: width 0.25s ease;
            border-radius: 2px;
        }

        .site-header nav a:hover::after {
            width: 100%;
        }

        @keyframes btnPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(255,244,43,0.45); }
            50% { box-shadow: 0 0 0 12px rgba(255,244,43,0); }
        }

        .section-cta-btn {
            position: relative;
            overflow: hidden;
            isolation: isolate;
            animation: btnPulse 2.6s ease infinite;
        }

        .section-cta-btn::after {
            content: "";
            position: absolute;
            inset: 0 auto 0 -120%;
            width: 70%;
            transform: skewX(-20deg);
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
            transition: left 0.72s ease;
            z-index: 0;
            pointer-events: none;
        }

        .section-cta-btn:hover::after,
        .section-cta-btn:focus-visible::after {
            left: 135%;
        }

        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }

            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }

            .reveal,
            .reveal-left,
            .reveal-right,
            .reveal-scale {
                opacity: 1 !important;
                filter: none !important;
                transform: none !important;
            }
        }
        /* ===================== END ANIMATIONS ===================== */