:root {
    --partners-animation-speed : 30s;
    --circle-text-radius       : 200px;
    --circle-text-diameter     : calc(var(--circle-text-radius) * 2);
}

body {
    /*background-color : var(--color-itp-blue);*/
}

.hero {
    border-radius    : var(--var-panel-border-radius);
    margin-block     : calc(var(--var-navbar-height) + var(--var-panel-gap) * 2) var(--var-panel-gap);
    margin-inline    : auto;
    background-color : var(--color-itp-blue);
    max-width        : var(--var-content-width);

    padding-inline   : 10rem;
    padding-block    : 10rem;
}

.hero-inner {
    display               : grid;
    grid-template-columns : 1fr min-content;
    align-content         : center;
    align-items           : center;
    row-gap               : 4rem;
    column-gap            : 5rem;
}

.hero-slogan-container {
    grid-column    : 1;
    display        : flex;
    flex-direction : column;
    gap            : 1rem;
}

.hero-slogan {
    display     : flex;
    align-items : center;
    gap         : 2rem;
    color       : var(--color-itp-green-light);
}

.slogan-dot {
    flex-shrink : 0;
    width       : 4rem;

    circle {
        fill : var(--color-itp-green-light) !important;
    }
}

.slogan-text {
    text-wrap             : nowrap;
    font                  : var(--font-h2);
    font-feature-settings : var(--font-features);
}

.hero-text {
    grid-column           : 1;
    line-height           : 1.6;
    max-width             : 36ch;
    color                 : var(--color-blue-light-bright);
    font                  : var(--font-h3);
    font-feature-settings : var(--font-features);
    line-height           : 1.6em;
}

.hero-text-highlight {
    color       : var(--color-itp-green-light);
    font-weight : 800;
}

.hero-cta {
    grid-column : 1;

    button {
        --size                : 64px;

        font                  : var(--font-button);
        font-feature-settings : var(--font-features);
        height                : var(--size);
        border-radius         : calc(var(--size) / 2);
        color                 : black;
        padding-inline        : 40px;
        background-color      : var(--color-itp-green);
    }
}

.hero-globe {
    --globe-text-ratio : 0.5;
    --globe-size       : calc(var(--circle-text-diameter) * var(--globe-text-ratio));
    --globe-margin     : calc(var(--circle-text-diameter) * (1 - var(--globe-text-ratio)) / 2);

    grid-column        : 2;
    grid-row           : 1 / span 3;

    height             : var(--globe-size);
    width              : var(--globe-size);
    margin-block       : var(--globe-margin);
    margin-inline      : auto;
}

.circle-text {

    grid-column : 2;
    grid-row    : 1 / span 3;

    position    : relative;
    margin      : auto;

    height      : var(--circle-text-diameter);
    width       : var(--circle-text-diameter);

    font        : var(--font-mono);
    font-size   : 2rem;
    font-weight : 900;
    color       : var(--color-itp-green-light);

    will-change : transform;
}

.circle-word {
    position : static;
}

.circle-letter {
    position         : absolute;
    top              : 50%;
    left             : 50%;
    transform-origin : 0 0;
}

.circle-letter-inner {
    display    : inline-block;
    transition : transform 0.2s ease, color 0.2s ease;
}

.circle-word.is-hovered .circle-letter-inner {
    color     : var(--color-itp-green);
    transform : translateY(-4px) scale(110%);
}

@media (max-width : 1180px) {
    .hero {
        padding-inline : 8rem;
        padding-block  : 8rem;
    }
}

@media (max-width : 1140px) {
    :root {
        --circle-text-radius : 160px;
    }

    .circle-text {
        font-size : 1.6rem;
    }
}

