.home-hero {
    background-color: var(--dark-green);
    background-image: url('/img/refonte/background-lines-white.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--white);
    padding: 160px 64px 80px 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    overflow: hidden;
}

.home-hero-content {
    flex: 1;
    max-width: 50%;
    text-align: left;
    z-index: 2;
}

.home-hero-tag {
    display: inline-flex;
    padding: 8px 16px;
    border-radius: var(--Radius-radius-16, 16px);
    background: linear-gradient(180deg, rgba(101, 120, 49, 0.80) 0%, rgba(101, 120, 49, 0.20) 100%);
    color: #D8F283;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 32px;
    max-width: 280px;
}

.home-hero-tag-mask {
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.home-hero-tag-content {
    display: flex;
    width: max-content;
    animation: scroll-tag 15s linear infinite;
}

.home-hero-tag-content span {
    padding-right: 4px;
}

.home-hero-tag:hover .home-hero-tag-content {
    animation-play-state: paused;
}

@keyframes scroll-tag {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.home-hero-title {
    font-size: 60px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 24px;
}

.home-hero-subtitle {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 48px;
}

.home-hero-ctas {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.btn-primary-refonte {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #D8F283;
    color: #003329;
    padding: 8px 8px 8px 24px;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: transform 0.2s ease;
}

.btn-primary-refonte:hover {
    transform: translateY(-2px);
}

.btn-primary-refonte .icon-circle {
    width: 32px;
    height: 32px;
    background-color: #003329;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-primary-refonte .icon-circle img {
    width: 32px;
}

.btn-secondary-refonte {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #FFFFFF;
    color: #1A1A1A;
    padding: 8px 24px 8px 16px;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: transform 0.2s ease;
}

.btn-secondary-refonte:hover {
    transform: translateY(-2px);
}

.expert-avatars {
    display: flex;
    align-items: center;
}

.expert-avatars img {
    max-height: 32px;
}

.home-hero-social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.home-hero-social img {
    height: 24px;
}

.home-hero-social span {
    font-size: 16px;
    font-weight: 500;
}

.home-hero-image {
    position: absolute;
    bottom: -56px;
    right: 0;
    /* Align perfectly to the right */
    width: 45%;
    max-width: 900px;
    z-index: 1;
}

.home-hero-image-container {
    position: relative;
}

.dashboard-mockup {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 1200px) {
    .home-hero-title {
        font-size: 56px;
    }
}

@media (max-width: 1024px) {
    .home-hero {
        flex-direction: column;
        padding: 120px 24px 64px 24px;
        text-align: center;
    }

    .home-hero-content {
        max-width: 100%;
        text-align: center;
        margin-bottom: 64px;
    }

    .home-hero-ctas {
        justify-content: center;
    }

    .home-hero-social {
        justify-content: center;
    }

    .home-hero-image {
        position: relative;
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .home-hero {
        padding: 100px 16px 48px 16px;
    }

    .home-hero-title {
        font-size: 36px;
    }

    .btn-primary-refonte,
    .btn-secondary-refonte {
        width: 100%;
        justify-content: center;
    }

    .home-hero-trustpilot {
        width: 100%;
        justify-content: center;
    }

    .home-trust-banner {
        margin-top: 48px;
        margin-bottom: 48px;
        padding: 0 16px;
    }

    .home-trust-inner {
        padding: 24px 16px;
    }

    .home-solutions {
        padding: 48px 16px;
    }

    .home-solutions-card {
        padding: 32px 16px;
    }
}

/* Home Trust Banner */
.home-trust-banner {
    padding: 0 48px;
    margin-top: 96px;
    margin-bottom: 48px;
    background: #FFFFFF;
}

.home-trust-inner {
    background: rgba(226, 232, 230, 0.4);
    border-radius: 20px;
    padding: 32px 48px;
    display: flex;
    align-items: center;
    gap: 48px;
    margin: 0 auto;
    overflow: hidden;
}

.home-trust-text {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 18px;
    color: #475467;
    flex-shrink: 0;
    margin: 0;
    max-width: 350px;
}

.home-trust-logos {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.home-trust-track {
    display: flex;
    gap: 64px;
    align-items: center;
    animation: scroll-trust 20s linear infinite;
    width: max-content;
}

.home-trust-track img {
    height: 32px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

@keyframes scroll-trust {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 32px));
    }
}

@media (max-width: 1024px) {
    .home-trust-banner {
        padding: 0 24px;
    }

    .home-trust-inner {
        flex-direction: column;
        padding: 24px;
        gap: 32px;
        text-align: center;
    }

    .home-trust-text {
        max-width: 100%;
    }
}

/* Nos solutions section */
.home-solutions {
    padding: 80px 48px;
    background: #FFFFFF;
}

.home-solutions-card {
    background-color: var(--dark-green);
    border-radius: 20px;
    padding: 0px 48px;
    display: flex;
    align-items: center;
    gap: 48px;
    color: var(--white);
    overflow: hidden;
    position: relative;
    transition: background-color 0.4s ease;
}

.home-solutions-images {
    flex: 1;
    display: grid;
    place-items: center;
}

.home-solutions-images img.img-solution {
    grid-area: 1 / 1 / 2 / 2;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    object-fit: contain;
}

.home-solutions-images img.img-solution.active {
    opacity: 1;
    pointer-events: auto;
}

.home-solutions-content {
    flex: 1;
    z-index: 2;
}

.home-solutions-content h2 {
    font-size: 48px;
    font-weight: 500;
    margin-bottom: 48px;
}

.solutions-tabs {
    display: flex;
    gap: 32px;
    margin-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.solutions-tabs button {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 20px;
    font-weight: 400;
    padding-bottom: 16px;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
    white-space: nowrap;
    font-family: var(--font-primary);
}

.solutions-tabs button.active {
    color: var(--white);
}

.solutions-tabs button.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--active-tab-color, #D8F283);
    transition: background-color 0.3s ease;
}

.solutions-list {
    list-style: none;
    padding: 0;
    margin: 0 0 48px 0;
}

.solutions-list li {
    font-size: 22px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 400;
    color: white;


}

.solutions-list li::before {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    background-color: var(--white);
    border-radius: 50%;
}

.btn-white-refonte {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #FFFFFF;
    color: #003329;
    padding: 8px 8px 8px 24px;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: transform 0.2s ease;
}

.btn-white-refonte:hover {
    transform: translateY(-2px);
}

.btn-white-refonte .icon-circle {

    background-color: #003329;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


@media (max-width: 1024px) {
    .home-solutions {
        padding: 40px 24px;
    }

    .home-solutions-card {
        flex-direction: column;
        padding: 40px 24px;
        gap: 40px;
    }

    .home-solutions-images {
        min-height: 300px;
        width: 100%;
    }

    .home-solutions-content {
        max-width: 100%;
    }

    .solutions-tabs {
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
    }
}