* {
    box-sizing: border-box;
    --main-pink: #FE0FBA;
    --main-pink-50: #FE0FBABA;
    --secondary-pink: #FFA6E5;
    --tertiary-pink: #FFDBF5;
}

@font-face {
    font-family: 'Raleway';
    src: url('/local/templates/aifood/assets/fonts/Raleway-VariableFont_wght.ttf') format('truetype');
    font-display: swap;
    font-weight: 100 900;
}

@font-face {
    font-family: 'Red Hat Text';
    src: url('/local/templates/aifood/assets/fonts/RedHatText-VariableFont_wght.ttf') format('truetype');
    font-display: swap;
    font-weight: 300 700;
}

html, body {
    margin: 0;
    background-color: #0D0C0C;
    font-family: 'Raleway', sans-serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

h2 {
    font-weight: 700;
    font-size: 64px;
    margin: 0;
}

img {
    max-width: 100%;
    max-height: 100%;
}

.container {
    max-width: 1210px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
}

@media (max-width: 1079px) {
    h2 {
        font-size: 48px;
    }
}

@media (max-width: 767px) {
    h2 {
        font-size: 32px;
    }
}

/* region orbit block*/
.orbit::before {
    box-sizing: content-box;
    position: absolute;
    content: "";
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23FFFEFF'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center bottom;
    aspect-ratio: 1/1;
    height: calc(100% + 8px);
    border-radius: 50%;
    animation: orbit 4s infinite linear;
    transform-origin: center;

    opacity: 0;
    top: -4px;
    --radius: 6px;
}

@keyframes orbit {
    0% { /* left side start*/
        transform: translateX(0) rotate(90deg);
        left: calc(0px - var(--radius));
    }
    10% { /* top left corner*/
        transform: translateX(0) rotate(180deg);
        left: calc(0px - var(--radius));
    }
    30% {
        opacity: 0;
    }
    42% { /* top right corner*/
        transform: translateX(-100%) rotate(180deg);
        left: calc(100% + var(--radius));
        opacity: 1;
    }
    50% { /* right side middle*/
        transform: translateX(-100%) rotate(270deg);
        left: calc(100% + var(--radius));
    }
    58% { /* bottom right corner*/
        transform: translateX(-100%) rotate(360deg);
        left: calc(100% + var(--radius));
        opacity: 1;
    }
    70% {
        opacity: 0;
    }
    90% { /* bottom left corner*/
        transform: translateX(0) rotate(360deg);
        left: calc(0px - var(--radius));
    }
    100% { /* left side end */
        transform: translateX(0) rotate(450deg);
        left: calc(0px - var(--radius));
    }

}

/* endregion orbit block*/

/*region hero*/
#hero {
    position: relative;
    color: #FFF;
    padding-bottom: 150px;
}

.hero-logo {
    position: relative;
    border-top: none;
    border-left: none;
    width: fit-content;
    padding-top: 40px;
}

.hero-logo img {
    width: 170px;
    height: 75px;
    object-fit: cover;
}

.hero-logo:before {
    content: "";
    display: block;
    width: 771px;
    height: 271px;
    border-radius: 0 0 160px 0;
    border: 2px solid #93ECFC80;
    border-top: 0;
    box-shadow: 0 0 20px 0 #FFFEFE50;
    position: absolute;
    bottom: -37px;
    right: -137px;
}

.hero-title {
    font-size: 42px;
    font-weight: 600;
    margin-top: 135px;
}

.hero-text {
    font-size: 32px;
    font-weight: 500;
    max-width: 480px;
    margin-top: 15px;
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 27px;
    margin-top: 40px;
}

.hero-button {
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 17px;
    cursor: pointer;
    color: #FFF;
    border-radius: 100px;
    font-size: 24px;
    line-height: 28px;
    width: 360px;
    max-width: 100%;
    box-shadow: 0 0 13px 0 #FFFEFE80;
}

