.why-us {
    background:var(--bg);
    border-top:1px solid var(--panel-border);
    position:relative;
    overflow:hidden
}

.why-us .wrap {
    max-width:1400px;
    margin:auto;
    padding:80px 40px;
    position:relative;
    z-index:1
}

.why-us-top {
    max-width:780px;
    margin-bottom:46px
}

.why-us-kicker {
    font-size:13px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--red);
    font-weight:700;
    margin-bottom:16px
}

.why-us-kicker::before {
    content:"";
    display:inline-block;
    width:34px;
    height:2px;
    background:var(--red);
    vertical-align:middle;
    margin-right:12px
}

.why-us h2 {
    font-size:clamp(26px,3.2vw,42px);
    font-weight:900;
    line-height:1.12;
    letter-spacing:-1.2px;
    text-transform:uppercase;
    color:var(--text-h1)
}

.why-us h2 .accent {
    color:var(--red)
}

.why-us-sub {
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
    margin-top:14px;
    max-width:600px
}

.why-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px
}

.why-card {
    border:1px solid var(--panel-border);
    border-radius:14px;
    background:var(--card-bg2);
    padding:26px 24px;
    position:relative;
    overflow:hidden;
    transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease
}

.why-card:hover {
    transform:translateY(-6px);
    border-color:var(--red);
    box-shadow:0 20px 44px -22px rgba(0,132,201,.4)
}

.why-card::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(90deg,var(--red),var(--blue-lt));
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .45s cubic-bezier(.2,.7,.2,1)
}

.why-card:hover::before {
    transform:scaleX(1)
}

.why-ic {
    width:58px;
    height:58px;
    border-radius:14px;
    display:grid;
    place-items:center;
    color:var(--blue);
    margin-bottom:18px;
    position:relative;
    transition:transform .4s cubic-bezier(.2,.7,.2,1)
}

.why-ic::before {
    content:"";
    position:absolute;
    inset:0;
    border-radius:14px;
    background:var(--feat-ic-bg);
    border:1px solid var(--panel-border)
}

.why-ic svg {
    width:27px;
    height:27px;
    position:relative;
    z-index:1
}

.why-card:hover .why-ic {
    transform:translateY(-4px) scale(1.05)
}

.why-card b {
    display:block;
    font-size:16px;
    font-weight:800;
    color:var(--text-h1);
    margin-bottom:8px;
    line-height:1.3;
    transition:color .3s ease
}

.why-card:hover b {
    color:var(--red)
}

.why-card p {
    font-size:13px;
    line-height:1.6;
    color:var(--muted)
}