@media (max-width : 1040px) {
    .hero-inner {
        grid-template-columns : 1fr;
        justify-items         : center;
        row-gap               : 8rem;
        column-gap            : 0;
    }

    .hero-slogan-container {
        grid-column : 1;
        grid-row    : 1;
    }

    .hero-text {
        grid-column : 1;
        grid-row    : 3;
    }

    .hero-cta {
        grid-column : 1;
        grid-row    : 4;
    }

    .hero-globe {
        grid-column : 1;
        grid-row    : 2;
    }

    .circle-text {
        grid-column : 1;
        grid-row    : 2;
    }
}

@media (max-width : 720px) {
    :root {
        --circle-text-radius : 120px;
    }

    .hero {
        padding-inline : 4rem;
    }

    .hero-slogan-container {
        gap : 2rem;
    }

    .hero-slogan {

    }

    .slogan-text {
        text-wrap             : wrap;
        font                  : var(--font-h3);
        font-feature-settings : var(--font-features);
    }

    .hero-text {
        font                  : var(--font-body);
        font-feature-settings : var(--font-features);
        line-height           : 1.6em;
        text-align            : center;
    }

    .hero-cta {
    }

    .hero-globe {
    }

    .circle-text {
        font-size : 1.4rem;
    }
}

.partners-panel {
    position         : relative;
    background-color : var(--color-grey-light-bright);
    border           : 1px solid var(--color-grey-light);
    overflow         : hidden;
}

.partners-scroll {
    --padding-inline : 4rem;
    padding-inline   : var(--padding-inline);
    padding-block    : 4rem;
    display          : flex;
    align-items      : center;
    gap              : calc(var(--padding-inline) * 2);
    width            : max-content;
    will-change      : transform;
}

.partners-scroll img {
    height      : 6rem;
    object-fit  : contain;
    flex-shrink : 0;
}

.fade-in-out {
    position       : absolute;
    pointer-events : none;
    background     : linear-gradient(90deg,
    rgba(246, 248, 246, 1) 2%,
    rgba(246, 248, 246, 0) 20%,
    rgba(246, 248, 246, 0) 80%,
    rgba(246, 248, 246, 1) 98%);

    height         : 100%;
    width          : 100%;
    top            : 0;
    left           : 0;
}

@media (max-width : 640px) {
    .partners-scroll {
        --padding-inline : 2rem;
    }

    .partners-scroll img {
        height : 4rem;
    }
}

.panorama-panel {
    position              : relative;
    background-color      : var(--color-grey-light);
    border                : 1px solid var(--color-grey-light);
    display               : grid;
    grid-template-columns : 2fr 3fr;
    overflow              : hidden;
}

.panorama-subtitle {
    color      : var(--color-itp-blue);
    margin-top : 5.2rem;
}

.panorama-panel-text {
    margin-left  : 6rem;
    margin-block : 6rem;
    color        : var(--color-grey-black);
}

.panorama-ui {
    position      : absolute;
    top           : 12rem;
    border-radius : 16px;
    border        : 16px solid var(--color-grey-medium);
    transform     : translateX(42%);

    img {
        object-fit : cover;
    }
}

.cta-bg {
    padding-top    : 4rem;
    padding-bottom : 5rem;
}

.request-demo-cta {
    max-width       : var(--var-content-width);
    margin-inline   : auto;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    gap             : 1rem;

    button {
        --size                : 64px;

        font                  : var(--font-button);
        font-feature-settings : var(--font-features);

        margin-bottom         : 2rem;
        height                : var(--size);
        border-radius         : calc(var(--size) / 2);
        color                 : black;
        padding-inline        : 64px;

        background-color      : var(--color-itp-green);
    }

    p {
        font                  : var(--font-small);
        font-feature-settings : var(--font-features);
    }
}

@media (max-width : 1180px) {
    .panorama-panel {
        grid-template-columns : 2fr 2fr;
    }

    .panorama-panel-text {
        margin-left   : 6rem;
        margin-top    : 3rem;
        margin-bottom : 6rem;
    }

    .panorama-ui {
        top       : 8rem;
        transform : translateX(55%);
    }
}

@media (max-width : 1080px) {
    .panorama-panel {
        grid-template-columns : 2fr 1fr;
    }

    .panorama-ui {
        top       : 6rem;
        transform : translateX(70%);
    }
}