.hero-button.consult {
    position: relative;
    font-weight: 600;
    background: linear-gradient(var(--main-pink), var(--main-pink)) padding-box, linear-gradient(to right, var(--main-pink), #FFF) border-box;
    border: 2px solid transparent;
    text-decoration: none;
}

.hero-button.video {
    font-weight: 400;
    background-color: #0D0C0C;
    border: 2px solid #FFFAFE;
    gap: 8px;
    text-decoration: underline;
    text-decoration-skip-ink: none
}

.hero-button.video::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 26px;
    background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_7269_370)'%3E%3Cpath d='M12.9998 23.8333C7.01659 23.8333 2.1665 18.9832 2.1665 13C2.1665 7.01671 7.01659 2.16663 12.9998 2.16663C18.9831 2.16663 23.8332 7.01671 23.8332 13C23.8332 18.9832 18.9831 23.8333 12.9998 23.8333ZM12.9998 21.6666C15.2984 21.6666 17.5028 20.7535 19.1281 19.1282C20.7534 17.5029 21.6665 15.2985 21.6665 13C21.6665 10.7014 20.7534 8.49702 19.1281 6.8717C17.5028 5.24639 15.2984 4.33329 12.9998 4.33329C10.7013 4.33329 8.49689 5.24639 6.87158 6.8717C5.24626 8.49702 4.33317 10.7014 4.33317 13C4.33317 15.2985 5.24626 17.5029 6.87158 19.1282C8.49689 20.7535 10.7013 21.6666 12.9998 21.6666ZM11.507 9.11621L16.7926 12.6392C16.852 12.6788 16.9008 12.7324 16.9345 12.7953C16.9682 12.8583 16.9858 12.9286 16.9858 13C16.9858 13.0714 16.9682 13.1416 16.9345 13.2046C16.9008 13.2675 16.852 13.3212 16.7926 13.3607L11.5059 16.8837C11.4407 16.9269 11.3651 16.9517 11.2869 16.9554C11.2088 16.9591 11.1312 16.9415 11.0622 16.9047C10.9932 16.8678 10.9355 16.8129 10.8952 16.7459C10.8549 16.6789 10.8334 16.6022 10.8332 16.524V9.47588C10.8333 9.3975 10.8547 9.32063 10.8951 9.25345C10.9355 9.18627 10.9933 9.1313 11.0625 9.09439C11.1316 9.05748 11.2095 9.04002 11.2877 9.04386C11.366 9.04771 11.4418 9.07271 11.507 9.11621Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_7269_370'%3E%3Crect width='26' height='26' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
}

.hero-pic {
    position: absolute;
    top: 0;
    right: -85px;
    width: 730px;
    height: 825px;
    pointer-events: none;
    z-index: 1;
}

.hero-pic::before {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: 1px;
    box-shadow: 0 0 370px 230px var(--main-pink-50);
    background-color: var(--main-pink-50);
    top: 50%;
    left: 50%;
    z-index: -1;
    animation-name: hero-shine;
    animation-duration: 2500ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    animation-direction: alternate;
}

@keyframes hero-shine {
    0% {
        opacity: 0.85;
        box-shadow: 0 0 370px 230px var(--main-pink-50);
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 370px 250px var(--main-pink-50);
    }
}

.hero-lang {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
}
.hero-lang .dropdown {
    width: 120px;
}

@media (max-width: 1079px) {
    .hero-logo {
        padding-top: 0;
    }

    .hero-logo::before {
        width: 360px;
        height: 210px;
        bottom: 0;
        right: -50px;
        border-radius: 100px;
    }

    .hero-title {
        margin-top: 40px;
    }

    .hero-pic {
        width: 480px;
        left: 450px;
    }
}

@media (max-width: 767px) {

    .hero-title {
        margin-top: 60px;
    }

    .hero-text {
        font-size: 22px;
    }

    .hero-buttons {
        align-items: center;
    }

    .hero-button {
        font-size: 18px;
    }

    .hero-pic {
        display: none;
        width: 300px;
        height: 300px;
    }

    .hero-pic::before {
        top: -50%;
        right: -50%;
    }

    .hero-pic::after {
        display: none;
    }

    .hero-lang > span {
        display: none;
    }
}

/*endregion hero*/

/*region how*/
#how {
    background-color: #000000E6;
    color: #FFF;
    padding: 75px 0 95px;
}

