<?php
// заголовки
$IblockId = 67;// инфоблок
$arFilter = array(
    "IBLOCK_ID" => $IblockId,
    "ACTIVE" => "Y",
    "ID" => 407

);
$arSelect = array("ID", "IBLOCK_ID", "NAME", "PREVIEW_TEXT", "PROPERTY_TITLE", "PROPERTY_BTN_TEXT", "PROPERTY_BTN_EMAIL");
// указаны,

$res = CIBlockElement::GetList(array(), $arFilter, false, array('nTopCount' => 1), $arSelect);
while ($ob = $res->GetNextElement()) {
    $arItem = $ob->GetFields();

    $name = $arItem['NAME'];
    $title = $arItem['~PROPERTY_TITLE_VALUE']['TEXT'];
    $text = $arItem['~PREVIEW_TEXT'];
    $btnText = $arItem['PROPERTY_BTN_TEXT_VALUE'];
    $btnEmail = $arItem['PROPERTY_BTN_EMAIL_VALUE'];

}
?>

<section class="page-section page-section--dark">

    <div class="bonus" data-animate-bonus="parent">
        <div class="bonus__pixels-wrap" data-animate-bonus="pixels" style="opacity: 1;">
            <div class="bonus__pixels bonus__pixels--xl">
                <svg width="2560" height="346" viewBox="0 0 2560 346" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect opacity="0.1" x="176.555" width="88.2758" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.05" x="353.102" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.05" x="441.383" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.1" x="794.484" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.2" x="1235.86" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.05" x="1324.14" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.05" x="1765.52" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.21" x="1942.07" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.2" x="2206.9" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.3" x="2295.17" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <g opacity="0.3">
                        <rect opacity="0.5" y="86.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                        <rect opacity="0.2" x="88.2734" y="86.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                        <rect opacity="0.05" x="264.828" y="86.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                        <rect opacity="0.1" x="441.383" y="86.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                        <rect opacity="0.2" x="617.93" y="86.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                        <rect opacity="0.5" x="794.484" y="86.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                        <rect opacity="0.1" x="971.031" y="86.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                        <rect opacity="0.7" x="1059.31" y="86.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                        <rect opacity="0.2" x="1147.59" y="86.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                        <rect opacity="0.4" x="1235.86" y="86.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                        <rect opacity="0.05" x="1324.14" y="86.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                        <rect opacity="0.2" x="1412.41" y="86.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                        <rect opacity="0.2" x="1853.8" y="86.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                        <rect opacity="0.1" x="2118.62" y="86.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                        <rect opacity="0.1" x="2295.17" y="86.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                        <rect opacity="0.35" x="2383.45" y="86.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    </g>
                    <rect opacity="0.5" x="88.2734" y="173" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.3" x="441.383" y="173" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.2" x="706.203" y="173" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.8" x="1147.59" y="173" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.05" x="1412.41" y="173" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.2" x="1500.69" y="173" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.8" x="1588.97" y="173" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.8" x="1677.24" y="173" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.4" x="1853.8" y="173" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.2" x="1942.07" y="173" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.3" x="2206.9" y="173" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.8" x="2471.73" y="173" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.5" y="259.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.2" x="88.2734" y="259.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.1" x="264.828" y="259.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.5" x="529.656" y="259.5" width="88.2758" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.2" x="617.93" y="259.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.4" x="706.203" y="259.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.5" x="882.758" y="259.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.4" x="1059.31" y="259.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.1" x="1235.86" y="259.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.1" x="1324.14" y="259.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.2" x="1677.24" y="259.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.7" x="1765.52" y="259.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.05" x="2030.34" y="259.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.2" x="2118.62" y="259.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.1" x="2206.9" y="259.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                    <rect opacity="0.35" x="2383.45" y="259.5" width="88.2759" height="86.5" fill="#00D29D"></rect>
                </svg>
            </div>
            <div class="bonus__pixels bonus__pixels--desktop">
                <svg width="1536" height="208" viewBox="0 0 1536 208" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect opacity="0.1" x="105.93" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.05" x="211.859" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.05" x="264.828" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.1" x="476.688" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.2" x="741.516" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.05" x="794.484" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.05" x="1059.31" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.21" x="1165.24" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.2" x="1324.14" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.3" x="1377.1" width="52.9655" height="52" fill="#00D29D"></rect>
                    <g opacity="0.3">
                        <rect opacity="0.5" y="52" width="52.9655" height="52" fill="#00D29D"></rect>
                        <rect opacity="0.2" x="52.9688" y="52" width="52.9655" height="52" fill="#00D29D"></rect>
                        <rect opacity="0.05" x="158.898" y="52" width="52.9655" height="52" fill="#00D29D"></rect>
                        <rect opacity="0.1" x="264.828" y="52" width="52.9655" height="52" fill="#00D29D"></rect>
                        <rect opacity="0.2" x="370.758" y="52" width="52.9655" height="52" fill="#00D29D"></rect>
                        <rect opacity="0.5" x="476.688" y="52" width="52.9655" height="52" fill="#00D29D"></rect>
                        <rect opacity="0.1" x="582.617" y="52" width="52.9655" height="52" fill="#00D29D"></rect>
                        <rect opacity="0.7" x="635.586" y="52" width="52.9655" height="52" fill="#00D29D"></rect>
                        <rect opacity="0.2" x="688.555" y="52" width="52.9655" height="52" fill="#00D29D"></rect>
                        <rect opacity="0.4" x="741.516" y="52" width="52.9655" height="52" fill="#00D29D"></rect>
                        <rect opacity="0.05" x="794.484" y="52" width="52.9655" height="52" fill="#00D29D"></rect>
                        <rect opacity="0.2" x="847.445" y="52" width="52.9655" height="52" fill="#00D29D"></rect>
                        <rect opacity="0.2" x="1112.27" y="52" width="52.9655" height="52" fill="#00D29D"></rect>
                        <rect opacity="0.1" x="1271.17" y="52" width="52.9655" height="52" fill="#00D29D"></rect>
                        <rect opacity="0.1" x="1377.1" y="52" width="52.9655" height="52" fill="#00D29D"></rect>
                        <rect opacity="0.35" x="1430.07" y="52" width="52.9655" height="52" fill="#00D29D"></rect>
                    </g>
                    <rect opacity="0.5" x="52.9688" y="104" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.3" x="264.828" y="104" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.2" x="423.727" y="104" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.8" x="688.555" y="104" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.05" x="847.445" y="104" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.2" x="900.414" y="104" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.8" x="953.383" y="104" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.8" x="1006.34" y="104" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.4" x="1112.27" y="104" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.2" x="1165.24" y="104" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.3" x="1324.14" y="104" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.8" x="1483.03" y="104" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.5" y="156" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.2" x="52.9688" y="156" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.1" x="158.898" y="156" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.5" x="317.797" y="156" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.2" x="370.758" y="156" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.4" x="423.727" y="156" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.5" x="529.656" y="156" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.4" x="635.586" y="156" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.1" x="741.516" y="156" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.1" x="794.484" y="156" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.2" x="1006.34" y="156" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.7" x="1059.31" y="156" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.05" x="1218.2" y="156" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.2" x="1271.17" y="156" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.1" x="1324.14" y="156" width="52.9655" height="52" fill="#00D29D"></rect>
                    <rect opacity="0.35" x="1430.07" y="156" width="52.9655" height="52" fill="#00D29D"></rect>
                </svg>
            </div>
            <div class="bonus__pixels bonus__pixels--mobile">
                <svg width="393" height="60" viewBox="0 0 393 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_6771_144129)">
                        <rect opacity="0.1" x="30.7812" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.05" x="61.5703" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.05" x="76.9609" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.1" x="138.531" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.2" x="215.5" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.05" x="230.891" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.05" x="307.852" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.21" x="338.641" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.2" x="384.812" width="15.3926" height="15" fill="#00D29D"></rect>
                        <g opacity="0.3">
                            <rect opacity="0.5" y="15" width="15.3926" height="15" fill="#00D29D"></rect>
                            <rect opacity="0.2" x="15.3906" y="15" width="15.3926" height="15" fill="#00D29D"></rect>
                            <rect opacity="0.05" x="46.1719" y="15" width="15.3926" height="15" fill="#00D29D"></rect>
                            <rect opacity="0.1" x="76.9609" y="15" width="15.3926" height="15" fill="#00D29D"></rect>
                            <rect opacity="0.2" x="107.75" y="15" width="15.3926" height="15" fill="#00D29D"></rect>
                            <rect opacity="0.5" x="138.531" y="15" width="15.3926" height="15" fill="#00D29D"></rect>
                            <rect opacity="0.1" x="169.32" y="15" width="15.3926" height="15" fill="#00D29D"></rect>
                            <rect opacity="0.7" x="184.711" y="15" width="15.3926" height="15" fill="#00D29D"></rect>
                            <rect opacity="0.2" x="200.102" y="15" width="15.3926" height="15" fill="#00D29D"></rect>
                            <rect opacity="0.4" x="215.5" y="15" width="15.3926" height="15" fill="#00D29D"></rect>
                            <rect opacity="0.05" x="230.891" y="15" width="15.3926" height="15" fill="#00D29D"></rect>
                            <rect opacity="0.2" x="246.281" y="15" width="15.3926" height="15" fill="#00D29D"></rect>
                            <rect opacity="0.2" x="323.242" y="15" width="15.3926" height="15" fill="#00D29D"></rect>
                            <rect opacity="0.1" x="369.422" y="15" width="15.3926" height="15" fill="#00D29D"></rect>
                        </g>
                        <rect opacity="0.5" x="15.3906" y="30" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.3" x="76.9609" y="30" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.2" x="123.141" y="30" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.8" x="200.102" y="30" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.05" x="246.281" y="30" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.2" x="261.672" y="30" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.8" x="277.062" y="30" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.8" x="292.461" y="30" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.4" x="323.242" y="30" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.2" x="338.641" y="30" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.3" x="384.812" y="30" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.5" y="45" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.2" x="15.3906" y="45" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.1" x="46.1719" y="45" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.5" x="92.3516" y="45" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.2" x="107.75" y="45" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.4" x="123.141" y="45" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.5" x="153.922" y="45" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.4" x="184.711" y="45" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.1" x="215.5" y="45" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.1" x="230.891" y="45" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.2" x="292.461" y="45" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.7" x="307.852" y="45" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.05" x="354.031" y="45" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.2" x="369.422" y="45" width="15.3926" height="15" fill="#00D29D"></rect>
                        <rect opacity="0.1" x="384.812" y="45" width="15.3926" height="15" fill="#00D29D"></rect>
                    </g>
                    <defs>
                        <clipPath id="clip0_6771_144129">
                            <rect width="393" height="60" fill="white"></rect>
                        </clipPath>
                    </defs>
                </svg>
            </div>
        </div>
        <div class="container container--no-paddings">

            <div class="bonus__inner">
                <div class="bonus__bg">
                    <div class="bonus__bg-image" data-animate-bonus="image">


                        <picture>
                            <source srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-1.webp, <?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-1@2x.webp 2x, <?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-1@3x.webp 3x"
                                    type="image/webp">
                            <img src="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-1.png"
                                 srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-1@2x.png 2x, <?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-1@3x.png 3x"
                                 alt="Картинка" width="280" height="280" loading="lazy"
                                 style="translate: none; rotate: none; scale: none; transform: translate3d(10.9702px, -15.1336px, 0px);">
                        </picture>
                    </div>
                    <div class="bonus__bg-image" data-animate-bonus="image">


                        <picture>
                            <source srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-2.webp, <?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-2@2x.webp 2x, <?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-2@3x.webp 3x"
                                    type="image/webp">
                            <img src="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-2.png"
                                 srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-2@2x.png 2x, <?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-2@3x.png 3x"
                                 alt="Картинка" width="394" height="394" loading="lazy"
                                 style="translate: none; rotate: none; scale: none; transform: translate3d(3.84602px, 0.567682px, 0px);">
                        </picture>
                    </div>
                    <div class="bonus__bg-image" data-animate-bonus="image">


                        <picture>
                            <source srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-3.webp, <?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-3@2x.webp 2x, <?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-3@3x.webp 3x"
                                    type="image/webp">
                            <img src="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-3.png"
                                 srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-3@2x.png 2x, <?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-3@3x.png 3x"
                                 alt="Картинка" width="420" height="420" loading="lazy"
                                 style="translate: none; rotate: none; scale: none; transform: translate3d(1.46984px, -5.06032px, 0px);">
                        </picture>
                    </div>
                    <div class="bonus__bg-image" data-animate-bonus="image">


                        <picture>
                            <source srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-4.webp, <?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-4@2x.webp 2x, <?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-4@3x.webp 3x"
                                    type="image/webp">
                            <img src="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-4.png"
                                 srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-4@2x.png 2x, <?=SITE_TEMPLATE_PATH ?>/images/bonus/bonus-4@3x.png 3x"
                                 alt="Картинка" width="288" height="273" loading="lazy"
                                 style="translate: none; rotate: none; scale: none; transform: translate3d(-18.3484px, -12.9954px, 0px);">
                        </picture>
                    </div>
                    <div class="bonus__bg-image" data-animate-bonus="image">


                        <picture>
                            <source srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-5.webp, <?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-5@2x.webp 2x, <?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-5@3x.webp 3x"
                                    type="image/webp">
                            <img src="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-5.png"
                                 srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-5@2x.png 2x, <?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-5@3x.png 3x"
                                 alt="Картинка" width="394" height="394" loading="lazy"
                                 style="translate: none; rotate: none; scale: none; transform: translate3d(-18.4298px, -6.20289px, 0px);">
                        </picture>
                    </div>
                    <div class="bonus__bg-image" data-animate-bonus="image">


                        <picture>
                            <source srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-6.webp, <?=SITE_TEMPLATE_PATH ?>/images/bonus/bonus-6@2x.webp 2x, <?=SITE_TEMPLATE_PATH ?>/images/bonus/bonus-6@3x.webp 3x"
                                    type="image/webp">
                            <img src="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-6.png"
                                 srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-6@2x.png 2x, <?=SITE_TEMPLATE_PATH ?>/images/bonus/bonus-6@3x.png 3x"
                                 alt="Картинка" width="256" height="225" loading="lazy"
                                 style="translate: none; rotate: none; scale: none; transform: translate3d(3.02604px, -2.59505px, 0px);">
                        </picture>
                    </div>
                    <div class="bonus__bg-image" data-animate-bonus="image">


                        <picture>
                            <source srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-7.webp, <?=SITE_TEMPLATE_PATH ?>/images/bonus/bonus-7@2x.webp 2x, <?=SITE_TEMPLATE_PATH ?>/images/bonus/bonus-7@3x.webp 3x"
                                    type="image/webp">
                            <img src="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-7.png"
                                 srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-7@2x.png 2x, <?=SITE_TEMPLATE_PATH ?>/images/bonus/bonus-7@3x.png 3x"
                                 alt="Картинка" width="261" height="262" loading="lazy"
                                 style="translate: none; rotate: none; scale: none; transform: translate3d(-8.04725px, -27.2363px, 0px);">
                        </picture>
                    </div>
                    <div class="bonus__bg-image" data-animate-bonus="image">


                        <picture>
                            <source srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-8.webp, <?=SITE_TEMPLATE_PATH ?>/images/bonus/bonus-8@2x.webp 2x, <?=SITE_TEMPLATE_PATH ?>/images/bonus/bonus-8@3x.webp 3x"
                                    type="image/webp">
                            <img src="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-8.png"
                                 srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-8@2x.png 2x, <?=SITE_TEMPLATE_PATH ?>/images/bonus/bonus-8@3x.png 3x"
                                 alt="Картинка" width="324" height="288" loading="lazy"
                                 style="translate: none; rotate: none; scale: none; transform: translate3d(-0.773663px, -1.62757px, 0px);">
                        </picture>
                    </div>
                    <div class="bonus__bg-image" data-animate-bonus="image">


                        <picture>
                            <source srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-9.webp, <?=SITE_TEMPLATE_PATH ?>/images/bonus/bonus-9@2x.webp 2x, <?=SITE_TEMPLATE_PATH ?>/images/bonus/bonus-9@3x.webp 3x"
                                    type="image/webp">

                            <img src="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-9.png"
                                 srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-9@2x.png 2x, <?=SITE_TEMPLATE_PATH ?>/images/bonus/bonus-9@3x.png 3x"
                                 alt="Картинка" width="102" height="102" loading="lazy"
                                 style="translate: none; rotate: none; scale: none;"></picture>
                    </div>
                    <div class="bonus__bg-image" data-animate-bonus="image">


                        <picture>
                            <source srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-10.webp, <?=SITE_TEMPLATE_PATH ?>/images/bonus/bonus-10@2x.webp 2x, <?=SITE_TEMPLATE_PATH ?>/images/bonus/bonus-10@3x.webp 3x"
                                    type="image/webp">

                            <img src="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-10.png"
                                 srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-10@2x.png 2x, <?=SITE_TEMPLATE_PATH ?>/images/bonus/bonus-10@3x.png 3x"
                                 alt="Картинка" width="186" height="186" loading="lazy"
                                 style="translate: none; rotate: none; scale: none;"></picture>
                    </div>
                    <div class="bonus__bg-image" data-animate-bonus="image">


                        <picture>
                            <source srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-11.webp, <?=SITE_TEMPLATE_PATH ?>/images/bonus/bonus-11@2x.webp 2x, <?=SITE_TEMPLATE_PATH ?>/images/bonus/bonus-11@3x.webp 3x"
                                    type="image/webp">

                            <img src="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-11.png"
                                 srcset="<?= SITE_TEMPLATE_PATH ?>/images/bonus/bonus-11@2x.png 2x, <?=SITE_TEMPLATE_PATH ?>/images/bonus/bonus-11@3x.png 3x"
                                 alt="Картинка" width="92" height="88" loading="lazy"
                                 style="translate: none; rotate: none; scale: none;"></picture>
                    </div>
                </div>
                <div class="bonus__content">
                    <h2><?=$title?></h2>
                    <p>
                        <?=$text?>
                    </p>
                    <a href="<?=$btnEmail?>" class="button button--size-xl-m bonus__button"><span
                                class="button__text"><?=$btnText?></span><span class="button__icon">
        <svg width="1em" height="1em" viewBox="0 0 20 20" data-icon="icon-arrow-up-right">

  <use xlink:href="#ai:local:icon-arrow-up-right"></use>