@media (max-width : 920px) {
    .panorama-panel {
        grid-template-columns : 1fr;
    }

    .panorama-subtitle {
        margin-top : 5.2rem;
    }

    .panorama-panel-text {
        margin-inline : 4rem;
        margin-top    : 1rem;
        margin-bottom : 0;
    }

    .panorama-ui {
        --width      : 120%;
        --translateX : calc((var(--width) - 100%) / 2);
        --translateY : calc(var(--translateX) * 2);

        position     : static;
        margin-left  : 4rem;
        width        : var(--width);
        transform    : translateY(6rem);
    }
}

.why-panorama {
}

.story-title {
}

.story-panel {
    margin-bottom   : 0;
    display         : flex;
    position        : relative;
    gap             : 8rem;
    padding-block   : 8rem;
    padding-inline  : var(--var-panel-padding);
    justify-content : center;
}

.story-icon {
    --size           : 240px;

    position         : sticky;
    top              : calc(50% - var(--size) / 2);
    height           : var(--size);
    width            : var(--size);
    flex-shrink      : 0;
    padding          : 6rem;
    border-radius    : var(--var-panel-border-radius);
    background-color : var(--color-itp-blue);

    transition       : background-color 0.2s ease-in;

    svg circle {
        fill : var(--color-itp-green-light) !important;
    }
}

/*.icon-1 {*/
/*    !*background-color : #a4aef4;*!*/

/*    svg circle {*/
/*        fill : var(--color-itp-blue) !important;*/
/*    }*/
/*}*/

/*.icon-2 {*/
/*    !*background-color : #a2f1d9;*!*/

/*    svg circle {*/
/*        fill : var(--color-itp-blue) !important;*/
/*    }*/
/*}*/

/*.icon-3 {*/
/*    !*background-color : #f8db8c;*!*/

/*    svg circle {*/
/*        fill : var(--color-itp-blue) !important;*/
/*    }*/
/*}*/

/*.icon-4 {*/
/*    !*background-color : #f5a8a8;*!*/

/*    svg circle {*/
/*        fill : var(--color-itp-blue) !important;*/
/*    }*/
/*}*/

.story-progress-bar {
    --size           : 240px;
    --width          : 6px;
    --border-radius  : calc(var(--width) / 2);

    position         : sticky;
    top              : calc(50% - var(--size) / 2);
    height           : var(--size);
    width            : var(--width);
    background-color : var(--color-grey-light);
    flex-shrink      : 0;
    border-radius    : var(--border-radius);

    .progress-bar-state {
        position         : absolute;

        width            : 100%;
        background-color : black;
        height           : 25%;
        border-radius    : var(--border-radius);
    }
}

.story-scroll {
    display        : flex;
    flex-direction : column;
    gap            : 16rem;
}

.story {
    height          : 240px;
    max-width       : 40ch;
    display         : flex;
    flex-direction  : column;
    justify-content : center;

    .story-panel-title {
        color         : var(--color-itp-blue);
        margin-bottom : 4rem;
    }

    * {
        user-select : none;
    }

    p {
    }
}

.story-1 {
    .story-panel-title {
        /*color : var(--color-itp-blue);*/
    }
}

.story-2 {
    .story-panel-title {
        /*color : var(--color-itp-blue);*/
    }
}

.story-3 {
    .story-panel-title {
        /*color : var(--color-itp-blue);*/
    }
}

.story-4 {
    .story-panel-title {
        /*color : var(--color-itp-blue);*/
    }

    .languages {
        display   : flex;
        flex-wrap : wrap;
        gap       : 1rem;
        max-width : 42rem;
    }

    .language {
        font             : var(--font-mono);
        padding-inline   : 1.2rem;
        padding-block    : 0.8rem;
        background-color : black;
        border-radius    : 0.8rem;
        color            : var(--color-itp-green);
        width            : min-content;
        text-wrap        : nowrap;
    }
}

