body {
    font-weight: 300;

    p {
        font-weight: inherit;
    }
}

h1 {
    color: #fff;    
    font-size: clamp(1.2rem, .5rem + 2vw, 2.75rem);
    font-family: 'Unbounded';
    font-weight: 500;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    text-align: left;
    line-height: 150%;
    
    @media (min-width: 1200px) {
        max-width: 78%;
    }

    @media (max-width: 1199px) and (min-width: 768px) {
        max-width: 72%;
    }
}

h2 {
    font-family: 'Unbounded';
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(1.1rem, 1rem + 0.875vw, 2.25rem);
    padding: 0;
    margin: 0;
    line-height: 150%;
}

h3 {
    font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem);
    font-weight: 700;
    padding: 0;
    margin: 0;
    line-height: 120%;
}

.frutonyanya-section-padding {
    padding: clamp(3.5rem, 2.9rem + 3vw, 6.5rem) 0;
}

.frutonyanya-gradient-text {
    background: linear-gradient(90.88deg, #FF8600 -12.31%, #FFFFFF 117.08%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* Опционально: чтобы градиент не растягивался на всю ширину блока */
    display: inline-block;
    width: fit-content;
}

.frutonyanya-blue-gradient {
    background-image: linear-gradient(242.03deg, #20348B 55.13%, #0C153E 91.48%);
}

.frutonyanya-head {
    padding: clamp(2rem, 0.7rem + 6.5vw, 8.5rem) 0;    
    background-repeat: no-repeat;
    background-position: 100% 0%;    
    overflow: clip;
    position: relative;

    &:after {
        content: '';        
        background-image: url(/application/images/frutonyanya-head-curve.svg);
        background-size: contain;
        background-position: 100% 0%;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        top: -60px;
        right: -100px;

        @media (max-width: 767px) {
            top: -25px;
            right: -75px;
        }
    }

    .viewPlace {
        z-index: 1;
    }

    h3 {
        text-align: left;
        font-size: clamp(0.9rem, 0.6rem + 1vw, 1.5rem);
        line-height: 150%;

        @media (max-width: 1199px) and (min-width: 768px) {
            max-width: 70%;
        }

        @media (max-width: 767px) {
            max-width: 200px;
            font-weight: 400;
        }
    }

    .frutonyanya-head__radar {
        position: absolute;
        top: 0;
        right: 0;        
        aspect-ratio: 911/639;        
        background-size: auto;
        background-image: url(/application/images/frutonyanya-head-radar.webp), linear-gradient(242.03deg, #20348B 55.13%, #0C153E 91.48%);
        background-size: contain;
        width: 47vw;
        background-repeat: no-repeat;

        @media (max-width: 767px) {
            background-image: url(/application/images/frutonyanya-head-radar-mobile.webp);
            width: 80vw;
            top: 8%;
            right: 0%;
            background-position: 100% 100%;
        }

        .gradient-rectangle {
            position: absolute;
            
            &:nth-child(1) {                
                width: 57%;
                aspect-ratio: 524/792;
                top: -14%;
                left: 0;
                background-image: linear-gradient(90deg, #20348B 0%, #1E3080 33.17%, rgba(30, 48, 128, 0) 100%);
            }

            &:nth-child(2) {
                aspect-ratio: 1102/267;
                width: 128%;
                bottom: -12%;
                left: -14%;
                background-image: linear-gradient(0deg, #20348B 0%, #1E3080 33.17%, rgba(30, 48, 128, 0) 100%);
            }

            &:nth-child(3) {                
                width: 57%;
                aspect-ratio: 524/792;
                top: -14%;
                right: -30%;
                background-image: linear-gradient(-90deg, #20348B 0%, #1E3080 33.17%, rgba(30, 48, 128, 0) 100%);
            }
        }
    }

    .frutonyanya-head__facts {
        display: grid;
        grid-template-columns: repeat(14, 1fr);
        gap: clamp(1rem, 0.825rem + 0.875vw, 1.875rem);

        @media (max-width: 767px) {
            grid-template-columns: repeat(2, 1fr);
        }

        .frutonyanya-grid-element {
            background: rgba(93, 127, 238, 0.2);
            border-radius: 20px;
            padding: clamp(0.75rem, 0.625rem + 0.625vw, 1.375rem) clamp(0.75rem, 0.275rem + 2.375vw, 3.125rem);
            color: #fff;

            @media (max-width: 767px) {
                grid-area: auto !important;
            }

            .frutonyanya-grid-element__title {
                font-size: clamp(1rem, .5rem + 2vw, 2.5rem);
                font-family: 'Unbounded';
                font-weight: 500;
                margin-bottom: clamp(0.5rem, 0.475rem + 0.125vw, 0.625rem);
            }

            .frutonyanya-grid-element__description {
                font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem);
                line-height: 120%;
            }
        }
    }
}

.frutonyanya-text-marked {
    font-family: 'Unbounded';
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
    color: rgba(127, 186, 36, 1);
}

.frutonyanya-about-company {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    width: 100%;
    min-height: 387px;
    background-image: url(/application/images/frutonyanya-about-company.webp);
    background-size: cover;
    background-position: 50% 50%;
    padding: 16px 8px;
    margin: clamp(2.5rem, 1.9688rem + 2.6563vw, 5.15625rem) 0;
    border-radius: 20px;

    .frutonyanya-about-company__element {
        background-color: rgba(117, 171, 33, 1);
        color: #fff;
        border-radius: clamp(5rem, 4.5rem + 2.5vw, 7.5rem) 8px clamp(5rem, 4.5rem + 2.5vw, 7.5rem) 8px;
        max-width: 100%;
        text-align: center;
        padding: clamp(1rem, 0.95rem + 0.25vw, 1.25rem) clamp(1rem, 0.45rem + 2.75vw, 3.75rem);
        font-size: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem);
        font-family: 'Unbounded';
        font-weight: 600;
        text-transform: uppercase;
        position: absolute;
        filter: drop-shadow(4px 8px 8px rgba(14, 13, 27, 0.25));

        @media (max-width: 767px) {
            position: static;
        }

        &.frutonyanya-about-company__element_small {
            font-size: 12px;
        }

        &:nth-child(1) {
            top: 45px;
            left: 6.5%;
        }        

        &:nth-child(2) {
            bottom: -19px;
            left: -2.5%;

            @media (max-width: 1280px) and (min-width: 768px) {
                left: -10px;
            }
        }

        &:nth-child(3) {
            top: -34px;
            right: 9.5%;
        }

        &:nth-child(4) {
            bottom: -3.5px;
            right: -5%;

            @media (max-width: 1280px) and (min-width: 768px) {
                bottom: 10%;
                right: -10px;
            }
        }
    }

    &.frutonyanya-about-company_plans {
        background-image: url(/application/images/frutonyanya-development-plans.webp);

        .frutonyanya-about-company__element {
            &:nth-child(1) {
                @media (max-width: 991px) and (min-width: 768px) {
                    top: 85px;
                    left: -1%;
                }
            }

            &:nth-child(2) {
                @media (max-width: 991px) and (min-width: 768px) {
                    bottom: -15px;
                    left: -1%;
                }
            }

            &:nth-child(3) {
                @media (max-width: 991px) and (min-width: 768px) {
                    top: -15px;
                    right: -1%;
                }
            }

            &:nth-child(4) {
                @media (max-width: 991px) and (min-width: 768px) {
                    bottom: 22%;
                    right: -1%;
                }
            }
        }
    }

    @media (max-width: 767px) {
        background-image: none !important;
        padding: 0;
        margin: 24px 0;
        min-height: unset;
    }
}

.frutonyanya-why-business-needs {
    padding: clamp(3.5rem, 2.9rem + 3vw, 6.5rem) 0;
    background-image: url(/application/images/frutonyanya-why-business-needs-curve.svg);
    background-position: 100% 135%;
    background-repeat: no-repeat;

    @media (max-width: 767px) {
        background-image: none;
    }

    @media (min-width: 2000px) {
        background-position: 100% 160%;
    }

    .frutonyanya-why-business-needs-flex {
        display: flex;        

        @media (max-width: 767px) {
            flex-wrap: wrap;
            flex-direction: column-reverse;
            gap: 16px;
        }
    }

    .frutonyanya-why-business-needs-img {
        min-width: 45%;
        max-width: 100%;

        @media (max-width: 767px) {
            width: 100%;
        }

        img {
            width: 94%;

            @media (max-width: 767px) {
                width: 100%;
            }
        }
    }

    .frutonyanya-why-business-needs-img-content {
        margin-top: -20px;
        text-align: center;
        color: white;
        background-color: rgba(255, 134, 0, 1);
        padding: clamp(0.625rem, 0.5rem + 0.625vw, 1.25rem) clamp(0.625rem, 0.35rem + 1.375vw, 2rem);
        border-radius: 12px;
        position: relative;
        z-index: 1;
    }
}

.frutonyanya-development-flex {
    padding: clamp(2rem, 1.4rem + 3vw, 5rem) 0;
    display: flex;    
    justify-content: space-between;
    align-items: flex-start;


    @media (max-width: 767px) {
        flex-wrap: wrap;
        justify-content: center;
        gap: 32px;
    }

    .frutonyanya-development-flex__element {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: clamp(1rem, 0.775rem + 1.125vw, 2.125rem);
        color: #fff;
        font-weight: 700;
        text-align: center;
        max-width: 250px;
        line-height: 120%;

        @media (max-width: 767px) {
            max-width: unset;
        }

        .frutonyanya-development-num {
            color: rgba(255, 255, 255, 0.3);
            font-size: clamp(2.5rem, 2.075rem + 2.125vw, 4.625rem);
            font-family: 'Unbounded';
            font-weight: 500;
            line-height: 100%;
        }

        .frutonyanya-development-check {
            background: linear-gradient(180deg, rgba(151, 225, 159, 0.2) 35.58%, rgba(233, 255, 235, 0.5) 100%);
            box-shadow: 0px 4px 4px 0px rgba(255, 255, 255, 0.25) inset;
            backdrop-filter: blur(3px);
            text-align: center;
            align-content: center;
            width: 48px;
            aspect-ratio: 1/1;
            border-radius: 50%;
            line-height: 0;

            img {
                width: 27px;
            }

            @media (max-width: 1366px) {
                display: none;
            }
        }
    }
}

.frutonyanya-development-bg {
    position: relative;
    overflow-x: clip;

    &:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url(/application/images/frutonyanya-targets-bg.svg);
        background-repeat: no-repeat;
        background-position: 50% 100%;
        bottom: 0;
        left: 0;
        opacity: .6;
        mix-blend-mode: color-burn;

        @media (min-width: 1900px) and (max-width: 1999px) {
            background-position: -40% -102%;
        }

        @media (min-width: 2000px) {
            background-size: cover;
            background-position: 50% 50%;
        }

        @media (max-width: 1199px) {
            display: none;
        }
    }
}


/*Радар*/

:root {
  /* Цвета */
  --g: #5b9bd5;
  --bg-dots: rgba(119, 164, 255,.8);
  --bg-lines: #77a4ff;
  --bg-screen: #0c153f;
  --bg-light: #2a5298;
  --bg-dark: #1a3a7a;
  --white-hi: #20348b;
  --white-low: #20348b;
  --base: #ffffff;
 
  /* Параметры радара */
  --dot-opacity: 0.5;
  --line-opacity: 0.25;
  --radial-opacity: 0.25;
  --trail-length: 270deg;
  --blend: color-dodge;
  --speed: 10s;

  /* контент радара */
    --pulse-radius: 6px;
    --pulse-color: rgba(218, 115, 2, 0.32);
}

.frutonyanya-radar {
    width: 747px;
    max-width: 100%;
    margin: clamp(2.5rem, 2.2rem + 1.5vw, 4rem) auto;
    aspect-ratio: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    z-index: 2;
    /*Почему-то без этого трансформа горизонтальная линия радара слабо видна*/
    transform: rotate(-0.01deg);

    @media (max-width: 767px) {
        margin: 0 0 16px 0;
    }
  
  &::before, &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    aspect-ratio: 1;
    border-radius:50%;
    transition: all .3s ease;
  }

  &::before{
    z-index:-1;
    background-color: var(--bg-screen);
    background-image:
        linear-gradient(to bottom, 
            transparent calc(50%),
            hsl(from var(--bg-lines) h s l / var(--line-opacity)), 
            transparent calc(50% + 1px)),
        linear-gradient(to right, 
            transparent calc(50%),
            hsl(from var(--bg-lines) h s l / var(--line-opacity)),
            transparent calc(50% + 1px)),
        linear-gradient(45deg, 
        transparent calc(50%),
            hsl(from var(--bg-lines) h s l / var(--line-opacity)), 
            transparent calc(50% + 1px)),
        linear-gradient(-45deg, 
            transparent calc(50%),
            hsl(from var(--bg-lines) h s l / var(--line-opacity)), 
            transparent calc(50% + 1px)),
        repeating-radial-gradient(
            hsl(from var(--bg-lines) h s l / var(--radial-opacity)) 0,
            transparent 1px 5vmin, 
            hsl(from var(--bg-lines) h s l /  var(--radial-opacity)) calc(5vmin + 1px)),
        linear-gradient(283deg, #20348b 55.13%, #1b2c78 91.48%);
  }
  
  &::after {
    background-image: conic-gradient(
        transparent                      var(--trail-length),
        rgba(10, 25, 70, 0.1)      calc(var(--trail-length) + 10deg),
        rgba(40, 90, 180, 0.25)    calc(var(--trail-length) + 30deg),
        rgba(80, 140, 220, 0.4)    calc(var(--trail-length) + 55deg),
        rgba(140, 190, 240, 0.6)   calc(var(--trail-length) + 84deg),
        rgba(180, 220, 255, 0.75)  calc(var(--trail-length) + 85deg),
        rgba(255, 255, 255, 0.9)   calc(var(--trail-length) + 65deg),
        black                      calc(var(--trail-length) + 87deg)
    );
    mix-blend-mode: var(--blend);
    animation: rotate var(--speed) linear infinite;
  }
}

.frutonyanya-radar__targets {
    width: 90%;
    height: 90%;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    background:
        radial-gradient(circle at 65% 15%, var(--bg-dots), transparent 6px),
        radial-gradient(circle at 67% 19%, var(--bg-dots), transparent 4px),
        radial-gradient(circle at 68% 16%, var(--bg-dots), transparent 6px),
        radial-gradient(circle at 59% 63%, var(--bg-dots), transparent 5px),
        radial-gradient(circle at 15% 36%, var(--bg-dots), transparent 6px),
        radial-gradient(circle at 19% 39%, var(--bg-dots), transparent 4px),
        radial-gradient(circle at 32% 70%, var(--bg-dots), transparent 6px),
        radial-gradient(circle at 28% 53%, var(--bg-dots), transparent 4px),
        radial-gradient(circle at 85% 36%, var(--bg-dots), transparent 6px),
        radial-gradient(circle at 89% 45%, var(--bg-dots) 3px, transparent 5px),
        radial-gradient(circle at 78% 70%, var(--bg-dots) 4px, transparent 6px);
    animation: move 120s infinite linear;
    background-position: 0 0;

    &::after, &::before {
        content: '';
        position: absolute;
        inset: 0;   
    }
  
    &::after {
        background:
            radial-gradient(circle at 10% 50%, var(--bg-dots), transparent 5px),
            radial-gradient(circle at 90% 50%, var(--bg-dots), transparent 5px),
            radial-gradient(circle at 60% 10%, var(--bg-dots), transparent 8px),
            radial-gradient(circle at 70% 90%, var(--bg-dots), transparent 5px);
        animation: move 200s infinite linear reverse, rotate 200s linear infinite;
    }
  
    &::before {
        background:
            radial-gradient(circle at 45% 50%, var(--bg-dots), transparent 4px),
            radial-gradient(circle at 49% 55%, var(--bg-dots), transparent 5px),
            radial-gradient(circle at 35% 35%, var(--bg-dots), transparent 6px),
            radial-gradient(circle at 45% 15%, var(--bg-dots), transparent 7px),
            radial-gradient(circle at 25% 35%, var(--bg-dots), transparent 8px);
        animation: move 600s infinite linear reverse, rotate 600s linear infinite;
    }
}

@keyframes rotate {
    to {transform: translate(-50%, -50%) rotate(1turn)}
}

@keyframes move {
    to {background-position: 0 67.5vmin;}
}

.frutonyanya-radar__content {
    @media (max-width: 767px) {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .radar-content {        
        color: #fff;
        width: 408px;
        max-width: 100%;
        text-align: center;
        
        @media (min-width: 768px) {
            position: absolute;
            animation: detect 10s ease 10s infinite;
        }

        @media (max-width: 767px) {
            display: flex;
            gap: 12px;
            align-items: start;
            text-align: left;
        }

        .radar-content__dot {
            animation: radial-orange-pulse-v 2s linear infinite;
            min-width: 18px;
            max-width: 18px;
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            background-color: rgba(255, 134, 0, 1);
            margin: 6px auto 13px auto;
            line-height: 140%;

            @media (max-width: 767px) {
                min-width: 12px;
                max-width: 12px;
            }
        }

        &.radar-content_1 {
            top: 11%;
            left: calc(55% - 204px);
            animation-delay: .6s;            
        }

        &.radar-content_2 {
            top: 33%;
            left: calc(15% - 204px);
            animation-delay: 8.5s;

            @media (max-width: 991px) {
                left: calc(22% - 204px);
            }

            .radar-content__dot {
                animation-delay: .4s;
            }
        }

        &.radar-content_3 {
            top: 66%;
            left: calc(16% - 204px);
            animation-delay: 7s;

            @media (max-width: 991px) {
                top: 68%;
                left: calc(24% - 204px);
            }

            .radar-content__dot {
                animation-delay: .8s;
            }
        }

        &.radar-content_4 {
            top: 76%;
            left: calc(77% - 204px);
            animation-delay: 4.4s;

            .radar-content__dot {
                animation-delay: 1.2s;
            }
        }

        &.radar-content_5 {
            top: 44%;
            left: calc(88% - 204px);
            animation-delay: 2.5s;

            @media (max-width: 991px) {
                left: calc(76% - 204px);
            }

            .radar-content__dot {
                animation-delay: 1.6s;
            }
        }
    }
}

.frutonyanya-risk-radar-flex {
    padding: clamp(1rem, 0.9rem + 0.5vw, 1.5rem) clamp(1rem, 0.8rem + 1vw, 2rem);
    border: 1px solid rgba(255, 134, 0, 1);
    border-radius: 20px;
    display: flex;    
    justify-content: space-between;
    gap: clamp(1rem, 0.8rem + 1vw, 2rem);

    @media (max-width: 767px) {
        flex-wrap: wrap;
        justify-content: center;
    }

    .frutonyanya-risk-radar-flex__content {
        max-width: 820px;
    }

    .frutonyanya-risk-radar-flex__img {
        width: 360px;
        max-width: 100%;
        text-align: center;

        img {

            @media (max-width: 767px) {
                max-width: 220px;
            }

            &:first-child {
                max-width: 280px;

                @media (max-width: 767px) {
                    max-width: 200px;
                    margin-bottom: 12px;
                }
            }
        }
    }
}

.frutonyanya-core-flex {
    display: flex;
    justify-content: space-between;
    gap: clamp(.5rem, 2vw, 2.5rem);
    position: relative;
    flex-wrap: wrap;
    padding-top: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);

    @media (max-width: 767px) {
        background-image: none;
    }

    &:before {
        content: '';
        position: absolute;
        background-position: 50% 50%;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url(/application/images/frutonyanya-core-bg.webp);
        width: 30%;
        aspect-ratio: 422/630;
        top: 0;
        left: 35%;
        z-index: 1;

        @media (max-width: 767px) {
            display: none;
        }
    }
    
    &:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 160%;
        top: -20%;
        left: 0;
        background-image: url(/application/images/frutonyanya-core-bg.svg);
        background-position: 50% 50%;
        background-size: contain;
        background-repeat: no-repeat;

        @media (max-width: 767px) {
            display: none;
        }
    }

    .frutonyanya-core-flex__element {
        width: calc(50% - 8px);
        max-width: 480px;
        padding: clamp(0.75rem, 0.55rem + 1vw, 1.75rem);
        border-radius: 20px;
        position: relative;
        z-index: 1;
        background-color: #fff;

        @media (max-width: 767px) {
            width: 100%;
            max-width: unset;            
        }

        h3 {
            text-align: left;
        }
    }
}

/* ══════════════════════════════
   Схема бизнес-процесса
   ══════════════════════════════ */

/* ─── Общие стили карточек ─── */
.frutonyanya-scheme-desktop__step,
.frutonyanya-scheme-mobile__step {
  background: #FEDCB6;
  border: 1.5px solid #fff;
  border-radius: 12px;
  padding: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  font-size: clamp(12px, 1.3vw, 16px);
  font-weight: 600;
  line-height: 1.4;
  color: #111;
  text-align: center;
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.frutonyanya-scheme-desktop__desc,
.frutonyanya-scheme-mobile__desc {
  background: #fff;
  border: 1.5px solid #FF8600;
  border-radius: 12px;
  padding: clamp(0.375rem, 0.3rem + 0.375vw, 0.75rem);
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 400;
  line-height: 1.55;
  color: #555;

  @media (max-width: 1199px) {
    padding: 4px;
  }
}


/* ══════════════════════════════
   DESKTOP — горизонтальная схема
   ══════════════════════════════ */

.frutonyanya-scheme {
    padding-top: clamp(2rem, 1.4rem + 3vw, 5rem);
}

.frutonyanya-scheme-desktop {
  display: flex;
  align-items: center;
  gap: 0;
  padding-bottom: 200px;
}

.frutonyanya-scheme-desktop__step {
  flex: 1;
  min-width: 0;
}

.frutonyanya-scheme-desktop__arrow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(18px, 2vw, 28px);
  position: relative;
}

.frutonyanya-scheme-desktop__description {
  margin-top: 10px;
  position: absolute;
  text-align: center;
  width: 10.6vw;
  min-width: 200px;

  @media (max-width: 1199px) and (min-width: 992px) {
    min-width: 160px;
  }

  @media (max-width: 991px) {
    min-width: 120px;
  }

  @media (min-width: 2000px) {
    max-width: 15%;
  }
}

.frutonyanya-scheme-desktop__dashed-line {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

.frutonyanya-scheme-desktop__dashed-line-inner {
  width: 2px;
  border-left: 3px dashed #FF8600;
  margin-left: calc(50% - 1px);
  flex-shrink: 0;
  min-height: 64px;
}


/* ══════════════════════════════
   MOBILE — вертикальная схема
   ══════════════════════════════ */
.frutonyanya-scheme-mobile {
  display: none;
  flex-direction: column;

  @media (max-width: 767px) {
    display: flex;
  }
}

.frutonyanya-scheme-mobile__row {
  display: flex;
  gap: 0;
}

.frutonyanya-scheme-mobile__left {
  width: 154px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.frutonyanya-scheme-mobile__arrow-wrap {
  display: flex;
  align-items: center;
  width: 60%;
  min-height: 40px;
  flex-shrink: 0;
}

.frutonyanya-scheme-mobile__arrow-img {
  flex-shrink: 0;
  transform: rotate(90deg);
}

.frutonyanya-scheme-mobile__dashed-line {
  flex: 1;
  height: 2px;
  border-top: 2px dashed #FF8600;
}

.frutonyanya-scheme-mobile__right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 8px;
  transform: translateY(45px);
}

.frutonyanya-scheme-desktop {
  @media (max-width: 767px) {
    display: none;
  }
}

/* Переключалка почти как на System Electric*/

@media (max-width: 991px) {
  .sys-el-gen-ai-switcher .dependent-block .d-grid.grid-items_2 {
    display: block !important;
  }
}
.sys-el-gen-ai-switcher .dependent-block .d-grid.grid-items_2 img {
  display: block;
  margin: 0 auto;
}
.sys-el-gen-ai-switcher .dependent-block h4 {
  text-align: left;
}
@media (min-width: 768px) {
  .sys-el-gen-ai-switcher .dependent-block h4 {
    display: none;
  }
}

.sys-el-gen-ai-switcher {
  display: grid;
  grid-template-columns: 44% minmax(auto, 1fr);
  gap: clamp(32px, 4.762vw - 4.571px, 64px);
}
@media (max-width: 991px) {
  .sys-el-gen-ai-switcher {
    grid-template-columns: 1fr;
  }
}

.sys-el-gen-ai-switcher .sys-el-gen-ai-btns-wrap {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    gap: 24px;


    .sys-el-gen-ai-btn {
        display: block !important;
        padding: clamp(16px, 2.381vw - 2.286px, 32px) 88px clamp(16px, 2.381vw - 2.286px, 32px) clamp(24px, 2.381vw + 5.714px, 40px) !important;
        text-align: left;
        white-space: normal;
        border: 1px solid rgba(0, 0, 0, 0.5);
        border-radius: 12px;
        margin: 0;

        &:before {
            top: 0;
            left: 0;
        }

        &:after {
            position: absolute;
            content: "";
            top: calc(50% - 24px);
            right: 40px;
            width: 48px;
            height: 48px;
            background: url(/application/images/arrow-in-round-gray.svg) no-repeat center/auto;
            border-radius: 50%;
            border: 1px solid rgba(0, 0, 0, 0.5);
            transition: all 0.3s ease-in-out;
        }

        .li_orange-title {
            font-family: 'Unbounded';
            font-weight: 400;
            color: rgba(0,0,0,.5);
            font-size: clamp(0.875rem, 0.8375rem + 0.1875vw, 1.0625rem);
        }


        &.li_orange_active {
            background: rgba(127, 186, 36, 1);
            border: 1px solid rgba(127, 186, 36, 1);

            &:after {
                background: rgba(255, 255, 255, 0.3) url(/application/images/arrow-in-round-white.svg) no-repeat center/auto;
                transition: all 0.3s ease-in-out;
                border: 1px solid transparent;
            }

            &:hover {
                &:after {
                    background: rgba(255, 255, 255, 0.3) url(/application/images/arrow-in-round-white.svg) no-repeat center/auto;
                    transition: all 0.3s ease-in-out;
                    border: 1px solid transparent;
                }
            }

            .li_orange-title {
                color: #fff;
            }

            .dependent-block {
                display: block;
            }
        }
    }
}


@media (max-width: 991px) {
  .sys-el-gen-ai-switcher .sys-el-gen-ai-btns-wrap .sys-el-gen-ai-btn {
    display: block !important;
    text-align: left;
    color: #fff !important;
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(22px);
  }
  .sys-el-gen-ai-switcher .sys-el-gen-ai-btns-wrap .sys-el-gen-ai-btn:before {
    display: none;
  }
  .sys-el-gen-ai-switcher .sys-el-gen-ai-btns-wrap .sys-el-gen-ai-btn:after {
    position: absolute;
    content: "";
    top: 21px;
    right: 21px;
    width: 36px;
    height: 36px;
    background: url(/application/images/arrow-in-round-gray.svg) no-repeat center;
    background-size: 70%;
    transform: rotate(90deg);
    border-radius: 50%;
    border: 1px solid transparent;
    transition: all 0.3s ease-in-out;
  }
  .sys-el-gen-ai-switcher .sys-el-gen-ai-btns-wrap .sys-el-gen-ai-btn.li_orange_active {
    font-weight: 700 !important;
    border: 1px solid rgba(127, 186, 36, 1);
  }
  .sys-el-gen-ai-switcher .sys-el-gen-ai-btns-wrap .sys-el-gen-ai-btn.li_orange_active .d-block.d-lg-none {
    padding-top: 28px;
  }
  .sys-el-gen-ai-switcher .sys-el-gen-ai-btns-wrap .sys-el-gen-ai-btn.li_orange_active .d-block.d-lg-none p:last-child {
    padding-bottom: 0;
  }
  .sys-el-gen-ai-switcher .sys-el-gen-ai-btns-wrap .sys-el-gen-ai-btn.li_orange_active:after {
    transition: all 0.3s ease-in-out;
    transform: rotate(-90deg);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .sys-el-gen-ai-switcher .sys-el-gen-ai-btns-wrap .sys-el-gen-ai-btn {
    padding: 28px 58px 28px 24px !important;
  }
}
@media (max-width: 767px) {
  .sys-el-gen-ai-switcher .sys-el-gen-ai-btns-wrap .sys-el-gen-ai-btn {
    padding: 30px 16px !important;
  }
  .sys-el-gen-ai-switcher .sys-el-gen-ai-btns-wrap .sys-el-gen-ai-btn.li_orange_active {
    padding: 30px 16px 16px 16px !important;
  }
  .sys-el-gen-ai-switcher .sys-el-gen-ai-btns-wrap .sys-el-gen-ai-btn:after {
    position: absolute;
    content: "";
    top: 24px;
    right: 16px;
    width: 30px;
    height: 30px;

    @media (max-width: 767px) {
        top: 32px;
    }
  }
}

/*Цитаты*/

.frutonyanya-quotes {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 0.7rem + 1.5vw, 2.5rem);

    .frutonyanya-quotes__element {
        width: calc(50% - clamp(1rem, 0.7rem + 1.5vw, 2.5rem)/2);
        border-radius: 20px;
        padding: clamp(1rem, 0.8rem + 1vw, 2rem);

        @media (max-width: 991px) {
            width: 100%;
        }

        &:first-child {
            background-color: rgba(255, 245, 235, 1);
        }

        &:last-child {
            background-color: rgba(242, 250, 229, 1);

        }

        .frutonyanya-citation-content {
            margin-top: clamp(1rem, 0.825rem + 0.875vw, 1.875rem);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: calc(100% - 45px - clamp(1rem, 0.825rem + 0.875vw, 1.875rem));
        }

        .citation_person .face {
            padding: 0;
            line-height: 0;

            img {
                max-width: 68px;
                max-height: 68px;
            }
        }
    }
}


/* Стили линии как на Метро*/

.frutonyanya-unique-flex {
    display: flex;
    gap: clamp(1rem, 0.2rem + 4vw, 5rem);
    color: #fff;

    @media (max-width: 767px) {
        display: block;
    }

    .frutonyanya-unique-flex__left {
        width: 100%;
        max-width: 600px;
        position: relative;

        @media (max-width: 767px) {
            display: none;
        }
    }

    .frutonyanya-unique-flex__right {
        max-width: 54%;

        @media (max-width: 767px) {
            max-width: 100%;
        }
    }
}

.frutonyanya-unique-sticky {
    position: sticky;
    top: 100px;

    @media (max-width: 767px) {
        position: static;
    }
}

.frutonyanya-unique-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 55px;

    .timeline-element {      
        min-height: 153px;
        max-width: 340px;
        width: 100%;
        position: relative;
        position: relative;
        text-align: center;
        margin: 20px 0;

        @media (max-width: 1199px) and (min-width: 768px) {
            max-width: calc(33% - 20px);
        }

        @media (max-width: 767px) {
            min-height: unset;
            max-width: 100%;
            align-items: start;            
            text-align: left;
            margin: 0;
        }

        &:not(:last-child) {
            &:after {
                content: '';
                width: 64px;
                aspect-ratio: 1/1;
                position: absolute;
                right: -38px;
                top: calc(50% - 32px);
                background-image: url(/application/images/metro-timeline-arrow.svg);
                background-size: contain;
                background-position: 50% 50%;

                @media (max-width: 767px) {
                    width: 44px;
                    right: calc(50% - 22px);
                    top: unset;
                    bottom: -31px;
                    transform: rotate(90deg);
                }
            }
        }

        .timeline-element-inner {
            width: 100%;
            height: 100%;
            background-color: rgba(9, 12, 35, 80%);
            backdrop-filter: blur(21px);
            border-radius: 20px;
            padding: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
            font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
            display: flex;
            align-items: center;
            position: relative;
            z-index: 1;
            gap: 12px;
        }

        .timeline-element__logo {
            width: 44px;
            aspect-ratio: 1/1;
            position: absolute;
            top: -23px;
            left: calc(50% - 22px);

            @media (max-width: 767px) {
                width: 32px;
                min-width: 32px;
                position: static;
            }
        }
    }
}

.folding-section {
    display: flex;
    gap: 42px;

    @media (max-width: 991px) {
        display: block;
    }

    .folding-section-border {
        width: 100%;
        max-width: 6px;
        position: relative;

        @media (max-width: 991px) {
            display: none;
        }

        .folding-section-border__inner {
            width: 100%;
            min-height: 322px;
            background: rgba(127, 186, 36, 1);
            border-radius: 28px;
            transition: .8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s;
            will-change: height;
        }
    }

    .folding-section-content {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 32px;

        .folding-section-content__element {
            will-change: margin;
            border: 1px solid rgba(255, 255, 255, 0.28);
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(21px);
            padding: clamp(1rem, 0.675rem + 1.625vw, 2.625rem);
            border-radius: 24px;
            position: relative;
            transition: .4s ease-in-out;

            .folding-title-flex {
                display: flex;
                flex-direction: column;
                gap: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
                margin-bottom: clamp(0.5rem, 0.3rem + 1vw, 1.5rem);

                @media (max-width: 767px) {
                    flex-direction: row;
                }
            }

            .folding-title-flex__num {
                color: rgba(127, 186, 36, 1);
                font-family: 'Unbounded';
                font-weight: 500;
                text-transform: uppercase;
                font-size: clamp(0.875rem, 0.7rem + 0.875vw, 1.75rem);
            }

            .folding-title-flex__title {
                font-family: 'Unbounded';
                font-weight: 500;
                font-size: clamp(0.875rem, 0.7rem + 0.875vw, 1.75rem);
            }
        }
    }
}

.frutonyanya-business-effect {
    display: flex;
    justify-content: space-between;
    gap: clamp(.5rem, 2vw, 2.5rem);
    position: relative;
    flex-wrap: wrap;
    padding-top: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);

    @media (max-width: 767px) {
        gap: 0;
    }

    &:before {
        content: '';
        position: absolute;
        background-position: 50% 50%;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url(/application/images/frutonyanya-lighthouse.webp);
        height: 100%;
        aspect-ratio: 772 / 595;
        top: 0;
        left: 24%;
        z-index: 1;

        @media (max-width: 1366px) and (min-width: 1200px) {
            height: 80%;
            top: 10%;
            left: 30%;
        }

        @media (max-width: 1199px) and (min-width: 992px) {
            height: 50%;
            top: 25%;
            left: 34%;
        }

        @media (max-width: 991px) {
            display: none;
        }
    }

    .frutonyanya-business-effect__element {
        position: relative;
        border-radius: 16px;
        width: calc(50% - 8px);
        max-width: 460px;
        padding: clamp(1rem, 0.8rem + 1vw, 2rem);
        color: #fff;

        @media (max-width: 767px) {
            width: 100%;
            max-width: unset;
        }

        /* Градиентная рамка */
        &::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px; /* толщина рамки */
            background: linear-gradient(107.56deg, #FFFFFF -28.67%, rgba(255, 255, 255, 0) 70.17%);
            -webkit-mask: 
                linear-gradient(#fff 0 0) content-box, 
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }

        /* Фон карточки */
        &::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(104.6deg, rgba(29, 57, 140, 0) 2.1%, #15277A 134.27%);
            z-index: -1;
        }

        &:nth-child(even) {
            &::before {
                background: linear-gradient(287.56deg, #FFFFFF -28.67%, rgba(255, 255, 255, 0) 70.17%);
            }
        }

        .business-effect-title {
            color: rgba(255, 134, 0, 1);
            font-family: 'Unbounded';
            font-weight: 500;
            font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
            line-height: 120%;

            .business-effect-title__num {
                font-size: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
                margin: clamp(0.5rem, 0.4rem + 0.5vw, 1rem) 0;
            }
        }
    }
}

.frutonyanya-mayak {
    position: relative;

    &:after {        
        @media (min-width: 1200px) {
            content: '';
            position: absolute;
            width: 33%;
            aspect-ratio: 13 / 8;
            right: 0;
            bottom: 0;
            background-image: url(/application/images/frutonyanya-mayak-bg-curve.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 110% 0%;
        }
    }
}

.business-effect-citation {
    color: #fff;
    padding-top: clamp(3.5rem, 2.9rem + 3vw, 6.5rem);
    max-width: 780px;

    .citation_person .face {
        padding: 0;
        line-height: 0;

        img {
            max-width: 68px;
            max-height: 68px;
        }
    }
}

.frutonyanya-quality-transformation {
    display: flex;
    gap: clamp(1rem, 0.7rem + 1.5vw, 2.5rem);
    

    @media (max-width: 767px) {
        flex-wrap: wrap;
    }

    .frutonyanya-quality-transformation__element {
        border: 1px solid rgba(255, 134, 0, 1);; 
        border-radius: 20px;
        padding: clamp(1rem, 0.8rem + 1vw, 2rem);
        width: calc(33% - clamp(1rem, 0.7rem + 1.5vw, 2.5rem)/3);

        @media (max-width: 767px) {
            width: 100%;
        }

        .transformation-title {
            color: rgba(255, 134, 0, 1);
            font-family: 'Unbounded';
            font-weight: 500;
            font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
            margin-bottom: 16px;
        }
    }
}

.frutonyanya-form {
    background-image: url(/application/images/frutonyanya-form-bg.webp);
    background-size: cover;
    background-position: 50% 50%;

    h2 {
        font-weight: 400;
    }
}