.main.solution-page {
    background: #f4f7fb;
    color: #172033;
    overflow: hidden;
}

.solution-hero {
    position: relative;
    min-height: 5.12rem;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(142deg, #071a35 0%, #0e3d75 54%, #16899d 100%);
}

.solution-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: .58rem .58rem;
    opacity: .3;
}

.solution-hero:after {
    content: "";
    position: absolute;
    left: .28rem;
    right: .28rem;
    bottom: .24rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(125, 240, 255, .64), transparent);
}

.solution-hero-content {
    position: relative;
    z-index: 2;
    padding: .74rem .34rem .52rem;
    box-sizing: border-box;
}

.solution-kicker {
    display: inline-block;
    margin-bottom: .18rem;
    padding: .08rem .18rem;
    border: 1px solid rgba(125, 240, 255, .42);
    border-radius: .08rem;
    color: rgba(229, 248, 255, .9);
    font-size: .2rem;
    line-height: .28rem;
    background: rgba(255, 255, 255, .08);
}

.solution-hero h1 {
    margin: 0;
    max-width: 5.1rem;
    color: #fff;
    font-size: .46rem;
    line-height: .6rem;
    font-weight: 700;
}

.solution-hero p {
    margin-top: .22rem;
    max-width: 5.35rem;
    color: rgba(238, 248, 255, .88);
    font-size: .24rem;
    line-height: .4rem;
}

.solution-hero-btn {
    display: inline-block;
    width: 2.1rem;
    height: .64rem;
    margin-top: .34rem;
    border-radius: .08rem;
    color: #06233b;
    font-size: .24rem;
    font-weight: 700;
    line-height: .64rem;
    text-align: center;
    background: linear-gradient(135deg, #7df0ff, #fff);
    box-shadow: 0 .18rem .38rem rgba(0, 0, 0, .2);
}

.solution-hero-btn:hover,
.solution-hero-btn:active {
    color: #06233b;
    background: #fff;
}

.solution-hero-img {
    position: absolute;
    right: -.2rem;
    bottom: -.18rem;
    z-index: 1;
    width: 3.3rem;
    opacity: .72;
}

.solution-hero-img img {
    display: block;
    width: 100%;
}

.solution-section {
    padding: .58rem .26rem .64rem;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
}

.solution-section + .solution-section {
    margin-top: .16rem;
}

.solution-section.is-muted {
    background: #f4f7fb;
}

.solution-section h2 {
    margin: 0;
    color: #101c2f;
    font-size: .34rem;
    line-height: .46rem;
    font-weight: 700;
}

.section-lead {
    margin: .14rem 0 .36rem;
    max-width: 100%;
    color: #66768d;
    font-size: .22rem;
    line-height: .36rem;
    white-space: normal;
    word-break: break-all;
    overflow-wrap: anywhere;
}

.solution-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .16rem;
}

.solution-card {
    min-height: auto;
    padding: .28rem .22rem;
    overflow: hidden;
    border: 1px solid #e2edf7;
    border-radius: .08rem;
    background: linear-gradient(180deg, #fff, #f8fbff);
    box-shadow: 0 .12rem .34rem rgba(21, 48, 89, .06);
    box-sizing: border-box;
}

.solution-card span {
    display: block;
    width: .58rem;
    height: .58rem;
    margin-bottom: .2rem;
    border-radius: .08rem;
    color: #063149;
    font-size: .24rem;
    font-weight: 700;
    line-height: .58rem;
    text-align: center;
    background: linear-gradient(135deg, #7df0ff, #fff);
}

.solution-card h3 {
    margin: 0 0 .12rem;
    color: #101c2f;
    font-size: .26rem;
    line-height: .36rem;
    font-weight: 700;
}

.solution-card p {
    margin: 0;
    color: #66768d;
    font-size: .21rem;
    line-height: .34rem;
    white-space: normal;
    word-break: break-all;
    overflow-wrap: anywhere;
}

.solution-list {
    display: grid;
    gap: .18rem;
}

.solution-item {
    display: grid;
    grid-template-columns: .64rem minmax(0, 1fr);
    column-gap: .22rem;
    padding: .28rem .24rem;
    border: 1px solid #e2edf7;
    border-radius: .08rem;
    background: #fff;
    box-shadow: 0 .1rem .26rem rgba(21, 48, 89, .05);
    box-sizing: border-box;
    overflow: hidden;
}

.solution-index {
    width: .64rem;
    height: .64rem;
    border-radius: 50%;
    color: #fff;
    font-size: .22rem;
    font-weight: 700;
    line-height: .64rem;
    text-align: center;
    background: linear-gradient(145deg, #2563eb, #22d3ee);
}

.solution-item h3 {
    margin: 0 0 .08rem;
    color: #101c2f;
    font-size: .26rem;
    line-height: .36rem;
    font-weight: 700;
}

.solution-item p {
    margin: 0;
    color: #66768d;
    font-size: .22rem;
    line-height: .36rem;
    white-space: normal;
    word-break: break-all;
    overflow-wrap: anywhere;
}

.solution-media {
    margin-top: .18rem;
    overflow: hidden;
    border: 1px solid #e5edf6;
    border-radius: .08rem;
    background: #f7fbff;
}

.solution-media img {
    display: block;
    width: 100%;
}

.solution-cta {
    padding: .64rem .26rem .74rem;
    color: #fff;
    background: linear-gradient(145deg, #071a35, #0f4a7f 58%, #138ca1);
    box-sizing: border-box;
}

.solution-cta h2 {
    margin: 0;
    color: #fff;
    font-size: .36rem;
    line-height: .5rem;
    font-weight: 700;
}

.solution-cta p {
    margin: .16rem 0 .32rem;
    color: rgba(233, 247, 255, .86);
    font-size: .23rem;
    line-height: .38rem;
}

.solution-cta a {
    display: inline-block;
    width: 2.28rem;
    height: .64rem;
    border-radius: .08rem;
    color: #06233b;
    font-size: .24rem;
    font-weight: 700;
    line-height: .64rem;
    text-align: center;
    background: linear-gradient(135deg, #7df0ff, #fff);
}

@media (max-width: 340px) {
    .solution-grid {
        grid-template-columns: 1fr;
    }
}