/* ========================================
   BASE STYLES
   ======================================== */

* {
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}


html,
body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    color: #3E3E3E;
}

.faq, .homepageNews, .worldwide, .quotes, .solutions, .platform, .valueflow, .trusted {
    overflow-x: hidden;
}

/* ========================================
   REUSABLE COMPONENTS
   ======================================== */

/* Section Titles */
/* Redefined here because default.css is not compatible with the homepage */

.section-title {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    background: linear-gradient(134.71deg, #169FF2 -0.5%, #5C0DCE 98.45%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title span {
    background: linear-gradient(134.71deg, #169FF2 -0.5%, #5C0DCE 98.45%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    max-width: 687px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 54px;
    text-align: center;
    color: #3E3E3E;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
}

.section-description {
    max-width: 611px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    text-align: center;
    margin: 0;
    color: #3E3E3E;
}

/* Inner Container */
.inner {
    /* width: 100%; */
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1312px;
}

/* Link Button */
.linkBtn {
    text-decoration: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 158px;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid rgba(62, 62, 62, 0.08);
    box-shadow: 0px 1px 5px rgba(62, 62, 62, 0.1);
    border-radius: 7px;
    font-family: 'Open Sans';
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    color: #3E3E3E;
    margin-top: 40px;
    transition: all ease 200ms;
}

.linkBtn:hover {
    transform: scale(1.05);
}

/* ----------------------------------------
   TEXT ANIMATIONS
---------------------------------------- */

/* Container setup for animated text blocks */
.text-animation {
    display: flex;
    flex-wrap: wrap;
    gap: 0 5px;
    justify-content: center;
    opacity: 0;
}

/* Align text to the left when "leftText" class is added */
.text-animation.leftText {
    justify-content: start;
}

/* Initial state for each animated span */
.text-animation span {
    opacity: 0;
    transform: translateY(10px);
    display: inline-block;
}

/* Make entire text block visible */
.text-animation.visible {
    opacity: 1;
}

/* Animate spans when parent has "visible" */
.text-animation.visible span {
    animation: fadeInWord 0.5s forwards;
}

/* Faster fade for paragraph text */
p.text-animation.visible span {
    animation: fadeInWord 0.3s forwards;
}


/* ----------------------------------------
   HEADER VIDEO ANIMATIONS
---------------------------------------- */

/* Container animation for header video */
.header-video.animate {
    opacity: 0;
    margin-top: 270px;
    padding: 150px 120px 100px 120px;
}

.header-video.animate.visible {
    animation: scaleDownFade 1s forwards;
}

/* Image scaling inside header video */
.header-video.animate.visible #headerAnimation {
    animation: scaleUp 1s forwards;
}

/* ----------------------------------------
   SECTION ELEMENT ANIMATIONS (Cards, Quotes, FAQ)
---------------------------------------- */

/* Initial states for various animated elements */
.valueflow-cards .card.animate,
.solutions .solution.animate,
.quotes .quote.animate,
.faq .category.animate {
    opacity: 0;
    transform: translateY(var(--startPosition, -150px));
}

.solutions .solution.animate.visible {
    animation: opacityDownTranslate var(--duration) forwards;
}

/* Animate entrance from top with opacity */
.valueflow-cards .card.animate.visible,
.quotes .quote.animate.visible,
.faq .category.animate.visible {
    animation: opacityDownTranslate 500ms forwards;
}

/* ----------------------------------------
   BUTTON & LINK ANIMATIONS
---------------------------------------- */

/* Initial hidden state for buttons and links */
.header .button.animate,
.linkBtn.animate,
.platform button.animate,
.keywords-container.animate,
.quotes .quote .link.animate,
.toggleButtons.animate,
.news-swiper-container .button.animate,
.faq .linkBtn.animate {
    opacity: 0;
}

/* Visible state with fade-in animation */
.header .button.animate.visible,
.linkBtn.animate.visible,
.platform button.animate.visible,
.keywords-container.animate.visible,
.quotes .quote .link.animate.visible,
.toggleButtons.animate.visible,
.news-swiper-container .button.animate.visible,
.faq .linkBtn.animate.visible {
    animation: opacityAnim 0.5s forwards;
}


/* ----------------------------------------
   SVG ICON ANIMATIONS (Quotes, Swiper)
---------------------------------------- */

/* Animate SVGs with right-to-left motion */
.quotes .quote .link svg.animate.visible,
.swiper-slide svg.animate.visible {
    animation: rightAndBack 1s forwards;
}

/* Delay per swiper-slide (for sequential animations) */
.swiper-slide:nth-child(1) svg.animate {
    animation-delay: 0.5s !important;
}

.swiper-slide:nth-child(2) svg.animate {
    animation-delay: 0.7s !important;
}

.swiper-slide:nth-child(3) svg.animate {
    animation-delay: 0.9s !important;
}


/* ----------------------------------------
   PLATFORM IMAGE ANIMATION
---------------------------------------- */

/* Initial hidden + translated state */
.right.animate .platform_image {
    opacity: 0;
    transform: translateX(250px);
}

/* Animate from right to position with padding */
.right.animate.visible .platform_image {
    animation: opacityLeftTranslatePadding 0.7s forwards;
    animation-timing-function: ease;
}


/* ----------------------------------------
   FAQ & SOLUTIONS BUTTON ANIMATION
---------------------------------------- */

/* Initial hidden + translated state */
.solutions .buttons.animate,
.faq .faqQuestion.animate {
    opacity: 0;
    transform: translateX(var(--startPosition, -150px));
}

/* Animate from left to original position */
.solutions .buttons.animate.visible,
.faq .faqQuestion.animate.visible {
    animation: opacityLeftTranslate 500ms forwards;
}


/* ----------------------------------------
   SWIPER SLIDE ANIMATIONS
---------------------------------------- */

/* Custom delay + offset per swiper slide */
.swiper-slide.animate:nth-child(1) {
    --startPosition: -50px;
    animation-delay: 0s !important;
}

.swiper-slide.animate.visible:nth-child(2) {
    --startPosition: -100px;
    animation-delay: 0.2s !important;
}

.swiper-slide.animate.visible:nth-child(3) {
    --startPosition: -150px;
    animation-delay: 0.4s !important;
}

/* Initial swiper state */
.swiper-slide.animate {
    opacity: 0;
    transform: translateY(var(--startPosition, -150px));
}

/* Animate entrance */
.swiper-slide.animate.visible {
    animation: opacityDownTranslate 500ms forwards;
}


/* ----------------------------------------
   KEYFRAMES
---------------------------------------- */

/* Fade in word with upward translation */
@keyframes fadeInWord {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: var(--targetOpacity);
        transform: translateY(0);
    }
}