.how-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 100px;
}

.how-step {
    position: relative;
}

.how-step_number {
    position: relative;
    z-index: 1;
    width: 134px;
    height: 134px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFF;
    color: var(--main-pink);
    margin: 35px auto;
    box-shadow: 0 4px 4px 0 #00000040, 0 0 250px 35px #FFF;

    font-family: 'Red Hat Text', sans-serif;
    font-weight: 600;
    font-size: 48px;
}

.active .how-step_number {
    animation-name: number;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
}

@keyframes number {
    from {
        background-color: #FFF;
        color: var(--main-pink);
    }
    50% {
        background-color: var(--main-pink);
        color: #FFF;
    }
    to {
        background-color: #FFF;
        color: var(--main-pink);
    }
}


.how-step_ring {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 4px 0 #00000040;
    border: 1px solid #FFF;
}

.active .how-step_ring {
    animation-name: ring;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
}

.how-step:first-child .how-step_ring:before,
.how-step:last-child .how-step_ring:after {
    display: none;
}

@keyframes ring {
    from {
        width: 100%;
        height: 100%;
    }
    50% {
        width: 150%;
        height: 150%;
    }
    to {
        width: 100%;
        height: 100%;
    }
}

.how-step_ring::before,
.how-step_ring::after {
    content: '';
    display: block;
    position: absolute;
    width: 90px;
    height: 1px;
    background-color: #fff;
    top: 50%;
}

.how-step_ring::before {
    right: 100%;
}

.how-step_ring::after {
    left: 100%;
}

.how-step_name {
    font-weight: 700;
    font-size: 36px;
    margin-top: 70px;
    height: 85px;
    opacity: 0;
    transition: 2s opacity, 2s transform;
    transform: translateY(-1rem);
}

.active .how-step_name {
    opacity: 1;
    transform: translateY(0px);

}

.how-step_text {
    font-weight: 300;
    font-size: 24px;
    margin-top: 28px;
    transition: opacity 2s 100ms;
    opacity: 0;
}

.active .how-step_text {
    opacity: 1;
}

@media (max-width: 1079px) {
    .how-steps {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 50px;
    }

    .how-step {
        display: grid;
        grid-template-columns: 150px auto;
        grid-template-rows: auto 1fr;
        grid-template-areas: 'num name' 'num text';
        gap: 15px;
        height: 170px;
    }

    .how-step_number {
        width: 100px;
        height: 100px;
        grid-area: num;
        margin: 0;
    }

    .how-step_name {
        grid-area: name;
        margin: 0;
        height: auto;
    }

    .how-step_text {
        grid-area: text;
        margin: 0 0 auto;
    }

    .how-step_ring::before,
    .how-step_ring::after {
        width: 1px;
        height: 45px;
        left: 50%;
        top: unset;
    }

    .how-step_ring::before {
        bottom: 100%;
    }

    .how-step_ring::after {
        top: 100%;
    }

}

@media (max-width: 767px) {
    .how-step {
        display: grid;
        grid-template-columns: 50px auto;
        height: auto;
        min-height: 100px;
        gap: 10px 20px;
    }

    .how-step_number {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    .how-step_name {
        font-size: 22px;
    }

    .how-step_text {
        font-size: 16px;
        line-height: 18px;
    }

}

/*endregion how*/

/*region advantages*/
#advantages {
    background-color: #fff;
    padding: 63px 0 82px;
}

.advantages-title {
    color: var(--main-pink);
}

.advantages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 70px;
}


.advantage {
    padding: 70px 50px;
    border-radius: 50px;
    opacity: 0;
    transform: translateX(-10px);
    transition: 1000ms;
}

.advantage.active {
    opacity: 1;
    transform: translateX(0px);
}

.advantage:nth-child(1) {
    background-color: var(--tertiary-pink);
}

.advantage:nth-child(2) {
    background-color: var(--secondary-pink);
}

.advantage:nth-child(3) {
    background-color: var(--main-pink);
    color: #FFF;
}


.advantage-name {
    font-weight: 600;
    font-size: 24px;
    height: 56px;
    text-transform: uppercase;
}

