.why-us {
    position: relative;
    padding: 150px 0;
    background: var(--bg);
    color: var(--text);
    overflow: hidden
}

.why-container {
    width: min(1400px, 90%);
    margin: auto
}

.why-intro {
    display: grid;
    grid-template-columns: .8fr 2fr;
    gap: 50px;
    padding-bottom: 85px;
    border-bottom: 1px solid var(--border)
}

.why-intro h2 {
    margin: 0;
    font-size: clamp(3rem, 6vw, 6.2rem);
    line-height: .92;
    letter-spacing: -.075em;
    font-weight: 650
}

.why-intro h2 em {
    font-style: normal;
    color: transparent;
    -webkit-text-stroke: 1px var(--text)
}

.why-content {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 100px;
    padding: 85px 0
}

.why-copy {
    max-width: 400px
}

.why-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.8
}

.why-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 35px;
    color: var(--text);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    padding-bottom: 9px
}

.why-link span {
    transition: transform .3s ease
}

.why-link:hover span {
    transform: translate(4px, -4px)
}

.why-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--border)
}

.why-feature {
    padding: 30px 30px 32px 0;
    border-bottom: 1px solid var(--border)
}

.why-feature:nth-child(even) {
    padding-left: 30px;
    border-left: 1px solid var(--border)
}

.why-feature-top {
    display: flex;
    align-items: center;
    gap: 18px
}

.why-feature-top span {
    font-size: .67rem;
    color: var(--muted);
    letter-spacing: .08em
}

.why-feature-top strong {
    font-size: .92rem;
    letter-spacing: -.02em
}

.why-feature p {
    margin: 18px 0 0;
    padding-left: 38px;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.7
}

.why-statement {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 30px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase
}

.why-statement span {
    transition: color .3s ease
}

.why-statement span:hover {
    color: var(--text)
}

.why-statement i {
    font-style: normal;
    color: var(--text);
    opacity: .4
}

@media(max-width:900px) {
    .why-intro {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .why-content {
        grid-template-columns: 1fr;
        gap: 60px
    }

    .why-copy {
        max-width: 600px
    }
}

@media(max-width:600px) {
    .why-us {
        padding: 100px 0
    }

    .why-intro {
        padding-bottom: 55px
    }

    .why-intro h2 {
        font-size: clamp(2.8rem, 13vw, 4.5rem)
    }

    .why-content {
        padding: 55px 0;
        gap: 50px
    }

    .why-features {
        grid-template-columns: 1fr
    }

    .why-feature,
    .why-feature:nth-child(even) {
        padding: 25px 0;
        border-left: 0
    }

    .why-feature:last-child {
        border-bottom: 0
    }

    .why-feature p {
        padding-left: 0
    }

    .why-statement {
        gap: 12px;
        justify-content: space-between;
        font-size: .6rem
    }
}