/* Header video scaling and fading */
@keyframes scaleDownFade {
    0% {
        opacity: 0;
        margin-top: 270px;
        padding: 150px 120px 100px 120px;
    }
    30% {
        opacity: 0.3;
        margin-top: 70px;
        padding: 150px 120px 100px 120px;
    }
    100% {
        opacity: 1;
        margin-top: 70px;
        padding: 8px;
    }
}

/* Rightward movement and return (e.g. for SVG icons) */
@keyframes rightAndBack {
    0% { transform: translateX(0%); }
    50% { transform: translateX(100%); }
    100% { transform: translateX(0%); }
}

/* Scale up animation (e.g. image) */
@keyframes scaleUp {
    0% { transform: scale(0.5); }
    100% { transform: scale(1); }
}

/* Simple fade-in */
@keyframes opacityAnim {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Fade + translate from top */
@keyframes opacityDownTranslate {
    0% {
        opacity: 0;
        transform: translateY(var(--startPosition, -150px));
    }
    100% {
        opacity: 1;
        transform: translateY(var(--endPosition ,0px));
    }
}

/* Fade + translate from left */
@keyframes opacityLeftTranslate {
    0% {
        opacity: 0;
        transform: translateX(var(--startPosition, 150px));
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

/* Fade + translate + scale with padding (platform image) */
@keyframes opacityLeftTranslatePadding {
    0% {
        opacity: 0;
        transform: translateX(250px) scale(1);
        padding: 0;
    }
    70% {
        opacity: 1;
        transform: translateX(-50px) scale(1.05);
        padding: 0;
    }
    100% {
        opacity: 1;
        transform: translateX(-50px) scale(1);
        padding: 8px;
    }
}


/* ----------------------------------------
   UNIVERSAL DELAY VARIABLE (for animations)
---------------------------------------- */

/* Enables flexible delay via --delay variable */
.animate, .animate > * {
    animation-delay: var(--delay) !important;
}


/* ========================================
   HEADER SECTION
   ======================================== */

.header {
    position: relative;
    width: 100%;
    padding: 32px 0 0 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.header:before {
    content: ' ';
    position: absolute;
    background: var(--primary-linear-gradient);
    top: -96px;
    bottom: 0;
    left: 0;
    right: 0;
}

.header h1 {
    width: 70%;
    font-size: 3em;
    color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    line-height: 57px;
}

.header p {
    width: 55%;
    color: #FFFFFF;
    font-size: 1.3em;
    font-weight: 100;
    margin-top: 0;
}

/* Header Background & Gradient */
.header:before {
    content: ' ';
    position: absolute;
    background: linear-gradient(134.71deg, #169FF2 -0.5%, #5C0DCE 98.45%);
    top: -96px;
    bottom: 0;
    left: 0;
    right: 0;
}

.header .gradient-white-bg {
    background: linear-gradient(rgba(255, 255, 255, 0%) 40%, rgba(255, 255, 255, 100%) 98.45%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.header > * {
    position: relative;
    z-index: 1;
}

/* Header Inner Container */
.header .inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1312px;
    z-index: 2;
}

/* Header description */
.header p {
    color: rgba(255, 255, 255, 0.71);
}

/* Header Video */
.header .header-video {
    width: 95%;
    height: fit-content;
    margin-top: 70px;
    padding: 8px;
    border-radius: 11px;
    background: linear-gradient(rgba(255, 255, 255, 22.5%) 0%, rgba(143, 143, 143, 13.5%) 100%);
}

.header .header-video video {
    width: 100%;
    height: auto;
    border-radius: 7px !important;
}


/* Header Buttons */
.header .buttons {
    display: flex;
    flex-direction: row;
}

.header .button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 44px;
    background: #169FF2;
    border-radius: 8px;
    box-sizing: border-box;
    align-self: stretch;
    margin: 12px 0;
    text-decoration: none;
    color: #FFFFFF;
    padding: 1px 25px;
    font-weight: 600;
    border: none;
    transition: background .25s, color .25s, opacity 1s, transform .35s ease-out;
}

.header .button:first-child {
    margin-right: 28px;
}

.header .button:first-child:hover {
    transform: scale(1.1);
}

.header .button.outline {
    background: #FFFFFF;
    font-style: normal;
    font-weight: 600;
    color: #3E3E3E;
}

.header .button.outline:hover {
    transform: scale(1.1);
}

/* Video Mask */
.header .video-mask {
    width: 100%;
    max-width: 1040px;
}

.header .video-mask .desktop {
    width: 120%;
    position: relative;
    left: -10%;
    top: -36px;
}

.header .video-mask .mobile {
    display: none;
}

.header-video.animate.visible #headerAnimation {
    position: relative;
    width: 100%;
    aspect-ratio: 560/359;
}

.header-video.animate.visible #headerAnimation svg {
    border-radius: 8px;
    aspect-ratio: 16/9;
}


/* ========================================
   VALUEFLOW SECTION
   ======================================== */

.valueflow {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.valueflow .inner {
    /* width: 100%; */
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1312px;
    position: relative;
    padding: 0 24px;
}

.valueflow-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 100px;
    justify-content: center;
    width: 100%;
    /* padding: 0 25px; */
    box-sizing: border-box;
}

.valueflow .card {
    text-align: left;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    padding: 20px 15px;
}

.valueflow .card .card-cover {
    width: 100%;
}

.card-cover svg {
    width: 100% !important;
    height: auto !important;
    display: block;
}

.valueflow .card .card-title {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 21px;
    line-height: 29px;
    color: #3E3E3E;
}

.valueflow .card .card-description {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    color: #3E3E3E;
}

/* ========================================
   PLATFORM SECTION
   ======================================== */

.platform {
    margin-top: 100px;
    padding: 100px 0;
    background: url("../assets/images/platformBg.png");
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.platform .inner {
    width: 100%;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1312px;
}

.platform .platform-flex {
    display: flex;
    position: relative;
    width: 100%;
    align-items: stretch;
}

.platform .platform-flex .left {
    width: 40%;
    height: fit-content;
    padding: 50px 0;
}

.platform .platform-flex .right {
    width: 55%;
    transform: translateX(20%);
}

.platform .platform_image {
    aspect-ratio: 689/457;
    width: auto;
    height: 100%;
    padding: 8px;
    border-radius: 11px;
    transition: all ease 0.5s;
    background: linear-gradient(rgba(255, 255, 255, 22.5%) 0%, rgba(143, 143, 143, 13.5%) 100%);
}

.platform .platform_image .platformAnimation {
    aspect-ratio: 689/457;
    border-radius: 6px;
}

.platform .platform_image .platformAnimation svg {
    border-radius: 8px;
}

.platform .section-title,
.platform .section-subtitle,
.platform .section-description {
    text-align: left;
    margin-left: 0;
    transform: translateX(0);
}

.platform .section-title {
    width: 100%;
}

/* Platform Buttons */
.platform .buttons {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    width: 80%;
    margin-top: 60px;
}

.platform button {
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid rgba(62, 62, 62, 0.08);
    box-shadow: 0px 1px 5px rgba(62, 62, 62, 0.1);
    border-radius: 7px;
    font-family: 'Open Sans';
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    color: #3E3E3E;
    transform: scale(1);
    transition: all ease 500ms;

    &:hover {
        transform: scale(1.1);
    }
}

.platform button.active {
    background: #169FF2;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #FFFFFF;
}

/* Platform Keywords */
.platform .keywords {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    transition: all ease 0.2s;
}

.platform .keywords .keyword {
    display: flex;
    align-items: flex-start;
    width: 145px;
    text-align: left;
    gap: 5px;
}

.platform .keywords .keyword.marketplaceKeyword {
    width: 200px;
}

.platform .keywords .keyword .svg {
    padding: 2px;
    height: 23px !important;
    width: 23px !important;
}

/* ========================================
   SOLUTIONS SECTION
   ======================================== */

.solutions {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 100px;
    overflow: hidden;
}

.solutions .inner {
    width: 100%;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1312px;
}

/* Solution Navigation Buttons */
.solutions .buttons,
.solutions .buttonsMobile {
    display: flex;
    width: 100%;
    justify-content: end;
    gap: 5px;
    margin-top: 50px;
}

.solutions .buttonsMobile {
    margin: 0 !important;
    display: none;
}

.solutions .buttons button,
.solutions .buttonsMobile button {
    cursor: pointer;
    width: 41px;
    height: 41px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background: #FFFFFF;
    transition: all ease 200ms;
}

.solutions .buttons button:hover,
.solutions .buttonsMobile button:hover {
    background: #f1f1f1;
}

.solutions .buttons button.active,
.solutions .buttonsMobile button.active {
    background: #169FF2;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.solutions .buttons button.active:hover,
.solutions .buttonsMobile button.active:hover {
    background: #1397e5;
}

/* Solutions Container */
.solutions .solutionsContainer {
    display: flex;
    gap: 30px;
    justify-content: flex-start;
    width: 100%;
    position: relative;
    left: 0;
    transition: all ease 500ms;
    margin-top: 45px;
}

.solutions .solutionsContainer.left {
    transform: translateX(-110%);
}

/* Solution Card */
.solutions .solution {
    align-items: stretch;
    flex-direction: column;
    flex-grow: 1;
    display: flex;
    position: relative;
    padding-bottom: 70px;
}

.solutions .solution .solutionCover {
    padding: 25px 15px 0 15px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
}

.solutions .solution .solutionCover img {
    width: 533px;
    height: 287px;
    object-fit: cover;
    object-position: top;
}

.solutions .solution .solutionTags {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 5px;
    padding-top: 10px;
}

.solutions .solution .solutionTag {
    color: #169FF2;
    font-size: 13px;
    padding: 5px;
    border-radius: 7px;
    border: 1px solid rgba(22, 159, 242, 0.1);
}

.solutions .solution .solutionTitle {
    position: absolute;
    bottom: 0;
    left: 0;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 27px;
    color: #3E3E3E;
}

/* Solution Background Colors */
.solutions .solution:nth-child(1) .solutionCover {
    background: url(/assets/images/solutions-cohost-bg.jpg) no-repeat ;
    background-size: cover;
}

.solutions .solution:nth-child(2) .solutionCover {
    background: url(/assets/images/solutions-interaction-bg.jpg) no-repeat;
    background-size: cover;
}

.solutions .solution:nth-child(3) .solutionCover {
    background: url(/assets/images/solutions-newsroom-bg.jpg) no-repeat;
    background-size: cover;
}

.solutions .solution:nth-child(4) .solutionCover {
    background: url(/assets/images/solutions-vodcast-bg.jpg) no-repeat;
    background-size: cover;
}

.solutions .solution:nth-child(5) .solutionCover {
    background: url(/assets/images/solutions-ai-bg.jpg) no-repeat;
    background-size: cover;
}

/* ========================================
   QUOTES SECTION
   ======================================== */

.quotes {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 100px;
}

.quotes .inner {
    width: 100%;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1312px;
}

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

/* Quote Card */
.quotes .quote {
    background: url("../assets/images/quotesBg.png");
    background-size: cover;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 50px;
    position: relative;
    text-align: left;
}

.quotes .quote .quoteIcon {
    position: absolute;
    top: 50px;
    left: 20px;
}

.quotes .quote .quoteText {
    text-align: left;
    margin-left: 30px;
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 300;
    font-size: 20px;
    line-height: 27px;
    color: #3E3E3E;
}

.quotes .quote .link {
    text-align: left;
    font-family: 'Open Sans';
    font-style: normal;
    margin-left: 30px;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    background: linear-gradient(134.71deg, #169FF2 -0.5%, #5C0DCE 98.45%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
}

.quotes .quote .quotePerson {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 70px;
}

.quotes .quote .quoteAvatar {
    position: relative;
    width: 69px;
    height: 69px;
    border-radius: 100%;
}

.quotes .quote .quoteAvatar img {
    width: auto;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 100%;
}

.quotes .quote .quoteName {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 23px;
    color: #3E3E3E;
    margin: 0;
}

.quotes .quote .quoteCompany {
    font-family: 'Open Sans';
    margin: 0;
    font-style: normal;
    font-weight: 300;
    font-size: 17px;
    line-height: 23px;
    color: #3E3E3E;
}

.quotes .quote .quoteCompanyLogo {
    height: 100%;
}

/* ========================================
   WORLDWIDE SECTION
   ======================================== */

.worldwide {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 100px;
}

.worldwide .inner {
    width: 100%;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1312px;
}

.worldwide #worldwide-animation {
    width: 100%;
    aspect-ratio: 1467 / 685;
    position: relative;
}

/* ========================================
   NEWS SECTION
   ======================================== */

.homepageNews {
    display: flex;
    background: url("../assets/images/newsBg.png");
    background-size: cover;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 100px;
    padding: 30px 0 50px 0;
}

.homepageNews .inner {
    width: 100%;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1312px;
}

/* Toggle Buttons */
.homepageNews .toggleButtons {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: fit-content;
    padding: 5px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 100px;
    position: relative;
    align-items: center;
}

.homepageNews .toggleButton {
    font-family: 'Open Sans';
    cursor: pointer;
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 27px;
    padding: 5px 15px;
    text-align: center;
    background: linear-gradient(134.71deg, #169FF2 -0.5%, #5C0DCE 98.45%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    z-index: 1;
    transition: all ease 500ms;
}

.homepageNews .toggleButton.active {
    background: #3E3E3E;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.homepageNews .selector {
    margin: 3px;
    position: absolute;
    left: 0;
    width: calc(50% - 6px);
    height: calc(100% - 6px);
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    z-index: 0;
    transition: all ease 500ms;
}

.homepageNews .selector.left {
    right: 0;
    left: unset;
}

/* News Cards */
.homepageNews .hide {
    display: none;
}

.homepageNews .news-swiper-container {
    background: none;
}

.homepageNews .cards {
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: row;
    z-index: 1;
    width: 100%;
    padding-bottom: 24px;
    margin-top: 50px;
}

.homepageNews .cards .swiper-slide {
    flex: 0 0 360px;
    align-self: stretch;
}

.homepageNews .cards .card {
    display: flex;
    position: relative;
    background: #FFFFFF;
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 20px;
    padding-bottom: 28px;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 10px;
}

.homepageNews .card {
    transition: .2s;
    text-decoration: none;
    text-align: left;
}

.homepageNews .card:hover {
    transform: scale(1.05);
    transition: .2s;
}

.homepageNews .cards .card img {
    width: 100%;
    position: relative;
    border-radius: 8px 8px 0 0;
}

.homepageNews .cards .card > div {
    height: 224px;
    padding: 0 28px;
}

.homepageNews .cards .card > div h4 {
    font-family: 'Open Sans';
    font-style: normal;
    color: #979797;
    font-weight: 600;
    font-size: 11px;
    line-height: 15px;
    margin: 16px 0 0 0;
    align-items: center;
    display: flex;
    gap: 5px;
}

.homepageNews .cards .card > div h3 {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #3E3E3E;
    margin: 24px 0;
}

.homepageNews .cards .card > div p {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    color: #3E3E3E;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* News Card Links */
.homepageNews .cards .card .link {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    align-self: flex-start;
    text-decoration: none;
    padding: 0 24px;
}

.homepageNews .cards .card > .link.blog {
    color: #9116F2;
}

.homepageNews .cards .card > .link.case {
    color: #169FF2;
}

.homepageNews .cards .card > .link.tutorial {
    color: #FB9403;
}

.homepageNews .cards .card > .link.whitepaper {
    color: #FF0088;
}

.homepageNews .cards .card > .link svg {
    margin-left: 4px;
}

.homepageNews .bullets {
    display: none;
}

.homepageNews .button {
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid rgba(62, 62, 62, 0.08);
    box-shadow: 0px 1px 5px rgba(62, 62, 62, 0.1);
    border-radius: 7px;
    font-family: 'Open Sans';
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    color: #3E3E3E;
    transition: all ease 200ms;
    width: fit-content;
    padding: 0 30px;
    margin-left: 50%;
    transform: translateX(-50%);
}

.homepageNews .button:hover {
    transform: translateX(-50%) scale(1.05);
}

/* ========================================
   FAQ SECTION
   ======================================== */

.faq {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 100px;
    padding-bottom: 200px;
}

.faq .inner {
    width: 100%;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1312px;
}

/* FAQ Container */
.faq .faqContainer {
    display: flex;
    align-items: stretch;
}

.faq .faqContainer .left {
    width: 50%;
    text-align: left;
    position: relative;
    padding-right: 40px;
}

.faq .faqContainer .left .section-title,
.faq .faqContainer .left .section-subtitle,
.faq .faqContainer .left .section-description {
    text-align: left !important;
    margin-left: 0 !important;
    transform: none !important;
    width: 70%;
}

.faq .faqContainer .left .linkBtn {
    color: #FFFFFF;
    background: #169FF2;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0px 1px 5px rgba(62, 62, 62, 0.1);
    margin-top: 30px;
    margin-bottom: 50px;
}

.faq .faqContainer .left,
.faq .faqContainer .right {
    flex: 1;
}

.faq .faqContainer .right {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: visible;
}

/* FAQ Categories */
.faq .faqContainer .category {
    cursor: pointer;
    position: relative;
    height: 33%;
    padding: 25px;
    width: calc(100% - 50px);
    background: #BCE2FC;
    box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: transform 500ms ease !important ;
}

.faq .faqContainer .right .category:nth-child(1) {
    transform: translateY(120%) !important;
}

.faq .faqContainer .right .category:nth-child(1):hover {
    transform: translateY(110%) !important;
}

.faq .faqContainer .right .category:nth-child(2) {
    transform: translateY(60%) !important;
}

.faq .faqContainer .right .category:nth-child(2):hover {
    transform: translateY(50%) !important;
}

.faq .faqContainer .right .category:nth-child(3) {
    transform: translateY(0%) !important;
}

.faq .faqContainer .right .category:nth-child(3):hover {
    transform: translateY(-10%) !important;
}

/* Category Colors */
.faq .right .category:nth-child(1),
.faq .swiper-slide:nth-child(1) .category {
    background: #C4ECB0 !important;
}

.faq .swiper-slide:nth-child(1) .category button {
    background: #619d37 !important;
}

.faq .right .category:nth-child(2),
.faq .swiper-slide:nth-child(2) .category {
    background: #E5C4FF !important;
}

.faq .swiper-slide:nth-child(2) .category button {
    background: #9e6ec2 !important;
}

.faq .faqContainer .category h1 {
    margin: 0;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 27px;
    line-height: 37px;
    color: #3E3E3E;
    text-align: left;
}

.faq .faqContainer .category button {
    position: absolute;
    bottom: 25px;
    right: 25px;
    height: 41px;
    width: 41px;
    background: #169FF2;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    cursor: pointer;
}

/* FAQ Questions */
.faq .faqContainer .left .faqQuestion {
    margin-top: 10px;
    padding: 15px 25px;
    border: 1px solid rgba(0, 0, 0, 0.09);
    box-shadow: 0px 1px 5px rgba(62, 62, 62, 0.1);
    border-radius: 7px;
    cursor: pointer;
    transition: all ease 500ms;
    display: grid;
    overflow: hidden;
    height: auto;
}

.faq .faqContainer .left .faqQuestion .questionHeader {
    display: flex;
    justify-content: space-between;
    text-align: left;
    align-items: center;
}

.faq .faqContainer .left .faqQuestion .questionHeader h2 {
    font-family: 'Open Sans';
    margin: 0;
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    text-align: left;
    line-height: 20px;
    color: #3E3E3E;
}

/* Question Toggle Icons */
.faq .faqContainer .left .faqQuestion .minus {
    display: none;
}

.faq .faqContainer .left .faqQuestion .plus {
    display: block;
}

.faq .faqContainer .left .faqQuestion.active .minus {
    display: block;
}

.faq .faqContainer .left .faqQuestion.active .plus {
    display: none;
}

.faq .faqContainer .left .faqQuestion.active .question {
    grid-template-rows: 1fr;
}

.faq .faqContainer .left .faqQuestion .question {
    display: grid;
    grid-template-rows: 0fr;
    padding: 0;
    overflow: hidden;
    transition: grid-template-rows 0.4s ease;
}

.faq .faqContainer .left .faqQuestion .question p {
    overflow: hidden;
    margin: 0;
    transition: margin .25s ease;
}

.faq .faqContainer .left .faqQuestion.active .question p {
    margin: 10px 0 0;
}

/* Mobile Category Container */
.mobileCatContainer {
    display: none;
}

/* ========================================
   RESPONSIVE - TABLET (max-width: 1120px)
   ======================================== */

@media only screen and (max-width: 1120px) {

    .section-title.leftText, .section-subtitle.leftText, .section-description.leftText {
        justify-content: center;
    }

    /* Navigation */
    body > nav {
        padding: 0 36px;
        box-sizing: border-box;
    }

    body > nav .inner > ul > li > a {
        padding: 0 12px;
    }

    /* Header */
    .header .main {
        padding: 0 36px;
        margin: 0 0 60px 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    .header .main h1 {
        font-size: 40px;
    }

    .header .main .button {
        white-space: nowrap;
        padding: 0 16px;
    }

    .header .main .button:first-child {
        margin-right: 20px;
    }

    .header .main h2 {
        font-size: 28px;
        width: auto;
    }

    .header .main .left {
        flex: 1 1 50%;
    }

    .header .main .right {
        flex: 1 1 50%;
    }

    .header .main .right .poster img {
        height: 400px;
        margin-left: 4px;
    }

    .header .inner {
        width: calc(100% - 50px);
        margin: 0 50px;
        position: relative;
    }

    .header .inner h1 {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 700;
        font-size: 30px;
        line-height: 120%;
        width: 100%;
        padding-top: 50px;
    }

    .header .inner p {
        width: 100%;
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        line-height: 27px;
    }

    .header .inner .button:first-child {
        margin-right: 15px;
    }

    /* Trusted Section */
    .trusted {
        margin-top: 28px;
        padding: 0 0 32px 0;
    }

    .logos {
        margin-top: 0px;
    }

    .logos .logo-slide img {
        height: 40px;
        margin: 0 10px;
    }

    /* Inner Container */
    .inner {
        /* width: calc(100% - 100px) !important;
        margin: 0 50px !important;
        position: relative; */
    }

    /* Section Titles */
    .section-title {
        width: 100% !important;
        transform: none;
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 600;
        font-size: 13px;
        line-height: 18px;
        text-align: center !important;
    }

    .faq .faqContainer .left {
        padding-right: 0;
    }

    .faq .faqContainer .left .section-title {
        text-align: center !important;
    }

    .section-subtitle {
        width: 100% !important;
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 700;
        font-size: 30px;
        line-height: 41px;
        text-align: center !important;
        margin: 0 0 20px 0;
        max-width: 100%;
        transform: none;
    }

    .faq .faqContainer .left .section-subtitle {
        text-align: center !important;
    }

    .section-description {
        width: 100% !important;
        transform: none;
        margin: 0;
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 400;
        font-size: 17px;
        line-height: 27px;
        text-align: center !important;
    }

    .faq .faqContainer .left .section-description {
        text-align: center !important;
        width: 100% !important;
        max-width: 100%;
    }

    .faq .faqContainer .left .linkBtn {
        margin-left: 50%;
        transform: translateX(-50%);
    }

    /* Valueflow Cards */
    .valueflow-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .valueflow-cards .card {
        margin: auto;
    }

    /* Platform */
    .platform {
        margin-top: 60px;
        padding: 60px 0;
    }

    .platform-flex {
        display: block !important;
    }

    .platform .platform-flex .left {
        width: 100% !important;
        padding: 0 0 50px 0;
        position: relative;
    }

    .platform-flex .left .section-title,
    .platform-flex .left .section-subtitle,
    .platform-flex .left .section-description {
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box;
        margin-left: 50%;
        transform: translateX(-50%);
    }

    .platform-flex .right {
        width: 100% !important;
        transform: none !important;
        position: relative;
        overflow: hidden;
    }

    .platform-flex .platform_image {
        width: calc(100% - 16px);
        margin-top: 50px;
    }

    #platform_image {
        width: 100%;
        border-radius: 3px;
    }

    .platform .buttons {
        grid-template-columns: repeat(2, 1fr);
        width: calc(100% - 30px);
        margin-left: 15px;
    }

    .keywords-container {
        display: none !important;
    }

    /* Fade + translate + scale with padding (platform image) */
    @keyframes opacityLeftTranslatePadding {
        0% {
            opacity: 0;
            transform: translateX(150px) scale(1);
            padding: 0;
        }
        70% {
            opacity: 1;
            transform: translateX(0px) scale(1.05);
            padding: 0;
        }
        100% {
            opacity: 1;
            transform: translateX(0px) scale(1);
            padding: 8px;
        }
    }

    /* Solutions */
    .solutions {
        margin-top: 30px;
    }

    .solutions .buttons {
        display: none;
    }

    .solutions .buttonsMobile {
        display: flex;
    }

    .solution {
        flex: 0 0 calc(100vw - 50px);
        padding-bottom: 0 !important;
        --delay: 0s !important;
    }

    .solutions .solution {
        max-width: 100%;
    }

    .solution.animate {
        opacity: 0;
        transform: translateY(0px) !important;
    }

    .solutions .solution.animate.visible {
        animation: opacityAnim 500ms forwards;
    }

    .solutions .solution .solutionCover {
        max-width: 100%;
    }

    .solutionCover img {
        width: 100% !important;
        aspect-ratio: 1.85;
        max-width: 100%;
        height: auto !important;
    }

    .solutions .solution .solutionTitle {
        position: relative;
        text-align: left;
        margin-bottom: 0;
    }

    /* Quotes */
    .quotes .quotesContainer {
        grid-template-columns: repeat(2, 1fr);
        position: relative;
        box-sizing: border-box;
        width: calc(100vw - 35px);
        gap: 20px;
    }

    .quotes .quotesContainer .quote {
        box-sizing: border-box;
        width: 100%;
        padding: 50px 20px 20px 20px;
    }

    .quotes .quote .quotePerson {
        margin-top: 40px;
    }

    .quotes .quote .quoteText {
        font-family: 'Open Sans';
        font-style: italic;
        font-weight: 300;
        font-size: 14px;
        line-height: 19px;
        margin-left: 40px;
    }

    .quotes .quote .link {
        font-family: 'Open Sans';
        margin-left: 40px;
        font-style: normal;
        font-weight: 600;
        font-size: 10px;
        line-height: 14px;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .quotes .quote .link svg {
        width: 8px;
    }

    .quotes .quote .quoteAvatar {
        height: 40px;
        aspect-ratio: 1;
        width: auto;
    }

    .quotes .quote .quoteName {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 600;
        font-size: 12px;
        line-height: 16px;
    }

    .quotes .quote .quoteCompany {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 300;
        font-size: 12px;
        line-height: 16px;
    }

    .quotes .quote .quoteCompanyLogo {
        max-width: 70px;
    }

    /* Worldwide */
    #worldwide-animation {
        width: calc(100% + 50px);
        margin-top: 25px;
    }

    /* News */
    .homepageNews {
        background-image: url("../assets/images/newsBgMobile.png");
        padding-bottom: 50px;
        overflow: hidden;
        margin-top: 20px;
    }

    .news-swiper-container {
        overflow: hidden;
    }

    .homepageNews:before {
        top: 320px;
    }

    .homepageNews h2 {
        position: relative;
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 600;
        font-size: 25px;
        line-height: 34px;
        text-align: center;
        padding-bottom: 16px;
        margin: 80px 0 48px 0;
    }


    .homepageNews h2.scroll-show {
        transform: translateY(0);
        opacity: 1;
    }

    .homepageNews .cards {
        padding-bottom: 30px;
        justify-content: flex-start;
    }

    .homepageNews .cards > div:last-child {
        display: block;
    }

    .homepageNews .swiper-container.scroll-show {
        transform: translateY(0);
        opacity: 1;
    }

    .homepageNews .cards .swiper-slide {
        flex: 0 0 100%;
        box-sizing: border-box;
        padding: 0 28px;
    }

    .homepageNews .cards .card {
        position: relative;
        background: #FFFFFF;
        box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
        border-radius: 5px;
        box-sizing: border-box;
        flex-direction: column;
        align-items: center;
        margin:0;
    }

    .homepageNews .cards .card img {
        width: 100%;
        position: relative;
        border-radius: 8px 8px 0 0;
    }

    .homepageNews .cards .card > div {
        height: 286px;
    }

    .homepageNews .cards .card > div h4 {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 600;
        font-size: 11px;
        line-height: 15px;
        margin: 16px 0 0 0;
    }

    .homepageNews .cards .card > div h3 {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
        color: #3E3E3E;
        margin: 24px 0;
    }

    .homepageNews .cards .card > div p {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 400;
        font-size: 15px;
        line-height: 20px;
    }

    .homepageNews .cards .card > div > a {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 600;
        font-size: 15px;
        line-height: 20px;
        color: #9116F2;
        text-decoration: none;
    }

    .homepageNews .cards .card > div > a svg {
        margin-left: 4px;
    }

    .homepageNews .bullets {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        list-style: none;
        transform: translateY(0);
        opacity: 1;
    }

    .homepageNews .swiper-pagination {
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
    }

    .homepageNews .swiper-pagination-bullet {
        height: 10px;
        width: 10px;
        border-radius: 6px;
        border: 1px solid  #9116F2;
        background-color: transparent;
        opacity: 1;
        margin: 2px;
    }

    .homepageNews .swiper-pagination-bullet-active {
        background-color: #9116F2;
    }

    .homepageNews .button.scroll-show {
        transform: translateY(0);
        opacity: 1;
    }

    /* FAQ */
    .faq .faqContainer {
        display: block;
        width: 100%;
        position: relative;
    }

    .faq .faqContainer .left {
        width: 100%;
    }

    .faq .faqContainer .right {
        display: none;
    }
    .faq .faqContainer .mobileCatContainer button {
        position: relative !important;
        bottom: auto;
        right: auto;
    }

    .faq .faqContainer .mobileCatContainer {
        display: block;
        width: 100%;
        position: relative;
    }

    .faq .faqContainer .category-swiper-container {
        width: 100%;
    }

    .faq .faqContainer .category {
        height: 200px;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .category-swiper-container {
        overflow: hidden;
    }

    .mobileCatContainer {
        margin-top: 50px;
        display: block;
    }

    #mobileCategory .swiper-wrapper {
        align-items: stretch;
        padding-bottom: 30px;
        min-height: 200px;
    }

    #mobileCategory .swiper-pagination-bullet {
        height: 10px;
        width: 10px;
        border-radius: 6px;
        border: 1px solid #169FF2;
        background-color: transparent;
        opacity: 1;
        margin: 2px;
    }

    #mobileCategory .swiper-pagination-bullet-active {
        background-color: #169FF2;
    }

    .faq {
        padding-bottom: 150px;
    }

    /* Footer */
    .footer .inner .master {
        gap: 0 !important;
    }
}

/* ========================================
   RESPONSIVE - MOBILE (max-width: 732px)
   ======================================== */

@media only screen and (max-width: 732px) {

    .platform .inner,
    .valueflow .inner,
    .solutions .inner,
    .worldwide .inner,
    .faq .inner  {
                box-sizing: border-box;
        padding: 0 24px;
    }

    .homepageNews .text {
        box-sizing: border-box;
        padding: 0 24px;
    }

    /* Valueflow Cards */
    .valueflow-cards {
        grid-template-columns: 1fr;
    }

    .valueflow-cards .card.animate {
        --delay: 0s !important;
    }

    /* Inner Container */
    .header .inner {
        /* width: calc(100% - 35px); */
        margin: 0 35px;
        position: relative;
    }

    .inner {
        /* width: calc(100% - 35px) !important; */
        /* margin: 0 35px !important; */
        position: relative;
    }

    /* Quotes */
    .quotes .quotesContainer {
        grid-template-columns: 1fr;
    }

    .quotes .quotesContainer .quote {
        width: inherit;
    }

    .quotes .quotesContainer .quote.animate {
        --delay: 0s !important;
    }

        /* Solutions */
    .solution {
        flex: 0 0 calc(100vw - 35px);
    }
}

/* Fix for Safari */
/* Container setup for animated text blocks */
.text-safari {
    display: flex;
    flex-wrap: wrap;
    gap: 0 5px;
    justify-content: center;
}

/* Align text to the left when "leftText" class is added */
.text-safari.leftText {
    justify-content: start;
}

/* Initial state for each animated span */
.text-safari span {
    display: inline-block;
}