.advantage-text {
    font-weight: 300;
    font-size: 20px;
    margin-top: 18px;
}

@media (max-width: 1079px) {
    .advantage {
        padding: 45px 30px;
        border-radius: 50px;
    }
}

@media (max-width: 767px) {

    .advantages {
        grid-template-columns: 1fr;
    }

    .advantage-name {
        height: auto;
        font-size: 22px;
    }

    .advantage-text {
        margin-top: 10px;
    }
}

/*endregion advantages*/

/*region technology*/
#technology {
    padding: 70px 0 85px;
    background-color: #0D0C0C;
    color: #FFF;
}

.technology {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 50px;
}

.technology-title {

}

@property --progress {
    syntax: "<percentage>";
    initial-value: 0%;
    inherits: false;
}

.technology-pic {
    position: relative;
    width: fit-content;
    height: fit-content;
}

.technology-pic::before {
    content: "";
    position: absolute;
    display: block;
    inset: 0;
    z-index: 1;
    background-image: conic-gradient(from -98deg, #FFF 0%, #FFF var(--progress), #0D0C0C var(--progress), #0D0C0C 100%);
    mix-blend-mode: darken;
    transition: --progress 3s linear 0ms;
}

.technology-pic.active::before {
    --progress: 100%;
}

.technology-list {
    font-size: 36px;
    list-style: none;
}

.technology-list li {
    position: relative;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 250ms linear, transform 250ms linear;
}

.technology-list li.active {
    opacity: 1;
    transform: translateX(0);
}

.technology-list li::before {
    content: "";
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: var(--main-pink);
    top: 50%;
    left: -40px;
    box-shadow: 0 0 31px 0 #FFF;
    transition: 250ms transform 100ms;
    transform: scale(0.1);
}

.technology-list li.active::before {
    transform: scale(1);
}

@media (max-width: 767px) {
    .technology {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .technology-pic {
        display: flex;
        justify-content: center;
        width: 200px;
    }

    .technology-list {
        width: fit-content;
        font-size: 20px;
    }

    .technology-list li {
        position: relative;
        margin-bottom: 15px;
    }

}

/*endregion technology*/

/*region integration*/

#integration {
    padding: 65px 0 35px;
    background-color: #FFF;
}

.integration {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: auto 1fr;
}

.integration-title {
    color: var(--main-pink);
    width: 700px;
    z-index: 1;
}

.integration-text {
    color: #0D0C0C;
    font-weight: 500;
    font-size: 32px;
    margin-top: 35px;
    max-width: 580px;
}

.integration-pic {
    grid-row: 1/3;
    grid-column: 2/2;
    justify-self: center;
}

@media (max-width: 1078px) {
    .integration {
        grid-template-columns: 3fr 2fr;
    }

    .integration-title {
        width: auto;
    }

    .integration-text {
        font-size: 24px;

    }
}

@media (max-width: 767px) {
    .integration {
        grid-template-columns: 1fr;
    }

    .integration-pic {
        grid-row: 2/2;
        grid-column: unset;
        margin-top: 30px;
    }

    .integration-text {
        font-size: 20px;

    }
}


/*endregion integration*/

/*region contact*/
#contact {
    color: #FFF;
    padding: 75px 0 90px;
}

.contact {
    display: grid;
    grid-template-columns: 3fr 2fr
}

.contact-form {
    display: flex;
    flex-direction: column;
}

.contact-form label {
    padding: 0 30px;
    font-size: 12px;
    margin: 12px 0 4px;
    opacity: 0;
    transition: 500ms;
}

.contact-form label.active {
    opacity: 1;

}

.contact-form_input {
    border-radius: 84px;
    border: 1px solid #FFF;
    background: transparent;
    color: #FFF;
    padding: 15px 30px;
    font-size: 28px;
    line-height: 28px;
    opacity: 0;
    transform: translateY(-10px);
    transition: 500ms;
}

.contact-form_input.active {
    transform: translateY(0px);
    opacity: 1;
}

.contact-form_input:not(:focus):invalid {
    border: 1px solid #FFF;
}

