/**
 * Global comparison — full-bleed volna block + fluid section transitions.
 */

.navira-global-landing-page #global-comparison.navira-global-comparison {
    padding-block: 0;
    background: transparent;
}

#global-comparison.comparison {
    --color-accent: #f65a03;
    --color-text: #ffffff;
    --color-text-muted: #8895ab;
    --color-overlay-start: rgba(13, 29, 56, 0.6);
    --color-overlay-mid: rgba(13, 29, 56, 0.9);
    --color-overlay-solid: #0d1d38;
    --color-card-from: rgba(17, 26, 43, 0);
    --color-card-to: #111a2b;
    --color-card-border-from: rgba(255, 255, 255, 0.26);
    --color-card-border-to: rgba(255, 255, 255, 0);
    --font-size-title: clamp(26px, 2.8vw, 40px);
    --font-size-body: clamp(15px, 1.45vw, 20px);
    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --card-width: min(1110px, 100%);
    --card-radius: clamp(18px, 2vw, 26px);
    --card-blur: 26.1px;
    --card-shadow: 0 4px 32px rgba(0, 0, 0, 0.25);
    --comparison-top-overlap: clamp(40px, 5.5vw, 88px);
    --comparison-top-height: clamp(52px, 6.6vw, 127px);
    --comparison-wave-height: clamp(72px, 8.3vw, 160px);
    --comparison-next-bg: #eff2f6;

    position: relative;
    z-index: 3;
    width: 100%;
    max-width: none;
    margin: calc(-1 * var(--comparison-top-overlap)) 0 0;
    overflow: visible;
    scroll-margin-top: 96px;
}

/* Full-bleed clip: 100% ширины родителя, растёт по контенту */
#global-comparison .comparison__clip {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background-color: var(--color-overlay-solid);
    isolation: isolate;
}

/* Фон = весь clip (под волной сверху, без зазора по top) */
#global-comparison .comparison__bg {
    position: absolute;
    inset: -1px;
    top: 7.7rem;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background-color: var(--color-overlay-solid);
}

#global-comparison .comparison__bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 12% 22%;
    pointer-events: none;
    user-select: none;
}

#global-comparison .comparison__bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        var(--color-overlay-start) 10.87%,
        var(--color-overlay-mid) 18.74%,
        var(--color-overlay-solid) 38.58%,
        var(--color-overlay-solid) 100%
    );
}

/* Верхняя волна Figma — масштабируется по ширине экрана */
#global-comparison .comparison__shape-top {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: var(--comparison-top-height);
    flex: 0 0 auto;
    margin: 0;
    margin-bottom: -2px;
    padding: 0;
    border: 0;
    vertical-align: top;
    object-fit: fill;
    object-position: center top;
    pointer-events: none;
    user-select: none;
    background: #f0f2f5;
}

/* Основная плоскость с контентом */
#global-comparison .comparison__surface {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    margin-top: -1px;
    padding: clamp(8px, 1.5vw, 24px) clamp(16px, 2.5vw, 40px) clamp(20px, 2.5vw, 40px);
    background: transparent;
    overflow: hidden;
}

#global-comparison .comparison__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3vw, 40px);
    max-width: 85.875rem;
    margin: 0 auto;
}

#global-comparison .comparison__header {
    text-align: center;
}

#global-comparison .comparison__title-line {
    font-family: "Open Sans", var(--navira-font);
    font-size: var(--fs-heading);
    font-weight: 800;
    line-height: 1.35;
    text-wrap: balance;
}

#global-comparison .comparison__title-line--accent {
    color: var(--color-accent);
}

#global-comparison .comparison__title-line:not(.comparison__title-line--accent) {
    color: var(--navira-white);
}

#global-comparison .comparison__lead {
    margin: clamp(10px, 1.2vw, 16px) auto 0;
    font-family: "Open Sans", var(--navira-font);
    font-size: var(--fs-description);
    font-weight: 600;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}

#global-comparison .comparison__card {
    max-width: 100%;
    margin: 0 auto;
    padding: 1px;
    border-radius: var(--card-radius);
    background: linear-gradient(
        180deg,
        var(--color-card-border-from) 0%,
        var(--color-card-border-to) 100%
    );
    box-shadow: var(--card-shadow);
}

#global-comparison .comparison__card-inner {
    border-radius: calc(var(--card-radius) - 1px);
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-card-to) 0%, var(--color-card-to) 66.15%);
    opacity: 0.9;
    backdrop-filter: blur(var(--card-blur));
    -webkit-backdrop-filter: blur(var(--card-blur));
}

#global-comparison .comparison__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#global-comparison .comparison-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

#global-comparison .comparison-table__head th {
    padding: clamp(20px, 2.5vw, 37px) clamp(12px, 1.2vw, 16px) clamp(20px, 2.5vw, 36px) clamp(16px, 2vw, 30px);
    font-family: "Open Sans", var(--navira-font-body, sans-serif);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    color: var(--navira-white);
    text-align: left;
    vertical-align: bottom;
}

#global-comparison .comparison-table__head th:not(:first-child) {
    width: 33%;
}

#global-comparison .comparison-table__head-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

