/* Hero Section */
.hero-container {
    --vcl-hero-padding: 120px 0;
    --vcl-hero-flex-d: row;
    --vcl-hero_elements-width: var(--container-max-width);
    --vcl-hero_elements-text-a: inherit;
    --vcl-hero_content-align-i: start;
    --vcl-hero_content-padding: 0 var(--container-padding);
    --vcl-hero_elements-justify-c: unset;
    --vcl-hero_features-flex-w: nowrap;
    --vcl-hero_features-gap: 0;
    --vcl-hero_features-span-display: unset;
    --vcl-hero_p-mx: 0;
    --vcl-hero_float-c-status-left: -20px;
    --vcl-hero_float-c-status-top: 40px;
    --vcl-hero_float-c-stats-right: -20px;
    --vcl-hero_float-c-stats-bottom: 20px;
    --vcl-hero_img-wrapper-display: block;
}

.hero {
    position: relative;
    z-index: 1;
    padding: var(--vcl-hero-padding);
    display: flex;
    flex-direction: var(--vcl-hero-flex-d);
    gap: 40px;
    align-items: center;
    min-height: calc(100vh);
}

.hero > * {
    flex: 1;
    max-width: var(--vcl-hero_elements-width);
    margin-left: auto;
    margin-right: auto;
}

.hero .hero_content {
    display: flex;
    padding: var(--vcl-hero_content-padding);
    flex-direction: column;
    align-items: var(--vcl-hero_content-align-i);
}

.hero .hero_content,
.hero .hero_btns,
.hero .hero_features {
    text-align: var(--vcl-hero_elements-text-a);
    justify-content: var(--vcl-hero_elements-justify-c);
}

.hero h1 {
    font-size: var(--vcl-hero_h1-fs, clamp(3rem, 6vw, 5rem));
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    color: var(--color-neutral-900);
}

.hero h1 span {
    color: var(--color-primary-700);
}

.hero .section-tag-style {
    margin-bottom: 1rem;
}

.hero p:not(.section-tag-style) {
    font-size: 18px;
    color: var(--color-neutral-800);
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 500px;
    margin-left: var(--vcl-hero_p-mx);
    margin-right: var(--vcl-hero_p-mx);
}

.hero_btns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 60px;
}

.hero_features {
    display: flex;
    align-items: center;
}

.hero_features-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-dark);
    padding: 8px 24px;
    border-radius: 0;
    gap: 12px;
}


.hero_features-item:first-of-type {
    padding-left: 0;
}

.hero_features-item:not(:first-of-type) {
    border-left: 1px solid var(--color-neutral-200);
}

.hero_features-item .icon {
    min-width: 56px;
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, var(--color-primary-100) 40%, white);
    border-radius: 999px;
    color: var(--color-primary-500);
}

.hero_features-item svg {
    /* color: var(--hero-feature-icon-color, var(--color-success-400)); */
}

.hero_features-item span {
    display: var(--vcl-hero_features-span-display);
}

.hero_features-item .text {
    max-width: 85px;
}
.hero_features-item:nth-of-type(2) .text {
    max-width: 64px;
}

.hero_features_divider {
    margin: 0 20px;
    width: 1px;
    align-self: stretch;
    background-color: var(--color-neutral-200);
}

.hero_image-wrapper {
    display: var(--vcl-hero_img-wrapper-display, block);
    position: absolute;
    right: 0;
    top: 0;
    width: 45%;
    height: 100%;
    margin-top: 0 !important;
}

.hero_main-img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: #000;
    object-fit: cover;
}