.contact-form_input:invalid {
    border: 1px solid red;
}

.contact-form_submit {
    border-radius: 84px;
    padding: 15px 30px;
    position: relative;
    font-weight: 500;
    font-size: 24px;
    background: linear-gradient(#0D0C0C, #0D0C0C) padding-box, linear-gradient(to right, var(--main-pink), #FFF) border-box;
    border: 2px solid transparent;
    color: var(--main-pink);
    margin-top: 52px;
    cursor: pointer;
    box-shadow: 0 1px 13px 0 #FFFFFF80;
    z-index: 10;
    opacity: 0;
    transform: translateY(10px);
    transition: 250ms;
}

.contact-form_submit:disabled {
    filter: grayscale(1);
    opacity: 0.25;
    pointer-events: none;
}

.contact-form_submit.active {
    opacity: 1;
    transform: translateY(0px);
}

.contact-success {
    display: none;
    font-size: 24px;
    justify-self: center;
    align-self: center;
    text-align: center;
    padding: 15px;
}

@media (max-width: 1079px) {
    .contact-form_input,
    .contact-form_submit {
        padding: 10px 15px;
        font-size: 18px;
    }

    .contact-form_submit {
        margin-top: 30px;
    }
}

@media (max-width: 769px) {
    .contact {
        grid-template-columns: 1fr;
    }
}

/*endregion contact*/

/*region footer*/
footer {
    background-color: var(--main-pink);
    color: #FFF;
}

.footer {
    display: grid;
    grid-template-columns: 260px 150px auto 295px;
    grid-template-areas: 'logo address social ukraine' 'copyright address social ukraine';
    align-items: end;
    gap: 50px;
    padding: 37px 0 60px;
}

.footer-logo {
    grid-area: logo
}

.footer-copyright {
    grid-area: copyright
}

.footer-address {
    grid-area: address;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-address a {
    color: white;
    text-transform: none;
    text-decoration: none;
}

.footer-social {
    grid-area: social;
    display: flex;
    align-items: center;
    gap: 23px;
    margin-right: 5px;
}

.footer-ukraine {
    grid-area: ukraine;
    display: flex;
    align-items: center;
    gap: 17px;
    text-transform: uppercase;
}

.footer-pic {
    position: absolute;
    right: -76px;
    bottom: 0;
    pointer-events: none;
    overflow: clip;
}

.footer-pic img {
    position: relative;
    bottom: -5px;
}

@media (max-width: 1079px) {
    .footer {
        display: grid;
        grid-template-columns: auto 160px auto 150px;
        gap: 30px;
    }

    .footer-social {
        gap: 10px;
    }
}

@media (max-width: 769px) {

    .footer {
        grid-template-columns: 1fr;
        grid-template-areas: "social" "address" "logo" "copyright" "ukraine";
        justify-items: center;
    }

    .footer-social {
        margin: 0;
    }

    .footer-pic {
        opacity: .4;
    }
}

/*endregion footer*/

/*region video*/
#video {
    display: none;

    position: fixed;
    inset: 0;
    z-index: 1000;
}

#video.show {
    display: block;
}

#video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100vw;
}

#video::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #000C;
    backdrop-filter: blur(5px);
}

/*endregion video*/

/*region dropdown*/
.dropdown {
    position: relative;
    display: inline-block;
    width: max-content
}

.dropdown img {
    object-fit: contain;
    object-position: center;
    max-width: 1.5em;
    height: 100%;
}

.dropdown-selected {
    cursor: pointer;
    padding: 10px;
}

.dropdown-content {
    top: 100%;
    right: 0;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
    width: 100%;
}

.dropdown.open .dropdown-content {
    opacity: 1;
    pointer-events: auto;
    height: auto;
}

.dropdown-item {
    border: none;
    background-color: transparent;
    color: white;
    padding: 10px;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.dropdown-item:hover {
    background-color: #FE0FBA;
}

.dropdown-item.selected {
    height: 0;
    padding: 0 10px;
    overflow: hidden;
}


.dropdown-selected,
.dropdown-item {
    display: flex;
    gap: 10px;
    align-items: center;
}


/*endregion dropdown*/