#global-comparison .comparison-table__head-label {
    min-width: 0;
}

#global-comparison .comparison-table__head-icon {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    background: var(--navira-white);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 3px;
    color: var(--color-accent);
}

#global-comparison .comparison-table__head-icon i {
    font-size: 25px;
    line-height: 1;
}

#global-comparison .comparison-table__head-icon img {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
}

#global-comparison .comparison-table__criterion {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

#global-comparison .comparison-table__step {
    margin-top: 0;
    flex: 0 0 24px;
}

#global-comparison .comparison-table__criterion-text {
    min-width: 0;
}

#global-comparison .comparison-table tbody tr {
    border-top: 1px solid #ffffff;
}

#global-comparison .comparison-table tbody td {
    padding: 20px 25px;
    font-family: "Open Sans", var(--navira-font);
    font-size: var(--fs-card-title);
    font-weight: var(--font-weight-regular);
    line-height: 1.35;
    color: var(--navira-white);
    vertical-align: middle;
}

#global-comparison .comparison-table tbody td:first-child {
    padding-left: clamp(16px, 2vw, 24px);
}

#global-comparison .status-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

#global-comparison .status-cell__icon {
    flex-shrink: 0;
    width: clamp(20px, 2vw, 24px);
    height: clamp(20px, 2vw, 24px);
    display: block;
}

#global-comparison .status-cell__label {
    min-width: 0;
    white-space: normal;
}

#global-comparison .comparison__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(14px, 1.8vw, 20px);
    width: min(760px, 100%);
    margin: 0 auto;
    text-align: center;
}

#global-comparison .comparison__note {
    margin: 0;
    font-family: "Open Sans", var(--navira-font);
    font-size: var(--fs-description);
    font-weight: var(--font-weight-regular);
    line-height: 1.55;
    color: var(--navira-white);
}

/* Нижняя волна — на всю ширину, ведёт в #eff2f6 */
#global-comparison .comparison__shape-bottom {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: var(--comparison-wave-height);
    flex: 0 0 auto;
    margin: 0;
    margin-top: -2px;
    padding: 0;
    border: 0;
    bottom: -1px;
    vertical-align: bottom;
    object-fit: fill;
    object-position: center bottom;
    pointer-events: none;
    user-select: none;
}

/* ---- Стыки с соседними секциями ---- */
.navira-global-landing-page #global-how-it-works {
    position: relative;
    z-index: 1;
    padding: 2rem 0 7.5rem;
    background: #f0f2f5;
}

.navira-global-landing-page #global-why-us {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--comparison-wave-height));
    padding-top: calc(10px + clamp(16px, 1.5vw, 39px));
    background: #eff2f6;
}

#global-comparison .comparison__swipe-hint {
    display: none;
}

@media (max-width: 900px) {
    
    .navira-global-landing-page #global-how-it-works {
        padding: 2rem 0 5rem;
    }

    #global-comparison .comparison__bg-image {
        object-position: 22% 32%;
    }

    #global-comparison .comparison-table {
        min-width: 560px;
    }

    #global-comparison .comparison__swipe-hint:not([hidden]) {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        margin: 4px 0 0;
        padding-bottom: 4px;
        max-height: 86px;
        overflow: hidden;
        color: var(--color-accent);
        font-family: "Open Sans", var(--navira-font-body, sans-serif);
        font-size: var(--fs-card-title, 16px);
        letter-spacing: 0.02em;
        pointer-events: none;
        user-select: none;
        transition: opacity 0.35s ease, max-height 0.35s ease, margin-top 0.35s ease;
    }

    #global-comparison .comparison__swipe-hint .navira-advantages__swipe-label {
        background: rgba(255, 255, 255, 0.96);
        border-radius: 10px;
        padding: 8px 12px;
        font-weight: 700;
        color: var(--color-overlay-solid);
    }

    #global-comparison .comparison__swipe-hint.is-dismissed {
        opacity: 0;
        max-height: 0;
        margin-top: 0;
        padding-bottom: 0;
    }

    #global-comparison .comparison__swipe-hint .navira-advantages__swipe-icon {
        width: 30px;
        height: 30px;
        animation: navira-swipe-motion 2s ease-in-out infinite;
        animation-delay: 0.8s;
    }

    #global-comparison .comparison-table__head th:not(:first-child),
    #global-comparison .comparison-table__head th:first-child {
        width: auto;
    }
}

@media (max-width: 480px) {
    #global-comparison .comparison-table__step {
        margin-top: 0;
        flex: 0 0 20px;
    }

    .navira-global-landing-page #global-how-it-works {
        padding: 2rem 0 3.5rem;
    }

    #global-comparison.comparison {
        --comparison-top-overlap: 28px;
        --comparison-top-height: 44px;
        --comparison-wave-height: 64px;
    }

    #global-comparison .comparison__bg-image {
        object-position: 40% 45%;
    }

    #global-comparison .comparison__surface {
        padding-inline: 12px;
    }

    #global-comparison .comparison-table {
        min-width: 480px;
    }

    #global-comparison .comparison-table__head th,
    #global-comparison .comparison-table tbody td {
        padding-inline: 12px;
    }
}