</svg>
      </span></a>
                </div>
            </div>

        </div>
        <div class="bonus__shine-wrap" data-animate-bonus="shine" style="opacity: 0.9582;">
            <div class="bonus__shine bonus__shine--xl">
                <svg xmlns="http://www.w3.org/2000/svg" width="2560" height="858" viewBox="0 0 2560 858" fill="none">
                    <g opacity="0.4" filter="url(#filter0_f_6771_149524)">
                        <path d="M3413 300.238C3413 418.229 3082.3 686.875 2838.38 749.408C2651.85 797.228 2000.59 885.544 1299.44 885.544C648.802 885.544 -88.1822 801.304 -239.183 749.408C-505.035 658.039 -635.102 604.856 -825 429.022V1035H3413V300.238Z"
                              fill="url(#paint0_radial_6771_149524)"></path>
                    </g>
                    <defs>
                        <filter id="filter0_f_6771_149524" x="-1125" y="0.238281" width="4838" height="1334.76"
                                filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                            <feGaussianBlur stdDeviation="150"
                                            result="effect1_foregroundBlur_6771_149524"></feGaussianBlur>
                        </filter>
                        <radialGradient id="paint0_radial_6771_149524" cx="0" cy="0" r="1"
                                        gradientUnits="userSpaceOnUse"
                                        gradientTransform="translate(1270.25 834.399) rotate(137.944) scale(1743.02 1363.23)">
                            <stop stop-color="#0EFCC0"></stop>
                            <stop offset="1" stop-color="#EBFF76"></stop>
                        </radialGradient>
                    </defs>
                </svg>
            </div>
            <div class="bonus__shine bonus__shine--desktop">
                <svg xmlns="http://www.w3.org/2000/svg" width="1536" height="533" viewBox="0 0 1536 533" fill="none">
                    <g opacity="0.4" filter="url(#filter0_f_6771_141645)">
                        <path d="M2062 180.305C2062 252.358 1860.13 416.412 1711.23 454.598C1597.37 483.801 1199.82 537.732 771.819 537.732C374.652 537.732 -75.2247 486.29 -167.4 454.598C-329.684 398.802 -409.081 366.326 -525 258.949V629H2062V180.305Z"
                              fill="url(#paint0_radial_6771_141645)"></path>
                    </g>
                    <defs>
                        <filter id="filter0_f_6771_141645" x="-705" y="0.304688" width="2947" height="808.695"
                                filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                            <feGaussianBlur stdDeviation="90"
                                            result="effect1_foregroundBlur_6771_141645"></feGaussianBlur>
                        </filter>
                        <radialGradient id="paint0_radial_6771_141645" cx="0" cy="0" r="1"
                                        gradientUnits="userSpaceOnUse"
                                        gradientTransform="translate(754 506.5) rotate(137.933) scale(1064.18 832.334)">
                            <stop stop-color="#0EFCC0"></stop>
                            <stop offset="1" stop-color="#EBFF76"></stop>
                        </radialGradient>
                    </defs>
                </svg>
            </div>
            <div class="bonus__shine bonus__shine--mobile">
                <svg xmlns="http://www.w3.org/2000/svg" width="393" height="245" viewBox="0 0 393 245" fill="none">
                    <g opacity="0.4" filter="url(#filter0_f_6771_144251)">
                        <path d="M613 100.987C613 124.113 547.999 176.768 500.055 189.024C463.391 198.397 335.383 215.707 197.569 215.707C69.6831 215.707 -75.1748 199.196 -104.855 189.024C-157.109 171.116 -182.675 160.692 -220 126.228V245H613V100.987Z"
                              fill="url(#paint0_radial_6771_144251)"></path>
                    </g>
                    <defs>
                        <filter id="filter0_f_6771_144251" x="-320" y="0.986328" width="1033" height="344.014"
                                filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                            <feGaussianBlur stdDeviation="50"
                                            result="effect1_foregroundBlur_6771_144251"></feGaussianBlur>
                        </filter>
                        <radialGradient id="paint0_radial_6771_144251" cx="0" cy="0" r="1"
                                        gradientUnits="userSpaceOnUse"
                                        gradientTransform="translate(191.831 205.682) rotate(138.024) scale(342.165 267.532)">
                            <stop stop-color="#0EFCC0"></stop>
                            <stop offset="1" stop-color="#EBFF76"></stop>
                        </radialGradient>
                    </defs>
                </svg>
            </div>
        </div>
    </div>
</section>