.story-padding-bottom {
    height : 4rem;
}

@media (max-width : 800px) {
    .story-panel {
        padding-inline : 0;
        padding-left   : 2rem;
        gap            : 4rem;
    }
}

@media (max-width : 720px) {
    .story-icon {
        --size       : 160px;

        padding      : 4rem;
        margin-block : calc((240px - var(--size)) / 2);
    }

    .story-scroll {
    }

    .story {
        .story-panel-title {
            font                  : var(--font-h3);
            font-feature-settings : var(--font-features);
            line-height           : 1.4em;
        }
    }
}

@media (max-width : 560px) {
    .story-panel {
        padding-left : 1rem;
        gap          : 2rem;
    }

    .story-icon {
        --size        : 100px;

        padding       : 2rem;
        margin-block  : calc((240px - var(--size)) / 2);
        border-radius : calc(var(--var-panel-border-radius) / 2);
    }

    .story-scroll {
    }
}

@media (max-width : 420px) {
    .story-panel {
        padding-left : 0;
        gap          : 1rem;

    }

    .story-icon {
        --size       : 80px;

        padding      : 2rem;
        margin-block : calc((240px - var(--size)) / 2);
    }

    .story-scroll {
    }
}

.key-features-bg {
}

.key-features-title {
}

.key-features-grid {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : var(--var-panel-gap);
}

.key-features-highlight {
    color       : var(--color-itp-blue);
    font-weight : 700;
}

.key-features-panel {
    padding-inline             : 8rem;
    padding-block              : 8rem;

    display                    : flex;
    align-items                : center;
    justify-content            : space-between;
    gap                        : 4rem;

    border-radius              : var(--var-panel-border-radius);
    border                     : 1px solid var(--color-grey-light);
    background-color           : var(--color-grey-light-bright);

    transition-property        : transform, border-color, background-color;
    transition-timing-function : ease-in-out;
    transition-duration        : 0.2s;
}

.key-features-icon {
    flex-shrink : 0;
    width       : 6rem;
}

@media (max-width : 1080px) {
    .key-features-panel {
        padding : 6rem;
    }
}

@media (max-width : 940px) {
    .key-features-grid {
        grid-template-columns : 1fr;
    }

    .key-features-panel {
        padding : 6rem;
    }
}

@media (max-width : 560px) {
    .key-features-panel {
        padding-inline : 4rem;
        flex-direction : column;

        p {
            text-align : center;
        }
    }
}

.quotes-bg {
    background-color : white;
    padding-bottom   : 8rem;
}

.quotes-title {
    color : black;
}

.quotes-grid {
    display               : grid;
    grid-template-columns : 1fr 1fr 1fr;
    grid-auto-rows        : min-content;
    column-gap            : var(--var-panel-gap);
}

.quotes-panel {
    padding-inline     : 4rem;
    padding-block      : 4rem;

    display            : grid;
    grid-row           : span 4;
    grid-template-rows : subgrid;
    gap                : 4rem;

    background-color   : var(--color-blue-light-bright);

    border             : 1px solid var(--color-blue-light);
    border-radius      : var(--var-panel-border-radius);

    /*transition-property        : transform, border-color;*/
    /*transition-timing-function : ease-in-out;*/
    /*transition-duration        : 0.2s;*/
    /*color: var(--color-itp-green-light);*/
}

.quote {
    /*font-style : italic;*/
}

.quote-name {
    font          : var(--font-features);
    font-weight   : 600;
    margin-bottom : 1rem;
    color         : var(--color-itp-blue);
}

.quote-position {
    font  : var(--font-features);
    color : var(--color-blue-light);
}

.quote-icon {
    width : 4ch;

    circle {
        fill : var(--color-itp-blue) !important;
    }
}

.quote-icon-end {
    justify-self : end;
}

@media (max-width : 800px) {
    .quotes-grid {
        grid-template-columns : 1fr;
        row-gap               : var(--var-panel-gap);

    }
}