.hero_floating-card {
    position: absolute;
    background: white;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.hero_floating-card-status {
    top: var(--vcl-hero_float-c-status-top);
    left: var(--vcl-hero_float-c-status-left);
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero_floating-card-status_heading,
.hero_floating-card-status_desc {
    font-size: 10px;
    font-weight: 700;
}

.hero_floating-card-status_desc {
    font-weight: 500;
    color: var(--color-success);
}

.hero_floating-card-status_icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: var(--color-success-0);
    box-shadow: 0px 0px 1px 0.5px var(--color-success-100);
    color: var(--color-success);
}

.hero_floating-card-stats {
    bottom: var(--vcl-hero_float-c-stats-bottom);
    right: var(--vcl-hero_float-c-stats-right);
    display: flex;
    gap: 24px;
    min-width: 200px;
}

.floating-wrapper-x1,
.floating-wrapper-y1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

.hero_credibility-strip {
    position: var(--vcl-hero-cred-strip-position, absolute);
    background: var(--color-primary-dark);
    left: 0;
    right: 0;
    bottom: -20px;
    width: 100%;
    overflow: hidden;
    z-index: 10;
    box-shadow: 0 10px 45px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.hero_credibility-strip .container {
    display: flex;
    max-width: var(--container-max-width) !important;
    margin: 0 auto;
    padding: 0 var(--container-padding) !important;
}

.hero_credibility-grid {
    margin: 0 -28px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-radius: 28px;
    overflow: hidden;
}

.hero_credibility-item {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 18px;
    align-items: flex-start;
    padding: 32px 28px;
    position: relative;
    color: white;
}

.hero_credibility-item:not(.last)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 35px;
    bottom: 35px;
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
}

.hero_credibility-item p {
    margin-bottom: 0px;
    font-size: 0.8rem;
    color: var(--color-neutral-200);
}

.hero_credibility-item h6 {
    font-size: 1rem;
    font-weight: 500;
    text-transform: none;
    max-width: 140px;
    margin-bottom: 8px;
}

.hero_credibility-item .icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(80, 116, 233, 0.4);
    color: var(--color-primary-text);
}

@media (max-width: 1300px) {
    .hero_image-wrapper {
        width: 52%;
    }
}

@media (max-width: 1200px) {
    .hero_image-wrapper {
        width: 48%;
    }
}

@media (min-width: 1200px) {
    .floating-wrapper-x1 {
        animation: floatX1 7s ease-in-out infinite alternate;
    }
    .floating-wrapper-y1 {
        animation: floatY1 4s ease-in-out infinite alternate;
    }

    .floating-wrapper-x2 {
        animation: floatX2 4s ease-in-out infinite alternate;
    }
    .floating-wrapper-y2 {
        animation: floatY2 2s ease-in-out infinite alternate;
    }
}

@media (max-width: 1024px) {
    .hero-container {
        --vcl-hero-padding: 40px 0;
        --vcl-hero-flex-d: column;
        --vcl-hero_elements-width: 100%;
        --vcl-hero_features-flex-w: wrap;
        --vcl-hero_elements-text-a: center;
        --vcl-hero_elements-justify-c: center;
        --vcl-hero_p-mx: auto;
        --vcl-hero_float-c-status-left: -10px;
        --vcl-hero_float-c-stats-right: -10px;
        --vcl-hero_img-wrapper-display: none;
        --vcl-hero_content-align-i: center;
        --vcl-hero_content-padding: 120px 0;
    }

    .hero-container > .container {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    .hero_credibility-strip {
        --vcl-hero-cred-strip-position: relative;
    }
}

@media (max-width: 680px) {
    .hero-container {
        --vcl-hero_h1-fs: 42px;
        --vcl-hero_features-gap: 0.75rem;
        --vcl-hero_float-c-status-top: 8px;
        --vcl-hero_float-c-stats-bottom: -10px;
        --vcl-hero_features-span-display: none;
    }
}


@media (max-width: 520px) {
    .hero-container {
        --vcl-hero_h1-fs: calc(100vw / 12);
    }
}

@keyframes floatX1 {
    0% { transform: translateX(-8px); }
    100% { transform: translateX(8px); }
}
@keyframes floatY1 {
    0% { transform: translateY(-8px); }
    100% { transform: translateY(8px); }
}

@keyframes floatX2 {
    0% { transform: translateX(-12px); }
    100% { transform: translateX(12px); }
}
@keyframes floatY2 {
    0% { transform: translateY(-10px); }
    100% { transform: translateY(10px); }
}