.contact-us-bg {
    margin-inline    : auto;
    background-color : var(--color-itp-green);
}

.contact-us-panel {
    padding         : 4rem;
    margin-inline   : auto;
    display         : flex;
    justify-content : center;
    align-items     : center;

    .contact-us-subline {

        text-align : center;
        max-width  : 100dvw;
    }

    .contact-us-link {
        /*color                     : var(--color-itp-yellow);*/

        font                      : var(--font-body);
        font-feature-settings     : var(--font-features);
        font-weight               : 600;
        text-underline-offset     : 4px;
        text-decoration           : underline;
        text-decoration-thickness : 2px;
        text-wrap                 : nowrap;
    }

    .contact-us-link:hover {
        color                     : var(--color-itp-blue);
        text-decoration-thickness : 3px;
    }
}

.request-demo-popup-bg {
    display         : none;
    z-index         : 2;
    position        : fixed;
    inset           : 0;
    justify-content : center;
    align-items     : flex-start;
    overflow-y      : auto;

    .request-demo-popup {
        width            : var(--var-popup-width);
        background-color : white;
        padding          : var(--var-panel-padding);
        border-radius    : var(--var-panel-border-radius);
        box-shadow       : 0 2px 24px 0 rgba(0, 0, 0, 0.2);
        overflow         : visible;
        margin-block     : auto;

        .request-demo-header {
            display         : flex;
            justify-content : space-between;
            /*align-items     : center;*/

            h2 {
                margin-bottom : 4rem;
            }

            .request-demo-close-btn {
                --size          : 48px;

                width           : var(--size);
                height          : var(--size);
                display         : flex;
                justify-content : center;
                align-items     : center;
                border-radius   : 50%;
                transform       : translateY(-4px);
            }

            .request-demo-close-btn:hover {
                cursor           : pointer;
                background-color : var(--color-grey-light);
            }
        }

        .request-demo-form {
            --input-radius : calc(var(--var-panel-padding) / 2);

            display        : flex;
            flex-direction : column;
            gap            : 2rem;

            input, textarea {
                font                  : var(--font-small);
                font-feature-settings : var(--font-features);
                padding               : 2rem;
                border                : none;
                border-radius         : var(--input-radius);
                background-color      : var(--color-grey-light-bright);
            }

            input:hover, textarea:hover {
                outline : 1px solid var(--color-grey-light);
            }

            input:focus, textarea:focus {
                outline : 1px solid var(--color-blue-light);
            }

            textarea {
                resize   : none;
                overflow : auto;
                height   : 20rem;
            }

            button {
                --size                : 64px;

                font                  : var(--font-button);
                font-feature-settings : var(--font-features);
                height                : var(--size);
                border-radius         : calc(var(--size) / 2);
                color                 : black;
                padding-inline        : 40px;
                background-color      : var(--color-itp-green);
            }
        }
    }

    .request-demo-popup_hidden {
        display : none;
    }

    .request-demo-feedback {
        display          : none;

        max-width        : var(--var-popup-width);
        background-color : white;
        padding          : var(--var-panel-padding);
        border-radius    : var(--var-panel-border-radius);
        box-shadow       : 0 2px 24px 0 rgba(0, 0, 0, 0.2);
        overflow         : visible;
        margin-block     : auto;
        flex-direction   : column;
        gap              : 2rem;

        .feedback-message {
            text-align : center;
        }

        button {
            --size                : 64px;

            font                  : var(--font-button);
            font-feature-settings : var(--font-features);
            height                : var(--size);
            border-radius         : calc(var(--size) / 2);
            color                 : black;
            padding-inline        : 40px;
            background-color      : var(--color-itp-green);
        }
    }

    .request-demo-feedback_visible {
        display : flex;
    }
}

.request-demo-popup-bg_visible {
    backdrop-filter : blur(8px) grayscale(20%) hue-rotate(348deg) brightness(0.6);
    display         : flex;
}